sandbox violation – find answers to your Flex questions…

• How can we speed up the performance of DataGrid when there is a lot of data?
• How do we reduce SWF size so that the download times are lesser?
• My Flex application works fine when run from Flex Builder, but when deployed to server, I get security related errors. Why?

You always had questions like this and never knew where to go to get answers? Anirudh Sasikumar, a Technical Evangelist at Adobe has created a project called sandboxviolation. In his own words, sand box violation is  “for the flex and flash community where users can post questions / answers and vote a question or answer up or down earning reputation points along the way”.

Its available in 2 flavors:

Flex App on Google App Engine | An AIR app with offline support

Check it out, benefit from it, post your questions, answer other’s questions, vote answers up/ down and help the community churn high quality content…

Addendum: Anirudh’s written a Syntax Highlighting in AS3 as part of the above project which is awesome and then opensourced the code which has now created quite a buzz. Check it out too 🙂

Won the Yahoo! Hackday, thanks to Flex :)

Just back from the Yahoo! Open Hackday India. It was 2 days of mayhem, hardcore coding and fun.I teamed up with Harish for the event and was looking forward to having some fun…

Since I was a speaker at the last HackDay, I knew that it was 24 hrs of hacking and then a 90 seconds elevator pitch at the end of it. Me and Harish decided to make a hack in an improved version of colrful. It integrated Color Search on Flickr, Photos based on reverse geo-coding, Boss Image Search and more… We were really excited.

Once we started hacking, I had a crazy idea. Why don’t we build an application in 90 seconds. An on-stage demo that would be fun and show the power of Flex. We built a fully functional Boss Image Search Application in 90 seconds. What’s awesome is that its just 13 lines of code. We used a HTTPService to connect to the Boss Image Search service and bound the results to the display shelf. We even managed to implement pagination and applied a Yahoo! Flex Skin to it.

When we went on stage and started coding, I made some mistakes in coding it up. There was a confusion about the timer and we actually finished just as the 90 seconds bell rang out… The crowd was cheering us and the adrenaline rush was really awesome. You get the code below.

Source

and here’s what it resulted in:

Though we did not win for colrful, we won the prize in the Best “Gone in 90 seconds” category and won an iPod Touch. It was really the power of Flex that made this crazy idea possible. I am proud that I am the Flex Evangelist. Go Flex!

“Top 10 Mistakes when building Flex Applications” – My 2 cents

InfoQ.com (Information Queue) is an independent online community focused on change and innovation in enterprise software development targeted at architects, technical team leads, developers and project managers.

Recently our very own James Ward, teamed up with the team at InfoQ to write an article on “Top 10 Mistakes when building Flex Applications”.

Happy New Year…

Just back from a vacation to my hometown… I have been un-plugged from the web for the past week.

I was trying to catch up with some happenings in the RIA world and came across some posts which I thought I should share here

• This great post talks about how to connect Flex Builder debug session to standalone SWF. I know a lot of people will be interested..
• This one is really worth reading… Alex’s take on HTML and Threading in AS3
• AIR Beta3 migration tips from Kevin
• An innovative combination of AIR Badge installer + swfobject + ExpressInstall from Marc (of Agile Agenda)

HAPPY NEW YEAR to everyone…

Security in Flex – Demystified !

This is for people who are searching for places to get information on FlashPlayer/AIR Security and for guidelines on creating secure applications.

1. This link will provide you an overview of Flash Player Security with details on the Flash Player APIs for the same
2. This link talks of AIR Security and of the additional sandboxes in AIR and how to work with them
3. A really informative presentation done by Deneb Meketa at MAX2007
4. Lucas Adamski’s Blog – State of Security

The above links should give you a good idea about security with AIR & Flex and how to create applications that leverage them.

What is mx_internal ?

Traditionally in OOO languages access specifiers are used to control visibility of declarations (public, private, protected). Now with XML based languages like MXML making debut, a new mechanism for controlling visibility of declarations has evolved… using namespaces. Namespaces are essentially custom access specifiers, which can have names of your choosing. Namespaces are outfitted with a Universal Resource Identifier (URI) to avoid collisions, and are also used to represent XML namespaces when working with E4X.

What I’m interested in discussing here is an internal namespace that FLEX framework uses for its internal data, called mx_internal. A lot of variables in Flex are mx_internal variables and are available to the developers if they use the mx_internal namespace. Before we go into the details of how to use them… lets look at how to identify these variables. There are 2 ways to do this…

One is the straight forward way of looking into the source. Since Flex is Open Source and comes bundled with the source code.. one can easlily locate these variables in the source. For example, under the class defenition of VideoDisplay.as, you can see the an mx_internal variable called videoPlayer (of type VideoPlayer, which in turn extends from flash.media.Video)

mx_internal var videoPlayer:VideoPlayer = null;

This way of identifying mx_internal variables is not always effective, so a better way is to use FlexBuilder to identify them. This is what you need to do…

1. Switch to Flex Debugging View
2. Use the following code
   <mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”&gt;
   
   <mx:Script> <![CDATA[
   
   public function debug():void{ } ]]>
   </mx:Script>
   <mx:VideoDisplay id=”vid”/>
   
   <mx:Button label=”Debug” click=”debug()”/>
   </mx:Application>
3. Make sure that you can view the mx_internal variables in the debugging mode. You can do this by checking the options in the debug Layout as below



4. Now put a break point in the debug() function and run the app in the debug mode. Click on the button to come to the debug view and add a watch for the VideoDisplay object. You’ll see the following in the debug view, when you search for videoDisplay under the watched vid variable…

The variables are color coded as below

• Red Rectangle – private
• Green Circle – public
• Yellow Rhombus – mx_internal
• Char codes “C” & “S” – constants and static vars

Now you have identified the mx_internal variables that you need to use. Now lets see how to use them. This is a 3 step process…

1. Import the namespace that is going to be used. Note that this needs to be done after all other imports
   import mx.core.mx_internal;
2. Tell Actionscript that is a namespace
   use namespace mx_internal;
3. Prefix the property name with its namespace
   vd.mx_internal::videoPlayer.clear();

Thus you can now access and use the mx_internal variable and all its properties, methods, styles etc. I’ll tell you about some scenarios where this is most useful in the coming posts. Hope this makes your job easier 🙂

Addendum (4th Sep ’07) :  As rightly pointed out by Mrinal…. I should add this disclaimer.

Adobe uses the mx_internal namespace to mark things that may change in future versions of the framework .. So you have to use it at your own risk, because your inherited class or component may not work with future releases of Flex.

Flex & AS3 Books in India

A lot of people complain that there are not enough books on Flex & AS3 in the Indian markets and that they do not know how to get them. This poses a serious threat to the viral adoption of Flex in India. I had a chat on this with John Koch (Adobe Developer Relations Manager, Asia) and he pointed me to some resources.

Shroff Publishers publish a lot of the Oriely books in India and this includes books on Flex2 & AS3 as well.

• This link will show you the books available (They have listed Flex & AS3 under Flash itself). This includes.. AS3 Cookbook & Programming in Flex2, by O’Reilly Media
• This link gives you the distributors in different cities across India and Bangladesh…

I haven’t confirmed any, but tomorrow I have decided to phone them and see if these titles are available or not.

Moreover… if you have any more books that you would like to see on Flex, to be published in India, drop me a note. The “Wanna Have List” already includes the following books

• Rich Internet Applications with Adobe Flex and Java
• Professional Flex 2 by Rich Tretola, Renaun Erickson & Simon Barber
• Advanced ActionScript 3 with Design Patterns
• Essential ActionScript 3

Update 7th Aug 2007:

I called up the retailers asking for the books. They said that if I mail them at their respective email ids, they would get the books for me in a matter of 2-3 days. I did this with the following 2 publishers

1. Gangarams Book Bureau
72, Mahatma Gandhi Road, Bangalore
Phone : 080-25587277 & 25586743
Email : gangarams@vsnl.com

2. Strand Book Stall
S 113 -114, Manipal Centre
Dickenson Road, Bangalore
Phone : 080-25582222
Email : strandbk@bgl.vsnl.net.in

If you dont know where these places are in Bangalore… use Google Maps and search for Gangarams or Strand Book Stall, Bangalore. It will do the trick. Go ahead and order them… Guys in other cities, try this with the book stores in the link given on the above post and let me know, so that I can spread the word 🙂

Flex APAC eSeminar series 2 – AS3 for OO Programmers

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 🙂

The Architecture of Flash from the horse’s mouth

A continuation from the last post, this is again from PodTech. Here Ely Greenfield (Flex Architect), David Wadhwani (Vice President of Flex Product Line), and Mike Chambers (Senior Product Manager, Developer Relations), gives us an inside on Flash’s architecture and gives further details about what is being open sourced.

[podtech content=http://media1.podtech.net/media/2007/04/PID_011047/Podtech_Adobe_Flex_Announcement_Whiteb.flv&postURL=http://www.podtech.net/home/scobleshow/2827/the-architecture-of-flash&totalTime=1773000&breadcrumb=98439cdf-6f55-4eba-a454-69a11a504168]

(or you can download it here)

What’s the Big Deal with E4X support in AS3

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

• E4X on Wikipedia
• W3Schools E4X Tutorial
• E4X presentation by Brendan Eich from Mozilla Foundation
• An awesome FAQ list for E4X (its for JS, can easily adapt to AS)
• Some cool e4X parsing and filtering techniques in AS3 by Joel