Download
1 / 38
380 likes | 536 Views
FLEX and GEMVC. Explaining the GEMVC and FLEX Development. Outline. Subversion GEMVC Value Objects Debugging Example. G ood E nough M oldel V iew C ontroller. GEMVC is a hybrid Model View Controller (MVC) for FLEX and is the foundation of our framework.
E N D
FLEX and GEMVC Explaining the GEMVC and FLEX Development
Outline • Subversion • GEMVC • Value Objects • Debugging • Example
GoodEnoughMoldelViewController • GEMVC is a hybrid Model View Controller (MVC) for FLEX and is the foundation of our framework. • A MVC is an architectural pattern used in software engineering. • Our framework is a MVC framework that modularizes and decouples key areas of the applications. • Frameworks force developers to construct code in a consistent and standard way. • Frameworks allow for better team development.
GEMVC Parts • Libs – gemvc.swc • Model – Localized area for global variables that define the state of the system and various GUI controls • Views – The Front End • Controllers – Listen for control triggered events • Application – The application serves to initialize the application name, the model, and any custom logo with the framework • Services – Interface between the views and CFCs. It reuses the same remote Object and removes the need to hard-code CF service information in your application • Events – Custom Action Script files that prepare and receive data going to and form the front and back end • Main MXML – Staring point for your application • Config – services.xml. An xml file that will set up your application to use ColdFusion
Folder Layout for Project All of my source code is found under the “src” directory. Under this directory you will find all the key areas of a model view controller framework (Others may choose to organize all your controllers, events, and views together in their own directory). Here is a short explanation of all the folders. CFC - is the folder which holds all the query logic for the app along with the ColdFusion side of the valueObjects config - will hold a services.xml file that will help FLEX and ColdFusion talk to each other application - will hold my custom Application file events - will hold all of my custom events model - will hold the model file service - will hold my service file valueObjects - will hold any bean-like encapsulated data views - will hold all the views screens for the application src root – Holds the main MXML application file and I have also placed my top level (and only) controller file here.
Modularize Views • In our example application I want to modularize the views as much as possible just in case I use them in other areas of the application. • I created a namespace called ‘view’ which is a directory that contains my various view components. It kind of like an include.
What Happens First • The Application creates itself including the tree and details view. • A function called init() is fired. This function: • Adds an event listener on the tree that we are building to pick up an expand tree event • Initializes the controller • Dispatches a custom event to populate the tree • The next slide is a look at the main MXML
The Two Views • The Tree view is a component. Because of the way it’s built and because we are using the GEMVC we can use this component here and an any other area of the application • The Details View is separate from the tree view. The only relationship that they share is the sample that it selected. So as long as a sample it passed to Details View custom event, this too can be a component. • Since both of these files are Views, I place them in the view directory of my application. This is an easy way to organize your application
Value Objects • In our view we have various details that are related to a sample. Value Objects are a great way to encapsulated the details and pass them through the MVC and to the CFC • Value Objects can also be bound in the model allowing a grouping of information to be accessed through several different views but yet persist only once in memory. Changes or updates in one area to the Value Object will be reflected in another area where that Value Object is bound • Value Objects are easy to set up and also easy to add or take away variables.
SampleDetails Here is the Value Object SampleDetails. The package that I place this Value Object in is valueObject which is the name of the folder where this ActionScript files lives. I like to group all Value Objects together in the same folder.
Creating the ColdFusion CFC • After creating the SampleDetails Value Object go to your project tree and “right-click” on your Value Object find the ColdFusion Wizards and select “Create CFC (bases on AS class)”
Naming Your ColdFusion CFC • Make sure that the Property scope is public. Also take note of where you are saving the CFC at. I default my CFC to be placed in my CFC directory. On the upcoming slides, when we register the class, remembering the location of this CFC is important.
Newly Created CFC • Here is your CFC. In the alias, make sure that you have the path right. In our example, the CFC should be in the ESDSusergroup\CFC\ folder. So the alias should be: ESDSusergroup.CFC.SampleDetails. This is only needed to ensure the correct CFC is grabbed. If you have a CF mapping you don’t need this.
Register Class Every valueObject that you create, you must register. I choose to do this in the Service file.
What we have done so far • We have set up two views • In the Details View we saw the need for a Value Object so we created on in anticipation of needing it. We have not created the custom event to populate or update the Value Object, but the object is ready for us to use. • The tree View is going to dispatch an event to get the samples and populate the tree • We need to create the custom event that will get the sample from a CFC and return them to FLEX. The service file is where we set up this exchange of information. So before we create this custom event we are going to take a look at the service file.
Service File Functions • The service is a proxy for the CFC. It also allows you to perform additional operations specifically for your Flex app. There are methods in the MVCService that allow you to hijack the specified result handler, perform your own operations on the data, and then call the user’s result handler with the modified data. The service file also contains all the ColdFusion function. Soon we are going to create a custom event to get the sample called SampleEvent. My SampleEvent is going to make a call to the service file called getSamples. Taking a closer look, the getSamples function passes several parameters. The ‘info’ parameter is a constant parameter found in the GEMVC framework. Next ‘sampleID’ is passed. I also pass context and checkForChildren which are parameters that I will use not in my CFC but in the results handler function after the CFC returns the query. We pass all these parameters to the CFC. In this case I have a CFC function called getSamples that only requires a parameter ‘sampleID’ to be passed to it.
Where is my Remote Object? • Now that we have the data ready to pass to ColdFusion, how does it get there? • Before I started using the framework I would create a Remote Object. This worked just fine until I noticed that I had to place a Remote Object on every file that was passing information to and from ColdFusion • The services.xml files solves this problem.
Services.xml • Flex allows you to use a Remote Object to pass data to a CFC and returns query data back as an event object. The GEMVC allows our FLEX application to call a services.xml file instead. Here is a look at the services.xml Alias is the name of CFC, in our case ESDSusergroup. The SERVICEPATH is where the CFC located in the directory structure, in our case ESDSusergroup.CFC.ESDSusergroup. The destination is ColdFusion and the CLASSNAME is service.ESDSusergroupService. The ESDSusergroupService is the name of our MVC service file that contains all the ColdFusion function names.
CFC Detailed This function passes in sampleID and returns a query. This query, as I will show you in the example application, is the first level of the Tree.
The Model The Model file is where all of global application variables are bound. In the Model I define variables that hold queries, objects, ints; really any sort of data type or structure. Note the [Bindable] metatag. Because model variables are bound, whenever an event, whether it is a button click or the return of a query from a CFC, the model variable that is changed within that event will automatically update any view where that model variable is displayed.
The Controller • If we go back to our main MXML application file you will notice that there is an event that is dispatched after the creation of the view. In order for any custom event to be caught by the application we must add a command to the Controller file.
Custom Event • With the Controller properly defined we can fire our first custom event.
SampleEvent Part 1 • Here is a look the first stage in the SampleEvent. This event does not pass in any variables. However, it does pass variables to the service file. These are default variables. I use these variables in the CFC to determine what the query will do.
Service File getSamples • The sampleDetails event now passes my parameter to the service file. Here the service file passes them to the CFC. In my callRemoteMethod function I tell the function to go to the CFC function “getSamples” and to pass all my other parameters.
CFC Function • Here is a look at the CFC calling from the SampleDetails event. Notice that I am only using the ‘sampleID’ parameter. The other parameters that I passed are going to be used by the Handler Function
DetailsEvent • Once I select a sample the DetailsEvent is dispatch. This event will pass the sample that I have selected to the CFC and return all the details for that sample
How They Were Bound • I have a Model object called detailsObject. This object is of sampleDetails type. Once the detailsEvent comes back with it data, I set that model variable equal to the event results. Now, because I have bound the details view variables those fields will be automatically updated once the detailObject is changed.
