Browsing Posts in Adobe Flex

Flex basic

No comments

Description of Basic elements of a Flex application.

Flex framework

The Adobe® Flex 2 framework contains all the components you need to
build rich Internet applications, which include:
-Containers that you use to layout the application
-Controls you use to gather data from users and to manage the user interface (Text and Button, for example)
-Extensive data binding, formatting, and validation features
-An event-driven development model that provides rich user interface transformation features such as effects and transitions
-The Flex framework is contained within a shared component library (SWC) file.

MXML

Every Flex application contains at least one MXML file,
known as the main application file. MXML is a markup language,
an implementation of XML that was designed specifically for creating Flex
applications, and you use it to declaratively define the structure of your
application using tags.

ActionScript 3.0

You add dynamic behavior to your applications using ActionScript 3.0,
which is an implementation of ECMAScript and is similar to JavaScript.
You can add ActionScript to Flex applications directly in the MXML file as
script blocks or you can create separate files of ActionScript functions and
import them into your MXML files.

CSS

Style attributes in visual components (buttons, list boxes, and so on) are
controlled by component properties. For example, a button component has a
fontFamily property that you use to set the font. Style properties are controlled
by a theme, by styles defined in a CSS file, by styles defined in style blocks in an
MXML file, or by setting individual style properties in the component instance itself.

Graphic assets

Like most applications, Flex applications contain a variety of graphic assets such as
icons and other images.

Data

Some components are used to display data (a combo box or data grid for example)
and you can populate these components with data by using arrays, collection objects,
data models, external XML data sources, and so on.

Basic Elements of a Flex Application.

A typical Flex application consists of the following elements.

  • Flex framework
  • MXML
  • ActionScript 3.0
  • CSS
  • Graphic assets
  • Data

Generate XML data dynamically in Flex.

February 4, 2008
We may have a requirement were we wanted to generate XML data to send through Httpservice or create a XML page with it.

Then here to get that XML type data we could use a little bit of ActionScript code like below.

Here iam using XML Class and XMLList Class.

First iam defining my RootNode of type XML and then node name and node value of Type String and Then create a XMLList using this node name and node value,and then append this to XML RootNode using the method appendChild().Thats it ur XML data is created, now we can extend this to generate any number of XML lines type data.

Code Example:

private function createXML(): void
{
var xm:XML = <Relyon></Relyon>;
var nodeName:String = “EMPLOYEENAME”;
var nodeValue:String = “KUMAR”;
var xmlList:XMLList = XMLList(“<”+nodeName+”>”+nodeValue+”</”+nodeName+”>”);
xm.appendChild(xmlList);
Alert.show(xm);
}

continue reading…

fullscreen flex application

No comments

First thing here is that u have do is to mention the allowFullScreen property in the embed tag of ur Html page(wrapper), and set it to true.

December 20, 2007

allowFullScreen=”true”

and same thing in AC_FL_RunContent() method as

“allowFullScreen”, “true”

Now there is some code in the flex app we have to do.

1.import the required packages.

import flash.display.StageDisplayState;
import mx.managers.SystemManager;

2.Define a control on which u want to call the fullscreen option , here iam using button control.

<mx:Button label=”Alter-fullscreen” click=”toggleFullScreen()” x=”361″ y=”348″/>

3.Now define the function that mentioned in the button control to go to full screen.

private function toggleFullScreen():void

{
try
{
switch (systemManager.stage.displayState)
{
case StageDisplayState.FULL_SCREEN:
/* If already in full screen mode, switch to normal mode. */
systemManager.stage.displayState = StageDisplayState.NORMAL;
break;
default:
/* If not in full screen mode, switch to full screen mode. */
systemManager.stage.displayState = StageDisplayState.FULL_SCREEN;
break;
}
}

catch (err:SecurityError)
{
// ignore
}
}

Thats it, now when u click the button the window is set to fullscreen mode and viceversa.

Leave any comments for suggestions. this is how the fullscreen apperars.