Its back and its bigger than ever.

Adobe Dev Summit is back to present you the latest happenings of Adobe Flash Platform. Don’t miss this unique opportunity to hear from the experts about the power & awesomeness of Adobe Flash Platform & Flash Builder 4.

Date : 4th August 2009, Tuesday

Time : 9 AM to 6 PM

Where : Lalit Ashok, Bangalore

What more ? You can attend this event for FREE using Gold Pass or pay nominal fee of Rs.  3000/- ( or Rs. 2500/- before 24th July 2009 ) for Platinum pass and get a Flex Builder 3 Professional license for FREE.

You can get more details about  the event and register here

Come, be there to experience the awesomeness.

http://www.endtoend.in/ete2009/adobe/devsummit/mailer.html

As promised, here is my first post on how to use WebServices with Data Centric Development workflows in Flash Builder 4.

Links

• Introduction to Data Centric Development in Flash Builder 4 (Gumbo)
• http://en.wikipedia.org/wiki/Webservice

In this tutorial, We are going to create a Flex application which uses Zenfolio WebService to search & display images. Below is the final output of this tutorial

You can download the source of this entire project from here

So, lets get started with the tutorial now.

Step 1 : Import WebService

• Create a new Flex project and go to “Data->Connect to WebService” menu item.
• Enter some name for your Service say “ZenfolioService” without quotes. You can enter any name and this will be used to uniquely refer your WebService inside your project
• Enter the URL of your WebService. I’m going to Zenfolio’s WebService i.e. http://www.zenfolio.com/api/1.0/zfapi.asmx?WSDL
• You can click “Next” & choose “ZfApiSoap” from port combo box. This would automatically be selected for most of the WebServices.
• Click “Select All” button to select all operations or optionally you could also select only few operations that you are going to use in this project.
• Click on “Finish” button.

Step 2 : Explore WebService

• Have a look at “Data/Services” panel placed next to “Problems” view or Choose “Window->Data/Services” if the view is not available already.
• You can see that the WebService is introspected and all the Data types & Operations/Methods/Functions inside your WebService along with its signatures are displayed under your service name i.e. “ZenfolioService”.
• Thats the beauty of Data Centric Development. It makes your life a lot easier while working with your backends.
• We are going to use a method/operation called “GetPopularPhotos” which is available inside this WebService and as you can see in the “Data/Services” panel, this operation is taking two parameters namely “offset” & “limit” and returning an array of “Photo” objects as output.

Step 3 : Bind Components to Data

• As shown in the screenshot, place a “Label” on top as header, “List” component on the left side and an “Image” component to the right of “List”.
• Enter the “ID” for Image component as “imgPhoto”
• Now, we need to bind the response of “GetPopularPhotos” to the “List” component in our UI. So, select the List in Design View and choose “Bind to data” in context-menu that comes when you right-click on this component.
• Select “GetPopularPhotos” operation from “Operation” combo that appears in “Bind to Data” dialog and select “Title” from “Bind to field” combo box.
• As “GetPopularPhotos” operation is expecting two arguments, you will automatically be taken to Code view where you need to enter values for arguments for example “1,50″. So, your final call would look something like below

GetPopularPhotosResult.token = zenfolioService.GetPopularPhotos(1,50);

Step 4 : Display image on selection

• Select the “List” component in Design View, right-click on it and choose “Generate SelectionChanged handler”
• An event handler function is automatically generated for you and this function will automatically be called when user selects an item from List at runtime.
• Type below like in the event handler function that got generated.

imgPhoto.source = “http://www.zenfolio.com” + list.selectedItem.UrlCore +  ”-4.jpg”;

Step 5 : Beautification

• I added a rectangle using the new “<s:Rect>” component.
• I added an “ItemRenderer” to display thumbnail image instead of text in List.
• You could get the code for above two beautifications from the project source posted here

You can download the source of this entire project from here

I hope that you all enjoyed this tutorial. Please feel free to mail me back on your Comments/Feedback/Questions that you may have.

More articles on Flash Builder 4 can be found here

As a part of “Adobe Flash Platform” branding strategy, “Flex Builder” is now renamed to “Flash Builder”.

Flash Builder Beta build can be downloaded for Free from http://labs.adobe.com/technologies/flashbuilder4/

Links

Using WebServices with Data Centric Development in Flash Builder 4

__

Data Centric Development (DCD) is an exciting new Rapid Application Development feature in Flash Builder 4 which helps traditional web developers to quickly build Flex applications that talk and fetch data from various backends like ColdFusion, PHP, BlazeDS, LCDS, WebService & HTTPService.

This feature provides an easy-to-use unified workflow to import Services, see them inside Flash Builder & bind UI elements in your application to data coming from server.

Below are some of the compelling features offered as a part of Data Centric Development workflows:

• Import existing ColdFusion/PHP/BlazeDS/LCDS/HTTP/WSDL services using very easy to use “Connet to Data/Service “wizard
• Generate sample code for  ColdFusion/PHP service
• View all functions & data types of your Service inside Flex Builder IDE using “Data/Services” panel
• Test & Configure the output return type of your server side function/operation inside Flex Builder using “Configure Return Type”
• Easily invoke & show the data from services using simple Drag & Drop and other gestures
• Automatic client side Paging
• Automatic client side Data Management
• Automatic Input & Output Form Generation
• Automatic Master-Detail view generation

Whole of this workflow can be categorized into 4 important steps. They are:

1. Connect to Data/Service

In this step, user is supposed to Import existing service by providing File path (for ColdFusion/PHP) or URL (for HTTPService/WebService) or Destination name (for BlazeDS/LCDS) to the service or generate a new service (for ColdFusion/PHP only). This step can be done using “Data->Connect to Data/Service” menu item.

2. Explore Service

Once the service is imported or created, all the available functions/methods along with its signatures from your backend service would appear in “Data/Services” panel inside Flash Builder.

3. Configure Return Type

In most of the cases, Flash Builder automatically identifies the data type of input arguments and return type of the operations by introspecting your server code & metadata. But, in some cases, Flash Builder would need to invoke the operation, introspect the output returned by the operation and create client-side ActionScript VOs if required.

4. Bind Components to Data

Once Flash Builder knows the Input argument types or Return types of the operation, you can start binding the output returned by these operations to UI elements like DataGrid, List, Button, ComboBox, Form, Charts etc..

Over the next few days, I will be explaining in detail about each of these wizards and backend specific workflows to make your life exciting with DCD.

More articles on Flash Builder 4 can be found here

If you are a Flex/Flash/AIR developer and think you can be the one behind the coolest of all  RIAs, you cannot afford to miss this event! Put on your RIA development shoes, build the coolest app that you can imagine and send it to us on or before 26th November 2008. If your application catches our attention, you will be invited to a very special event on the 29th of November at Grand Ashok, Bangalore where the top applications will go on stage for a demo showdown! This is your chance to Flash your design skills, Flex your coding muscles and AIR your demos in front of an elite judge panel & the Adobe community.

The Grand winner / winning team will walk away with a groovy Apple IPhone.

The runners up will take home with them a Sony home theater system.

What’s more, there are loads of IPod Nano’s, shuffles and Adobe branded goodies to be won.

This event also brings to you  an exclusive preview on the new developments in the Adobe Flash Platform. Experience the Flash Catalyst (code name Thermo), Gumbo(code name for the upcoming version of Flex) ,FXG and Flash Player 10.

Register today at http://adoberiathon.eventbrite.com

Rules & Regulations http://adoberiathon.wordpress.com/rules-regulations/

Terms & Conditions http://adoberiathon.wordpress.com/terms-and-conditions/

Hello People,  Welcome back.

Its good to start blogging again after many days. I was very busy working on the next version of Flex i.e. Gumbo. I’m kinda free now after releasing the MAX Preview release of Gumbo. So, here I’m starting to share interesting stuff again.

Demos, Tutorials, Videos, Interesting applications and lots of other cool stuff to show you all. So, stay tuned to this blog to see all these

And, Thanks a ton for your all your comments and feedback on my earlier post on “Refreshingly new Flex Calendar controls” that really encouraged me to add one more to the list i.e MAC Dashboard style calendar along with source.

Click here to download Component / Source

AIR APIs are very robust and powerful. Along with platform independence, They also offer many exciting new possibilities for Flash, Flex & other Web developers.

So, I made this funny simple Screensaver like application named “SWFMyScreen” to demostrate some of the cool features of the AIR. Using this application, user will be able to set any Local or Remote SWF as Screensaver which will be displayed in fullscreen after given number of idle minutes.

Features:

1) Chosee your favourite SWF Photo albums or any other SWF animations as your Screensaver

2) Set the idle time-out to display Screensaver

3) Configure the background color

     -> Click here to download application

     -> Click here to download source

     -> Click here to install AIR ( Adobe Integrated Runtime )

 AIR Features demonstrated in this application:

1) Tracking user presense

2) Automatic login during system start-up

3) System tray icon with context menu

4) Full screen AIR application

5) Transparent window with custom chrome

6) Drag a window that does not have title bar

7) Browse dialog for file selection

Flex is a very flexible language and I’m here to prove it again.

Today, I’m posting these two new cute flex calendar controls which uses inbuilt “CalendarLayout” class for functionality and has a completely new layout and interface defined in MXML.

I’m open sourcing these components and you are allowed to edit / use them in your projects with no restrictions.

So, go a head, have fun with these components and unleash your creativity bring out more cooler calendars.

Click here to Download Component / Source

Dear Readers, Please feel free to send me your Feedback / New Component Requests through comments or email.

Although Cricket is played by a few countries in the world, it is a religion in the Indian sub-continent and followed by millions in India alone.

Thanks to Twenty20 cricket & IPL tournament, the craze has increased lot more in the recent days and added lot more glamour to the game.

Even though we are Web 2.0 world, people watching cricket match through internet portals miss the excitement of game due to plain vanilla interface.

However this can be changed using RIA technologies and many aspects of watching a match live such as chatting with friends, participating in contests, enjoying charts and graphics can all be brought to user following through internet as well.

So, CricketNirvana.com brings you “CricketCentre”, the next generation of Cricketing experience to your desktop through Adobe AIR. This is a Rich Internet Application developed using Adobe Flex and runs on your desktop using Adobe AIR.

Home Page -http://www.cricketnirvana.com/CricketCentreWeb/CricketCentre.html

Feature Demo – http://www.cricketnirvana.com/CricketCentreWeb/FeatureDemo.html

 Features

1) Realtime ball-by-ball score updates

2) Full & Mini-Scorecards

3) System tray & Pop-up notifications

4) Live Analytics & Statistics

5) Player profiles

6) Express Emotions

7) Gossip with friends

8 ) Watch Videos, News and lot more…

So, go a head and experience it…

From the past few days, I’m seeing a problem with AIR HTML Component that is being reported by many users in many forums. So, i thought of giving a small solution which will help developers to overcome this problem.

Problem

AIR HTML Component fails to open new HTML pop-up window when the “target” of the link is set to “_blank” or “_new”.

Solution

The solution is very straight and simple.

Step 1 - Get all the available links of the page after it is completely loaded and add “onClick” event listener to all required links.

Step 2 – Get the Link’s URL in “onClick” event handler and open a new browser window using “navigateToURL()” or implement a custom window in AIR to handle this.

Code


<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:HTML id="htmlComp" width="100%" height="100%" location="http://www.rediff.com" complete="addEventListenersToLinks(event)"  />
 
 <mx:Script>
  <![CDATA[
   
   private function addEventListenersToLinks(e:Event):void
   {
    var dom:Object = e.currentTarget.domWindow.document;
    var links:Object = dom.getElementsByTagName("a");
    
    for(var i:Number = 0; i < links.length; i++)
    {
     if(links[i].target.toLowerCase() == "_blank" || links[i].target.toLowerCase() == "_new")
      links[i].onclick = linkClickHandler;
    }
   }
   
   private function linkClickHandler(o:Object):void
   {
    navigateToURL(new URLRequest(o.currentTarget.href),"blank");
   }
  ]]>
 </mx:Script>
</mx:WindowedApplication>


I was developing an AIR application recently and wanted to validate the email credentials of the user.

I searched a lot and could not get any component, library or code snippet available to do this in Flash/Flex/AIR.

So, I thought of developing a small library of my own and sharing it with the community. And here it is…

IMAP/POP Email Validator

This is a small set of class library which Flex/AIR developers can use to validate any IMAP or POP email logins. This does NOT use Coldfusion or LCDS server in the backend. This connects to given IMAP/POP server using Flash Socket and executes required commands to validate the login.

Example

Checkout the above Sample ( Save the SWF locally and play with it )

Download source

Due to cross domain restrictions in Flash Player, when this application is hosted on any domain other than mail server’s domain, a “crossdomain.xml” file needs to be configured and kept on the mail server.

But, this issue does not come in AIR based applications and Flex applications that are running locally.

So, grab a copy, check out the samples and try it with your Intranet/Internet apps..