Flexshishak's Blog

Flex Tutorials – Sorting Date’s on ArrayCollection in Flex

flexshishak — Wed, 16 Jun 2010 13:05:15 +0000

First things first, read about the mx.collections.Sort Class before going in to the code below.

About the Post,suppose i have a AC[ArrayCollection] like below;

[Bindable]
private var arrClldetails:ArrayCollection = new ArrayCollection([
{Fname:"Ravi", Lname:"chengalva", dob:"21 Sep 79"},
{Fname:"Ram", Lname:"Boda", dob:"11 Jun 80"},
{Fname:"Amatya", Lname:"kotamraju", dob:"16 July 81"},
{Fname:"Reddy", Lname:"Lakki", dob:"15 Feb 72"},
{Fname:"Shreya", Lname:"REddy", dob:"02 Jan 74"},
{Fname:"Gautam", Lname:"Goud", dob:"18 Oct 76"},
{Fname:"Shiva", Lname:"Dromraju", dob:"30 Mar 79"},
{Fname:"Suresh", Lname:"Vali", dob:"19 Dec 79"},
{Fname:"Kalyani", Lname:"Rayavarapu", dob:"05 Dec 80"},
{Fname:"Abhay", Lname:"Reddy", dob:"26 Apr 77"},
{Fname:"Priya", Lname:"chengalva", dob:"31 Mar 82"}
]);

Now i want to Sort the “dob” Date field in the AC.,so for this i need to write a compareFunction for Sort which in turn is applied to the AC like below,

//Compare Function
private function fnCompareFunction(ObjA:Object,ObjB:Object,fields:Array =
null):int
{
//fnDtfParceFunct is a Date parse function avail in DownloadCode.
var dateA:Date=fnDtfParceFunct(ObjA.dob,”DD/MM/YY”);
var dateB:Date=fnDtfParceFunct(ObjB.dob,”DD/MM/YY”);
return ObjectUtil.dateCompare(dateA, dateB);
}

Now apply this CompareFunction to Sort and then apply that to AC like below,

var sort:Sort=new Sort();
sort.compareFunction=fnCompareFunction;
arrClldetails.sort=sort;

Now refresh the AC for Sort to take effect,

arrClldetails.refresh();

Source code:

verticalAlign="middle">

import mx.controls.DateField;
import mx.utils.ObjectUtil;
import mx.collections.Sort;
import mx.collections.ArrayCollection;
[Bindable]
private var arrClldetails:ArrayCollection = new ArrayCollection([
{Fname:"Ravi", Lname:"chengalva", dob:"21 Sep 79"},
{Fname:"Ram", Lname:"Boda", dob:"11 Jun 80"},
{Fname:"Amatya", Lname:"kotamraju", dob:"16 July 81"},
{Fname:"Reddy", Lname:"Lakki", dob:"15 Feb 72"},
{Fname:"Shreya", Lname:"REddy", dob:"02 Jan 74"},
{Fname:"Gautam", Lname:"Goud", dob:"18 Oct 76"},
{Fname:"Shiva", Lname:"Dromraju", dob:"30 Mar 79"},
{Fname:"Suresh", Lname:"Vali", dob:"19 Dec 79"},
{Fname:"Kalyani", Lname:"Rayavarapu", dob:"05 Dec 80"},
{Fname:"Abhay", Lname:"Reddy", dob:"26 Apr 77"},
{Fname:"Priya", Lname:"chengalva", dob:"31 Mar 82"}
]);
private function fnClick():void
{
var sort:Sort=new Sort();
sort.compareFunction=fnCompareFunction;
arrClldetails.sort=sort;
arrClldetails.refresh();
}
private function fnCompareFunction(ObjA:Object,ObjB:Object,fields:Array =
null):int
{
var dateA:Date=fnDtfParceFunct(ObjA.dob,"DD/MM/YY");
var dateB:Date=fnDtfParceFunct(ObjB.dob,"DD/MM/YY");
return ObjectUtil.dateCompare(dateA, dateB);
}
public function fnDtfParceFunct(valueString:String, inputFormat:String):Date
{
return DateField.stringToDate(dateFormatter.format(valueString),inputFormat);
}
]]>

Flex 3 Custom validation of grouped input fields

flexshishak — Wed, 16 Jun 2010 11:33:36 +0000

Introduction

Flex 3 has nicely build-in validation mechanism, but sometimes you wish they had not embedded this so deep into the components, that customization becomes a laborish task. I have also read many articles on customizations of this mechanism, but I have not found a working solution to my specific wish. What I want is validation of single input fields, multiple input and arbitrary placement of errors besides the tooltip method.

Requirements

* Flex Builder 3
* Tutorial code (See step 7 for both files)

Steps

Now I am going to describe the steps I took to create this validator.
Step 1

I have created a Flex (web) project in my workspace. In this project I have 1 mxml file (my application file). I have named this ValidationTutorial.mxml.

xmlns:local="*">

In this mxml I will put 3 input field (day, month, year) in a hbox. Furthermore I will place a hidden Label below the hbox. These are my basic components that I will be using to demonstrate the multiple input validator

xmlns:local="*">

Step 2

Code our custom validator. Now we have to create the validator. file -> new -> actionscript class and call it BirthdayValidator (make it extend Validator). override the protected function doValidation, put a call to super.doValidation(value) in it and we have our foundation for the validator in place. Your actionscript class should look as follows

package {

public class BirthdayValidator extends Validator {

public function BirthdayValidator() {
super();
}

override protected function doValidation(value:Object):Array {
// Init the results array with the basic validation
var results:Array = super.doValidation(value);
return results;
}

}
}

Step 3

This is a relatively small step, but contains the magic that will enable me to validate and control the output regarding 3 input fields. Make a mental note of the valError element, which I will use later on.

{day.text}
{month.text}
{year.text}

Step 4

We define the validator and link all components together. this means we are going to tell the validator that the source for validation is our model and the results will be displayed in the label. If you now run the application, nothing will happen when tabbing across the fields. This is because we have not defined the triggers for the validator and the actual implementation of the validator.
We will put this on the last input with focusOut. The implementation for the validator is for tutorial purpose simple.

id="birthdayVal"
required="true"
source="{birthdayValidationModel}"
property="birthday"
listener="{errorMsgbirthdayValidationModel}"
trigger="{year}"
triggerEvent="focusOut"/>

We are now close to a working example.

Step 5

Now we define the invalid handler and the valid handler. These methods will contain code to set/unset validation texts. Configure them into the validator and edit the label so that it responds to the errors in it. When you have done this, you will see validation results below the inputs when you enter no values and focusOut on the year input (last input field).

id="birthdayVal"
required="true"
source="{birthdayValidationModel}"
property="birthday"
listener="{errorMsgbirthdayValidationModel}"
trigger="{year}"
triggerEvent="focusOut"
invalid="onInvalidHandler(event)"
valid="onValidHandler(event)"/>

And the methods….

/**
* Validationresult event handler. This function
* places the validation results into the appropriate
* label for error text placement beneath an input
* text.
*
* @param event Results of the input box(es) validation
*/
public static function onInvalidHandler( event:ValidationResultEvent ):void {
var _error:String = "";
var validator:Validator = event.target as Validator;
for each ( var result:ValidationResult in event.results ) {
_error+=result.errorCode;
}
// All validation results will be displayed in a label component
var errorLabel:Label = validator.listener as Label;
errorLabel.text = _error;
event.stopImmediatePropagation();
}

/**
* Validation result handler. This function removes all
* error texts from the error label for the current input
* component.
*
* @param event Results of the input box(es) validation
*/
public static function onValidHandler( event:ValidationResultEvent ):void {
var _error:String = "";
var validator:Validator = event.target as Validator;
// All validation results will be displayed in a label component
var errorLabel:Label = validator.listener as Label;
errorLabel.text = _error;
event.stopImmediatePropagation();
}

Step 6

Add styling. Just some nice sugar, but styling is everything. Add this styling to your ValidationTutorial.mxml And add the following method to the script to use this styling.
Add to the 3 input field the following property

styleName="{ValidatorUtil.showErrorBorder((birthdayValidationModel.birthday.valError
as XML), this.day)}"

Step 7

Now comes the 4th element in the mx:model into focus. When you run the application you will see deep blue borders, but they do not change to red borders were there is an error detected by the validation. For this to work we need to programaticly fill the error element to reflect the inputs that are invalid.
This we will do in the validator and a helper method in our ValidationTutorial.mxml

The BirthdayValidator

package {
import mx.validators.ValidationResult;
import mx.validators.Validator;

public class BirthdayValidator extends Validator {

private static const ERROR_START_ELEMENT_TAG:String = "";
private static const ERROR_END_ELEMENT_TAG:String = "";
private static const ERROR_DAY_TAG:String = "day";
private static const ERROR_MONTH_TAG:String = "month";
private static const ERROR_YEAR_TAG:String = "year";

public function BirthdayValidator() {
super();
}

override protected function doValidation(value:Object):Array {
var day:String = value.day;
var month:String = value.month;
var year:String = value.year;
var errorString:String = ERROR_START_ELEMENT_TAG;

// Init the results array with the basic validation
var results:Array = super.doValidation(value);
if (day == "" || day == null) {
// Texts and codes need to be refactered out of this util
// into a text file
results.push(new ValidationResult(true,
"day", "noDay", " No day"));
errorString += ERROR_DAY_TAG;
}
// Check month field.
if (month == "" || month == null) {
// Texts and codes need to be refactered out of this util
// into a text file
results.push(new ValidationResult(true,
"month", "noMonth", " No month"));
errorString += ERROR_MONTH_TAG;
}
// Check month field.
if (year == "" || year == null) {
// Texts and codes need to be refactered out of this util
// into a text file
results.push(new ValidationResult(true,
"year", "noYear", " No year"));
errorString += ERROR_YEAR_TAG;
}
errorString += ERROR_END_ELEMENT_TAG;
value.valError = new XML(errorString);
return results;
}

}
}

The ValidatorTutorial.mxml

xmlns:local="*">

.errorBorderStyle {

border-color: red;
border-style: solid;
border-thickness: 2px;
border-thickness-bottom: 2px;
border-thickness-left: 2px;
border-thickness-right: 2px;
border-thickness-top: 2px;

}

.defaultBorderStyle {

border-color: blue;
border-style: solid;
border-thickness: 2px;
border-thickness-bottom: 2px;
border-thickness-left: 2px;
border-thickness-right: 2px;
border-thickness-top: 2px;

}

import mx.core.UIComponent;
import mx.validators.ValidationResult;
import mx.validators.Validator;
import mx.events.ValidationResultEvent;

/**
* Validationresult event handler. This function
* places the validation results into the appropriate
* label for error text placement beneath an input
* text.
*
* @param event Results of the input box(es) validation
*/
public static function onInvalidHandler( event:ValidationResultEvent ):void {
var _error:String = "";
var validator:Validator = event.target as Validator;
for each ( var result:ValidationResult in event.results ) {
_error+=result.errorCode;
}
// All validation results will be displayed in a label component
var errorLabel:Label = validator.listener as Label;
errorLabel.text = _error;
event.stopImmediatePropagation();
}

/**
* Validation result handler. This function removes all
* error texts from the error label for the current input
* component.
*
* @param event Results of the input box(es) validation
*/
public static function onValidHandler( event:ValidationResultEvent ):void {
var _error:String = "";
var validator:Validator = event.target as Validator;
// All validation results will be displayed in a label component
var errorLabel:Label = validator.listener as Label;
errorLabel.text = _error;
event.stopImmediatePropagation();
}

/**
* Function reserved for complex objects. In this we mean mx:model
* type objects for multi input validations. (dates where day,month,year
* are seperated input controls).
*
* @param errors A xmllist of elements containing the controls that need
* or do not need error styling.
* @param input the control we like to style.
* @return the new styling information.
*/
public static function showErrorBorder( errors:XML, input:UIComponent ):String {
var styleName:String = "defaultBorderStyle";
// Check for not null, otherwise the flashplayer
// will silently ignore the nullpointer and break off
// any further styling for the target control
if ( errors != null && errors.error != null ) {
for each ( var error:XML in errors.error ) {
if ( error == input.id ) {
styleName = "errorBorderStyle";
break;
}
}
}
return styleName;
}

]]>

{day.text}
{month.text}
{year.text}

includeInLayout="{errorMsgbirthdayValidationModel.text!=”}"/>

id="birthdayVal"
required="true"
source="{birthdayValidationModel}"
property="birthday"
listener="{errorMsgbirthdayValidationModel}"
trigger="{year}"
triggerEvent="focusOut"
invalid="onInvalidHandler(event)"
valid="onValidHandler(event)"/>

Final note

And now the magic is complete. You have build a multiple input validator, with error message customization and placement. You can add many enhancement, that I will leave up to your imagination.

I hope you enjoy coding Flex/ActionScript as I do.

Hello world!

flexshishak — Wed, 16 Jun 2010 13:33:11 +0000

Welcome to WordPress.com. This is your first post. Edit or delete it and start blogging!

Flex Tutorials – Drag-and-Drop in Flex

flexshishak — Sun, 13 Jun 2010 18:42:13 +0000

Drag-and-drop lets you move components and transfer data in a Flex application via the mouse and ubiquitous "click-drag-drop" paradigm. All Flex components support drag-and-drop operations with the proper enablement.

Overview of Drag-and-Drop

Drag-and-drop operations have three main stages: initiation, dragging, and dropping.
Initiation, Dragging, and Dropping
Initiation of a drag-and-drop operation occurs when a "drag-enabled" component is selected with the mouse and moved while holding down the mouse button. The component selected and dragged is called the drag initiator. A drag source object is created for holding data related to the drag session.

Dragging occurs when the user, still holding down the mouse button, moves the drag initiator component around the application. While a component is being dragged Flex will display an image called a drag proxy.
Dropping is the action of releasing the drag initiator component over a drop target. A potential drop target can inspect the drag source and determine whether to allow (or accept) a drop.

Example:

We’re going to follow these steps to learn about Drag-and-Drop in Flex:
1.Create a Project and Application
2.Create some Boxes (one for dragging, one for dropping)
3.Make the Red Box Draggable
4.Make the Blue Box a Drop Target
5.Handle the Drop
6.Show Feedback
7.Use Drag Source

Step 1: Create a Project and Application

Create a Flex Project: FlexTutorials
First we’ll want to create a Flex Project to hold this, and potentially other, tutorial applications. If you’ve already completed another Flex After Dark Tutorial, you can use the same project, or a different one.
To create a new Flex project using Flex/Flash Builder:
1. Select File > New Flex Project
2. Give your project a name (i.e. FlexTutorials)

I’ve created a Flex Project for holding my tutorial application.

Create a Flex Application: DragDrop.mxml
Next we’ll create a new MXML Application called "DragDrop" (or anything you want really). This MXML file will hold all of our code for this tutorial.
To create a new Flex project using Flex/Flash Builder:
Select File > New MXML Application
Give your application a filename (i.e. DragDrop)
The fresh application will look something like the following code.

The fresh application will look something like the following code.

Let’s update the application code a little:
Change the layout attribute to be "vertical"
Add a name attribute with a value of "Drag and Drop Tutorial"

name="Drag and Drop Tutorial">

I’ve created a Flex Application for holding my Drag-and-Drop tutorial code.

Add an init() function
Next we’re going to finish our application setup by adding a block and init() function. The block will hold our application’s ActionScript and the init() function will be called when our application starts.
Add the and init() function:
Add a block to your application
Add an init() function (empty for now)
Call the init() function on creationComplete

name="Drag and Drop Tutorial"
creationComplete="init()">

public function init():void
{

}

]]>

We’re going to use the block in a future step to setup listeners.
I’ve added an init() function to my application’s .

Step 2: Create some Boxes

Create a Red Box and a Blue Box
Next were going to use MXML to create a Red Box and a Blue Box for our application. We’ll add the following code inside our tag in application’s MXML file.

We can now launch our application for the first time and see the results.
To launch your DragDrop application using Flex/Flash Builder:
Select Run > Run DragDrop from the main application menu
The result should look like this, with a Red Box and Blue Box.
We’ll start the fun drag-and-drop stuff in the next step.
I’ve created two boxes, one red and one blue, in MXML.

Step 3: Make the Red Box Draggable

Initiation of a drag-and-drop operation occurs when a "drag-enabled" component is selected with the mouse and moved while holding down the mouse button. The component selected and dragged is called the drag initiator.
Red Box listens for Mouse Event
To kick off a drag-n-drop, we’ll need to listen for a "mouse down" MouseEvent for the component to be dragged.
Add listener for MouseEvent.MOUSE_DOWN to the init() function
Determine drag initiator and call DragManager’s beginDrag() function

public function init():void
{
// a mouseDown event will start the drag
this.redBox.addEventListener( MouseEvent.MOUSE_DOWN, beginDrag );
}

public function beginDrag( mouseEvent:MouseEvent ):void
{
…
}

We’ll cover the beginDrag() method in the next step…
I’ve made the Red Box draggable by adding a "mouse down" listener.

Start the Drag using DragManager
Dragging occurs when the user, still holding down the mouse button, moves the drag initiator component around the application.
The mx.managers.DragManager class is used for managing drag-and-drop operations for Flex applications. All its methods and properties are static, so you do not need to create an instance of it.

Here we’ll fill in our beginDrag() function that handles our "mouse down" event.

import mx.core.DragSource;
import mx.core.IUIComponent;
import mx.managers.DragManager;
…

public function beginDrag( mouseEvent:MouseEvent ):void
{
// the drag initiator is the object being dragged (target of the mouse event)
var dragInitiator:IUIComponent = mouseEvent.currentTarget as IUIComponent;

// the drag source contains data about what’s being dragged
var dragSource:DragSource = new DragSource();

// ask the DragManger to begin the drag
DragManager.doDrag( dragInitiator, dragSource, mouseEvent, null );
}

The above code accomplishes the following:
We use the mouse event’s currentTarget (the Red Box) as the drag initiator
We create a drag source object (we’ll come back to this later in the tutorial)
We call the DragManager.doDrag() function to begin the drag operation

The Red Box is now draggable (though you can’t yet drop it anywhere).
I’ve drag-enabled the Red Box by passing it as a drag initiator to the DragManager.

Note the new imports we used in the above code:

import mx.core.DragSource;
import mx.core.IUIComponent;
import mx.managers.DragManager;

Step 4: Make the Blue Box a Drop Target

Our next step is to make the Blue Box a drop target capable of accepting a drop. To do this we must first add an event listener for the DragEvent.DRAG_ENTER event to our Blue Box.
The DragEvent.DRAG_ENTER event occurs when a drag initiator is dragged over another component during a drag-drop operation.

import mx.events.DragEvent;

…

public function init():void
{
// a mouseDown event will start the drag
this.redBox.addEventListener( MouseEvent.MOUSE_DOWN, beginDrag );

// accepting a drag/drop operation…
this.blueBox.addEventListener( DragEvent.DRAG_ENTER, acceptDrop );
}

public function acceptDrop( dragEvent:DragEvent ):void
{
…
}
We’ll code out the acceptDrop function next to actually accept the drop.
By adding a "drag enter" event listener.
Note the new import we used in the above code:
import mx.events.DragEvent;
Accept the Drop using DragManager
To accept the drop we must notify the DragManager with a drop target (the Blue
Box) in response to the DragEvent.DRAG_ENTER event.

public function acceptDrop(
dragEvent:DragEvent ):void
{
var dropTarget:IUIComponent = dragEvent.currentTarget as IUIComponent;

// accept the drop
DragManager.acceptDragDrop( dropTarget );
}

Now that we have accepted the drop we can let go of the Red Box on the Blue Box. Nothing exciting happens when we drop, yet, that’ll be in our next step when we handle the drop.

The Red Box can be dragged to and dropped on the Blue Box.
I’ve drop-enabled the Blue Box by passing it as a //drop target// to the DragManager.

Step 5: Handle the Drop

Handling the drop is the magic step of a drag-drop operation where your application performs the "business logic" of dragging an initiator to a target.
We are notified of a drop by adding a DragEvent.DRAG_DROP event listener on a drop target.

public function init():void
{
// a mouseDown event will start the drag
this.redBox.addEventListener( MouseEvent.MOUSE_DOWN, beginDrag );

// accepting a drag/drop operation…
this.blueBox.addEventListener( DragEvent.DRAG_ENTER, acceptDrop );

// handling the drop…
this.blueBox.addEventListener( DragEvent.DRAG_DROP, handleDrop );
}

public function handleDrop( dragEvent:DragEvent ):void
{
var dragInitiator:IUIComponent = dragEvent.dragInitiator;
var dropTarget:IUIComponent = dragEvent.currentTarget as IUIComponent;

Alert.show( "You dropped the Red Box on the Blue Box!" );
}

When the listener function of a DragEvent.DRAG_DROP event is called we can get the drag initiator and drop target from the event as seen in the code above.
Our example for this tutorial simply shows an Alert message when a drop is completed.

When the Red Box is dropped on the Blue Box we get alerted.
I’ve handled the drop by adding a "drag drop" event listener to the Blue Box.
Note the new import we used in the above code:

import mx.controls.Alert;

Step 6: Show Feedback

The DragManager provides a static showFeedback() function that can be used to display what type of drop operation will be performed. The feedback is shown as a small icon next the cursor when the drag initiator is over an accepting drop target.
DragManager feedback types:
COPY – signifies that the drop will copy some data
LINK – signifies that the drop will link some data
MOVE – signifies that the drop will move some data
NONE – no feedback (default)

public function acceptDrop(
dragEvent:DragEvent ):void
{
var dropTarget:IUIComponent = dragEvent.currentTarget as IUIComponent;

// accept the drop
DragManager.acceptDragDrop( dropTarget );

// show feedback
DragManager.showFeedback( DragManager.COPY );
}

The last line of code above shows how we call DragManager.showFeedback() passing the DragManager.COPY value. Notice now when the Red Box is held over the Blue Box we get a green "copy" icon next to the cursor showing the drag-drop operation will copy some data.

Thanks to feedback, the drop icon is now different, showing a "copy" action will
be performed.
I’ve enhanced the drag-drop by adding feedback support via the DragManager.

Step 7: Use Drag Source

Back in Step 3 when we started the drag operation you may remember that we created a DragSource object to pass to the DragManager.doDrag() function.
A DragSource object is used to communicate data between the components of a drag-drop operation. We do this by putting data in the drag source when the drag begins that we can then inspect when deciding whether or not to accept a drop.
Below we’ll modify our beginDrag() code to add data to the drag source using the addData() function.
The addData() function takes two arguments:
data:Object – object that specifies the drag data
format:String – specifies the format of the data

// the drag source contains data about what’s being dragged
var dragSource:DragSource = new DragSource();

// add some information to the drag source
dragSource.addData( "Red", "color" );

// ask the DragManger to begin the drag
DragManager.doDrag( dragInitiator, dragSource, mouseEvent, null );
}

Now we’ll modify our acceptDrop() function to only accept the drag-drop if the drag source has format data for the color (which we added above). To do this we get the dragSource property from the dragEvent and check if it has data of a specified format by calling dragSource.hasFormat() passing the format we’re looking for ("color").

public function acceptDrop(
dragEvent:DragEvent ):void
{
var dropTarget:IUIComponent = dragEvent.currentTarget as IUIComponent;
var dragSource:DragSource = dragEvent.dragSource;

// accept the drop if the drag source has a "color" format
if( dragSource.hasFormat( "color" ) )
{
DragManager.acceptDragDrop( dropTarget );
}
}

Obviously the drag source example we’ve used is quite simple, but we could put any data/format in the drag source to enable smart drag-drop operations.

Use DragSource to communicate data between the components of a drag-drop operation.
I’ve enhanced the drag-drop by adding information to the DragSource object.

Click here to view the Demo

AIR Tutorials – How to keep WindowApplication on top of the applications in AIR

flexshishak — Sun, 13 Jun 2010 17:45:08 +0000

The following example shows how you can keep a WindowedApplication container on top of other windows in Adobe AIR by setting the Boolean alwaysInFront property.

xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
alwaysInFront="{checkBox.selected}">

AIR Tutorials – How to open a NativeWindow in Adobe AIR?

flexshishak — Sun, 13 Jun 2010 14:46:13 +0000

The following example shows how you can launch a new “normal” or “utility” NativeWindow container in Adobe AIR by creating a NativeWindowInitOptions object, specifying the type property to one of the static constants in the NativeWindowType class, and passing the NativeWindowInitOptions object to the NativeWindow constructor.

And from the documentation:

Constants for the valid values of this property are defined in the NativeWindowType class:

* NativeWindowType.NORMAL — A typical window. Normal windows use full-size chrome and appear on the Windows task bar and the Mac OS X window menu.
* NativeWindowType.UTILITY — A tool palette. Utility windows use a slimmer version of the system chrome and do not appear on the Windows task bar and the Mac OS-X window menu.

* NativeWindowType.LIGHTWEIGHT — lightweight windows cannot have system chrome and do not appear on the Windows task bar and the Mac OS X window menu. In addition, lightweight windows do not have the System (Alt-Space) menu on Windows. Lightweight windows are suitable for notification bubbles and controls such as combo-boxes that open a short-lived display area. When the lightweight type is used, systemChrome must be set to none.

Normal Window

Utility Window

xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical">

private var opts:NativeWindowInitOptions;
private var win:NativeWindow;

private function btn_click():void {
opts = new NativeWindowInitOptions();
opts.type = cBox.selectedItem.toString();

win = new NativeWindow(opts);
win.title = opts.type;
win.width = 320;
win.height = 200;
win.activate();
}
]]>

click="btn_click();" />

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
initialize="init();">

import mx.containers.ApplicationControlBar;
import mx.controls.Button;
import mx.controls.ComboBox;
import mx.controls.Label;

private var opts:NativeWindowInitOptions;
private var win:NativeWindow;
private var cBox:ComboBox;

private function init():void {
var arr:Array = [NativeWindowType.NORMAL, NativeWindowType.UTILITY];

var lbl:Label = new Label();
lbl.text = "type:";

cBox = new ComboBox();
cBox.dataProvider = arr;

var appControlBar:ApplicationControlBar = new ApplicationControlBar();
appControlBar.dock = true;
appControlBar.addChild(lbl);
appControlBar.addChild(cBox);
addChildAt(appControlBar, 0);

var btn:Button = new Button();
btn.label = "Launch window";
btn.addEventListener(MouseEvent.CLICK, btn_click);
addChild(btn);
}

private function btn_click(evt:MouseEvent):void {
opts = new NativeWindowInitOptions();
opts.type = cBox.selectedItem.toString();

win = new NativeWindow(opts);
win.title = opts.type;
win.width = 320;
win.height = 200;
win.activate();
}
]]>

Flex Tutorials – Module Based Application In Flex 3.0

flexshishak — Sat, 12 Jun 2010 10:47:46 +0000

Flex Modules are code functionality compiled to dynamically-loadable SWF files that can be loaded and unloaded by an application at run-time.

Modules let you split your application into several pieces, or modules. The main application, or loader, can dynamically load other modules that it requires, when it needs them. It does not have to load all modules when it starts, nor does it have to load any modules if the user does not interact with them.

Any number of applications can share a module, but a module cannot be run by itself, independently of an application.

Using Module in flex 3.0 based application is one of the best approach from the performance perspective. The importance of the module based application increases when this is a big one application.One of the major benifit by using module is the independecy during development phase. Let uppose I am dividing my Project in 3 modules for the assigment of development to 3 developers.Now these 3 people can develop their own module(here module is reffering general term of Software Engineering)by using the Module(Flex 3.0′s Module).The another and main benifit is related to the performance.Let suppose my final swf’s size is 3 MB. So for using the application we have to load this 3 MB’s SWf. But let suppose I divide my Application in 3 modules then definetly the size of the Module will be one third of the Application.Now when I have to use the first Module I will load only it.When I have to use Second Module I Will simply unload the first one and will Load Second one.Hence my memory Consumption will be One by third of the Earlear non Module based approach.Further we can also divide a Module in to the other Modules so this can be done up to any level.The important thing is to divide your needs in such small unit of requirements. This will increase your performance in a amazing way. Here one thing which should must added is that the swf generated after the compilation of the Module will not show you any thing if you will run it separetly. If you have to use it then it is must to load it at Application level. It is also allowed that if you load a module A into another module B then only after Loading B at Application level you can access module A.

Its all the theory related to the Modules now come to the implementation…………………………..

Open your Flex Builder and create a new Flex Project as I named it ‘ModuleBasedApplication’.Now
under the ’src’ folder create the folder structure as I have created.Here I am creating three folders under ‘modules’ folder named ‘mod1′,’mod2′ and ‘mod3′ for putting three modules.Look at Below.

Now you Have to place Module inside mod1,mod2 and mod3 folders.Just goto File > New >MXML Module as below.Name it ‘Mod1′ and then put it into ‘mod1′.Simlarly create ‘Mod2′ Module in ‘mod2′ folder and ‘Mod3′ Module in ‘mod3′ folder.

Now you have added the modules and you can code according to your use,for example I have simply placed one Label inside each which is just showing the name of that particular Module i.e Mod1,Mod2 or Mod3.Now go to the ‘Properties‘ of you project on Right Mouse Pressing on it you will find a window on the left of which you can see the ‘Flex Modules’ tab.Just click on this tab.A window with title ‘Flex Modules’ will open.At the right corner of this window is a ‘Add’ button click on it,‘Add Module’ window will open.Click on the ‘Borwse’ button then you will find ‘Select Module‘ window.Now just select the Module which you have to add as here ‘Mod1.MXML’ is selected,and then click OK’.Again click ‘OK’ on ‘Add Module’ window.

Similarly add all other Modules.Yours Modules has been added and now just compile your project.After building it you will find the structure as below your project’s ‘bin-debug’ folder.

Now I am giving you the code related to the Application file in which I am showing these modules separetly on the click of a tab of TabBar.On click of each tab a separate module is can be seen.Just copy and paste the code below into your Application file i.e. main file.

width=”60%” height=”60%” left=”15″ right=”15″ top=”15″ bottom=”15″
backgroundColor=”#000000″>

import mx.collections.ArrayCollection;

private var acTabBar:ArrayCollection=new ArrayCollection([
{data:'tab1',label:'tab1'},
{data:'tab2',label:'tab2'},
{data:'tab3',label:'tab3'}
])
]]>

bottom=”150″>

height=”100%”/>
height=”100%”/>
height=”100%”/>

After this once again compile your Application.You will find a TabBar there as below on the click of which’s tabs you will find different modules.

Click here to view the Demo

Flex Tutorial – Using Image Inside the Sprite in Flex

flexshishak — Sat, 12 Jun 2010 09:41:25 +0000

If we want to add any Image inside the Sprite class in flex,then It is not possible to add image inside the sprite. But if your requirement is as such in that case you can achieve this by adding the Loader inside the sprite. Below is the code for the same.

MainApplication.mxml

layout="absolute" creationComplete="createSpriteWithBitmap()">

import mx.controls.Image;
private function createSpriteWithBitmap():void
{
var sp : SpriteWithBitmap = new SpriteWithBitmap();
can.rawChildren.addChild( sp );
}
]]>

SpriteWithBitmap (actionscript file)

package
{
import flash.display.Loader;
import flash.display.Sprite;
import flash.events.*;
import flash.net.URLRequest;

import mx.controls.Alert;

public class SpriteWithBitmap extends Sprite
{
//Pass the source path or url here.
private var url:String = "http://flexmaster.blog.co.in/files/2010/06/lotusflower.jpeg";

public function SpriteWithBitmap()
{
loadImg();
}
private function loadImg():void
{
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, loadFailure);
var request:URLRequest = new URLRequest(url);
loader.load(request);
this.addChild(loader);
}

private function loadFailure(event:IOErrorEvent):void
{
Alert.show("Can’t load :" + url);
}
}

}

Click here to view the Demo

Adobe AIR and SQLite Connectivity

flexshishak — Sat, 12 Jun 2010 09:25:09 +0000

Abode AIR provides very easy mechanism to connect to the SQLite.I am doing the connectivity by coding. Here nothing different just create the connection and create the SQLConnection,open it, create SQLStatement and execute them, close connection.Upto my experience I think this is the same common way which we used in any database connectivity. So there is nothing special. I found this process very cool especially due the portable size of the SQLite and creating and deleting the database in just one mouse click. Apart form this you don’t require any thing else Flex Builder IDE with AIR. There is no software requirement for the SQLite.
I am just putting some line of code for your better understanding. You can just copy and paste it. Although Its just a small code but hope it will give you the over all idea about dealing with the database in an AIR application.

Screen shot of Air and Sqlite Application

Example:

layout=”vertical” creationComplete=”init()”
width=”500” height=”400” backgroundColor=”#000000“>

import mx.controls.Alert;
import mx.collections.ArrayCollection;
import flash.data.*;

private var ob:Array=new Array();
public var mysqlConnection:SQLConnection;
public var _createProdct:SQLStatement;
public var _insertProduct:SQLStatement;
public var _selectProduct:SQLStatement;

private const _counterProduct:int = 1;
private var databaseFile:File =
File.applicationStorageDirectory.resolvePath("data.db");
private const CREATE_PRODUCT_TABLE:String =
"CREATE TABLE product (id INTEGER PRIMARY KEY,name TEXT," +
"department TEXT, title TEXT, description TEXT);"

private var _id:int;
private var _name:String;
private var _department:String;
private var _title:String;
private var _description:String;

private var INSERT_PRODUCT:String;
private const SELECT_PRODUCT:String = "SELECT * FROM product";

public function createDatabase(databaseFile:File, productCount:int):void
{
if ((databaseFile != null) && (databaseFile.exists))
{
databaseFile.deleteFile();
dg1.dataProvider=null;
Alert.show("Database Created Successfully.");
}

if (productCount < 1)
{
productCount = 1;
}

mysqlConnection = new SQLConnection();
mysqlConnection.open(databaseFile, SQLMode.CREATE);
mysqlConnection.close();
schemaGeneration();
}

public function deleteDatabase():void
{
if ((databaseFile != null) && (databaseFile.exists))
{
databaseFile.deleteFile();
dg1.dataProvider=null;
Alert.show("Database Deleted Successfully.");
}
else
{
Alert.show("There is no database to Delete.");
}
}

private function schemaGeneration():void
{
var sqlStatement:SQLStatement = new SQLStatement();
mysqlConnection=new SQLConnection();
sqlStatement.sqlConnection = mysqlConnection;
mysqlConnection.open(databaseFile, SQLMode.CREATE);
sqlStatement.text = CREATE_PRODUCT_TABLE;
sqlStatement.execute();
mysqlConnection.close();
}

private function createInsertStatements():void
{
if((txt1.text !="")&&(txt2.text !="")&&(txt3.text !="")
&&(txt4.text !=""))
{
_id=0;
_name=txt1.text;
_department=txt2.text;
_title=txt3.text;
_description=txt4.text;

if((databaseFile != null) && (databaseFile.exists))
{
INSERT_PRODUCT="INSERT INTO product (id, name, department, title, description)"
+
" VALUES ("+"((SELECT max(id) FROM product)+1)"+",'"+_name+"','"+_department+
"','"+_title+"','"+_description+"');";
_insertProduct =new SQLStatement();
mysqlConnection=new SQLConnection();
_insertProduct.sqlConnection= mysqlConnection;
mysqlConnection.open(databaseFile, SQLMode.CREATE);
_insertProduct.text = INSERT_PRODUCT;
_insertProduct.execute();
mysqlConnection.close();
createSelectStatements();
clearAll();
}
else
{
Alert.show("There is no database so please create it First.");
}
}
else
{
Alert.show("Please enter the proper values For all the relative fields.");
}
}

private function createSelectStatements():void
{
_selectProduct =new SQLStatement();
mysqlConnection=new SQLConnection();
_selectProduct.sqlConnection = mysqlConnection;
mysqlConnection.open(databaseFile,SQLMode.READ);
_selectProduct.text = SELECT_PRODUCT;
_selectProduct.execute();
ob=_selectProduct.getResult().data;
mysqlConnection.close();
dg1.dataProvider=ob;
}

private function clearAll():void
{
txt1.text="";
txt2.text="";
txt3.text="";
txt4.text="";
}
]]>

textAlign=”center“/>

headerText=”Name” textAlign=”center“/>

headerText=”Department” textAlign=”center“/>

headerText=”Title” textAlign=”center“/>

headerText=”Description” textAlign=”center“/>

click=”createDatabase(databaseFile,_counterProduct)”/>

click=”createInsertStatements()”/>
click=”deleteDatabase()”/>

Have you built any components with actionscript? If so explain how you did it?

flexshishak — Fri, 11 Jun 2010 17:21:41 +0000

You can create reusable components that use ActionScript, and reference these components in your Flex applications as MXML tags. Components created in ActionScript can contain graphical elements, define custom business logic, or extend existing Flex components. They can inherit from any components available in Flex.

Defining your own components in ActionScript has several benefits. Components let you divide your applications into individual modules that you can develop and maintain separately. By implementing commonly used logic within custom components, you can build a suite of reusable components that you can share among multiple Flex applications.

Also, you can base your custom components on the set of Flex components by extending from the Flex class hierarchy. You can create custom versions of Flex visual controls, as well as custom versions on nonvisual components, such as data validators, formatters, and effects.

For example, you can define a custom button, derived from the Button control, in the myControls package, as the following example shows:

Flex Builder also has a wizard to help you create ActionScript components. To use it, select File > New > ActionScript Class. Because all classes must be in packages (like Java), you have the option of selecting a package name (if you don’t, you get the default unnamed package). The wizard also allows you to select a superclass. In the following example I’ve specified that the wizard
should automatically generate the framework for the constructor:

package SimpleComponents {
import mx.controls.Button;

public class ASRedButton extends Button {
public function ASRedButton() {
super();
}
}
}

The import statement was automatically created by Flex Builder, and the file’s name is ASRedButton.as. Although the component is created in ActionScript, it is available as MXML:

xmlns:SimpleComponents="SimpleComponents.*">