Getting on the Flex Highway – How to get up to speed with Flex

June 18, 2007

I would like to invite you all to a this week’s Flex APAC Tech Wednesday eSeminar. We have it scheduled on 20th June 2007. At 4pm IST.
You can check for the local time at your city by clicking this link: World Clock…

Topic : Getting on the Flex Highway – How to get up to speed with Flex

The session is a non-technical one… intended for people who are getting started with Flex and covers the set of resources that they can tap into for the same… It intends to collate the diverse set of resources available on the net for this purpose…

Duration : I hope to finish in 60 mins :)

Connect URL : http://my.adobe.acrobat.com/flexapacseminar/


Flex APAC eSeminar files on Google Code

June 7, 2007

During the last seminar, people complained of having lots of problems accessing the URLs of the eSeminars recordings & files. I thought we could collate it a single place. So I have gone ahead and created a Flex APAC Seminars Google Code Project which will host all the resources used in the eSeminars.

You can access the following information there…

  • Use the Wiki tab to find what each of the eSeminars contained. It has a wholesome info on what the seminar was on, when it was done, the host and the topic. It also provides links to the recordings and the zipped archives of the files & resources used in the seminar.
  • Use the Download tab to directly download the files (you can also go to the wiki and download from the link there)

For convenience, I have split the wiki into pages, each having information on 10 eSeminars. You can use this to access all the resources connected to each of the seminars. Do send me if you have any suggestions on this.


Flex APAC eSeminar series 2 – AS3 for OO Programmers

June 7, 2007

We had the second edition of the Flex APAC eSeminar Series yesterday. Harish from the Flex team here took the session on “AS3 for OO Programmers”. I was there with him to help with the logistics and to take the questions when Harish was doing the presentation.

It went off very well, much more successful than the initial trial run. We had a total attendance of 67 people, though mostly from India. Moving forward, we want the rest of APAC to actively participate too. We are working towards that.

Harish covered basics of AS3 and some nuances like converting an MXML code to AS and the component lifecycle workflow and things. I think it he did a great job. What’s more, there was a lot of interaction with and within the community which was very encouraging. Follow the following links for more details

  1. Link to the recording of the connect session
  2. Link to the resources/ppts/files, used in the presentation

Looking forward to meeting more of you in the seminars to come :)


JSON to ASON

June 2, 2007

I have blogged about JSON before but forgot to provide an example for getting JSON into AS. I saw a query on FlexIndia on JSON, so I thought I’ll post it now. The problem is to convert JSON to ActionScript Objects (or ASON). You can first try the demo application to see if this is what you are looking for…

In the app, you can either paste a URL (provided you have the security permissions) of a JSON to convert or paste your own JSON into the textarea and convert it.

This is what you need to do to get this working…

  1. Go to AS3CoreLib on Google Code and download the corelib-.90.zip file and extract it
  2. Get the corelib.swc from the /bin directory
  3. Download the app source or write your own code :)
  4. Do one of the following:
    If you are using FlexBuilder:

    1. Right click on your project go to Properties
    2. Navigate to Flex Build Path -> Libraries Tab -> Add SWC
    3. Now add the corelib.swc to your project
    4. Confirm that you have the line “import com.adobe.serialization.json.JSON;” in the code
    5. Run and Have Fun :)

    If you are using the command-line compiler:

    1. Place the swc in the directory of your mxml code
    2. Confirm that you have the line “import com.adobe.serialization.json.JSON;” in the code
    3. Type the following on the command line
    4. mxmlc -include-libraries=corelib.swc JSONTest.mxml
    5. Run and Have Fun :)

Custom PreLoaders

April 24, 2007

A lot of people have been asking me if this is possible. I was aware it was, but didn’t have a working code or even a pointer for them. But now I do…

I just found a post by Ted Patrick which has examples on how to make SWFs, GIFs or PNGs as Custom PreLoaders.

Read all about it on this post


Conditional Drag & Drop

April 10, 2007

We had a small presentation lined up for some Flex users today at our office. I did a presentation on E4X, something I have been discussing a lot on this blog. Harish was taking a session on Drag & Drop and someone in the audience had a very interesting question.

He wanted conditional drag & drop. This meant that he wanted to decide on “dragEnter“, if the data was good enough to be accepted by the destination. I just put together an app which i wanted to share here.

Here, I have 2 DataGrids, one which is a Stock List and the other, a Buying List. You can drag and drop items from the Stock List to the Buying one, but subject to availability. What it does is that, on dragEnter, the following function is executed.

private function enterDrag(event:DragEvent):void{
var obj:Object = event.dragSource.dataForFormat(“items”);
if(!obj[0].available){
event.stopImmediatePropagation();
}
}

The function checks the availability of the item and if unavailable, calls the event.stopImmediatePropagation() method, which doesn’t allow the drop operation on the grid for that item.

You can view the application and the source here


E4X, My mx:WebService Buddy

April 5, 2007

For an internal project (kindof), i had to use E4X to parse my results from a mx:WebService. I really found it a pleasure to work with it. The thing is that WebService class in Flex allows the return type to be “Object“, “xml” or “e4x“. The difference is as follows.

  • Using Object – Setting return type as Object, returns data in the form of an ObjectProxy. Below, I have provided the example of a WebService response from Amazon Web Service, inspected in FlexBuilder. As you can see, the ObjectProxy contains several complex datatypes, including ArrayCollection and mx.rpc.xml.ComplexString, which can be tricky to handle. Also you would have to do same parsing logic to parse the incoming result to your liking.

  • Using E4X : Makes it so much simpler. Gives me an XMLList as the result as below.

What this does for me is that the parsing becomes a cakewalk. I can just do the following and filter out all the Items in my result. res below is a ResutEvent of type mx.rpc.events.ResultEvent.

myXML:XMLList = res.result..Item;

Then, this XMLList variable can be bound to a mx:DataGrid (as DataGrid will internally convert it to an XMLListCollection) and you can work seamlessly with it… What a joy :)


What’s the Big Deal with E4X support in AS3

April 5, 2007

I couldn’t place the excitement in the team last year when we announced support for E4X in AS3. As a newbie in the XML arena, ignorant of the XML parsing woes in Flash & of terms like XPath, i really didn’t think its a big deal. My views have changed… a lot.

The traditional way of dealing with XML in Flash is using the The XMLDocument, XMLNode and XMLNodeType Classes (checkout the flash.xml package in the live docs). Say you have an XML as follows as myXML (in an XMLDocument Object)

<employeeList>
<employee id=”475″>
<lastName>Zmed</lastName>
<firstName>Sue</firstName>
<position>Data analyst</position>
</employee>
<employee id=”348″>
<lastName>McGee</lastName>
<firstName>Chuck</firstName>
<position>Jr. data analyst</position>
</employee>
</employeeList>

In legacy AS2, if you want to access the employee id of McGee i.e. 348, you need to access as :

myXML.firstChild.childNodes[1].attributes.id

If you want the firstname of McGee i.e. Chuck, you need to access as:

myXML.firstChild.childNodes[1].childNodes[1].firstChild.nodeName

Come AS3 & E4X and life becomes a walk in the park. Declare the myXML as an XML Object (native e4X xml type in As3)

You want McGee’s id ??? here it is

(myXML..employee)[1].@id

myXML..employee generates an XMLList (another E4X compatible class) by parsing the XML to generate only XML nodes with employee as the node (with its children). So myXML..employee generates

<employee id=”475″>
<lastName>Zmed</lastName>
<firstName>Sue</firstName>
<position>Data analyst</position>
</employee>
<employee id=”348″>
<lastName>McGee</lastName>
<firstName>Chuck</firstName>
<position>Jr. data analyst</position>
</employee>

To get McGee’s FirstName…

(myXML..employee)[1].firstName
OR (myXML..firstName)[1]

Also, you can run XPath2.0 queries on the resultant XML.For e.g., consider the following statement…

(myXML..employee.(@id>400)

It returns all employee nodes in the xml that has an employee id>400, which in this case is “Sue Zemed”. Cool ! E4X Rocks…

Check out the XML & XMLList classes in the livedocs. If you need more info on E4X, refer the following links


Anatomy of a Simple Flex App

April 2, 2007

I consider this an awesome resource for people getting started with Flex. Thanks Narciso for the cool and informative app.

Click on the Image to view the App

I add this to the following list of top resources for Flex Beginners

  1. Flex Code Explorer
  2. Flex Style Explorer

My Full Screen Video App – Ver 1.0

March 6, 2007

I wrote about full screen support in flash, a long time back in Nov ’06 (see that post here). I have been planning to write one myself. So finally i got myself down to write it. Before i put you through the app, some details on the API.

To make your application have a fullscreen support you need to do the following things.

1) Have the latest Flash Player (get it here)

2) Use the new Full Screen API
import flash.display.StageDisplayState into your Application and set the displayState of the stage. I have the following function toggling the FullScreen feature. “fsChk” is a CheckBox, based on which I’m toggling the functionality

private function toggleFullScreen():void{

stage.addEventListener(FullScreenEvent.FULL_SCREEN, handleFullScreen);


if(fsChk.selected) {
stage.displayState = StageDisplayState.FULL_SCREEN}
else {
stage.displayState = StageDisplayState.NORMAL}

}


3) Update the html-template in which you have the flash App

In the object & embed parts of the html code of the page in which the flash app is inserted, you need to add a new parameter allowFullScreen to true. You can refer the source of the app and view the html for details.

If you want to know more about this feature, refer the Adobe DevCenter article on the same or view the PDF that i have created, collating all that information.

Now the Application. This is just a small video player which can go full screen by checking a Flex CheckBox. This is written in Flex2.0 and you can find all the source files here

Click here to view the Application
(confirm that you have the latest Flash player)

P.S – I have muted the video to start with, un-mute it if it pleases you :)

Update March 07 2008: A lot of people have complained that they got a security error when they tried using the code above. Here is a post articulating the problem and the solution.


Follow

Get every new post delivered to your Inbox.