FLEX - i - FRAME

One of the biggeset pain points of FLEX/Flash (as i see it) is its inability to render HTML in its totality. FLEX supports a few HTML Tags, but not all. Another question that people pose to me is... "When are you guys gonna include PDF rendering in Flash ?".

I hope the answer to that is soon (since its the logical way to go), but here's a (partial) answer to people's woes. I call it "FLEX - i - FRAME". Its an old wine in new bottle, considering the fact that Flash Designers/Developers have been using it since time immemorial.

Thanks to Cristophe, who ported the idea to FLEX1.5 in AS2 (read the post here) and then Brian who gracefully ported the same to AS3 with FLEX 2.0 (read that post here). It has an awesome way of resizing the iFrame when the Flex Application is sized. The great part is, it can make it look like you are rendering HTML and even PDF content inside a Flash/Flex Application.

I took Brian's iFrame MXML component and made a quick application (in about half hour) to show its capabilities. This application will be a one-stop-shop for all resources pertaining to Adobe India's "Adobe Developer Olympiad" RIA Challenge. You can choose from a choice of sites/resources and PDFs from inside this application. So here it is

FLEX - i - FRAME

(To view source, right click on the movie once
you click the above link OR click here)

You can download the whole source code, complete with all dependent files (javascripts, assets.. etc) and use it to playaround with iFrame yourself :)

The trick is very simple. Its just a clever use of the External API interface that lets the Actionscript inside a Flash movie, talk to the Javascript inside the html (in which it is embedded). In this case, the approach is to let the javascript position an IFrame on top of a specific area of your Flex application to provide a container for the HTML content which will then appear embedded in the application.

The IFrame component extends Canvas and is used like any other Flex container. Behind the scenes, it acts as a proxy for the actual HTML IFrame. For example, when the IFrame component is resized or moved it automatically asks the HTML document to resize/move the actual IFrame. You can easily find the ExternalInterface calls in IFrame.mxml and the corresponding JavaScript functions in iFrameDemo.html (renamed to iFrameDemohtml.mxml for reading purposes).

But what kind of surprised me was the amazing perfomance of the History Managemet API. While still within the FLEX Application, you can use the browser back button to navigate to earlier pages... really NEAT !!!

People participating in the ADO RIA Challenge, go ahead and use this innovatively in your application. For more details on ActionScript - JavaScript interaction through External APIs, refer the following links.

• External Interface API (FLEX2 documentation)
• Using External API
• External Interface (Learn By Coding example by Chris)
• Beyond External Interface, the FLEX - AJAX Bridge
  

Adobe Developer Olympiad (Win Rs. 50,000)

Adobe India on Friday, announced the Adobe Developer Olympiad. Adobe made its grand entry onto the programming world, with the acqusition of Macromedia... Adding Flash & ColdFusion to its kitty. Now with FLEX2.0 out in the open, Adobe has enough push to reach out to developers and its doing exactly that.

First came the Adobe Developer Derby, which saw some awesome applications being churned out. Check the results and the winning applications here. Then there was an Aussy equivalent of the Derby, which went well too.

So now we have decided to focus on one of the (probably THE) largest developer bases in the world. INDIA !! Our philosophy to start from the grass root level has spun this idea of Adobe Developer Olympiad for Students. The key highlights for the same

• Any student pursuing a degree in any stream as a full time student of a recognized university in India is eligible to participate in the contest.
• Submissions can be in 3 categories: Engineering (components), Applications, and ColdFusion integration.
  
• Each category has a prize of Rs. 50,000
  
• You can participate individually or as a team of upto 5 members

Check out these following links to start off....

• Adobe Developer Olympiad Page
  
• Adobe India Students Group
• Flex.org: Your one-stop Flex portal
• Flex Quick Starts: Lessons to get you up and running quickly
• Flex Developer Center: Whitepapers, lessons, examples, and more
• Flex Component Explorer: Lots of Flex examples for you to try

More updates will follow... Any queries, mail to the Developer Olympiad Mailing list (ado@adobe .com)

try.flex.org

This looks awesome... A Flex Online Compiler where you can type your code and compile it online and see the results along with it.. Ideal for beginners to start off with Flex. Check it out

http://try.flex.org/

The Flex Online Compiler is powered by Flex, ColdFusion, and Spry

youTube Search, powered by Flex

Jan 2007: Due to abrupt youTube.com security policy change, my youTube App doesnt work anymore. Possibly due to an exploit, youTube abruptly changed their crossdomain.xml file to only allow access from the youtube.com domain. As a result, YouTube developer API calls no longer work if the SWF exists in a non-youtube.com domain

So here it is, I have finally done it... a day of hard work, coupled with a couple of days of research :). I have the youTube search Tool, ready to go! You might have to de-activate the popUp blocker on your browser to see this application. I have made an alternate version for those who do not know how to do that. This application requires you to have FlashPlayer9. Download FlashPlayer 9 here and then Click on the links below.

Click here for youTube Search
(Click here for the alternate version)

This is the first public application that I am posting, so I'm really excited about it. It was an awsome experience building this application. The initial time was spent in the layout, look & feel of the app (which i think is still "too plain"). Then came the REST calls and parsing the incoming XML to suit my needs.

Then came a heart-breaker for me, which made me almost ditch my application. Due to some chaps ripping flvs (Flash Videos) off youTube (read it here), youTube had reworked their site inorder not to expose the flvs. So now i couldn't play them in my app... Directly.

But a programmer always finds workarounds to problems. Those who frequent youtube know that youtube provides a html code snippet, allowing you to embed it into your blog. In the code, there is a text like "tLuLE3jm1VU" is the only thing that varies across videos (and its called the video id). I had the video id of the videos i wanted, thanks to the youTube API. So i wrote a small PHP script to take the id as input and then generate the html page for my video.

I would then popUp this window as an html page (of a specified size) through JavaScript which was called inturn from my application using the Flash External Interface API. And hola... it worked... But my woes wouldnt end there. This workaround came at the cost of perfomance in my app and some of the thumbnails were not loading properly after the external interface call.

Then our very own Manish came to the rescue... Manish had written a youTube Featured video player back in March and had now reworked it to extract the flv out of the id again... Then things were all on a platter for me... I could now use Manish's code snippets, extract the flv file and play it in my own Video Display inside FLEX.

A bit of exceptional handling and try-catching :) and the application was ready to rock. So presenting to you....

If you find any bugs or issues, mail it to me at raghunath.rao at gmail dot com
Anyone wants to look at the code, you can find it here...

I'm Addicted to You Tube & its API

You Tube is a fantastic site... It has captivated my imagination for sometime now, that I was glued to it. A novel idea of uploading videos and then making it freely "searchable" or blog-appendable for anyone. You can see a whole lot of You Tube videos in my Media Blog... But one thing about youtube I did not like was its searchability and the ease of use to find a video that you are looking for (by user, by tag...etc).

So, I have been wanting to write a search tool for youTube for a long time now. And then i chanced on the youTube API. Its a set of very simple REST (click here to know about REST) calls that would return me useful search info like search by tags, username... etc in a simple, ready to use XML Format!!

I could now use this data in my Flex Application & write a search tool... So I was well on my way to write a youTube Search tool... That in the next post..

Before i sign off, here's a video I found on youTube that defines my state of affairs with youTube in the past few days.

I'm addicted To youTube

All about FLEX... to get you started !

Thanks all for the immense response to my last blog entry... A lot of people have asked me what is FLEX and how they can tap into it... so here are some resources to get you started.

Adobe® Flex™ 2 is the most complete, powerful application development solution for creating and delivering cross-platform rich Internet applications (RIAs) within the enterprise and across the web. It lets enterprises create personalized, multimedia-rich, Ajax-style applications that can reach virtually anyone on any platform. Enterprises can use Flex to quickly build and deploy applications that improve the user experience, boost the bottom line, and analyze data to enable better business decisions.

Flex.org is a starting point for developers working with Adobe Flex Builder 2, Flex Data Services 2, and the Flex 2 SDK. Here you will find links to technical and support resources from both Adobe and the developer community. Click here to visit Flex.org

You can find all the resources to start off with FLEX2 on this site...

Once you are started, you can register to FlexCoders. It is an International Registry of FlexCoders and will get you in touch with fellow Flex Developers and Community. Click here to visit FlexCoders

You can also checkout the Adobe FLEX Page and Adobe Labs Page

For people who want more out of FLEX, checkout AJAX-FLEX Bridge, FLEX-ColdF usion Connector.

Check out these Flex Examples to get a taste of what you can do...

1. Flex Store application & details
2. Restaurant Finder application & details
3. Photo Viewer application & details

Enjoy the Joy of FLEX, as Sam says... EXPERIENCE MATTERS!

HELL YEAH! WE SHIPPED THIS THING :)

I have been impatiently waiting for this day… And it has finally arrived...

"We, the FLEX TEAM, hereby declare that the FLEX2 Product line is finally out and ready for anyone who wants to provide an awesome experience on the web"

HURRAY!!! It feels so awesome just to say that.

I remember when I was small (I mean, I was in 8th or 9th grade), I used to stare at the splash screen of Adobe Photoshop and look in awe at the credits of those who participated in the product design (I was specially thrilled to find some Indian names there). Then it became a practice that I used to look at the credits of most products I used (especially Flash 5 and Winamp) and dream of the day when I would be on the credits of some product... But I never believed I would.

Now just 1 year into my foray to the software world, my wildest dream has come true. I'm on the credits page of the FLEX Product Line, and man it feels awesome. I was itching to put it up since it came in the internal build, but had to forcefully stop myself till the product shipped...

Incredible... Isn't it!

It has been a very rewarding and exciting journey for me in the last 10 months with FLEX2. A very alien technology for me when I joined has become a part of my life now. I’m so thrilled that I do not have words to express my excitement… So here’s to FLEX and to all the hard work and toil we went through to make it possible… CHEERS!!!

Flash Player 9 - Your window to richer experiences

Adobe has rolled out Flash Player 9 for the public. Get it today, so that you do not fall behind in the search for richer experiences on the net.

For technical guys, Flash Player 9 has a whole new architecture with ActionScript3.0 (AS3 for short) forming the core of it. AS3 is more tightly bound OOP language than AS2, adhering to the ECMAScript standards (which is followed by JavaScript too).

For now, only FLEX2 will come out with AS3 content, though all legacy files would run fine on Player 9. Designers will have to wait a while (until next Creative Suite release i guess) to get an Authoring equivalent in AS3 (in conjunction with the Flash Authoring 9 release)

So get it today and dont fall behind... Here's the link

P.S. I will be uploading some cool stuff i did with AS3 & FLEX, so i suggest you get it :)

Enriched with Flash MP3 Player

I was visiting Hemanth's Blog when I saw that he had a site of his own now, dedicated to his musical musings (you can check it out here). I was mighty impressed by the custom Flash Player which was used to play the playlist of his songs... I longed to make a similar one, but knew my flash skills was not as good (I can make one in Flex easily, but Flash player 9 that Flex2 uses is not yet fully public)

But then, something in the right click menu caught my eye.. it said "FLASH MP3 PLAYER 2.0 by JEROENWIJERING". I went to Jeroen's site and downloaded the latest version of his player there...

The best part about it is that it is under the "Creative Commons Deed" so I can edit it and use it for my non-commercial purposes, by giving due credit to the creator. So here's to Jeroen, for creating a simple but wonderfully useful application. Cheers!!

Now you can listen to all my songs in the sidebar to the right of the blog, rather than having to navigate to each post for the songs. Flash Rocks, so does Macromedia (now Adobe), who created it.... Yeee ha

ScrapBlog... Yet another FLEX Sucess Story

Yet another Flex sucess story (after Yahoo Maps among others). Eariler today, I got a mail from Matt Chotin about this site called ScrapBlog.com where one can have a photoblog with loads of interactivity, all for free.. Whats more, it was made in Flex1.5. If someone can do such a great job with Flex1.5, wonder what people will do with FLex2.0.

It has a nice UI (though a bit too flashy for my taste), some cool custom components and good amalgam of technologies like Java, Flex and Applets... Loved it. I created mine, just to get a feel of it. Feels good to see your product being used so productively

Here's my scrap blog http://raghunathrao.scrapblog.com/

Try it out today... I'm sure you will love it.

FLEX quote of the week...

Richard Monson-Haefel is a key influencer in the Java and IT markets. He is the award winning author of books on Java Web Services, EJBs, and JMS. He is also the founder of several Apache projects and a former member of the JCP Executive Committee (a small, elected and elite group). Now, he is an analyst with the Burton Group. In early January he wrote a 30 page report on AJAX that mentioned us, but in a niche and undervalued way. He really didn't get what we were doing and was (with some caveats) very supportive of AJAX.

Richard has been trying out FLEX and his blog posting today is a thing of beauty and recognition of our efforts. Check it out. Here is a excerpt from his Blog...

"In America you can't say peanut-butter,
without thinking about Jelly.
In the IT industry you shouldn't think of Ajax,
without thinking of Flash."

Cheers...

I love FLEX

I'm so proud of working in Adobe (formerly Macromedia) and especially in this great technology called FLEX. Still in beta (you can get it here), FLEX is generating a lot of buzz in the developer community, people are picking it and playing with it and applauding it (though there are a few things that will be sorted out before the release)

I was pleasently surprised to see a lot of people at the Adobe Conference fiddling around with Flex Builder (which is a IDE that we have released which is build on the almost ubiquitous Eclipse IDE). To see so much enthusiasm inside the company itself was awsome. FLEX swept the show in the conference with the maximum people wanting to port their applications to FLEX, and wanting to know what they could do with it.. It was awsome.

But what really made me proud was something i saw today... It was a podcast interview of Bruce Eckel, (author of the books "Thinking in C++" and "Thinking in Java" ), he talks about his positive experience with experimenting with Flex 2.

Bruce is a Java Guru, who likes to sample and play around with new technologies. He has tried Perl, PHP, Python, all kinds of Java related stuff, Ruby... etc. The very fact that he chose FLEX to beat others like Applets and AJAX for user-experiences for Rich Internet Clients is a big recognition for us. I really loved it and I'm proud to be a part of it..

Here is the part about flex that is from his interview.



You can hear the whole interview here on the Java Posse podcast, episode #37 , "Interview with Bruce Eckel, Part 2"

FLEXing my Muscle

The whole point of this blog is to write about my passion for programming, for Flash, Action script & Flex. So here we go...