Today web users need applications to be more interactive and expressive. The need for the RIA [Rich Internet Applications] is increasing. Flex was one of the choices for developing Rich internet applications.
Why Use Flex?
Developers are picking up flex at a greater speed. One of the reasons is flex being easy to learn for all those who have worked on xhtml and html.If you are starting to develop RIA we have few more choices including Flex, Microsoft Silver light, JavaFX and Ajax. Flex being the best has many advantages over others,
Flex runs on Adobe Flash player which is already installed on about billion computers worldwide
Flex is a also used to develop applications which run on user desktop , thanks to AIR[Adobe Integrated Runtime].now we can develop applications that runs both on web and desktop.
So what is Flex and it uses?
Flex is free, open source framework that can be used to develop highly interactive, expressive RIA that can be deployed consistently on all web browsers.
Adobe flex is a component based tool providing containers, UI elements data connectors and more.
Supports common object oriented principles.
You can associate the Flex-based front-end with any back-end technology using techniques that promote loose coupling. Flex provides built-in support for communication with back-ends via both traditional HTTP and SOAP-based Web services.
Flex provides a rich set of components, Flash effects (including animation, video, and audio), and accessibility features that make it easy to add richness and highly fluid experiences to a Web application.
Overview of flex and its features
Flex is very easy to learn as its core is based on Html, Xml and Java Script. Flex provides the declarative language, application services, components and data connectivity that developers need to build Rich internet applications. Flex provides a language called MXML that developers use to define the user interfaces, layout, appearance and behaviors of a flex application.
Suppose if we want to create a button in html we will use
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Button Example</title>
</head>
<body>
<form method="post" id="example" action="http://www.example.com/">
<input type="button" name="newButton" id="newButton" value="This is a button" onclick="checkForm()" />
</form>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Button Example</title>
</head>
<body>
<form method="post" id="example" action="http://www.example.com/">
<input type="button" name="newButton" id="newButton" value="This is a button" onclick="checkForm()" />
</form>
</body>
</html>
And the same thing can be achieved by flex as
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Button x="10" y="10" label="This is a button" id="newButton"
click="checkForm()"/>
</mx:Application>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Button x="10" y="10" label="This is a button" id="newButton"
click="checkForm()"/>
</mx:Application>
MXML is Easy
MXML is an XML-based user interface markup language first introduced by Macromedia in March 2004. Adobe Systems (which acquired Macromedia in December 2005) gives no official meaning for the acronym, but some developers suggest it should stand for "Magic extensible Markup Language". It's likely that the name comes from the MX suffix given to Macromedia Studio products. Application developers use MXML in combination with Action Script to develop Rich Internet applications.
Mxml is mainly used to declaratively layout the interface of applications and can also be used to implement business logic and application behaviors. It contains snippets of ActionScript code that provides the behavior.
MXML tags are actually created with ActionScript under the hood. When you compile your Flex application, the MXML is converted into ActionScript which is then compiled into a SWF file. This means that your entire application could be written in ActionScript. However, you will primarily use MXML to define your Flex application UI and ActionScript to program your business logic.
Each component in Mxml follows the same pattern,
1. You declare a namespace that tells Flex where to find a particular component.
2. You declare the component class you wish to use (e.g. Button) from that namespace.
3. You modify the available properties and methods using attributes, as illustrated below.
Flex developers use ActionScript for providing custom behaviors for the components in the flex application. We can use Mxml to define various components like Buttons, Containers and layouts for them. Each of them provides the standard behavior like when we move the cursor over button it highlights automatically. We cannot use a declarative language like Mxml to provide behaviors when we click the button. For this case we use ActionScript which is a procedural language. In general sense Mxml implements the static aspects where as the ActionScript use the dynamic aspects.
ActionScript is an OOP language that encapsulates all of its functionality using classes. .ActionScript® 3.0, an object-oriented language based on industry-standard ECMAScript, is the language used to build client-side application logic. MXML and ActionScript are compiled together into a single SWF file that makes up your Flex application.
ActionScript is a ECMAScript based scripting language and this is a object oriented and a virtual machine is need to run this which is AVM2 [Action Script Virtual Machine 2] and AVM2 is built in flash player 2.
We can use a variety of methods to mix ActionScript and MXML, including the following:
• Use ActionScript to define event listeners inside MXML event attributes.
• Add script blocks using the
• Include external ActionScript files.
• Import ActionScript classes.
• Create ActionScript components.
Sample Code
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Style source="SampleFlex.css"/>
<fx:Script>
<![CDATA[
public function doSomeThing():void { mx.controls.Alert.show(input.text)
}
]]>
</fx:Script>
<mx:Button x="28" y="112" label="Show Entered Text" click="doSomeThing()"/>
<s:TextInput x="125" y="58" width="178" id="input"/>
<s:Label x="22" y="59" text="Enter Your Name" height="19"/>
</s:Application>What Do I Need to Get Started?
With Flex 3, it's been easier to begin building RIAs. To get started, you can use one of two options:
• Adobe Flex Builder 3, the official Flex IDE from Adobe.
• You'll also need your own programming editor, combined with the Flex 3 SDK, which is free. Yes:
Installing Flex Builder 3 is quite straightforward, as it comes with a user-friendly installer.
The Flex SDK, on the other hand, is a little trickier. To install the Flex SDK, download the zip file and extract it to a folder of your choice. The trick is that that folder should be in your path.
If you're planning on taking your Flex development seriously, I recommend you go ahead and purchase the Flex Builder 3 IDE. Flex Builder is based on the open-source Eclipse editor, which alone is an extremely powerful IDE. If you want to try before you buy, Flex Builder 3 is available for a 30-day trial. While it's great that the Flex 3 SDK is free, the benefits that Flex Builder 3 provides for Flex development over a standard text editor are many.
Resources
Flex 3.0 is rapidly gaining steam; as a result there are some resources out there for anyone who wants to get started in building RIAs with Flex. Here's a sample:
• Flex Livedocs
• Flex.org
• FlexCoders
• Open Source Flex
• The Flex CookBook
• Flex 3 Getting Started
Summary
This article barely touched the surface of the Flex framework, although we did cover the basics of what the framework provides, and how MXML and ActionScript 3.0 work together. While this was a very gentle introduction to the concepts behind Flex, it should give you enough grounding in the concepts to go forth and experiment on your own.
No comments :
Post a Comment