Tag Archives: Flex

Live Documents office-suite chooses Flash/Flex

Sabeer Bhatia, one of the guys behind Hotmail, has been working on Live Documents, which has been announced a couple of days back. Live Documents is an office-suite for web and desktop (AIR?).

It is interesting to see, Live Documents chose to use Adobe Flash/Flex as front-end technology.

I read Zoho guys on Flash, I understand, it makes sense to use a technology that doesn’t have dependencies, easy to develop with, saves time, provides better experience to user and good for business. If Zoho guys think, they are achieving these goals with technologies of their choice, it’s totally fine. I would love to see how they respond to Live Documents release.

But hey, there are some (Live Documents, Buzzword, SlideRocket etc) which think Flash/Flex is cool (faster to develop, easier to use, consistent experience and better for business).

Technorati Tags: , , , , , , , , , , ,

Some Adobe Flex/Flash related resources from India

I have compiled a list of sites, mailing-list and bloggers from India. Most of them blog about Flash, Flex, RIA Usability, Web 2.0 etc.

Website/groups:-

Blogs:-

Above list is partial. If I have missed something, please feel free to leave the URL (of blog, site, mailing-lists etc) in the comment. I would update the list.

If you are Adobe Flex developer, you might want to register on International Registry of Flexcoders.

Technorati tags: , , , ,

Loading JavaScript file(s) using HTTPService/URLLoader

In my last post, I talked about JavaScript Flex 2 component that can inject Javascript code in HTML wrapper’s context. I experimented to see, if we can load Javascript files (.js) using HTTPService (or flash.net.URLLoader) in Flex2/AS3 projects and inject it.

Example Flex 2.0 code:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns="com.abdulqabiz.utils.*"  width="100%" height="100%" creationComplete="onAppInit ()">
<mx:Script>
<![CDATA[
import flash.external.ExternalInterface;
import mx.events.*;
import mx.rpc.events.*;
import mx.rpc.http.HTTPService;
import com.abdulqabiz.utils.JavaScript;
private var javascript:JavaScript;
private var service:HTTPService;
private function onAppInit ():void
{
service = new HTTPService ();
service.url = "test.js";
service.useProxy = false;
service.resultFormat = "text";
service.addEventListener ("result", injectJavaScript);
service.send ();
}
private function injectJavaScript (event:ResultEvent):void
{
javascript = new JavaScript ();
javascript.source = String(event.result);
trace ("javascript injected: " + event.result);
}
private function invokeSayHelloWorld ():void
{
ExternalInterface.call ("sayHelloWorld");
}
private function invokeSaySomething (str:String):void
{
ExternalInterface.call ("saySomething", str);
}
]]>
</mx:Script>
<mx:Button label="invoke javascript saySomething () function" click="invokeSaySomething ('Hey, how are you?')"/>
<mx:Button label="invoke javascript sayHelloWorld () function" click="invokeSayHelloWorld ()"/>
</mx:Application>

Test.js used in example:

//test.js
var myName = "Abdul Qabiz";
function saySomething (str)
{
alert (str);
}
function sayHelloWorld ()
{
alert ("Hello World!");
}

You would need JavaScript.as (with proper package directory structure) and test.js (code posted above) in place to make above example to work.
I am thinking to load FABridge using this approach. I know, it’s practically of no use except keeping code and logic at one place.

JavaScript injection through ActionScript

In last post, I showed, how can we inject JavaScript using ActionScript or MXML into host HTML container/page.

One more use-cases, I can think of:

  • Request server-side script to send a JavaScript (for specific browser) as string.  Using JavaScript class, I can inject the javascript in HTML

Flex Component that injects Javascript in HTML host

I know subject line is confusing but I am not able to think of a better one.

I have written a Adobe Flex 2.0 component(JavaScript.as), which can be used as MXML tag in Flex 2.0 applications. You can write JavaScript code as text of this MXML tag. When your application loads, all that JavaScript code would be injected host HTML’s DOM.

Confused? Let’s look at some examples.

Sample MXML application using this component (test.mxml):-


<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="com.abdulqabiz.utils.*"  width="100%" height="100%">
<JavaScript>
<![CDATA[
var myName = "Abdul Qabiz";
function saySomething (str)
{
alert (str);
}
function sayHelloWorld ()
{
alert ("Hello World!");
}
]]>
</JavaScript>
<mx:Script>
<![CDATA[
import flash.external.ExternalInterface;
private function invokeSayHelloWorld ()
{
ExternalInterface.call ("sayHelloWorld");
}
]]>
</mx:Script>
<mx:Button label="invoke javascript sayHelloWorld () function" click="invokeSayHelloWorld ()"/>
</mx:Application>

HTML code that embeds test.swf(output of above code):-


<html>
<head>
<!-- swfobject -->
<script type="text/javascript" src="http://blog.deconcept.com/swfobject/swfobject_source.js"></script>
</head>
<body>
<div id="flashcontent" class="playerContent" >You don't have Flash Player 9.</div>
<script type="text/javascript">
var swfObj = new SWFObject ("JavaScriptComponentTest.swf","JavaScriptComponentTest", "300", "300", "9", "#C0D4DD", true);
swfObj.write("flashcontent");
</script>
<a href="javascript:void(0)" onclick="saySomething ('hey')" >invoke saySomething ()</a><br />
<a href="javascript:void(0)" onclick="sayHelloWorld ()" >invoke sayHelloWorld ()</a><br />
<a href="javascript:void(0)" onclick="alert (myName);">show myName </a><br />
</body>
</html>

See an example Or Download (zip 133kb includes the SWF).

The code is available under the MIT license.

Disclaimer: I have only tested this in FireFox on Windows. So please drop a comment, if doesn’t work in your system.

Update:
March 6, 2007 – Fixed a bug, which popped-up after I implemented comment removal feature. Thanks to Joan for point it out.
March 5, 2007 – Library has been updated, it can now handle comments in JavaScript code. It would basically remove all comments before injecting it in HTML container.

How to get URL query-string variables within Flex application

On flexcoders, someone asked, how to get the URL parameters in a Flex 2.0 application? By URL parameter, I mean the query-string variables, as shown below:

http://yourserver/yourapp.swf?name=Joe&age=22 or http://yourserver/yourapp.mxml?name=Joe&age=22

Note: To get the variables in flex via mxml file, you need server-side compilation of mxml files.

You can get the values of the params using from

mx.core.Application.application.parameters

object, which contains the name-value pairs (hash-map).

For example,

mx.core.Application.application.parameters.name

would return “Joe”, considering above example URL. You can find more information about this in livedocs: http://livedocs.macromedia.com/flex/20beta1/docs/00001300.html

Then someone asked, what if your swf is embedded in custom html wrapper, how to get the query-string params inside swf?

Most of us use ExternalInterface class in Macromedia Flash Player 8(onwards) to invoke some JavaScript functions and extract the value in ActionScript.

I wrote a quick-and-dirty class in ActionScript 3, which would get the values of params from URL query-string for you. You don’t need any extra JavaScript code in HTML. The same logic can be used for any an ActionScript 2.0 running Macromedia Flash Player 8.
QueryString class has following properties:-

  • parameters – an Object which contains the name-value pairs from query-string
  • queryString– String, this contains the entire query-string (url-encoded) name-value pairs.
  • url– String, this returns the complete URL of the wrapper page with query-string.

See demo
Download source files

My last day in Adobe (Macromedia)

Today is my last day in Adobe. It has been a wonderful time working here among great people. I have learnt so much about product development, quality assurance and many more things.

I met people and worked with them, whom I always wanted to see, talk to. People, who have been a source of inspiration for me. I worked in a company which made Macromedia Flash Player and ActionScript, my love 🙂

It’s mixed feeling today, I am sad and emotional because I would miss a great company with great culture, people/friends in Macromedia and many other things which I would probably realize after sometime. But at the same time I am excited about future.

I would like to thank everyone inside Adobe(Macromedia) and outside, who have helped me and supported me to do my work well. I hope to keep working with Adobe Flex/Flash/ActionScript in future with same passion and enthusiasm.

I also hope to be on flexcoders and other mailing-lists. I also wish, I blog some interesting and useful stuff more often, I know this has been my wish for a long time but somehow not able to do 🙁