Working with rails is a lot of fun, I’ll admit, but when you throw Flex into the Picture its like “The Real Side of The Force”. This is a small tutorial demonstrating how to get up and running with Flex and Rails!!

^This tutorial is for Windows users (yuck, can’t wait to get onto Linux), and is inspired by Peter Armstrongs Flexible Rails Book. Pre requisites for this tutorial are: Flex Builder/Rails 2.2.2/mysql (not needed but pre configured) and thats about it. If you are running an older version of Flex or Rails try and follow along, it should work out as its a basic demo without database interaction.

Configuring the Application:

1. CREATE YOUR APPLICATION: This is very easy just create the app by using this command

rails -d mysql flexonrails # tell Rails to use mysql instead of the default sqlite3 adapter

*You should modify your command line prompt to start up with the directory your Rails Apps reside. My directory is D:/Rails Apps. All you have to do is click on the Command Line Shortcut and define the path in the “Start In” field.



Other commands that might come in handy:
D:\Rails Apps> mkdir flexonrails //create a directory named "flexonrails"
D:\RailsApps> cd flexonrails //cd into the dir. you just created

You can also use an IDE of your choice to create the application. I just switched over to netbeans.

2. CHECK IF THE APP IS WORKING: Point your web browser at http://localhost:3000/ and you should get your normal Rails screen showing.

   Make sure that you create your database (even though we aren’t using it in this small demo.) You should get used to doing that.

   

3. CREATE THE FLEX PROJECT: I will be using Flex Builder 3 here, but you can easily use the FLEX SDK. Before you go ahead and create the project make sure to create these folders within your application direcotry.
   D:\Rails Apps\flexonrails> mkdir app/flex //creates the flex dir within the app dir.
   ….
   D:\Rails Apps/flexonrails> mkdir public/bin //creates the bin dir withing the public dir.

   …
   

   …
   

   ….
   

4. CREATE THE CONTROLLER IN RAILS: Create the controller in rails by using the normal:
   ruby script/generate controller {your controller name}

   (OR copy and paste the following to Controllers/hello_controller.rb)

   class HelloController < ApplicationController
     def hello
       render :text => "hello world!"
     end
   end
   

5. CREATE THE MXML: You will have to create the mxml which is pretty straightforward here. First rename your flexonrails.mxml to Flexonrails.mxml to avoid any naming conventions. Then copy this code over:

6. BUILD THE PROJECT AND POINT: All you have to do now is build the project (In Flex Project>Build Project and make sure Build Automatically is unchecked).

   Next point your browser to:
   http://localhost:3000/bin/FlexonRails.html

That should do it for you. In case it doesn’t work make sure that you:
(1) Saved your files.
(2) Configured Rails properly.
(3) Configured your Flex Builder Project Properly.
(4) Created the public/bin AND app/flex sub directories.

This should give some good insight on how to setup a Rails and Flex Project. Sure it might take some time to start creating bigger apps, and apps that connect to a database, but this is sure a good start.

CCTV and Adobe have partnered up to power their viewers with a great Flex App for the coverage of the Olympics.   Boasting a rich interface, social networking, live iptv streaming, plus a barrage of video selections Adobe has once again shown their presence on the Rich Internet Application scene. The application has been awarded “App of the Week” and will expose millions of people to the Flash / Flex Environment.

Hey everyone!! I managed to do a little marketing today and signed up on Rozee.pk site. My intentions are pretty straightforward and am looking to work locally in market (apart from my other projects). If anyone would be interested in contracting my services or just dropped by to say “HI” you can always reach me through my blog or website. I do understand that Rozee is a marketplace for employment and though i might not be looking for a permanent job i wanted to introduce myself and build relationships with professional and caring companies.
 

[kml_flashembed movie="/experiments/flex/flex.swf" height="300" width="550" /]
BREAK
//GO BABY GO!!!!!
BREAK
One question i wanted to ask anyone out there was would you all be interested in participating in a User Group for Adobe Flash/Flex in Karachi? I would like to see people from all walks coming (Java Developers and C++ developers are welcome!!!) and participate by giving lectures and sharing their code with the community – Yes sharing is caring!!! We all seem to be ranting on about the Indians and how far they have gotten, but fail to help each other out or don’t make a conscious enough effort. Take it from me if you want to learn you will learn.
BREAK
I can tell you one thing. Flex is the buzz nowadays everywhere in the world. The problem is that there is more demand than supply for flex developers so those who have the skills can take advantage of the good salaries they pay. Even if you dont come from a programming background (I don’t) i am sure that with a little determination you would eventually understand and learn the key concepts in RIA DEVELOPMENT. In the near future i will be screen/podcasting (havent decided yet) some of my work in Flex Builder 2-3 so you can always come here and get up to speed with things.

Navigation plays a leading role in all applications. The more you study navigation techniques the more you will understand that navigation is at the core/heart of a any application – the better the navigational system the more unique the user experience.

Navigation in the flex environment is not too difficult and starts with Navigation containers. A subclass of Flex containers is represented by the Navigational container. The benefits of this type of container is that it allows you to navigate and move around the application. Different elements of the user interface are revealed according to the path that the user chooses.

These are some of the Navigator containers in Flex:

• ViewStack
• Accordian
• LinkBar
• MenuBar
• ButtonBar
• TabBar
• TabBarNavigator
• ToggleButtonNavigator

What important to understand is that the above listed containers allow you to control the interactions that the user makes in the application. Secondly and just as important is that you can program the components of the application in response to user interactions.

Continued with an example in flex…


Lets take and example of a ViewStack Navigator container, which is at the core of the Navigator containers. This specific container allows you to specify a selection of child containers that are arranged one on top of the other. The container with the focus will be visible while the others reamain nonactive. The ViewStack container is linked to other Navigator components, easily allowing the user to switch from one child to the other.

[kml_flashembed movie="/flex/Essential Flex AS3/bin-debug/exampleNav.swf" height="300" width="550" /]

Everything in Flex occurs based on an event. This means that simply clicking a button or key to moving the mouse or receiving a response from a web service provides developers with the ability to trigger a custom event in their Flex applications. That’s a lot of control, and since Flex is not based on the request/response model of a standard web app, the app contains the functionality to perform those custom events without ever leaving the web page. This is because events are client-based—in other words, separated from the request/response model of a web page and do not require the page to refresh with every user interaction.

Events enable an application to respond to an occurrence such as a certain variable value being achieved or the user clicking a certain button. They form an essential part of application development. Consider this straightforward example as the building blocks of Flex System and User Events combined in one small application.

[kml_flashembed movie="/flex/Essential Flex/bin-debug/handlingEvents.swf" height="300" width="550" /]
BREAK
When an event is triggered, there are three phases that flex uses to determine whether there are event listeners.

• Capture phase: Flash Player checks every node from the root of the tree to the direct parent of the target node to see whether it has a listener registered to handle the event.
• Target phase: The event is dispatched to the target node.
• Bubbling phase: Flash Player carries out a check in a reverse manner with respect to that of the capturing phase (starting from the direct parent of the target node to the root of the tree).

Two types of events exist in Flex: System events are dispatched when the code is executed, and User events are dispatched when the user who is using the application interacts with the features of the application itself (for example, buttons, form elements, navigation controls).

[kml_flashembed movie="/flex/LengthConverter/bin/LengthConverter2.swf" height="150" width="550" /]

BREAK
This is an example of a simple flex app that converts miles to kilometers and vice versa. Notable features are:

• Uses <mx:Script> instead of inline actionscript elements.
• Validation for invalid characters.

There are many ways to approach this sort of simple flex app, but but building the project from ground with packages in AS 3 would be the most efficient in this case.

/*
A new breed of i.t. professionals are brewing nowadays. They are called “devigners”…These individuals have learned to fuse both design and development to create Rich Internet Applications. With the market headed towards RIA’s wouldn’t you want to create a stateful client where significant changes to the view would not require to reload another page?
*/

Web Applications present data within web pages that appear within a browser. These web pages provide an easy way for users to interact with data.

Web Apps typically consist of a number of different layers

• The user interface layer: Provides the means for a user to interact with the data in the web application. It usually consists of web pages that include standard elements such as buttons, text inputs, drop-down lists, images, and hyperlinks.
• The data used to populate the user interface
• A third layer that allows the user interface to interact with the data layer.

These layers are often called n-tier or multi-tier architecture. In n-tier architecture, the user interface is referred to as the presentation tier or layr. In web applications, the presentation layer occurs withing hte web browser using XHTML or SWF objexts, and client – side scripting such as JavaScript or Actionscript.

The user interface displays data from databases, XML, and text documents, the file system, and data streams from web services and RSS feeds. Increasingly, web applications rely on XML structures to provide content. The XML content might just result from a request to a database or by receiving a response from a web service.

This layer is called the data tier in n-tier architecture. The layer is abstracted from the presentation tier and is located separately. A database server provides a good example of the data tier. It exists separately from the web browser and server.

To include data from the data tier within the presentation tier, there is a need for a middle layer between the two. In n-tier architecture, this layer is called the business logic, or application tier. This tier exist as an itermediary between the data source and the application interface. It also enforces business rules and other logic required within the web application.

The business logic tier exist within an application server and relies on server side languages, such as ColdFusion, ASP.NET, and PHP. This layer is responsible for requesting data from the data tier and providing it to the presentation tier in an appropriate format, often using an XML structure.

One implication of using n-tier architecture is that this approach separates the presentation layer form the data source. It’s not possible for the client software to communicate directly with a database. Instead, the communication between the two is handled with a server side language and an application or web server withing the business logic tier.

PART II (Coming) – How flex fits into an n-tier architectural style….

As any actionScript 3.0 programmer you will spend alot of time researching properties and methods of the many class files available to you. The best place is to start is the ActionScript 3.0 Online Language Reference (For Flex) and ActionScript 3.0 Language and Components Reference.

To get to the Flex ActionScript 3.0 Language Reference in Flex select Help > Find in Language Reference.

You will see that during your career as an ActionScript 3.0 programmer, you will be spending a fair amount of your time on these sites.

Adobe Flash is a part of my everyday life. I try and integrate it into daily routine (even if i dont have a “hands on” project). Developers using this platform can harness the power of Flash by using Actionscript , the programming language for the Flash Player at the run-time environment.

Its this transition alone that has give me confidence in my abilities and opened me up to another world on the internet – FLEX! Teaching yourself Flash skills can be a cumbersome process, it would have be much easier if i obtained an Adobe Certification. Nevertheless the learning process was well worth it; it makes you want more and more.

The “more” is Flex. I would like to introduce Flex to the Pakistani market. Yet another transition! To me Flex in Pakistan is all about the right client and cultivating your existing clients towards the technologies of the future. I have given demos and presentations in Flash and have always got a positive response – so why not flex….??

My thoughts on the benefit of Flex for the local environment:

• Enhanced user experience Flex lets you build applications that provide an engaging user experience. An engaging user experience ensures that customers are drawn into your application, that they understand how to use it, and that they can more quickly complete a task or find the information they are seeking.
  

  Most peeps in Pakistan dont even know what a user experience is…im sure they will be easily engaged.

• A complete environment Flex is a powerful application development solution for creating and delivering RIAs within the enterprise and across the web. It provides a modern, standards-based language and programming model that supports common design patterns and includes a highly productive IDE.
  

  Which is great! Flex was developed with open source in mind (www.labs.adobe.com) and the community is growing at a fast pace.

• Eliminate page loads Applications running in Flash Player behave like desktop applications, instead of a series of linked pages. Flash Player manages the client interface as a single, uninterrupted flow and does not require a page load from the server when the client moves from one section of the application to another.
  

  The face of the web is changing indeed. With Ajax, OpenLaszlo etc we are seeing a true breed of “Rich Internet Applications”. This is a true advantage to users with low bandwidth.

• Common deployment environment Flex applications execute on Flash Player 9, which is platform independent, so customers do not need to install custom client software. Also, Flash Player runs consistently in all browsers and platforms, so you do not have to worry about inconsistent behavior in different client environments.
• Enterprise-class features You can use Flex Data Services to transparently synchronize data and support real-time data push. Messaging capabilities enable more robust applications that continue to function after network connectivity is lost and allow multiple people in different locations to browse or chat in the same application. These features, plus the ability to integrate audio and video, open the door to new ways of interacting with customers, partners, and employees.
  

  This is one option for developing applications that interact with the server. HTTP/SOAP/AMF

There is alot of documentation out there. One thing i have learned working independently in Pakistan is if you want to do something then do it yourself. Darron Schall says the migration from Flash to Flex is not as hard as you think. I sure hope so Darron.