« New Ultrashock Tutorials! | Back to Main | Kill me now... »

October 01, 2003

I recently completed a tutorial for Ultrashock on creating an MVC based application using forms and screens. Writing it was more of a struggle than I expected, in part due to the lack of documentation on the subject at the time (it has improved since), but also because the current Form implementation lacks a couple of elements that I would consider requisite for developing a clean application:

1. The Form class does not include a collection of child forms. This means that you can only reference child forms by a largely arbitrary index number, not by name, unless you declare each child form manually in your class.


2. Because the class initializes before the UI components it contains and its child forms, it is very difficult to write logic that sets up and populates interface elements initially, or sets listeners on child forms.

Because these are capabilities I expect I will need for all Form applications, I decided to create a new class that extends the built-in mx.screens.Form class. This way, I can create new classes that extend the GForm class to control my forms, and they will incorporate this new functionality, which currently consists of 2 enhancements:

1. Maintains a childForms collection. You can access child forms through this collection by name as such: childForms.formName


2. Calls an initUI method of the form immediately after the form finishes loading. This allows you to create an initUI method for your form class that sets up the UI, and any relationships with child forms.

You can download the GForm class here, or better yet, have a look at the tutorial to see how it is implemented in a forms application.

I will likely be updating it with other functionality as I go (assuming I use forms again), and welcome comments on it, so check back for updates.

Posted @ 03:19 PM by Grant | TrackBack

Hi Grant,

i just read your tutorial about mvc programming at ultrashock. Great stuff, thank you very much.

One question came to my mind. Instead of using this kind of hackish setInterval-initialization,
couldn't we simply use onLoad ? I made a quick test, and it seems to work. Did you encounter any problems with that ?

Keep up the good work,
bokel

Thank you so much, Grant!
I've been bashing my head against the undocumented wall of forms (and MVC).

For my implementation I'm going down the route of an invisible movie clip on my top level form, rather than extending the forms class. Is this likely to give me headaches down the road? I was initially doing this without forms, and I want to try to keep my controller from getting spread out as much as possible.

That group of tutorials on ultrashock is going to help many people (including me)!

Thanks again,
Sean McKibben

Hi Grant!

I'm trying to mix your style of MVC article at ultraShock with data from a Java Class (through Flash Remoting in websphere). And as I'm newby to Remoting (and to Flash Forms) I don't know how to combine them to get server data...
Can you tell me where I can get information or an example or if you would like to give us some headlines throw some light in all this stuff?

Thanks Grant! Your tuto helps me too much

Carlos.

I've looked at your sample, nice work!

On the topic of GForms, from what I can see the two functions it has are not needed.

1) childForms collection: if you want to refer to child Forms/Screens by name, then just do so, if you were to take out the ".childForms" from the path in your samples it would all work, eg:
// in AddressBook.editContact()
// old:
// childForms.contactList.visible = false;
// childForms.contactEdit.visible = true;
// new:
this.contactList.visible = false;
this.contactEdit.visible = true;

2) Init UI: as discussed in the Ultrashock forum for your tutorial, the onLoad event handler can do this.

Cheers,

Tim Walters
XML Evangelist

Tim Walters made an error:

// in AddressBook.editContact()
// old:
// childForms.contactList.visible = false;
// childForms.contactEdit.visible = true;
// new:
this.contactList.visible = false;
this.contactEdit.visible = true;

SHOULD BE

// in AddressBook.editContact()
// old:
// childForms.contactList.visible = false;
// childForms.contactEdit.visible = true;
// new:
this._parent.contactList.visible = false;
this._parent.contactEdit.visible = true;

Thank You
Malartre

ignore my previous post, it's not good

Thanks
Malartre

This is me again, after being frustrated, the solution is:

// in AddressBook.editContact()
// old:
// childForms.contactList.visible = false;
// childForms.contactEdit.visible = true;
// new:
_root.addressBook.contactList.visible = false;
_root.addressBook.contactEdit.visible = true;

If you find a better way, PLEASE mail me!
Thank You
Malartre

Hi Grant,

Thank your for sharing your MVC frame work with us. I have applied your MVC frame work to my project with great joy and excitement. However, my joy is now replaced by frustration in my attempt in trying to get a reply from server with xml. I have tried both your customized XML2 class and the activation object with the built in XML class. So far my success is limited in triggering the xmlReply.onLoad(p_sucess) event through xmlReply.load(my.xml)--Both your customized XML2 and built in XML class works. But when I replace xmlReply.load(my.xml) with xmlReply.sendAndLoad(myJavaServletUrl, xmlRequest). My xmlReply.onLoad(p_succes) event just refuse to get triggered. I am puzzled because I do see the data returned in xml format from backend on the log. Would you please help?
The followig is the condense version of my code:
//this is the class attached to my first form name metrics
class com.smartequip.form.MetricsForm extends com.smartequip.form.GForm {
private static var xmlRequest:XML;
private static var xmlReply:XML2;
private static var myInstance:Object;

function MetricsForm(){
myInstance= this;
xmlRequest = new XML();
xmlReply = new XML();
xmlReply.ignoreWhite = true;
xmlRequest.timeout = 3000;
xmlRequest.addEventListener("load",myInstance);
}

function initUI():Void{
childForms.statReport.dataProvider = dataProvider;
//and subscribe to our subform events, so we know when a button is pressed:

childForms.statReport.addEventListener("confReport",this);
childForms.statReport.visible=true;
}

private function load(oEventObj:Object):Void{
trace("success: " +oEventObj.success);
}

public function sendRequest(sRequest:String):Void {
xmlReply.parseXML(sRequest);
xmlReply.sendAndLoad(_level0.baseURL+"servlet/RequestDirector?helper=ShowMetrics",xmlRequest);
}

public static function createReport(m:ReportConfig):Void{
var sRequest = "";
myInstance.sendRequest(sRequest);
}

}

Grant,

Thanks for extending the forms class!

Some other functionality I'd love to see:

1> a forms "elements" collection or array. Similar to the HTML DOM form. It would be cool if you could drop your components on the form in design time, and be able to intropect (and later use) those components.

2> a "submit" event. Again if thinks of a "form as a container for for elements,then why not have similar capibilities to a regular form.

The part that's missing for me is how can one instropect components placed on form? Do the ui components have properties introspect that would allow you to differenciate between the various types? How could I intropect a collection or array of TextInputs,combos, etc.

Dan