Here is something that I have been messing around with for the last week. It is a Flex and Textpattern Mashup/Whatever, I don’t really know, but here it is.
Here is the Link Page screen shot:
And the Page Edit screen shot:
Since it seems like every time an amazing publisher like O’Reilly or Friends of Ed comes out with a new Flex book I am so excited I need to rush to the nearest Borders books or Barnes and Nobles, to purchase this new "amazing" book. Little to my knowledge to know what is in store for me.
Upon getting home, to open up my new book and read over the chapters, and then it happens, another Flex book, with nothing to benefit from it, I don’t understand while these top authors and publishers keep coming out with basic Flex books, it’s all beginner information, nothing advanced in there, I’m sure by now everyone knows how to drag a panel to the main application and absolute position it.
Don’t get me wrong it’s not just Flex books; it seems to be the same with a lot of different languages. (Php, Ajax, rails, ActionScript, etc.) Trust me I admire what those authors do but… am I the only programmer that likes these beginner books? It seems like that every time a Flex book comes out, it is just the same old’ thing but with different pictures, and in different words.
When will someone release a Flex book that from chapter 1 it shows you how to set up a new project with WebORB for PHP, and detailed for that matter, not one of those one line references to the creators’ web site for documentation, you can’t find anything useful there. Instead of wasting a chapter on installing Flex builder, then another chapter on setting up your first project, and then one more on displaying current web sites that are using Flex. Save the paper that you would waste on those 3 chapters and create some great ones.
Like
That is a book that I am sure developers will be lined up to buy, I know I would. Does that make me an advanced programmer? No, but it does make me want to extend my skills to doing/creating usefully applications that an everyday Internet user will be able to use, including myself.
With that said, I have decided to take things into my own hands, it’s time to create a book ( PDF ).
Here are a few questions that you’re probably asking yourself. (Hopefully)
So send me a message, and join me on creating this, I you don’t want to help that’s ok too. I still am going to create this, so check back often to see which chapters are completed and which ones are left.
Thanks for letting me get that steam off my chest.
I am going to be posting all of my flex projects that I have created, and not finished over the last year. Hopefully by tonite, about 4 am I will have them all up and running for all to see. I have to install textpattern, drupal, weborb, amfphp, and set up alot of databases, its not going to be fun but I need to do it. Anyways I just want to post a heads up to all so you can have something to look forward to tonite, and for this weekend. I want to chat with a few people about maybe teaming up these little pointless projects so we can get use to working with teams, and svn from flex builder, also let me know if your interested. I am going to be working hard all night getting this stuff set up, with folder structures, renaming classes… etc. O before I forget to say all of these will be open to who ever.
These projects/examples include:
Hmm, I think I forgot a few also, I will update the list when I get back tonite. ( Going away dinner :/ )
Ok, listen up. This is exciting, I was digging threw my old Ruby on Rails homework files, and I came across my final project that I never turned in. I wanted to get an A in my Rails class so I decided to use Flex as the front end because it looks amazing. And still use rails as the back-end. So I could make my professor happy and all. To make a long and I mean long story short, I found my old flex/rails app called Flexible Docs, I have about of documents describing all about the application and what it does, but I’ll save that for tomorrow.
Here is a screenshot of my old app. ( pretty ugly and dull I know )
I am going to go threw all of the code, and fix tons of things. This all happen last year, when I didn’t know that much about flex, now its time to have some fun. I will keep you posted on the status and other bs like that, If you want to peak at the code, Flex or Rails, let me know. Anyway’s I am out a here, so until next time.
In this series we are going to be creating a fully functional RIA, under the stick standards of the Cairngorm Framework. Instead of demonstrating this application with non-dynamic data (which I have when people do). We are going to be using a live MySQL database on a live server where our amfphp installation lives.
This might be a long and bumpy ride, but in the end I promise that you will have a greater understanding of the Cairngorm Framework. This will teach you what actually goes into building a Rich Internet Application from the ground up, while following the architecture standards that the Cairngorm provides.
I am going to try my best to keep this as real as possible, with no static data. I definitely will not leave any source code out. Also on that note, there will not be any sayings like "Ok, now that you have seen how to make a RemoteObject call, you can just switch the methods, add a few args, and wham there you have it." I WILL explain what goes into every call, and every function and every response.
Alight, with that out of the way, lets create a hit!
The following is required to complete this tutorial.
For this simple application we are going to be using the Cairngorm Framework, I know it is over kill but this is great practice on how to build application with Cairngorm and how it works.
Cairngorm Overview
Model View Controller based architecture
Cairngorm is based on the MVC model. It is specifically designed to facilitate complex state and data synchronization between the client and the server, while keeping the programming of the View layer detached from the data implementation.
The role of the View layer in a Cairngorm application is to throw events and bind to data stored in the Model. Components on the View can bind to Value Objects or other properties in the Model (data) layer.
In a Cairngorm Model, related data are stored in Value Objects (VOs), while simple variables can be stored as direct properties of the ModelLocator class. A static reference to the ModelLocator singleton instance is used by the View layers to locate the required data.
The Controller is the most sophisticated part of the Cairngorm architecture. The Controller layer is implemented as a singleton FrontController. The FrontController instance, which receives every View-generated event, dispatches the events to the assigned Command class based on the event’s declared type.
The Command class then processes the event by running the Command class’ execute() method, which is an ICommand interface method. The event object may include additional data if required by the developer. The execute() method can update the central Model, as well as invoke a Service class which typically involves communication with a remote server. The IResponder interface, which is also implemented by the Command class, includes onResult and onFault methods to handle responses returned from the invoked remote service.
-Source wikipedia.org
All great applications start with a blue print, or a thumbnail sketch of how the application should act, respond, and the workflow process. So lets go ahead and go outside or someplace quite with a pen and a piece of paper, and mock up how this application is going to operate.
Extra credit: Sketch out this app from the information and visuals stated earlier, feel free to send me what you did, I want to see!
Here is my sketch:
Click for full size:
Here is how this application is going to work. The 3 components are going to represent the different views/states in our application. The LinkView (which is the main view) is going to present a list of links from the database to the user, this view also will be used for creating a new link, and displaying the details of that link. When a link is selected in the LinkList component, the information about that link are going to be displayed in the LinkDetail component, from there the user can either hide the details, and browse through the different links, or view the selected link in a new window of there web browser. Back to the LinkList component, when the (add link) button is clicked, the LinkForm component will be displayed, this is where you can create a new link for display. After the link is validated and created, the LinkForm component then disappears and the LinkList component refreshes the links.
Click the image for full size.
Here is what our application is going to look like when it is finished.
When developing applications in Flex you should create classes or objects that represent an value. For example, in Whats Ur Link, the one thing that we must represent is the link! Each link has a number of link attributes, such as id, title, url, category, description, and date.
Useful structures can be exchanged or transferred between tiers in your application. On the server side, this is how we are going to populate our queries with, data stuffed in a VO and sent over the wire. Then we will then take the VO and content it into a collection of custom value objects (VOs) to return to the client. Flex can then de-serialize each VO in the collection into the corresponding VO on the client.
VOs are used to create a layer of business objects that can be transferred between tiers, instead of using results sets, and data-sets.
Here is our LinkVO:
LinkVO.as:
1: package com.jonniespratley.on_flex.tutorial_tuesday.whatsurlink.model.vo
2: {
3: import com.adobe.cairngorm.vo.ValueObject;
4: import flash.net.registerClassAlias;
5:
6: //For AMFPHP
7: [RemoteClass(alias="vo.com.jonniespratley.on_flex.tutorial_tuesday.whatsurlink.LinkVO")]
8: [Bindable]
9: public class LinkVO implements ValueObject
10: {
11: public var link_id:String;
12: public var link_date:String;
13: public var link_category:String;
14: public var link_url:String;
15: public var link_name:String;
16: public var link_sort:String;
17: public var link_description:String;
18:
19: public function LinkVO( source:Object = null )
20: {
21: if ( source != null )
22: {
23: for ( var element:String in source )
24: {
25: try {
26: this[element] = source[element];
27: }
28: catch ( error:Error )
29: {
30: throw new Error ( "LinkVO" + error );
31: }
32: }
33: }
34: }
35: }
36: }
Explanation of code:
This class represents our data that we are expecting to receive from our server. This contains all of the fields in our database table; id, title, url, category, description, and date.
In the constructor we have a helper method, but we will explain all of that a little later.
The Model Locator pattern is a singleton and was created purely to be used with Flex application development. In this case, a singleton is a design pattern that allows for only one instance of the Model Locator to be present within your application’s memory. Any data that you think is required to live in the application’s state should be stored inside the Model Locator. The Model Locator creates a central area where all the states can be held in your Flex application. This allows the view components to bind to the model or state of the application and keep everything up to date.
Summary:
Here is our Model Locator for Whats Ur Link?
ModelLocator.as
1: package com.jonniespratley.on_flex.tutorial_tuesday.whatsurlink.model
2: {
3: import com.adobe.cairngorm.model.IModelLocator;
4:
5: [Bindable]
6: public class ModelLocator implements IModelLocator
7: {
8: //Instantiate the ModelLocator
9: private static var _instance:ModelLocator;
10:
11: //Get the instance of the ModelLocator
12: public static function getInstance():ModelLocator
13: {
14: if( _instance==null ) _instance = new ModelLocator();
15: return _instance;
16: }
17:
18: public function ModelLocator()
19: {
20: if( _instance != null )
21: throw new Error( "Error: Singletons can only be instantiated via getInstance() method!" );
22: ModelLocator._instance = this;
23: }
24:
25: // ******************** Public Link Variables *********************** \
26:
27: // ******************** Work View States **************************** \
28: }
29: }
Explanation of code:
1: import com.adobe.cairngorm.model.IModelLocator;
2:
3: [Bindable]
4: public class ModelLocator implements IModelLocator
5: {
6: //Instantiate the ModelLocator
7: private static var _instance:ModelLocator;
It is very very import to make this entire class Bindable by adding a [Bindable] meta tag at the top of the class, we are making this class bindable so we can use the data binding feature in Flex to bind from one data source. Then we create one variable called "_instance" and this is of type ModelLocator, our ModelLocator. This will store an instance of our own class within its class, make sure that this variable is a private static variable.
1: //Get the instance of the ModelLocator
2: public static function getInstance():ModelLocator
3: {
4: if( _instance==null ) _instance = new ModelLocator();
5: return _instance;
6: }
The getInstance function is how we access our MOdelLocator from all parts of our application. This is a really simple function, all that it does is passes back our "_instance" variable, which is our class, and returns it. If no instance of our class is created, it creates one anyways.
To access our ModelLocator class from anywhere in our application, we just simply use this:
private var model:ModelLocator = ModelLocator.getInstance();
That wraps up this week’s tutorial of this 5 part series, come back for next week when we start to build the views, and more of our core components to make this app run.
Meet your new best friend. Have you ever made a service call the the server and have no results, but yet you didn’t receive a error, and you were just sitting there thinking, what the hell is going on? Why isn’t my data showing up? Well I have, all to often.
Let me introduce you to a little guy named <mx:TraceTarget />, I love using this tag in my main application whenever I am interacting with the server. When you add this tag to your application code, and run debug, whenever you make a call or something (event, result, fault ) happens it shows what is going on in the console. This is a real life savor, here is a little example on how to use this.
Main.mxml:
1: <?xml version="1.0" encoding="utf-8"?>
2: <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
3: width="425" height="425" horizontalScrollPolicy="off" verticalScrollPolicy="off">
4:
5: <!--Trace Target-->
6: <mx:TraceTarget id="traceTarget"/>
7:
8: <!--View-->
9: <v:FlickrPanel id="flickrPanel"
10: xmlns:v="com.jonniespratley.examples.FlickrRIA.view.components.*"
11: left="5" right="5" top="5" bottom="5"/>
12:
13: </mx:Application>
There isn’t a way to display the data in this example, but here is the source files, just load it up in Flex builder, and then Debug, you will see the output.
Steps:
Let’s get to this already.
Open up Flex builder and Click File->New->Flex Project.
Enter in whatever name you would like as it does not matter. Make sure this is a basic application using no server-side language. Now open up Cairngorm folder after you have unzipped it (hopefully), then drag and drop the cairngorm.swc file into the libs folder in your flex application and we are ready to rock.
To create the folders just right click and select:
New->Folder
When the new folder box opens up I want you to type this:
“com/yourdomain/ProjectName"
Then click enter.
Now create the folders like the image below.
Ok here we are going to create our Model Locator file; this is where all of our data is going to be stored in a central place for access from any other view or screen. Make sure your ModelLocator.as file is as follows:
ModelLocator.as
1: package com.jonniespratley.tutorials.FlexibleEmail.model
2: {
3: import com.adobe.cairngorm.model.IModelLocator;
4: import com.jonniespratley.tutorials.FlexibleEmail.model.vo.EmailVO;
5:
6: [Bindable]
7: public class ModelLocator implements IModelLocator
8: {
9: //Instantiate the ModelLocator
10: private static var _instance:ModelLocator;
11:
12: //Get the instance of the ModelLocator
13: public static function getInstance():ModelLocator
14: {
15: if( _instance==null ) _instance = new ModelLocator();
16: return _instance;
17: }
18:
19: public function ModelLocator()
20: {
21: if( _instance != null )
22: throw new Error( "Error: Singletons can only be instantiated via getInstance() method!" );
23: ModelLocator._instance = this;
24: }
25:
26: ///////////////////////////DEFINE VARIABLES HERE\\\\\\\\
27: public var emailVO:EmailVO;
28: public var message:String;
29: }
30: }
Let’s go ahead and create our Services.mxml file inside of the business folder while we are at it.
Create a new Component
File->New->Component,
Name is Serivces.mxml, and it is based on Service Locator. Cairngorm’s service locator, make you’re your add in the correct namespace check my Services.mxml to see how to do it.
Serivces.mxml
1: <?xml version="1.0" encoding="utf-8"?>
2: <!--Service Locator-->
3: <cairngorm:ServiceLocator xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:cairngorm="com.adobe.cairngorm.business.*">
4:
5: <mx:RemoteObject id="flexMailService"
6: destination="amfphp"
7: source="FlexMail"
8: showBusyCursor="true"
9: makeObjectsBindable="true"/>
10:
11: </cairngorm:ServiceLocator>
Now it’s go time to create our events, Create a new Action Script Class that extends Cairngorm Event, Name this file SendEmailEvent.as make sure this file is created in the event folder of your project. Also make sure your SendEmailEvent.as file is as follows:
SendEmailEvent.as
1: package com.jonniespratley.tutorials.FlexibleEmail.control.events
2: {
3: import com.adobe.cairngorm.control.CairngormEvent;
4: import com.jonniespratley.tutorials.FlexibleEmail.model.vo.EmailVO;
5:
6: public class SendEmailEvent extends CairngormEvent
7: {
8: public static const SEND_EMAIL:String = "sendEmailEvent";
9: public var email:EmailVO;
10:
11: public function SendEmailEvent( email:EmailVO )
12: {
13: super( SEND_EMAIL );
14: this.email = email;
15: }
16: }
17: }
Create a new ActionScript file called EmailDelegate.as in the delegate folder, this class doesn’t extend anything it is just used to make the call to the server. Make sure your file looks as follows:
EmailDelegate.as
1: package com.jonniespratley.tutorials.FlexibleEmail.business.delegates
2: {
3: import com.adobe.cairngorm.business.ServiceLocator;
4: import com.jonniespratley.tutorials.FlexibleEmail.model.vo.EmailVO;
5:
6: import mx.rpc.IResponder;
7:
8: public class EmailDelegate
9: {
10: private var responder:IResponder;
11: private var service:Object;
12:
13: public function EmailDelegate( responder:IResponder )
14: {
15: this.service = ServiceLocator.getInstance().getRemoteObject( "flexMailService" );
16: this.responder = responder;