Wednesday 28 October 2009

Javascript in Flash

Imaging an situation when you need to track redirect activity from the flash animation. Execute some tracking script right before user left the flash animation.

Basically there are two ways have you can call javascript from ActionScript:

1) getURL()
2) ExternalInterface.call

Problem is that browsers does not behaves same way.
getURL is properly executed on FF but not in IE7.
ExternalInterface.call is working on FF, IE in same way. Browser executes javascript before redirect.

Simple validation in Model View Presenter

Last time I wrote about how to implement simple page by Model View Presenter pattern. Quickly we created form with 2 textboxes, label and button for firing presenter method SaveData.

This time let's focus a bit to validation in presenter and co-working your page with validation result.

Let's imagine we have form for validating user contact information.

I will assume that you will have presenter in separate assembly. The assembly it self will contains interface of view (used for communication between presenter and page) and presenter logic (presenter logic and interface of presenter).

1) create new assembly, call it for example WebAppPresenter. Create new interface for View

namespace WebAppPresenter
{
public interface IDataView
{
string FirstName { get; }
string LastName { get; }
string EmailAddress { get; }
string Status { set; }
}
}

Another one for interface of presenter


namespace WebAppPresenter
{
public interface IDataPresenter
{
void SaveData();
bool AreDataValid();
}
}

2) the Presenter will implement IDataPresenter inferface created above.


using System;
using System.Text.RegularExpressions;

namespace WebAppPresenter
{
public class DataPresenter : IDataPresenter
{
private IDataView _view;
public DataPresenter(IDataView view)
{
_view = view;
}

public void SaveData()
{
if (AreDataValid()) { _view.Status = "Data could be saved"; }
}

public bool AreDataValid()
{
if (String.IsNullOrEmpty(_view.FirstName))
{ _view.Status = "First Name cannot be blank"; return false;}
if (String.IsNullOrEmpty(_view.LastName))
{ _view.Status = "Last Name cannot be blank"; return false; }
if (!String.IsNullOrEmpty(_view.EmailAddress))
{
if (!Regex.IsMatch(_view.EmailAddress,@"^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$"))
{_view.Status="Email address is not valid!"; return false;}
}
else { _view.Status = "Email address is not valid!"; return false; }

return true;
}

}
}

Let's stop for a while to describe what is happening here. Constructor populating user entries from webpage through IDataView interface. Method SaveData executes validations and set Status based on validation results. The AreDataValid method is the one which is responsible for validation within presenter. It goes through user inputs present in property _view, validating each value and if one of the field is invalid set Status with proper error message.

Because AreDataValid method is present in interface and it's public can be called directly from webpage for example to prevent execution of other code (such SaveData() ) once the input data are not in good shape. It's up to you whether you make validation method visible outside presenter.

3) Now let's make user interaction with presenter. So firstly create some form for getting information from visitors: (extract from the page)


    <form id="frmContact" runat="server">
First name:<asp:TextBox ID="tbFirstName" runat="server" /><br />
Last name:<asp:TextBox ID="tbLastName" runat="server" /><br />
Email Address:<asp:TextBox ID="tbEmailAddress" runat="server" /><br /><br />
Result:<asp:Label ID="lblStatus" runat="server" /><br />
<
asp:Button ID="btnSave" runat="server" Text="Submit" />
</
form>

4) Code behind of the page. Firstly do not forget to inherit from the View (in my scenario it should be IDataView) to be able make connection between Presenter and View layer.


public partial class MyPage : System.Web.UI.Page,IDataView
{
#region IDataView Members
public string FirstName { get { return this.tbFirstName.Text; } }
public string LastName { get { return this.tbLastName.Text; } }
public string EmailAddress { get { return this.tbEmailAddress.Text; } }
public string Status { set { this.lblStatus.Text = value; } }
#endregion

protected void
Page_Load(object sender, EventArgs e)
{ }
}

I inherited from IDataView to be able implement it's members and connect them with the webform

5) In Page_Load() method is good to connect to the Presenter and initialize it.


protected void Page_Load(object sender, EventArgs e)
{
IDataPresenter _presenter = new DataPresenter(this);
}


Notice that Presenter constructor had one parameter in its definition and that parameter is the View. So when I initializing presenter I need to populate it with the View. In my scenario View will be webform it self because it inherits from IDataView, so I can use this object.

6) Now just need to wire up button btnSave click event to launch SaveData method from Presenter.


protected void Page_Load(object sender, EventArgs e)
{
IDataPresenter _presenter = new DataPresenter(this);
btnSave.Click += delegate{ _presenter.SaveData(); };
}


As I mentioned above you can also call the _presenter.AreDataValid() first and then based on the result call _presenter.SaveData()