We had a wonderful “Adobe Flex 4, Flash Builder, ColdFusion Builder Launch Party” with lots of members from our User group in Bangalore.

It was a great event with sessions on Flex4, Flash Builder 4, Flash Catalyst & ColdFusion

Here are the slide ware from my session “Say Hello to Flash Catalyst”

Mac Keynote version can be downloaded from here ( Preferred )

Powerpoint version can be downloaded from here

Yes, it is now possible to build all these cool stuff with Air 2.0 & MacBook.

MacBooks have a device called SMS ( Sudden Motion Sensor ) which can act as our Accelerometer. And using Air 2.0′s NativeProcess, we can invoke a native program to give us the Accelerometer data. Here is how the flow goes:

I got a simple C-Program called “motion” (bundled in the below package) which can give me X,Y & Z co-ordinates of Accelerometer & print on the console. I execute the process using NativeProcess API & capture the console output.

I made a wrapper class called “MBAcceleromoter” to make this entire process easier.

Click here to download the source & demo. ( Air 2.0 SDK required )

Click here to download Demo alone. ( Air 2.0 runtime required )

This package contains:

1. “motion” program to capture Accelerometer data

2. “MBAccelerometer” class to invoke & “motion” program & returned structured output through event dispatch mechanism.

3. Sample application (Accelerometer.mxml) built using APE

What are you waiting for ? Go ahead & create some amazing stuff.

Here is what I have built in this demo:

Demo – Base position

Demo – Tilted Left

Demo – Tilted Right

I’m a huge fan of iPhone and I truly believe in it’s usability. Taking inspiration from it, I’m planning to port some of the iPhone components on to Flex and make it available for FREE.

Here is the first component in this series called iCheckBox. Its an equivalent to “Switch” component iPhone with more flexibility for controlling Labels, Width & Animation.

You can download the component,sample and source from here

Let me know how you like it or request any other interesting components that you want.

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

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

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/

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

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.