GEMVC

The Setup

• Folders• Views• Value Objects (VOs)• Custom Events• Service• CFCs• Controller• Model• Application• Main MXML

FoldersFor this example I will first show you how I have laid out the directories and subdirectory that contain the various areas of my code. All of my source code is found under the “src” directory. I created a folder called Stardust which will house all the code I intend to create for this project. I am also working on a similar project called Cosmic Dust and I may want to just add another folder called “Cosmic” under “src.” In most cases you would not need this folder.

CFC - is the folder which holds all the query logic for the appconfig - will hold a service.xml file that will help FLEX and ColdFusion talk to each otherassets - will hold images, docs, etc.Stardust - folder I place all the folders that relate to the MVC. application - will hold my custom Application file, controller - will hold my Controller file, events - will hold all of my custom events, model - will hold the model file, service - will hold my service file, Value Objects - will hold any bean-like encapsulated data views - will hold all the views screens for the app.

Our ViewThis is the View that I will use for this example. On this view page I have several text input fields. What I want to do is pass all the data on this page to a CFC which will be updated in the database. The event that triggers this is the“Update” button.

The View FileInside the detailsView file I have a function called “handleMyUpdate” this function will take the values in the Text InputBoxes, put them into a valueObject (next slide) and then dispatches a custom event called “UpdateDetailsEvent.”It is important to note that I will have to import both the Value Object (voSampleDetails) and the custom event (UpdateDetailsEvent) to this to be set up properly. Other required imports will be the custom application (“StardustAppication”) and the model (“StardustModel”)

Action Script ValueObjectsValue Objects are relatively easy to make. In my example, I looked at all the Text Input fields on the view page and

decided to create an object to hold all those values and pass the object rather the every variable. Take a look at the

example below to see how to create a Value Object. Next we need to create the ColdFusion side of this Value Object

ColdFusion valueObjectIf you have created your Action Script file for your Value Object, the ColdFusion side is a snap. Just right-click on yourAction Script file and find “ColdFusion Wizards” and then select “Create CFC (based on AS class)” Note: You will needTo download the plug-in for the ColdFusion Wizard in order to see the “ColdFusion Wizard” in your right click menu.Follow the prompts and make sure that you select your CFC folder for the file to output in. Make sure you choose ‘Public’ for the property scope.

This is the Newly created ColdFusion side valueObject

A quick Look at the Service FileOnce our Value Object is created we must register the class. I do this in my Service file (You could also do this with

theRemoteClass meta tag in the Value Object class itself). We will look at this in more Detail in a moment. For our ValueObject we must first import it. We also must import the registerClassAlias. Then the “override public” function we add“registerClassAlias(“The Location Of you CFC in You Folder Structure”, “The Value Object Action Script class Name”).In my case it’s: “registerClassAlias(“Stardust.CFC.SampleDetilas”,SampleDetails);

Custom Event TopNow that we have everything set up with our Value Object, next we need to create the custom Event. The first 40

lines,

or so, of your custom events will look pretty much the same. The next slides will go into a little more detail.

Custom Event Top AThis section will remain pretty much the same. You will be adding imports due to Value Objects. In this example I have imported my valueObject SampleDetails. My events is going to need this because the valueObject is being Passed via the button click on my view page.

Custom Event Top BThis top part of this function will remain pretty much the same for your custom events. The public static const UPDATE:String = ‘updateDetails’ relates to the Controller File which I will go over in a moment. Next, I define a privatevar called detailsObject which a SampleDetails (valueObject) type. Now I pass the valueObject into theUpdateDetailsEvent function. You will follow the same pattern. After this we write a handleEvent function whichPasses in a var context of type Object, which is the Flex component that handled the event. The next few lines willmostly stay the same. The next slide will detail the Changes.

Custom Event handleEventThe handleEvent function takes our information, executes our CFC and also points any return values to a new function which will handle them. In my examples, I am updating the database so I am not expecting any returned values. Because of this the third line in my function will be ‘info.resultHandler = null;’ On the next slide I will show an examples of a event that returns values. The previous two lines stay the same. You will substitute your Service filein place of mine (StardustService). The next 3 lines after the info.resultHandler will also stay the same. The line afterthat is where we set up the Value Object and get it ready to be passed along with the info object. In info Objectcontains the resutlsHandler variable which hold the name of the function you wish to handle your results if you haveany and it also contains the context. For more information on the info object refer to the GEMVC documentation. Thesecond to last line is where we tell the event to pass the data to. ‘theService’ will stay the same, ‘updateDetails’ is the name of function in the Service file that will hook us up with the CFC (more on the service file soon). I am passing the info and the detailsObject (which is my sample details). Finally, after the update happens I show an alert message thatsays “Record Updated.”

handleEvent with ReturnIn this Event I am passing in a ‘Sample.’ The Sample is passed to a CFC which returns all the details for that Sample.Because I am returning detailed information I need to defined a function name which will handle it. In this case I call it‘getSampleDetailsHandler.’ So in the third line of the hanedleEvent function I set “info.resutlsHandler =getSampleDetailsHandler. Now lets look at the handler function. The first line will always be the same. On thesecond line I create a var (oDetails, o is for object) of SampleDetails type which will be bound to a variable calleddetailsObject located in the Model (more details coming on the Model). Next, I set the oDetails valueObject to theResults of my CFC (note: my CFC is returning an object, not a query). The Object is constructed the same way as aSampleDetails valueObject). Finally I set oDetails to my bound model object detailsObject.

Service FileIn both of the custom event examples we see theService.(function in Service File). In the update example

theService.updateDetails is called with info and detailsObject being passed. theService.updateDetails will go to

the service file and find the updateDetails function and set up the CFC to receive the information. “updateSampleDetail”

Is the name of the Method in my CFC. Info is being passed through (Remember, it contains the resultHandler and the

context which we may or may not need later, even if you do not need any thing from info, still pass it.) and out

detailsObject Loaded with our updated sample details is being passed

The CFC Side of UpdateDetailsIf everything is set up right the Service file will pass the info and the detailsObject. My function is called

updateSampleDetails, is same name in the Service file. I define a cfargument of detailsObject which is holding my

valueOject. The it’s just a matter updating the database with the new values. See example below for syntax.

ControllerThere are a few final loose ends that we have to tie up, the first one is the Controller. The Controller will contain all the custom events that your app will be listening for. In our example we are updating a details page. In the StardustController function we must tell the App what to listen for. In our case we the “addCommand(UpdateDetailsEvent.UPDATE)” It is important to note that we must also import the UpdateDetailsEvent. When an event is dispatched (will show example on next slide) the Event is listened for and is passed a command, in our case UPDATE, to the custom event. Refer back tothe UpdateDetailsEvent custom event to see where UPDATE is used.

ModelThe Model is a file where all of our variables are bound. In the Model I define vars that hold queries, objects, ints; really any type. I didn’t need the Model for my updateSampleDetailsEvent, but in the getSamples event, I am returning a query. That query is then bound to the Model var qSamples as an ArrayCollection. Because it’s bound, once the query fills the ArrayCollection the qSamples var (where ever it’s used in the application) is set. In my case qSample is bound in a view to a tree where the dataProvider of that tree is qSample. This is how the dataProvider would look:dataProvider="{StardustApplication(Application.application).stardustModel.qSamples}” Yours would look the same except you would use “yourModel.qYouQuery”.

ApplicationThe Application is the last file that we need to set up. Very little will change in this file. Make sure that you import yourModel instead of mine. Make sure that your function is changed from Mine “StardustApplication” to yours. Change thesuper function to be tailed to your app and also change the public function get to match you app. You can also add

anyother custom functions (error handling,logging, etc.) that you may require.

Main MXMLI am not sure if you already have completed this step in the initial setup with the GEMVC, but just in case, you mustchange the mx:Application to AppName:AppNameApplication and also create a namespace (xmlns) ofAppName.application.* Also make sure to import your controller, service, model, and application files