Slide ware from “Say Hello to Flash Catalyst” session

24 05 2010

Say Hello to Flash Catalyst

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

Advertisements




iCheckBox – iPhone style Switch component for Flex

13 11 2009

iPhone has revolutionized the way world looks at Smart Phones. Apart from that, it had also set a new standard for Usability on phones & softwares in general.

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.

iCheckBox Component Preview





Using WebServices with Data Centric Development in Flash Builder 4

3 06 2009

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

Links

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

FinalApplication

You can download the source of this entire project from here

So, lets get started with the tutorial now.

Step 1 : Import WebService


ConnectToWebservice


  • 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


DataServicePanel

  • 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

ZenfolioDesignView

  • 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

FinalApplication

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





Hurray! Flex 3.0 & AIR 1.0 are released

25 02 2008

Adobe Flex Adobe AIR

The much awaited products by the Rich Internet Application development community are released and available for download now. And Flex SDK is now open source too.

What more can you ask for?

Get the latest version of Flex & AIR and unveil your imagination with engaging, cross-platform RIAs.

I would soon start blogging about very cool new features of Flex & AIR. And I will also be releasing a new version of AIR 1.0 compatible Scrapmate with whole bunch of exciting new features.

So, watch out for the cool stuff that I’m going to post in next few days.

Flex home page : http://www.adobe.com/products/flex/

AIR home page : http://www.adobe.com/products/air/

Adobe opensource site : http://opensource.adobe.com/

Flex public Bugbase : http://bugs.adobe.com/jira





Better By Adobe

24 01 2008

Adobe . . .

  – The company that is being admired by millions of creative professionals and knowledge workers around the world

  – The company that is revolutionizing the way the world engages with Ideas & Information anytime, anywhere and through any media

  – The company that is producing the fabulous software and driving Web 2.0 revolution with stunning Rich Internet Application development tools

  – The company that is leading the industry with advanced solutions and new advanced business models that are attracting and inspiring customers

    And the list goes on and on . . . .

    So, let’s stop it here and have a look at these wonderful products though a cool application . . .

     
    Click here to play with this application.

     
    Adobe Products