MenuBar control in Flex

February 22, 2012

Freelance Flash Developer India Flex Developer Mobile app developer Php developer India

MenuBar control is a horizontal bar of menu items which opens submenu. The submenu will be open until the user selects on other menu item, selects a submenu item,  or clicks outside the menubar area.

Here in this example I provide data for MenuBar control using  <mx:XMLList> tag.

Flex menubar code:-

<mx:MenuBar id=”myMenuBar” labelField=”@label” width=”950″ color=”#060606″ height=”30″
     itemClick=”itemClickHandler(event)” borderColor=”#1D48E8″ horizontalCenter=”0″ themeColor=”#FFFFFF”>
         <mx:XMLList>
            <menuitem label=”first”>
                <menuitem label=”first1″   />
                <menuitem type=”separator” />
                <menuitem label=”first2″/>
                 <menuitem type=”separator” />
                <menuitem label=”first3″/>
                 <menuitem type=”separator” />
                <menuitem label=”first4″/>
            </menuitem>
            <menuitem label=”second”>
                <menuitem label=”second1″ />
                <menuitem type=”separator”/>
                <menuitem label=”second2″/>
                <menuitem type=”separator”/>
                <menuitem label=”second3″/>
                <menuitem type=”separator”/>
                <menuitem label=”second4″/>
            </menuitem>
            <menuitem label=”third”>
                <menuitem label=”third1″ />
                <menuitem type=”separator”/>
                <menuitem label=”third2″/>
                <menuitem type=”separator”/>
                <menuitem label=”third3″/>
                <menuitem type=”separator”/>
                <menuitem label=”third4″/>
            </menuitem>
        </mx:XMLList>
</mx:MenuBar>

Import the MenuEvent in the event class and Alert control from controls.

import mx.events.MenuEvent;
import mx.controls.Alert;

We can get the Index of the selected MenuBar item using myMenuBar.selectedIndex.toString() where myMenuBar is the id of the MenuBar.and Index of the selected submenu by event.index.toString() .

 <mx:Script>
<![CDATA[
import mx.events.MenuEvent; 
import mx.controls.Alert;

private function itemClickHandler(event:MenuEvent) : void
{
     Alert.show(“selected index: ” + myMenuBar.selectedIndex.toString() +
child index: ” + event.index.toString());

}

I appreciate if you like this post, feel free to comment, forward, RT

flex menubar, flex menu control, flex menu example, menu bar in flex, flex menu bar, how to make menu bar in flex.
flex developer India, developers in India, India web development, hire India, web developer


Loading XML in Flash AS3

January 16, 2012

1. Create the xml file, as shown below
2. In the flash file drag a datagrid component from the components panel.
3. Create new instance of the URLLoader class which loads the xml file.
4. xml file is passed to the url inside the URLRequest object.
5. Then add an addEventListener to know when the xml file is completely loaded, we register a COMPLETE event and have it call a function.
In the function we access loaded data through URLLoader ‘s data property.and assign this to XML object.
difference between XMLList and array is that in XMLList length()  is a property.
6. Populate any data driven component including a data grid we have to create an instance of a DataProvider class .
Each time the loop runs xml data is added inside of the griddata provider using addItem({name:value})shorthand notation to create a generic object, name value pairs seperated by a “: ” this data is then set to the datagrid. Freelance flash  developer Bangalore

Loading XML in Flash AS3 code goes here:

var imagesXML:XML;
var xmlLoader:URLLoader = new URLLoader();
xmlLoader.load(new URLRequest(“picts.xml”));
xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);

function xmlLoaded(evt:Event):void
{
imagesXML = new XML(xmlLoader.data);
var componentProvider:DataProvider = new DataProvider();
for(var i:uint = 0; i < imagesXML.animal.length(); i++)
{
componentProvider.addItem({name:imagesXML.animal.name[i],description:imagesXML.animal.description[i]});
}
grid.dataProvider = componentProvider;

}
grid here is the instance name of datagrid component on stage. Make sure flash has imported
import fl.data.DataProvider;

The xml file is as follows:

<animals>
<animal>
<name>bunny</name>
<photo>small/bunny.gif</photo>
<description>bunnies are cute</description></animal>
<animal>
<name>dogy</name>
<photo>small/dogy.jpg</photo>
<description>dogies are lovely</description></animal>
<animal>
<name>elephant</name>
<photo>small/elephant.png</photo>
<description>elephant is big</description></animal>
<animal>
<name>frog</name>
<photo>small/frog2.jpg</photo>
<description>frog is green</description></animal>
<animal>
<name>butterfly</name>
<photo>small/butterfly-6.gif</photo>
<description>butterflies are colorful</description></animal>
<animal>
<name>kitten</name>
<photo>small/kitty.gif</photo>
<description>kittys are cute</description></animal>

</animals>

Did you like this post? Please give me a boost, Appreciate your valuable comments, and constructive criticism🙂.


Checkbox itemrenderer in datagrid

January 5, 2012

The selected property of the checkbox has to be bounded with the selected property of our entity,  Itemrenderer doesn’t keep track of the selected states correctly this can be fixed by binding data with selected property.Freelance Flash Flex developer India Bangalore

The below code explains the itemrender file called DGCheckBoxEditor

<mx:Script>
<![CDATA[
import mx.controls.listClasses.ListData;
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.listClasses.BaseListData;
import mx.controls.dataGridClasses.DataGridItemRenderer
import mx.events.FlexEvent;

private var _listData:DataGridListData;
// Define a property for returning the new value to the cell.
public var cbSelected:Boolean;

// Implement the drawFocus() method for the VBox.
override public function drawFocus(draw:Boolean):void {
followUpCB.setFocus();
}

[Bindable]
override public function set data(value:Object):void{
super.data = value;
followUpCB.selected=data[_listData.dataField];
}

override public function get data():Object {
return super.data;
}

public function get listData():BaseListData
{
return _listData;
}

public function set listData(value:BaseListData):void
{
_listData = DataGridListData(value);
}

]]>
</mx:Script>

<mx:CheckBox id=”followUpCB”
change=”cbSelected=followUpCB.selected” paddingLeft=”15″/>

Code to call the itemrender

<mx:DataGrid id=”myGrid”
dataProvider=”{myAC}” editable=”true” >
<mx:columns>
<mx:DataGridColumn id=”checker” dataField=”FollowUp”
width=”50″
headerText=”Select”
itemRenderer=”DGCheckBoxEditor” rendererIsEditor=”true”
editorDataField=”cbSelected”/>
<mx:DataGridColumn id=”checker1″ dataField=”Contact” width=”150″ />
<mx:DataGridColumn dataField=”id” width=”150″ editable=”false”/>
</mx:columns>
</mx:DataGrid>


Integrating Flash Video

April 24, 2009

This resembles to Youtube, Plus some added functionality, like discussion board

Detail information about all the above projects are shown in Projects page.


Mp3 player in Flash.

February 27, 2009

A fully flash cs3 mp3 player which plays songs from an external xml file, which can be edited and customised. The xml file is loaded to flash cs3 from where flash receives the required data. Mp3 songs to be played are stored in the same directory which will be called when flash starts. Functionalities include playing previous song ,  next song,  pause a song , stop a song as per the user wish. You can add any song by editing the xml file.  The song being played, the name of the singer and the Album will be displayed on the Mp3 screen. The total time of the song and current status can also be viewed on the screen.


Carousel in Flash

February 1, 2009

Carousel make the objects rotate depending on the mouse position and movement.


Discussion Forum using Flash.

January 6, 2009

Discussion Forum allows one to discuss any topic.  The user can post a new topic , send replies to existing topics.

Discussion Forum uses Flash cs3, PHP and MySql for accomplishing this task. Flash communicates with PHP which inturn communicate with mysql database for retrieving datas from database. The main components are

1)Flash User Interface

2)MySql
used to create the database
creating a table with required fields

3)PHP
php communicate between the flash and Mysql database, Php files fetches data, insert data to database. This include new post and reply to an existing posts