Flex basics

What is Flex?

Flex is a highly productive, free open source framework for building and maintaining expressive web applications that deploy consistently on all major browsers, desktops, and operating systems. While Flex applications can be built using only the free open source framework, developers can use Adobe® Flex® Builder™ software to dramatically accelerate development.

What is MXML?

You use two languages to write Flex applications: MXML and ActionScript. MXML is an XML markup language
that you use to lay out user interface components. You also use MXML to declaratively define nonvisual aspects
of an application, such as access to data sources on the server and data bindings between user interface components
and data sources on the server.
Like HTML, MXML provides tags that define user interfaces. MXML will seem very familiar if you have worked
with HTML. However, MXML is more structured than HTML, and it provides a much richer tag set. For example,
MXML includes tags for visual components such as data grids, trees, tab navigators, accordions, and menus, as
well as nonvisual components that provide web service connections, data binding, and animation effects. You can
also extend MXML with custom components that you reference as MXML tags.
One of the biggest differences between MXML and HTML is that MXML-defined applications are compiled into
SWF files and rendered by Adobe® Flash® Player or Adobe® AIR™, which provides a richer and more dynamic user
interface than page-based HTML applications.
You can write an MXML application in a single file or in multiple files. MXML also supports custom components
written in MXML and ActionScript files.

What is ActionScript?

ActionScript is a scripting language based on ECMAScript. ActionScript is used primarily for the development of websites and software using the Adobe Flash Player platform (in the form of SWF files embedded into Web pages), but is also used in some database applications (such as Alpha Five), and in basic robotics, as with the Make Controller Kit. Originally developed by Macromedia, the language is now owned by Adobe (which acquired Macromedia in 2005). ActionScript was initially designed for controlling simple 2D vector animations made in Adobe Flash (formerly Macromedia Flash). Later versions added functionality allowing for the creation of Web-based games and rich Internet applications with streaming media (such as video and audio).

What is SWF File?

The SWF file format delivers vector graphics, text, video, and sound over the Internet and is supported by Adobe® Flash® Player and Adobe AIR™ software. Flash Player already reaches over 98% of Internet-enabled desktops and more than 800 million handsets and mobile devices.

The SWF file format is designed to be an efficient binary delivery format, not a format for exchanging graphics between graphics editors.

The SWF file format is available as an open specification to create products and technology that implement the specification. SWF 9 introduced the ActionScript™ 3.0 language and virtual machine. The SWF 10 specification expands text capabilities with support for bidirectional text and complex scripts with the new DefineFont4 tag. The DefineBitsJPEG4 tag allows embedding JPEG images that have an alpha channel for opacity and also a smoothing filter. SWF 10 also adds support for the free and open-source Speex voice codec and for higher frequencies in the existing Nellymoser codec.

What is SWC File?

Whereas source-based dependencies are fairly obvious—imports, embeds, base classes, and so forth—the dependencies for precompiled components are hidden inside SWC libraries. Fortunately, SWC files are quite easy to dissect—they are simple ZIP archives.

Think of a SWC file as a set of precompiled definitions stored in SWF file format and metadata that describes those definitions. If you unzip a SWC file, you will find a SWF file, a set of ASI files (describing the included ActionScript classes), and a catalog.xml file that binds everything together. The catalog contains a set of <asset> tags with metadata for each exported symbol in the attached SWF file.

How Can I write an HelloWorld Application in Flex?

<?xml version="1.0"?>
<!– mxmlHellowWorld.mxml –>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Panel title="My Application"
paddingTop="10"
paddingBottom="10"
paddingLeft="10"
paddingRight="10"
>
<mx:Label text="Hello World!" fontWeight="bold" fontSize="24"/>
</mx:Panel>
</mx:Application>

What is a Flex Container?

A container defines a rectangular region of the drawing surface of the Adobe® Flash® Player. Within a container, you define the components, both controls and containers, that you want to appear within the container. Components defined within a container are called children of the container. Adobe Flex provides a wide variety of containers, ranging from simple boxes through panels and forms, to elements such as accordions or tabbed navigators that provide built-in navigation among child containers.

The Container class is the base class of all Flex container classes. Containers that extend the Container class add their own functionality for laying out child components.

At the root of a Flex application is a single container, called the Application container, that represents the entire Flash Player drawing surface. This Application container holds all other containers and components.

How to compile MXML file using command line?

mxmlc –show-actionscript-warnings=true –strict=true c:/appDir/test.mxml

What are Flex Components?

Components are the building blocks of the Flex framework. With them you are able to prototype, build and deploy your applications in record time.

The open source Flex framework includes a robust set of components and containers right out of the box. On top of the components that come with the Flex framework, there are a number of commercial components available, as well as community components available.

What are XML namespaces & how are they used in MXML?

XML namespaces give you the ability to use custom tags that are not in the MXML namespace. The following
example shows an application that contains a custom tag called CustomBox. The namespace value
containers.boxes.* indicates that an MXML component called CustomBox is in the containers/boxes
directory.
<?xml version="1.0"?>
<!– mxml/XMLNamespaces.mxml –>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:MyComps="containers.boxes.*"
>
<mx:Panel title="My Application"
paddingTop="10"
paddingBottom="10"
paddingLeft="10"
paddingRight="10"
>
<MyComps:CustomBox/>
</mx:Panel>
</mx:Application>

Code Snippets to remember?

<mx:Button label="Submit" click="textarea1.text=’Flex Certification’;"/>

The click
property of the Button control contains a simple event listener that sets the value of the TextArea control’s text
property to the text Flex Certification.

We can also call a method instead. <mx:Button label="Submit" click="flexCertification();"/>

Data binding is either done by using {} (curly Braces )

<mx:TextArea id="textarea1" text="{textinput1.text}"/>

or using the tag <mx:Binding>

What is RPC- Remote procedure call?

Remote procedure call (RPC) is an Inter-process communication technology that allows a computer program to cause a subroutine or procedure to execute in another address space (commonly on another computer on a shared network) without the programmer explicitly coding the details for this remote interaction. That is, the programmer would write essentially the same code whether the subroutine is local to the executing program, or remote. When the software in question is written using object-oriented principles, RPC may be referred to as remote invocation or remote method invocation.

What are the RPC Components included in MXML?

The MXML components that provide data access are called RPC components. MXML includes the following
types of RPC components:
•WebService provides access to SOAP-based web services.
•HTTPService provides access to HTTP URLs that return data.
•RemoteObject provides access to Java objects using the AMF protocol (Adobe LiveCycle Data Services ES only).

What is a Data Model?

A data model is an ActionScript object that contains properties that you use to store application-specific data.
Communication between an Adobe® Flex™ application and the server is required only to retrieve data not yet
available to the Flex application and to update a server-side data source with new data from the Flex application.
You can use a data model for data validation, and it can contain client-side business logic. You can define a data
model in MXML or ActionScript. In the model-view-controller (MVC) design pattern, the data model represents
the model tier.
When you plan an application, you determine the kinds of data that the application must store and how that data
must be manipulated. This helps you decide what types of data models you need. For example, suppose you decide
that your application must store data about employees. A simple employee model might contain name,
department, and e-mail address properties.

A data model is an ActionScript object that provides
properties for storing data, and optionally contains methods for additional functionality. Data models provide a
way to store data in the Flex application before it is sent to the server, or to store data sent from the server before
using it in the application.

You can declare a simple data model that does not require methods in an <mx:Model>, <mx:XML>, or<mx:XMLList> tag.

How do we do Data Validation in Flex?

You can use validator components to validate data stored in a data model, or in a Flex user interface component.
Flex includes a set of standard validator components. You can also create your own.

eg: <mx:PhoneNumberValidator id="pnV"
source="{homePhoneInput}" property="text"/>

<mx:EmailValidator id="emV" source="{emailInput}" property="text" />

How do we format data in flex?

Formatter components are ActionScript components that perform a one-way conversion of raw data to a
formatted string. They are triggered just before data is displayed in a text field. Flex includes a set of standard
formatters. You can also create your own formatters.

eg:<mx:ZipCodeFormatter id="ZipCodeDisplay" formatString="#####-####"/>

How do we use CSS in Flex?

<mx:Style>
.myClass { color: Red } /* class selector */
Button { font-size: 18pt} /* type selector */
</mx:Style>

or <mx:Style source="app.css" />

After you define it, you can apply the style to any component using the
styleName property.

<mx:Button styleName="myClass" label="This is red 18 point text."/>

What is Skinning?

Skinning is the process of changing the appearance of a component by modifying or replacing its visual elements.
These elements can be made up of bitmap images, SWF files, or class files that contain drawing methods that
define vector images. Skins can define the entire appearance, or only a part of the appearance, of a component in
various states.

What are effects?

An effect is a change to a component that occurs over a brief period of time. Examples of effects are fading,
resizing, and moving a component. An effect is combined with a trigger, such as a mouse click on a component, a
component getting focus, or a component becoming visible, to form a behavior. In MXML, you apply effects as
properties of a control or container. Flex provides a set of built-in effects with default properties.