Good news on Flex, AIR and AS 3.0 books in India

Good news on Flex, AIR and AS 3.0 books in India. The following titles are made available by Shroff Publishers in Indian editions:

• ActionScript 3.0 Cookbook – Published March 2007
• Programming Flex 2 – Published June 2007
• Apollo for Adobe Flex Developers Pocket Guide – Published July 2007
• Essential ActionScript 3.0 – Published September 2007
• ActionScript 3.0 Design Patterns – Published October 2007

These books may not be available on the shelves in Indian bookstores, which are small compared to the size of US bookstores, but stores are able to order them. Here’s a link to the Shroff site that shows their retailers in Bangalore

Flex Charts – showDataTips Vs showAllDataTips

showDataTips is a property on the chart that activates an on-demand display of data-tips on the chart that gets activated only when the mouse is placed over the data point. Setting the property to true yields a result as below…

And the code looks like this…

<mx:PieChart id=”myChart” dataProvider=”{expenses}” showDataTips=”true” >
<mx:series>
<mx:PieSeries field=”Amount” nameField=”Expense”/>
</mx:series>
</mx:PieChart>
<mx:Legend dataProvider=”{myChart}”/>

With showAllDataTips set to true the data-tips for all data points show up de-facto on the chart. Though this might be too much information on screen sometimes, it works well in other situations as this one. It also obviates the need for legends in the chart, if used tastefully

The code is as below…

<mx:PieChart id=”myChart” dataProvider=”{expenses}” showAllDataTips=”true” >
<mx:series>
<mx:PieSeries field=”Amount” nameField=”Expense”/>
</mx:series>
</mx:PieChart>

Shantanu in Bangalore

Mr. Shantanu Narayen, the President & COO of Adobe Systems was here in Bangalore, India. We had an RIA Leadership Summit at Oberoi Bangalore, where a lot of industry leaders from various IT Companies from across India attended the talk about Adobe’s vision and plans for the Rich Internet Application space. I’m still waiting for the photos to come in, I’ll upload them as soon as I have it.

I’m happy to say that I was instrumental in bringing together Shantanu and Kamla Bhatt, the host and producer of the Kamla Bhatt Show. She is also a journalist for PodTech and she did 2 interviews of Shantanu for PodTech. Here they are…

1. Here Shantanu talks about Adobe’s vision and strategy

[podtech content=http://media1.podtech.net/media/2007/10/PID_012905/Podtech_AdobeShantanuNarayen_KamlaBhat.mp3&postURL=http://www.podtech.net/home/4452/shantanu-narayen-president-and-coo-of-adobe&totalTime=782000&breadcrumb=28bfa2dc733345e6afdc54791b62c900]

2. This one deals with Adobe’s foray into the mobile space with FlashLite and Adobe’s plans for India

[podtech content=http://media1.podtech.net/media/2007/10/PID_012916/Podtech_AdobeShantanuNarayen_KamlaBhat.mp3&postURL=http://www.podtech.net/home/4459/shantanu-narayen-president-and-coo-of-adobe-part-2&totalTime=411000&breadcrumb=d507e67f7c104be5a485883e871f53f0]

FullScreen using ContextMenu

I had, long back written a post on how to take an application full screen. This is an extension to that. What I am doing is adding the “Go Full Screen” and “Exit Full Screen” buttons on the Context Menu itself (ContextMenu is the Menu that appears on the right click on a Flash Movie). It is a simple application with just an image in it, which is purposely stretched to 100% (using the maintainAspectRatio and scaleContent properties on the Image control).

Application | Source

Note: You will still need to alter the HTML Template to accommodate the full screen as mentioned in this post…

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.

FlexBuilder to be offered free to students

This is one news that I wanted to shout from every rooftop, the day I heard it. But I’ve had to restrict myself, but no more !!!

Adobe announced that it is offering FlexBuilder2 at no cost to students and faculty at educational institutions worldwide. This would be made available starting early November this year. The official press release is available online at Yahoo News

Publishing and Viewing a VideoStream using Flex & FMS

This post deals with how you would publish and broadcast an Audio and/or Video Stream using FMS (Flash Media Server) and Flex.

You would need to have FMS installed on your system (you can get a free developer edition if you don’t have one) and Flex of course 🙂

To publish a stream, you would require a WebCam and/or Microphone hardware. You would also require the following files

publish.mxml | NetConnectionClient.as

Now lets look at publish.mxml. These are the steps to be followed

• A NetConnection Object has to be used to connect to the FMS Server. This is done in the initConnection() method in the code.
• The client propery of the NetConnection Object is set to a particular class (Indicates the object on which callback methods should be invoked.)
• objectEncoding is set to AMF0 (Action Message Format) since FMS2.0 is built on AS2 which uses AMF0 while Flex is built on AS3 which streams using AMF3 by default.

Once the connection is established using the NetConnection Object, it generates a netStatus Event. You can then tap into this event and check if the connection is established. Once the connection is established you can publish the stream, using the NetStream Object.

Once the stream is published, you can write another application to tap into it…. Here’s an example that lets you do that.

view.mxml

 

Database in AIR – Async Access

As my recent explorations into AIR, I decided to take a look at using DataBases with AIR. AIR runtime comes with an embedded SQLLite DataBase. You have the flexibility of opening a DB on the file system or if required, you can even start an in-memory DB that lasts only for a single session (you could potentially use this to store periodic data that gets generated due-course the session and then query it)

A lot of others have done examples on this, but I’ll post mine nonetheless. These examples are using the Asyncronous way of updation, which mean that I’m writing listeners at each point to know if the connection has been established, SQL statement executed…etc

Anyone who has a very basic knowledge of SQL and have used it any language (I have some experience in Java) will find the AS way as intuitive as their own language APIs. Here are the basic classes used

• A SQLConnection object to establish the connection to the DB
• A SQLStatement object to which you need to put in your SQL Query
• When the SQLStatement is executed, it generates one of the following
  • A SQLErrorEvent if the statement fails on execute
  • A SQLEvent.RESULT if the execute is successful
• A SQLResult that can be got by invoking the getResult() method on the SQLStatement, once the execution is successful

It is possible to do a synchronous way of accessing DB in AIR, I’ll discuss that later. But this time its async access of DB. There are 2 examples one with a in-memory DB and other where the DB is on the file-system itself. I have abstracted the AS code into a separate file and reused it for both the examples.

ExternalDBExample | InMemoryDBExample

AsyncDBScript (AS File) – contains the AS Code

Glitch with Google Maps API & AIR on Windows

I was trying to learn Script Bridging with a tutorial on labs.adobe.com. The tutorial shows an example with Google Maps API and using the HTML component in AIR to interact between the AS & JS parts of the App. Pretty interesting.

What was more interesting was an error that I encountered during the development of the App… While running the app with the API key duly filled in, it generated the following error…

“Google Maps API key used on this website was registered for a different website”

What was even more puzzling was that i could run the HTML alright (with the Maps) in the browser from a local html file. Did some poking around and found that this was a known issue with AIR on Windows (it works fine on the MAC) and is being tracked… Check out the details here…

The short answer is as of now you’ll have to deploy the app on a web-server. Here is the source code of the AIR app

Application Source

 

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.

JSP Proxy code for sourcing cross-domain Images

Sudheer and some guys from IITB were building some UI in Flex. They had a case where they were getting some photos from a server in another domain and then giving it to the DisplayShelf component by Ely to display in a cool UI. But when they tried to flip through the pictures using the interface, it threw an error as below.

SecurityError: Error #2122: Security sandbox violation: BitmapData.draw: http://<Server Name>/<App Name>.swf cannot access http://<image path>.jpg. A policy file is required, but the checkPolicyFile flag was not set when this media was loaded.

at flash.display::BitmapData/draw()

As the above error says, the operation is trying to read the bitmap data of the image using the flash.display::BitmapData/draw() method and this is allowed only in 2 cases…

1. When you have a policy file on the cross-domain server which allows you full access
2. When the content is in the same domain

You may not be able to do (1) since the server you are getting data from may not belong to you. The other alternative is to have the image on your server (or same domain) which is where proxy-ing comes in. So you have to write a server code to proxy the data (in this case image) onto your server and then access it. Here’s the JSP script that lets you do it. If you are a PHP guy you can take this script that Abdul has written.

Download JSP Proxy Script

How to use it?

You need to pass the source of your image as below:

img.source = “testProxy1.jsp? url= http://www.theflexshow.com/blog/images/ the_flex_show.jpg &mimeType= image/jpg”;

As you see, you need to pass 2 GET variables, which are url & mimeType. Click here if you don’t know the mime type of your content. Here is an example mxml code to test the above script. I’m using Distortion Effects by Alex Uhlmann in this example. So be sure to compile the source code with the SWC (check this post if you don’t know how to compile in an external swc into your app).

Also, feel free to edit the script/code and use it at your will… Hope this helps 🙂