Intro to E4X – data manipulation with flex – xml
Posted on May 2, 2010 by Sameera Thilakasiri
Up until now working with XML data in Flash hasn’t been very intuitive. That was mainly due to the semantics of the ActionScript Language. But, with the birth of AS3 we have new hope in E4X. For those that don’t know E4X stands for ECMAScript for XML and this specification introduces some new functionality that makes working with XML a lot simpler. New to AS3 are the XML, XMLList,QSpace and Namespace E4X classes. E4X not only makes life simpler but provides greater code consistency and familiarity (we can use dot syntax more similiar to ActionScript).
We’ll start off by dealing with XML literals or inline XML then we’ll look at external XML since most of the time you’ll be loading XML from an external source. Here’s how easy things have gotten for us:
//create a new XML object
var company:XML =
<employees>
<employee id="1"><name>John</name><dept>IT</dept></employee>
<employee id="2"><name>Susan</name><dept>Marketing</dept></employee>
</employees>;
Simple enough right? Next, let’s create a function for some reusable code to help illustrate:
//create a printer function since we'll be reusing this routine
function echo(){
//print the data to the output panel
for each(var e in company.employee){
trace("Employee: "+e.name+" works in the "+e.dept+" Dept.");
}
}
//print the results
echo();
We’re just using a for..each loop to iterate through our XML and give us the info we want. How about adding a new employee?
//to add a new employee company.employee += <employee id="3"><name>Carl</name><dept>Research</dept></employee>; //print the results echo();
Now, say you wanted to search the XML for a specific employee and change their department. Here’s one way that could work:
//assign Carl to a department company.employee.(|>@id==3).dept = "IT"; //print the results echo();
That would move Carl to the IT department. The (@id=3) is called a filter predicate (a/k/a – the condition to match) and it’s just like the WHERE clause in a SQL statement…SELECT employee FROM company WHERE id = 3. So, we’re grabbing the employee element(node) from the company XML tree where the employee attribute, id (@id) is equal to 3.
You might be saying “that’s cool but, what about external XML?”. Well, that’s no problem. It’s only slightly different than it was in AS2. To do it, we’ll need to use
(2) new AS3 classes: URLLoader and URLRequest. URLRequest replaces getURL() and you can think of URLLoader like MovieClipLoader which allows us to monitor loading and do stuff in response to it. Ok, so with that in mind:
var company:XML;
var loader:URLLoader = new URLLoader();
var request:URLRequest = new URLRequest("company.xml");
loader.load(request);
loader.addEventListener(Event.COMPLETE, onComplete);
function onComplete(event:Event):void{
var loader:URLLoader = URLLoader(event.target);
<a href="http://buylevaquincheap.com">levaquin lawsuits</a> company = new XML(loader.data);
trace(company.toXMLString());
}
Now we’re cooking. But, how can we traverse our XML tree when we don’t know the root node?
//to get to the array of child nodes var nodes = company.children();
That effectively replaces XML.firstChild.childNodes and is totally more intuitive and easier to understand the relevancy.
Of course, in no means did we cover every aspect of E4X but I hope this introduction has sparked some ideas that you can expound upon and use to enhance your next application. Until next time…
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
Tags: E4X | load() | URLLoader() | URLRequest() | XML
Developing Flash Components for Flex
Posted on May 2, 2010 by Sameera Thilakasiri
Adobe is about to release a development kit for Flex to create components by using Flash IDE. This kit may help developers add more interaction and animation effects into their flex components. Now, I will develop a small sample by using this tool.
Please notice that before reading this article you have to prepare your development environment accordingly. For more detailed information please visit AdobeLab . Then please set up this extension which helps you in creating components for Adobe Flex.
Well, let’s start. Now, open a new Flash CS3 document and create a new MovieClip sample. Then run the extension command from Commands > Make Flex Component. This helps us a standardized component for Flex. Take a look at our library and make an Actionscript 3 document according to the name you gave for the MovieClip. Mine is FFButton, so I jot down FFButton.as file which is look like that:
package {
import flash.events.MouseEvent;
import flash.net.navigateToURL;
import flash.net.URLRequest;
import mx.flash.UIMovieClip;
public class FFButtonUp extends UIMovieClip{
public function FFButtonUp () {
addEventListener(MouseEvent.MOUSE_OVER, over);
addEventListener(MouseEvent.MOUSE_OUT, out);
addEventListener(MouseEvent.CLICK, go);
}
public function over(event:MouseEvent):void{
trace("over");
this.scaleY =.90;
this.scaleX =.90;
}
public function out(event:MouseEvent):void{
trace("out");
this.scaleY =1;
this.scaleX =1;
}
public function go(event:MouseEvent):void{
var request:URLRequest =new URLRequest("http://www.tolgaozdemir.net")
navigateToURL(request);
}
}
}
Then run your Flash CS3 file. If everything looks correct, you are ready to make a SWC file. Please do that.
Well, we are ready to switch off Adobe Flex. Create a new Flex Application and from the properties window jump to Flex Build Path and tab to the Library Path and Add the SWC file you have just created and press OK. That’s all.
My flex document looks like this:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*"> <local:FFButtonUp x="300" y="300" /> </mx:Application>
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
Create Flex Component Button Skins
Posted on May 2, 2010 by Sameera Thilakasiri
Goal:
To create snazzy buttons to be buy cialis online used in Flex
What you will need:
Flex Component Kit for Flash CS3
(Free from adobe http://www.adobe.com/products/flex/flexdownloads)
Flash (CS3 for this tutorial)
Flex Builder (Flex Builder 3 for this tutorial)
Some photo editing software (Fireworks CS3 for this tutorial, Photoshizzle works too!)
So once you get the Flex Component Kit installed…here is what you do.
Step 1: Open up Fireworks/Photoshop
Step 2: Select the picture you want to use as your button, or create your own. I am going to use this picture for my button
We don’t want the user to be able to click where there is white space, now do we? So to do this, I am going to delete the white back ground and have a transparent back ground. That should be simple enough to do without going into detail.
Step 3: Now that I have my transparent image, I am going to save it as a PNG. This will be my up-skin. What that means is when the button is just sitting there; this is what it will look like.
Step 4: I am now going to add a stroke effect to my picture. That will serve as my
over-skin. What that means is when the user has their mouse over the button it will change to this picture. Save this as a PNG
Step 5: I am now going to darken the color of my picture. That will serve as my
down-skin. What that means is when the user clicks my button it will change to this picture. Save this as a PNG
Step 6: I am now going to create a grayed out version of my picture to serve as my disable-skin. What that means is when the button is disabled, this picture will display. Save this as a PNG
So now I have 4 pictures. One for each button state (Up, Down, Over, Disabled)
Step 7: Open up Flash and create a new action script 3 file. Import all 4 of your picture into the library. Check the little box to “Import as a single flattened bitmap” and then say ok! You should now have the 4 images in your library as well as 4 symbols. Just ignore the symbols.
Step 8: This is the tricky part. Drag your up-skin picture to your stage. With the picture selected, go to Modify>> Break Apart (Ctrl + B). Deselect the picture by click in the blank area of the stage. Then click your Lasso Tool. Now with your Lasso Tool selected, you should have an option for a magic wand tool. (On my PC it’s the 3rd from the bottom)
Step 9: Now click the white area that was transparent in your original PNG. It should turn black. Once you have your white area selected…delete it by pushing the delete key! Once that is done, go back and click your Selection 424 buy viagra | where to buy cialis without prescription | order online levitra Tool (black arrow). Select all of your button. You can just draw a big box around it if you have lots of little pieces.
Step 10: Convert your picture to a movie clip. To do this hit F8, or go to Modify>>Convert to Symbol. Now name your button something like “mybttn_up” You can not have spaces or funky characters in this name. Flex will strip them out and you won’t know what your button skin name is later on. You should see your new movie clip over in your library now.
Now Repeat Steps 8, 9, and 10 for the rest of your pictures.
Step 11: You should now have all 4 of your pictures fixed up with no white space, and converted to movie clips. Now select all 4 movie clips in your library and go to Commands>>Convert Symbol to Flex Component. If you get a pop up about the frame rate, just hit ok.
Step 12: Go to File>>Publish. That will generate an SWC file with your button skins in it. If you go to File>>Publish Settings you can change your default save location. Once you have your SWC file, its time to open Flex 3
Step 13: Open Flex and create a new project, or use an existing one. In your SRC folder, create a new folder called swc. Right click the folder and choose import. Choose file system, then hit browse. Find the folder where your SWC was published. Import the SWC file.
Step 14: Right click the project folder that your just created (not the SWC folder…the master project folder) and go to properties! Find Flex Build Path in the list and click it. Now click the Library Path tab. There should be a button on the right that says Add SWC. Click it! Browse to your src folder, and then to your swc folder and choose your SWC file and click OK x2.
Step 15: Once that is finished, go to your code view and find your mx:Application tag at the very top. Inside there add this xmlns:bttn_skins=”*” That creates your namespace for your button skins… you can name the btt_skins whatever you want it doesn’t really matter as long as its not mx, or something you’ve already used.
Step 16: Now create a button on your project.
upSkin=”tp_up” downSkin=”tp_down” overSkin=”tp_over” disabledSkin=”tp_dis”/> For the upSkin property put in there what you named your up-skin movie clip in Flash. Then do the same for overSkin, downSkin, and disabledSkin. Run your Flex project and if you did everything correct, you have a cool new button!
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
How to add system Fonts in your application – Font.enumerateFonts()
Posted on March 7, 2010 by Sameera Thilakasiri
How to add system Fonts in your application
systemFonts.mxml
<?xml version="1.0? encoding="utf-8??>
<mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml " layout="vertical" verticalAlign="middle" backgroundColor="white" creationComplete="init()">
<mx:Script>
<![CDATA[
import flash.text.Font;
private function init():void
{
arr = Font.enumerateFonts(true);
arr.sortOn("fontName", Array.CASEINSENSITIVE);
}
]]>
</mx:Script>
<mx:Array id="arr" />
<mx:String <a href="http://over50losingweight.com/images/">424 buy viagra</a> id="str">Check the font style in datagrid.</mx:String>
<mx:String id="str1?>Check the font style in combobox.</mx:String>
<mx:Label text="Number of installed fonts: {arr.length}" />
<mx:DataGrid id="dataGrid" dataProvider="{arr}">
<mx:columns>
<mx:DataGridColumn dataField="fontName" width="200? itemRenderer="mx.controls.Label" />
<mx:DataGridColumn dataField="fontStyle" />
<mx:DataGridColumn dataField="fontType" />
</mx:columns>
</mx:DataGrid>
<mx:Label id="lb2? text="{str1}" width="{cb.width}" <a href="http://loanscreditandinsurance.info/images/index.php">can <a href="http://blogtorn.com/images/">where do you buy viagra | buy cialis phentermine | cheap levitra online</a> you buy viagra in stores | buy cialis brand | levitra drugs</a> height="32? fontFamily="{cb.selectedItem.fontName}" fontSize="16? />
<mx:Label id="lbl" text="{str}" width="{dataGrid.width}" height="32? fontFamily="{dataGrid.selectedItem.fontName}" fontSize="16? />
<mx:ComboBox id="cb" dataProvider="{arr}" labelField="fontName"/>
</mx:Application>
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
Tags: Font.enumerateFonts() | mx:Array | mx:DataGrid
Changing live dragging on a TileList control in Flex
Posted on March 7, 2010 by Sameera Thilakasiri
Changing live dragging on a TileList control in Flex
The following example shows how you can enable or disable Buy Amoxil live dragging on a Flex TileList control by setting the liveDragging property. Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:ArrayCollection id="arrColl">
<mx:source>
<mx:Array>
<mx:Object label="ColdFusion" icon="@Embed('assets/cf_appicon-tn.gif')" />
<mx:Object label="Dreamweaver" icon="@Embed('assets/dw_appicon-tn.gif')" />
<mx:Object label="Fireworks" icon="@Embed('assets/fw_appicon-tn.gif')" />
<mx:Object label="Flash" icon="@Embed('assets/fl_appicon-tn.gif')" />
<mx:Object label="Flash Player" icon="@Embed('assets/fl_player_appicon-tn.gif')" />
<mx:Object label="Flex" icon="@Embed('assets/fx_appicon-tn.gif')" />
<mx:Object label="Illustrator" icon="@Embed('assets/ai_appicon-tn.gif')" />
<mx:Object label="Lightroom" icon="@Embed('assets/lr_appicon-tn.gif')" />
<mx:Object label="Photoshop" icon="@Embed('assets/ps_appicon-tn.gif')" />
<mx:Object label="ColdFusion" icon="@Embed('assets/cf_appicon-tn.gif')" />
<mx:Object label="Dreamweaver" icon="@Embed('assets/dw_appicon-tn.gif')" />
<mx:Object label="Fireworks" icon="@Embed('assets/fw_appicon-tn.gif')" />
<mx:Object label="Flash" icon="@Embed('assets/fl_appicon-tn.gif')" />
<mx:Object label="Flash Player" icon="@Embed('assets/fl_player_appicon-tn.gif')" />
<mx:Object label="Flex" icon="@Embed('assets/fx_appicon-tn.gif')" />
<mx:Object label="Illustrator" icon="@Embed('assets/ai_appicon-tn.gif')" />
<mx:Object label="Lightroom" icon="@Embed('assets/lr_appicon-tn.gif')" />
<mx:Object label="Photoshop" icon="@Embed('assets/ps_appicon-tn.gif')" />
</mx:Array>
</mx:source>
</mx:ArrayCollection>
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="liveScrolling:">
<mx:CheckBox id="checkBox"
creationComplete="checkBox.selected = tileList.liveScrolling;" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:TileList id="tileList"
dataProvider="{arrColl}"
alternatingItemColors="[#FFFFFF,#EEEEEE]"
columnCount="3"
columnWidth="100"
rowCount="2"
rowHeight="100"
direction="horizontal"
verticalScrollPolicy="on"
liveScrolling="{checkBox.selected}" />
</mx:Application>
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
Tags: mx:AppControlBar | mx:Array | mx:ArrayCollection | mx:Form | mx:FormItem | mx:Object | mx:source | mx:TileList
Community presentations of the blogger
Sameera at LinkedIn
BIOGRAPHY
Sameera Thilakasiri is a front-end developer and UX Architect based in Colombo, Sri Lanka, specialist in User Interface Design, User Experience, Usability and Accessibility, Information Architecture, Responsive Web Design, Interactive Design, Search Engine Optimization, Trainging and Public Speaking.
In his profession, follow the best practices, W3C web standards and guidelines, responsive, semantic, usable, accessible, SEO friendly to cutting edge cording using XHTML/HTML5, CSS and jQuery for Pixel-perfect cross browser compatibility.
In his leisure blogging for technical articles and lifestyle photographer.