Balsamiq Mockup is a greate mockup tool. It is used to create mockups and wireframes to demonstrate the UI of an application. It is available in the web version as well as it also available in desktop version(built on AIR).

The main features of this tool is that it will easily convert your mockups to the a human readable format called BMML. If you can write some script you can convert the BMML format to your actual code. Now, the MidnightCoders along with Balsamiq enables you to convert Balsamiq mockups directly into your Flex apps.. This feature is really awesome…

This is not enough… there are few more things.. you can use this tool and create a mockups after that you can export that mockups when your mockup ready. You can downlaod exported file in zip file and the exported zip file contains MXML as well as Actionscript files along with server code implemented in PHP, VB.NET, C#, and Java. In the generated mockups the client-side code will have the same component as you have used in the mockups wheras the server-side code will have all datas from the controls in the mockup to the corresponding controls in the Flex application.

You can get more information about the generate flex code from mockups also you can take a look and Play around with Balsamiq mockups and find out more about it and MidnightCoders.

If you have any query and dobuts then feel free to disucss it with me.

Flex in a Week video training is one of the best resources to start learning Flex. India Platform Evangelism team has given more reasons to learn Flex in a week by going through this video training course.

Go through the course and complete the Flex in a Week Challenge, you can get a cool badge you can sport on your website, blog or any other place where you think it will be useful. There are tee shirts also to be won by top 25 scorers and the first 25 users who clear the challenge.

If you already know Flex, take Flex in a Week challenge and get a badge for yourself and sport it to everyone

Please find more details at this URL http://flashahead.adobe.com/challenges/

India Platform Evangelism team also took couple of initiatives to communicate with the community easily. You can follow any of the following to get updates from the team and information about the various events and activities

Portal – http://flashahead.adobe.com

Blog – http://flashahead.wordpress.com

Twitter – http://twitter.com/flashahead

Indeterminate ProgressBar control shows time-based processes for which the scope of task is not yet determine. As soon as you can determine the scope, you should use a determinate ProgressBar control.

Determinate ProgressBar control is a linear representation of the progress of a task over time. You use a determinate ProgressBar when the scope of the task is known. It displays when the user has to wait for an extended amount of time.
You can create a progress bar by:

If progress bar mode is manually You can set progress bar value manually but The ProgressBar control shows a visual progress of a task over time. There are two types of ProgressBar controls: Determinate and Indeterminate.

Indeterminate ProgressBar control shows time-based processes for which the scope of task is not yet determine. As soon as you can determine the scope, you should use a determinate ProgressBar control.

Determinate ProgressBar control is a linear representation of the progress of a task over time. You use a determinate ProgressBar when the scope of the task is known. It displays when the user has to wait for an extended amount of time.

ProgressBar control modes

You use the mode property to specify the operating mode of the ProgressBar control. The ProgressBar control supports the following modes of operation:

event : You generally use a determinate ProgressBar in this mode. The ProgressBar control only updates if the value of the source property extends the EventDispatcher class. This is the default mode.

You also use this mode if you reload an image and Image controls to load multiple images.

polled: Use the source property to specify a loading process that exposes the bytesLoaded and bytesTotal properties. You generally use a determinate ProgressBar in this mode.

manual : Set the maximum, minimum, and indeterminate properties along with calls to the setProgress() method. generally use an indeterminate ProgressBar in this mode.

You can create a progress bar by:
<mx:ProgressBar width="200" mode="polled"/>

Here you can get complete syntax of progressbar control.

<mx:ProgressBar
    Properties
    conversion="1"
    direction="right|left"
    indeterminate="false|true"
    label="No default"
    labelPlacement="bottom|top|left|right|center"
    maximum="0"
    minimum="0"
    mode="event|polled|manual"
    source="No default"
  
    Styles
    barColor="undefined"
    barSkin="ProgressBarSkin"
    borderColor="0xAAB3B3"
    color="0x0B333C"
    disabledColor="0xAAB3B3"
    fontAntiAliasType="advanced"
    fontFamily="Verdana"
    fontGridFitType="pixel"
    fontSharpness="0"
    fontSize="10"
    fontThickness="0"
    fontStyle="normal|italic"
    fontWeight="normal|bold"
    horizontalGap="8"
    indeterminateMoveInterval="26"
    indeterminateSkin="ProgressIndeterminateSkin"
    labelWidth="Computed"
    leading="0"
    maskSkin="ProgressMaskSkin"
    paddingLeft="0"
    paddingRight="0"
    textAlign="left|right|center"
    textDecoration="none|underline"
    textIndent="0"
    themeColor="haloGreen|haloBlue|haloOrange"
    trackColors="[0xE6EEEE,0xE6EEEE]"
    trackHeight="Calculated"
    trackSkin="ProgressTrackSkin"
    verticalGap="6"
  
    Events
    complete="No default"
    hide="No default"
    progress="No default"
    show="No default"
  
    Effects
    completeEffect="No default"
  />

If progress bar mode is manual then you can set progress bar value by setProgress method. Here is the syntax:
setProgress(Number completed, Number total)

By default, the ProgressBar displays the label LOADING xx%, where xx is the percent of the image loaded. You use the label property to specify a different text string to display.

The label property lets you include the following special characters in the label text string:

%1 Corresponds to the current number of bytes loaded.
%2 Corresponds to the total number of bytes.
%3 Corresponds to the percent loaded.
%% Corresponds to the % sign.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white">
    <mx:Script>
        <![CDATA[
            import mx.events.SliderEvent;

            private function slider_change(evt:SliderEvent):void {
                progressBar.setProgress(evt.value, progressBar.maximum);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="Set Progress bar by moving slider:">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="360"
                        value="0"
                        liveDragging="true"
                        snapInterval="1"
                        tickInterval="10"
                        change="slider_change(event);"
                        width="{progressBar.width}" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:ProgressBar id="progressBar" mode="manual" minimum="0"maximum="360" />

</mx:Application>

Soon I will post some more flex progress bar code example.

The FileReference class provides a means to upload and download files between a user’s computer and a server.

An operating-system dialog box prompts the user to select a file to upload or a location for download. Each FileReference object refers to a single file. You can get information about file like Name of file, Size of file, date of creation and date of modification etc. with the help of FileReference properties.

FileReference instances are created by the following ways:
var myFileReference = new FileReference();

By default, the system open file dialog box allows users to select any file type from the local computer, although you can specify one or more custom file type filters by passing an array of file filter instances to the browse() method:

var imageTypes:FileFilter = new FileFilter("Images (*.jpg, *.jpeg, *.gif, *.png)", "*.jpg; *.jpeg; *.gif; *.png");
var textTypes:FileFilter = new FileFilter("Text Files (*.txt, *.rtf)", "*.txt; *.rtf");
var allTypes:Array = new Array(imageTypes, textTypes);
var fileRef:FileReference = new FileReference();
fileRef.browse(allTypes);

When you attempt to upload a file using the FileReference.upload() method, any of the following events may be dispatched:

• Event.OPEN: Dispatched when an upload operation starts.
• ProgressEvent.PROGRESS: Dispatched periodically during the file upload operation.
• Event.COMPLETE: Dispatched when the file upload operation completes successfully.
• SecurityErrorEvent.SECURITY_ERROR: Dispatched when an upload fails because of a security violation.
• HTTPStatusEvent.HTTP_STATUS: Dispatched when an upload fails because of an HTTP error.
• IOErrorEvent.IO_ERROR: Dispatched if the upload fails because of any of the following reasons:
• • An input/output error occurred while Flash Player is reading, writing, or transmitting the file.
  • The SWF tried to upload a file to a server that requires authentication (such as a user name and password). During upload, Flash Player does not provide a means for users to enter passwords.
  • The url parameter contains an invalid protocol. The FileReference.upload() method must use either HTTP or HTTPS.

You can declare event and there call back function is as follow:

fileRef.addEventListener(Event.SELECT, fileRef_select);
fileRef.addEventListener(ProgressEvent.PROGRESS, fileRef_progress);
fileRef.addEventListener(Event.COMPLETE, fileRef_complete);

The above code statement declares that on occurring any of the above declared event which function should be call.

The following example shows you how you can use the FileReference class’s browse() method to allow users to select and upload a single file to a Web server.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/21/uploading-files-in-flex-using-the-filereference-class/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        <![CDATA[
            private var fileRef:FileReference;

            private const FILE_UPLOAD_URL:String = "http://www.yourdomain.com/services/upload.php";

            private function init():void {
                fileRef = new FileReference();
                fileRef.addEventListener(Event.SELECT, fileRef_select);
                fileRef.addEventListener(ProgressEvent.PROGRESS, fileRef_progress);
                fileRef.addEventListener(Event.COMPLETE, fileRef_complete);
            }

            private function browseAndUpload():void {
                fileRef.browse();
                message.text = "";
            }

            private function fileRef_select(evt:Event):void {
                try {
                    message.text = "size (bytes): " + numberFormatter.format(fileRef.size);
                    fileRef.upload(new URLRequest(FILE_UPLOAD_URL));
                } catch (err:Error) {
                    message.text = "ERROR: zero-byte file";
                }
            }

            private function fileRef_progress(evt:ProgressEvent):void {
                progressBar.visible = true;
            }

            private function fileRef_complete(evt:Event):void {
                message.text += " (complete)";
                progressBar.visible = false;
            }
        ]]>
    </mx:Script>

    <mx:NumberFormatter id="numberFormatter" />

    <mx:Button label="Upload file"
            click="browseAndUpload();" />
    <mx:Label id="message" />
    <mx:ProgressBar id="progressBar"
            indeterminate="true"
            visible="false" />

</mx:Application>

In the above example we take a progress bar which will show the progress of file uploading. We also take a button which opens a system file open dialog box to select file from local computer.

When ever the above flex code gets execute first of all init() function will run. Using this function we create instance of FileReference and declare call back function for three FileReference events SELECT, PROGRESS and COMPLETE.

When we system dialog box using browse() and user will select a file from local computer at that time SELECT event will fire and the declared method will call to upload file at server by Upload().

When file uploading start at server to show uploading process we set the progress bar value at every time when PROGRESS event fire.

When file uploaded successfully at the server COMPLETE event fire we write appropriate code in that function which do what we want to do after file uploaded at server.

Please write a file for handling uploading using php and upload at the server and set its URL in the flex code. You can get lots of example of php file uploading just search on google.

The above code example upload single file at a time. If you want to allow users to upload multiple files at once, you would use the FileReferenceList class instead of FileReference.

I will post a example for FileReferenceList in my next post.

I hope the above information helps a lot if you have any query then feel free to ask. Please post your comment for the motivation to posting me information about flex here. if you need any other code example please let me know.

Today I was bit busy so I am posting little late. My lots of friends requested me to share some basic information of flex. So today I am sharing you some basic information of flex, its tutorials links and some other useful links for flex.

The Flex is a cross-platform framework, it is open source framework for creating rich Internet applications that run identically in all major browsers and operating systems. You can also make desktop application in flex using Adobe AIR.

To work in flex you just need Flex 3 SDK and Flex Builder 3. Flex SDK 3 is freely available. You can download it from the here.

Download Flex 3 SDK

Flex Builder is paid you can use its trial version. You can also use Eclipse™ based IDE designed to help software developers build rich Internet applications (RIAs) using the open source Flex framework.
Download Flex Builder

Here are some more useful links for flex.

• The mail Adobe Flex site is labs.adobe.com
• Adobe Flex Tutorial
• Another good tutorial for flex.
• Tutorial for flex Component
• TourdeFlex great tutorial. MUST CHECK TourdeFlex is a desktop application for exploring Flex capabilities and resources, including the core Flex components, Adobe AIR, data integration, and a variety of third-party components, effects, skins, and more
• Flex team blog
• Sample Project of Flex
• Great flex code examples site.
• Flex in a Week video training

Please do check all the links. I am sure you will get lots of help with it. I will keep posting more good stuff here. but I need your co-operation. Keep post your comments.

If you want any help from me regarding flex you are most welcome at any time.

Special thanks to Mr. Gunjan Karun, Vaibhav Nadgonde (Noddy) and Naveen Kumar Sharma to encourage me to post this information for you all.

Happy Blogging
Ravindra