Tag Archives: Flex

Flex Apps in Visual Studio

We all know about ever increasing richness of browser based applications and great solutions built around them. Now even business solutions are being built using technologies like Microsoft’s Silverlight, Adobe’s AIR etc that enable building RIA’s or rich Internet applications. Most developers have built Silverlight apps using VS but here we explore how VS can be used to build Flash based internet applications. Before showing how this is done let’s begin with a small introduction of Flex framework. We all know that plug-in based technologies like Flash player and Silverlight have enhanced capabilities of browsers manifold, and using these technologies developers can create applications that enable media playback within the browser, plus enable fast execution of code. Adobe Flex is a free and open source framework for building Flash based web applications. Besides using Visual studio plug-in as explained in this article, one can also use Adobe Flex Builder for fast development of Flex applications. The two core components of any Flex application include MXML, an XML mark-up language for declarative UI layout and ActionScript, a fully object oriented language, used for handling interactivity, events, data management and other client-side business logic. Flex also provides a comprehensive library of components and classes that can be used to accelerate development of web applications. This includes visual controls, containers, navigators and charting components, as well as providing support for component skinning, rich media streaming, data binding and interaction with RPC and messaging services.

How it works

To start developing Flex apps in Visual Studio 2008 one needs to download ‘Ensemble Tofino’ plug-in from tinyurl.com/yb8y5ow. Installing downloaded ‘EnsembleTofinoWithFlexSDK.1.2009.09.08.exe’ file results in creation of new project type in Visual studio. To build Flex applications, start Visual Studio and click on ‘File>New>Project.’ From project type select ‘Flex’ and then select ‘Flex Project’ from template and name your application (‘FlexusingVS’). One important point to note here is after you have built your application, debugging would only be possible if you have the debug version of Flash Player installed on your machine. Different debug versions of Flash Player can be downloaded from tinyurl.com/r59ere; in this implementation we used Flash Player 9 (debug version for Internet Explorer). If you already have Flash player installed on your browser, then you might not be able to install the older version unless you uninstall the previous version of Flash Player. Simply go to tinyurl.com/c3e657, download and install uninstaller tool (‘uninstall_flash_player.exe’). Now go to the command prompt and type:

C:\[path] uninstall_flash_player.exe /clean
Once you have installed ‘Ensemble Tofino’ plug-in one can find new project type ‘Flex’ in ‘New Project’ window.

This would uninstall the previous version of Flash Player and let you install a different version. Moving back to application building, you would find different folders of typical Flex application in solutions explorer. The first and most important one is ‘src’ folder. This contains files where actual code is written. Two important files included in this folder are MXML(.mxml) and ActionScript(.as) files. Second folder ‘html template’ contains template for the html wrapper. The Flex application, when deployed onto the web, is wrapped up inside an html page that takes care of detecting whether or not the user has the correct version of the Flash Player installed and, if required, can prompt the user to update their Flash Player. Here is a simple Flex application that displays a message on a button click event, MXML is an XML based language, and as such uses namespaces, the most important one � mx � is bound via the xmlns URI in the application tag and refers to the Flex framework classes:

The important tag worth mentioning here is ‘…../’. This is the defining container for the whole application. One can also customize the look of the application by adding style sheet. Just add a new file (.css) to ‘src’ folder and add these lines:
Building Flex Apps using VS is quite simple, one can see different components of the Flex project in Solutions Explorer; one also gets benefit of intelliSence.

/* CSS file */
Application
{
background-color:Olive;

}

Now add the following tag to ‘FlexusingVS.mxml’ file:

Here is the output of a sample Flex application. To view the output one needs to have Flash Player plug-in installed in browser.

It is evident from the above sample that using VS IDE for building Flex apps is one of the most efficient ways of doing the task, specially for those web developers who are already using VS and are not comfortable with any other IDE.

Advertisements

Flex – Cairngorm Architecture Overview

Cairngorm is the lightweight micro-architecture for Rich Internet Applications built in Flex or AIR. A collaboration of recognized design patterns, Cairngorm exemplifies and encourages best-practices for RIA development advocated by Adobe Consulting, encourages best-practice leverage of the underlying Flex framework, while making it easier for medium to large teams of software engineers deliver medium to large scale, mission-critical Rich Internet Applications.

Cairngorm Architectural Framework

Cairngorm follows the principle of separating the view and business logic which is known as the Model-View-Controller pattern (MVC). The following list shows the different elements that form the framework.

1. View: Contains UI controls for user interaction and displays the state of the models data. Views dispatch events handled by the controller.

2. Model Locator: It acts as a centralized repository for all data needed in the application. It manages the view an is declared as [Bindable] to use all variables for data binding in the view. It must be implemented as a singleton which implements the Cairngorm IModelLocator. All data managed in the model should only be updated through a command or a responder object.

3. Value Object (VO): A value object is a class that only has properties to store values. It contains no methods or logic and acts as a pure data container. Value objects must implement the Cairngorm ValueObject interface. If they should be mapped to a corresponding server-side class it must declare the [RemoteClass (alias=”)] metatag. By doing so, Flex automatically converts an server-side object returned through remoting or data service interaction to its corresponding ActionScript object.

4. Event: In Cairngorm everything should be mapped to an event. Whenever the user interacts with the view or an action occurs an event must be dispatched. Custom events extend the CairngormEvent class an have a special property to contain the data that comes with it.

5. Command: Commands actually do the majority of an applications work. They recieve the event and its data, execute the logic an can change the workflow state of the model and view. Each command must implement the Cairngorm ICommand interface and its execute function. The revcieved event is a generic CairngormEvent and must be casted to the appropriate custom event first. The complete frontend-logic of the RIA is encapsulated within the commands.

6. Front Controller: It extends the Cairngorm FrontController class and maps the dispatched events to its corresponding commands. Therefore it has two methods: the constructor and an initialize method which will map an event to an command via the addCommand method. The controller is instantiated directly in the main.mxml via a component tag. You simply need to add the directory your class is in as an XML Namespace and then include the tag in the file.

7. Service Locator: Implemented as a singleton, it contains references to all services an application will use. Like the Front Controller, it is placed within the main.mxml via a tag. Possible services to be used are RemoteObjects, HTTPServices, WebServices or custom services.

8. Business Delegate: Business Delegates form an abstraction layer between the server-side services and the main frontend application. The locate the required service in the Service Locator, call the given method on it and route the response back to a responder object. Unlike the other elemente in the Cairngorm architecture, it does not extend a class or implement an interface, but it need to follow some guidelines: it must have at least two properties, one named reference to the ServiceLocator and one reference to a responder, both set in the constructor. And it must have implemented one method for each server-side method to be called. The delegate is created within a command object. It should only pass strongly typed value objects to a responder. If it does not recieve an appropriate object, it must create one before passing it.

9. Responder: Responders implement the mx.rpc.IResponder interface. A responder recieves the result of a service call and implements frontend-logic like a command. It directly may set values of the model and should only deal with strongly typed value objects.

10. Service: The Service is formed by an application tier, build with some server-side technology like J2EE or PHP. It Accepts the service requests from the RIA and responds back data. With a remoting technology like BlazeDS it is even possible to pass back value objects witch are transformed to their corresponding ActionScript objects in the application, so it can interact with them as if they are created by script.

How to paginate data in a Datagrid

The pagination is an important feature which is required in most of the applications and in a flex application we find it difficult to implement as it is some what different from other technologies. You can use the below solution provide as an example to be used in your applications.

In Flex, by default a DataGrid will display all rows in the data provider. If you have many rows of data then displaying few rows at a time to the user will give a good experience to the user.

The solution may be to make DataGrid display all rows in the data provider and you can split the data and update the data provider with required rows.

Explanation

DataGrid displays all rows in the data provider provided. If you have many rows of data then displaying few rows at a time to the user will give a good experience to the user.

As the DataGrid will display all the rows in the data provider, you can split the data and set the data provider of the DataGrid with only the required rows. To achieve this you will have to do simple calculation and split the data from the full data.

Please look at a good example on how to achieve this and blogged about it. Please find the source code and the sample implementation at the URL below.

http://gurufaction.blogspot.com/2007/02/flex-datagrid-paging-example-with.html

Flash Catalyst

Adobe Flash Catalyst is a new professional interaction design tool for rapidly creating user interfaces without coding.

  • Create interactive prototypes with the ability to leverage them in the final product.
  • Transform artwork created in Adobe Photoshop and Adobe Illustrator into functional user interfaces.
  • Publish a finished project as a SWF file ready for distribution
  • Work more efficiently with developers who use Adobe Flash Builder4 to create rich Internet applications (RIAs). Designers use Flash Catalyst to create the functional user experience then provide the project file to developers who use Flash Builder to add functionality and integrate with servers and services.

Create the user experience through an approachable interaction design tool for designers with no coding required:

  • No coding required: Create the user experience and make it functional without coding.
  • Sell your ideas: Be able to show a functional design instead of static screenshots to communicate your ideas.
  • Ensure your creative vision is accurately expressed: Design with the expressiveness of Flash Player including graphics, typography and 3D effects.

Rapidly create and deliver a finished SWF file or collaborate more effectively with developers:

  • Fast learning curve: If you can use Photoshop or Illustrator you can quickly learn to use Flash Catalyst.
  • Fast Interaction Design: Transform native Photoshop and Illustrator files into functional user experiences. Publish finished projects for distribution as a SWF file.
  • Collaborate more effectively with developers: Provide Flash Catalyst projects to developers who use Flash Builder to add additional functionality and integrate with servers and services.

Flash Catalyst and Flash Builder are based on the open source Flex 4 framework.