Key Features of Mobile Development in Flex and Flash Builder 4.5

With the release of Flash Builder 4.5, you can now create Flex application development for Android, BlackBerry Tablet OS or iOS devices using the same workflow you use to build web or desktop applications today. The mobile development features in Flex and Flash Builder 4.5 provide several key features:

• Many of the core Flex components have been made mobile-ready, so when you use them in a mobile application, they automatically appear with skins and interactions optimized for small screens and touch input.
• Unlike web or desktop applications, mobile applications are typically structured around a series of simple views, as shown in the diagram above. Flex 4.5 provides View and View Navigator components to make it easy to build these types of applications.
• Flex provides mechanisms to make it easier for your application to adapt across screens with different pixel densities—a common problem in mobile development.
• The core Flex components have been optimized in order to perform well on devices with limited memory and CPU speed.
• Mobile applications built with Flex 4.5 use the AIR runtime, and are packaged using the native application format on each device, so they can be deployed and sold on application stores or markets the same way as native applications on each platform.

Source: http://www.adobe.com/devnet/flex/articles/twitter-trends.html

Read more...

Embedding a sprite sheet with ActionScript

You can embed images in ActionScript through the use of the Embed metadata tag. (Read Embedding metadata with Flash for more information.) Once they're embedded, you can create an instance of the class and attach it to the display list, as in ActionScriptBlittingPart1.as.

ActionScriptBlittingPart1.as (Example 1)
------------------------------------------------------------------
package
{ import flash.display.Sprite;
[SWF(width=480, height=320, frameRate=24, backgroundColor=0xE2E2E2)]
public class ActionScriptBlittingPart1 extends Sprite
{
public function ActionScriptBlittingPart1()
{
addChild(new BrownCollector());
}
[Embed(source="spritesheets/browncollector.png")]
public var BrownCollector:Class;
}
}
---------------------------------------------------------------------
To run the first example, follow these steps:
In the Package Explorer, right-click ActionScriptBlittingPart1.as and select Run Application.
When your browser opens, you should see the entire PNG image from browncollector.png with all the tiles (Example 1).
Close the browser window.
Read more...

How to setting a ActionScript for blitting techniques and Flash Builder 4

For games with lots of animations on the screen that can be pre-rendered into a bitmap image, a technique known as blitting can provide a solution. Blitting is not the answer to every performance problem but it will be smooth, uniform, the speed of animation frames in a wide range of machines. The term comes from BitBLT blitting routine created for the Xerox Alto. BitBLT, pronounced "blit bit" block average (images) transfer, a technique that takes several bitmaps and combines them into a single bitmap. In Flash Player, it is faster to copy the pixels in a bitmap representation of a bitmap that make every DisplayObject separately.

What is a sprite sheet?

A set consists of graphic elements, such as a car on a circuit or a tree in a forest. For this article, these assets will be bitmaps. A group of bitmaps together in an image file called a sprite sheet. For example, a sheet of sprites can contain all the frames in an animation of a nature walk. The term derives from the sprites, which, in the world of computer graphics, image or animation embedded in a big stage. Although the technique can be used blitting bitmap data from different sources, this article will focus on the sprite sheets.

What is a sprite sheet?

A sprite sheet may be a combination of all sorts of bitmap sizes. Assembling all the graphics in one (or few) large file image to reduce load times (which is faster to open and read a large file containing 100 images to open and read smaller files 100) and provides the benefits of compression. Sprite Sheets bitmaps typically the same size as the form of a sequence or an animation around a particular set of assets. For example, the sprite sheet used in this tutorial consists of five columns and four rows of tiles 40 x 40 pixels, each with a coffee picker

Setting ActionScript

Before you can try the sample code, follow these steps to create the project in Flex Builder 4:

Download and unzip the sample files for this tutorial.

Select File> New> ActionScript plan to set up a project.

Sign ActionScriptBlitting the project name and click Finish.

Copy files and folders of files displayed in the default package of the project. The folder contains files used by the PNG spritesheets ActionScript examples.

In the Package Explorer, right-click the project you just created ActionScriptBlitting and select Properties.

In the Properties dialog box, click Applications ActionScript.

Click Add, select the sample, then click OK.

Repeat step 7 for the other sample.

Click OK.

Now you have all the code examples in Flash Builder 4, and you will be able to run all examples.
Read more...

The components and ViewStack TabNavigator

The components and ViewStack TabNavigator in flex is quite simple but some of my flex developer friends are getting some problem while creating this component this code is usefule if you want to use it to interface a page or screen. the best way to use a component of this type is tabnavigator component.

Here is an example of using TabNavigator which incorporates

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
    <mx:TabNavigator width="400" height="240">
        <mx:Form label="Nom" icon="@Embed(source='./application_form.png')">
            <mx:FormItem label="Prénom">
                <mx:TextInput id="first"/>
            </mx:FormItem>
            <mx:FormItem label="Middle Name">
                <mx:TextInput id="middle"/>
            </mx:FormItem>
            <mx:FormItem label="Last Name">
                <mx:TextInput id="last"/>
            </mx:FormItem>
        </mx:Form>
        <mx:Form label="Commentaires" width="100%" height="100%">
            <mx:FormItem label="Commentaires">
                <mx:TextArea width="200" height="100" id="comments"/>
            </mx:FormItem>
        </mx:Form>
    </mx:TabNavigator>
</mx:Application>

Read more...

Spark ButtonBar control in Flex 4 for Setting a fixed button width

Given coding is about creating custom horizontal layout and setting the columnwidth and variablecolumnwidth properties in flex 4 to put fixed button width on speark buttonbar control

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/12/10/setting-a-fixed-button-width-on-a-spark-buttonbar-control-in-flex-4/ -->
<s:Application name="Spark_ButtonBar_layout_columnWidth_test"
               xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx">

    <s:ButtonBar id="bBar" horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:HorizontalLayout gap="-1" columnWidth="80" variableColumnWidth="false" />
        </s:layout>
        <s:dataProvider>
            <s:ArrayList source="[Red,Halo Orange,Yellow,Halo Green,Halo Blue,A,The quick brown fox]" />
        </s:dataProvider>
    </s:ButtonBar>

</s:Application>

Read more...

Help to Securing the Client With Chimp in Flex Enterprise Secrity

Chimp is ideal for filtering user interface components on the client side

This post will guid in how you implement your server, the key is that you have truly secured your services and data on the server side, as that should be the heart of your security implementation.

I will guid you how to review or authenticating users in Flex through the ChannelSet, and then i will discuss filtering what users are able to see based on their roles or grants.

User must be aythenticated before clip can be used to protect user interface componets. Channelset for accessing blazeds services are used in flex To authenticate user. In the Flex authentication code below a userService remote object is created. The username and password parameters come from a login form and are passed to the authenticate function. On a successful login, the loginResultEvent handler function is called, and post login logic can be invoked.


<mx:AMFChannel id="myamf" uri="http://localhost:8080/spring/messagebroker/amf"/>
<mx:ChannelSet id="channelSet" channels="{[myamf]}"/>
<mx:RemoteObject id="userService" destination="userService" showBusyCursor="true"
channelSet="{channelSet}"/>
<mx:Script>
    <![CDATA[
            protected function authenticate(username:String, password:String) : void {
                     var token:AsyncToken = userService.channelSet.login(username, password);
                     token.addResponder(new ItemResponder(loginResultEvent, loginFaultEvent));
            }

            private function loginResultEvent(event:ResultEvent, token:AsyncToken):void {
                 //DO post login stuff
            }
   ]]>
</mx:Script>

Adding Chimp to your project

Begin with Chimp by adding the SWC file to your Flex application. First, download the chimp.swc Google Code. In a standard Flex Builder project, follow these steps to add the file to your project library: file from

1. Right click the project name in the Project Explorer view
2. Select Properties
3. Select Flex Build Path
4. Select Library path
5. Click Add SWC
6. Browse to chimp.swc (see Figure 1)
7. Click "Ok"

Next, you need to update your project to keep the metadata used by Chimp. In a standard Flex Builder project, follow these steps to tell the Flex compiler to keep the metadata:

1. Right click the project name in the Project Explorer view
2. Select Properties
3. Select Flex Compiler
4. Add the following to the Additional Compiler Arguments (See Figure 2):
   -keep-as3-metadata+=Protected
5. Click OK

Loading Chimp in a Flex Application

The simplest way to load Chimp before the user interface components is to use the Flex preinitialize event of the application.

private function preintializeHandler(event:Event):void { 
Chimp.load(null); 
}

Loading users and permissions
Chimp is now added and loaded into the Flex application. Next, the permissions that will be used to determine what the user can see need to be loaded from Spring.

public class UserIdentity {
     private String username;
     private List roles;
     public User getUser() {
           return user;
     }
     public void setUser(User user) {
           this.user = user;
     }
      public List getRoles() {
           return roles;
      }
      public void setRoles(List roles) {
           this.roles = roles;
      }
}

The UserIdentity object is assembled from the Spring SecurityContextHolder:


    public UserIdentity getUserIdentity() {
    UserIdentity ui = new UserIdentity();

    //set user name
   ui.setUsername(userDao.getUser(SecurityContextHolder.getContext().getAuthentication().getName()));

    //set string permissions
    List&lt;String&gt; perms = new ArrayList&lt;String&gt;();
    GrantedAuthority[] gas = SecurityContextHolder.getContext().getAuthentication().getAuthorities();
    for(int i=0; i &lt; gas.length; i++) {
        perms.add(gas[i].getAuthority());
    }

    ui.setRoles(perms);
    //return user identity object
    return ui;
}

After doing this Flex application will call the getUserIdentity() method after successfully authenticating the user:


public var userService:RemoteObject;

private function loginResultEvent(event:ResultEvent, token:AsyncToken):void {
    var userIdentityToken:AsyncToken = userService.getUserIdentity();
    userIdentityToken.addResponder(new ItemResponder(userIdentityEvent, faultEvent));
}

private function userIdentityEvent(event:ResultEvent, token:AsyncToken):void {
    //set user permissions on Chimp
    Chimp.updatePerms(event.result.roles);
}

After the user is successfully authenticated, the user identity information is loaded and the permissions are updated on the instance of the Chimp library. This information is used with the metadata to restrict what the user can see in the Flex user interface.

Adding metadata

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="/2006/mxml">
    <mx:Metadata>
       [Protected(permissions="admin",notInPermissionAction="removeChild",componentId="box2")]
       [Protected(permissions="admin",notInPermissionAction="removeFromLayout",componentId="p2")]
       [Protected(permissions="admin",inPermissionAction="visible",componentId="adminButton")]
       [Protected(permissions="user",inPermissionAction="enable",componentId="updateButton")]
     </mx:Metadata>
    <mx:Button id="adminButton" label="Admin Button" visible="false"  />
    <mx:Button id="updateButton" label="Update Button" enabled="false" />
    <mx:HBox>
        <mx:Panel id="p1" title="Panel 1" backgroundColor="#FF0000"/>
        <mx:Panel id="p2" title="Panel 2" backgroundColor="#00FF00"/>
        <mx:Panel id="p3" title="Panel 3" backgroundColor="#0000FF"/>
    </mx:HBox>
    <mx:TabNavigator id="tabNav" width="300" height="300">
        <mx:VBox id="box1" width="100%" height="100%" label="Tab One">
            <mx:Text text="first tab" />
        </mx:VBox>
        <mx:VBox id="box2" width="100%" height="100%" label="Tab Two">
            <mx:Text text="second tab" />
        </mx:VBox>      
        <mx:VBox id="box3" width="100%" height="100%" label="Tab Three">
            <mx:Text text="third tab" />
        </mx:VBox>      
    </mx:TabNavigator>   
</mx:VBox>

The line below removes the second box in the tab navigator if the "admin" permission is not found. A removeChild is used because a removeFromLayout does not work with the TabNavigator component. The removeFromLayout option is preferred when it works, because it is less aggressive and has more predictable behavior if the "admin" permissions are provided at a later time.

[Protected(permissions="admin",notInPermissionAction="removeChild",componentId="box2")]

With the following line, if the "admin" permission is not found, the second panel in the HBox is removed from the layout so that it is no longer visible:

[Protected(permissions="admin",notInPermissionAction="removeFromLayout",componentId="p2")]

Below, the adminButton is made visible if the user has the "admin" permission:

[Protected(permissions="admin",inPermissionAction="visible",componentId="adminButton")]

And Finally, the updateButton is enabled if the user has the "user" permission

[Protected(permissions="user",inPermissionAction="enable",componentId="updateButton")]

The protected annotation is fairly simple to use. It has the following properties:

• permissions: The permissions property expects a comma delimited string of the string permissions to use for the protected operation.
• componentId: This componentId is the string name of the component that is to be protected. This can be omitted or set to ‘this' for the current component. To protect a child, set the componentId to the ‘id' string of the component.
• notInPermissionAction: The notInPermissionAction is invoked if the user does not have any of the permissions (use only this or inPermissionAction – not both).
• inPermissionAction: The inPermissionAction is invoked if the user has any of the permissions (use only this or notInPermissionAction – not both). 

The notInPermissionAction and inPermissionAction properties invoke actions on the target component. They can take the following values:

• removeChild : Removes the component completely, by calling ‘comp.parent.removeChild().'
• removeFromLayout : Use the includeInLayout property to remove components.
• invisible: Sets the compl.visible property to false.
• visible: Sets the comp.visible property to true.
• disable: Sets the comp.enable property to false.
• enable: Sets the comp.enable property to true. 

As you can see, the Chimp library is straightforward to use inside of a Flex application. Once installed and loaded into the application, it provides a simple and elegant way to manage permissions of the view components.
Source

Read more...

Using the ProgressBar with a file download in Flex

when you are working with some time consuming procedure while flex application development you dont have information or idea about the progress. It is true that flex provides nice moving clock to let you know that you are doing something.

You might have idea about adobe provided the ProgressBar with flex to experiment the same ProgressBar with file download  from the server Try the given code.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" viewSourceURL="srcview/index.html">

<mx:Script>
    <![CDATA[
       
        [Bindable]
        private var fileRef:FileReference = null;
       
        private function downloadFile():void{
           
            var urlRequest:URLRequest = new URLRequest("http://www.flex-blog.com/samples/sample3/wallpaper.jpg");

            fileRef = new FileReference();
            fileRef.download(urlRequest, "wallpaper.jpg");
            fileRef.addEventListener(ProgressEvent.PROGRESS, setDownloadProgress);
            fileRef.addEventListener(Event.COMPLETE, completeHandler);

           
        }
       
        private function setDownloadProgress(event:ProgressEvent):void{
           
            pbProgress.setProgress(event.bytesLoaded, event.bytesTotal);

            pbProgress.label = "Downloading [" + Math.round(event.bytesLoaded / event.bytesTotal * 100).toString() + "%]";
           
        }
       
        private function completeHandler(event:Event):void{
           
            fileRef = null;
           
        }       
       
    ]]>
</mx:Script>

<mx:VBox top="10" left="10">

    <mx:Text buttonMode="true" click="downloadFile()" text="Download Wallpaper" textDecoration="underline" fontSize="12"/>

    <mx:ProgressBar visible="{fileRef != null}" mode="manual" label="" id="pbProgress" labelPlacement="center"/>

</mx:VBox>
</mx:Application>

Read more...