My first interaction design using Flash Catalyst
I installed CS5 on my laptop today. After my euphoria around all the exciting feature in Photoshop, I got around to my first love - flash platform 
. We have a new tool called Flash Catalyst shipping in Creative Suite. for the uninitiated, it is a new interaction design tool for Flex applications. This was code named 'Thermo' earlier.
In my first 10 mins with the tool I had already added states and transition effects to my application! While that may not really sound very productive from a designers perspective. My expertise lies in "Developer Art", hence this productivity is amazing for me .
Flash Catalyst is an awesome bridge between designers and developers. It can be used to import artwork from Illustrator and Photoshop and then bring the mockups to life. That said, Flash Catalyst can also be used to create new projects from scratch.
So here's a run through of my first experience creating states in Flash Catalyst and design interactions for your Flex application. Check out this nifty little app. When the button is clicked the rectangle rotates in 3D and moves across the screen. On the next click of the button, the rectangle moves back to its original position.
Start off by launching Flash Catalyst. A welcome screen greets us.
When prompted for a project name enter a name of your choice - its a free open world . Click OK and watch the tool show up the various panels available.
On the top right corner of the screen click on the Wireframe Components panel. Drag and drop a button from there onto the design surface in the center of your screen. Next, click on the Rectangle tool on the top right of FC and draw an rectangle on the design surface of FC next to the button.
We would like to animate this rectangle when the user clicks on the button and then bring it back to its original position when the user clicks on the button again. All Catalyst projects have a default state in the project known as Page1. We can go ahead and add a new state which duplicates the current state by simply clicking on the "Duplicate State" button in the "Page/States" panel.
A new state called Page2 is created. Select the rectangle and move it to the right. Note that a new transition appears in the Timelines panel at the bottom of FC. Select the transition and click on the "Smooth Transition" button. Further note that the current transition being edited is the transition from Page2 > Page1 (see highlighted transition on the left side of the Timelines panel.
We can configure the transition from Page1>Page2 by simply selecting the transition on the left and clicking on the "Smooth Transition" button.
So we have two states in our application, we've defined the transitions between the states - lets wire up the state change to the button .
Any easier than this, it would be happening automatically for you! .
Activate the select cursor by clicking on the cursor button on the top right corner of FC. Select the button and not that the Interactions panel on the right comes to life. Click on "Add Interaction". Next leave the first two default options and select Page1 in the "Choose State" combo and Page2 in the "When in any state" combo.
This has just configured the app such that when the button is clicked, if the app is in the state Page2, the state will will be changed to Page1. Similarly, add another interaction this time reversing the state selections. You should see a new interaction on the panel which reads - "Play transition to Page2 if in Page1".
Press Ctrl+Enter key to run the app. The app will be launched in your default browser. Click on the button to see your first animation come to life.
Finally, to add the 3D rotation, click on the Page1 > Page2 transition in the Timelines panel. Next click on the Add Action button and select Rotate 3D.
That's all there is to it! . Flash Catalyst, I believe has the potential to bring our the "dormant" designers in developers. Use it to freely express your creative side and create more interactive experiences for your Flex applications.
Enjoyyy!!!
MAX Lab Session Material: Creating Data Centric Applications using Flash Builder and PHP
The version of WAMP which was installed on the lab machines can be downloaded from here.
Finally, in case you have any queries please post them at the Adobe Labs Forums.
Other References
Tour De Flex
Flex Devnet
Flash Builder 4 Tutorials
Flash Builder 4 Beta 2 and Flex 4 Beta 2 training videos
Finally, a worthy Google Reader replacement
Anirudh has developed a cool reader app (http://readefine.anirudhsasikumar.net/). Its based on the Text Layout Framework of Adobe Flash.
Two mins. of seeing and using the app, I’m in love with it and for the first time I think I have found a worthy replacement of Google Reader. Hopefully one day it’ll have OPML support so that I can move all my feeds from reader to this app .
Excellent work Anirudh!
Flex India Evangelism Team's Website Launched
The Flex India Evangelism Team has created their home page (http://flashahead.adobe.com). Their blog is available at http://flashahead.wordpress.com.
Watch the two spaces for the latest news from them...
Adobe Dev Summit 2009 – Bangalore
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
Highlights
- See the new, improved and rocking LiveCycle Data Services 3 in action! If you are a Java developer, you wouldn’t want to miss this one!
- If you are a PHP/Java developer, get on the RIA expressway using the new Data Centric Development features on Adobe Flash Builder 4
- If you’re into enterprise-wide RIA development, things have just got hot! Check out the brand new version of ColdFusion with the sparkling new developer IDE – ColdFusion Builder.
- User Interfaces are a thing of the past now. Build User Experiences of tomorrow with Adobe Flash Catalyst. Quicker than ever!
You can attend this event for FREE using Gold Pass or signup for the Platinum pass and get a Flex Builder 3 Professional license worth USD 699 FREE!!!.
You can get more details about the event and register here.
Come, be there to experience the awesomeness.
Howto: Setup PDT & Flash Builder
This setup allows you to edit and debug you PHP files along with your flex application in the same instance of eclipse. All features of PDT like PHP code coloring, auto complete will be available in addition to the wonderful features that Flash Builder 4 providesJ.
1. Download Eclipse 3.4.2 based PDT All-in-One bundle
a. Windows
b. Mac OSX Carbon
2. Extract it to a location of your choice. (say C:\opt\eclipse)
3. Download XDebug dll from http://xdebug.org/download.php. For the purposes of this tutorial I downloaded and used http://xdebug.org/files/php_xdebug-2.0.4-5.2.8.dll
4. Place this dll at any location accessible by your php installation, the PHP home directory itself is a good location.
5. Add the following entries to your php.ini file:
; ; Changes to enable XDebug ; zend_extension_ts="C:/opt/php526/php_xdebug-2.0.4-5.2.8.dll" zend_debugger.allow_hosts=127.0.0.1 zend_debugger.expose_remotely=always xdebug.remote_port=9000 xdebug.remote_handler=dbgp xdebug.profiler_enable=0 xdebug.profiler_output_dir="C:/temp" xdebug.remote_enable=On xdebug.remote_autostart=On xdebug.remote_host=127.0.0.1 xdebug.remote_mode=req xdebug.remote_log="C:/temp"
You need to be extra careful while editing the php.ini file as installations like WAMP tend to have a php.ini file inside the php folder and another one inside the apache/bin folder. The one under apache/bin is used. So a good way to figure out which php.ini file is being used by your PHP installation run phpinfo() and check the value of “Loaded Configuration File”
6. Restart your web server and view the phpinfo() output. XDebug should be listed there. If you don’t have a phpinfo() file, you can create one by putting the text below in a php file and saving it under your webroot. Then load the file in your browser.
<?php phpinfo(); ?>
7. Now download the plug-in version of Flash Builder and install it. When prompted to select the host eclipse, choose the “Plug into another copy of Eclipse” option and enter the path of the eclipse installed in Step 2 – “C:\opt\eclipse”
8. Start eclipse and create a new Flex Project with server type PHP
9. Create/Import a new PHP service the flex project
10. Click on the filters icon at the top of the flex package explorer and uncheck some .* & .project
11. Create a .buildpath file right under the Flex Project and add the following content to it, take care not to overwrite the text in BOLD in your .project file:
<?xml version="1.0" encoding="UTF-8"?>
<buildpath>
<buildpathentry kind="src" path="services"/>
<buildpathentry kind="con" path="org.eclipse.php.core.LANGUAGE"/>
</buildpath>
12. Update your project’s .project file to look like this:
<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
<name>PdtFlexTest</name>
<comment></comment>
<projects>
</projects>
<buildSpec>
<buildCommand>
<name>org.eclipse.wst.validation.validationbuilder</name>
<arguments>
</arguments>
</buildCommand>
<buildCommand>
<name>org.eclipse.dltk.core.scriptbuilder</name>
<arguments>
</arguments>
</buildCommand>
<buildCommand>
<name>com.adobe.flexbuilder.project.flexbuilder</name>
<arguments>
</arguments>
</buildCommand>
</buildSpec>
<natures>
<nature>com.adobe.flexbuilder.project.flexnature</nature>
<nature>com.adobe.flexbuilder.project.actionscriptnature</nature>
<nature>org.eclipse.php.core.PHPNature</nature>
</natures>
<linkedResources>
<link>
<name>bin-debug</name>
<type>2</type>
<location>C:/projects/www/htdocs/PdtFlexTest-debug</location>
</link>
<link>
<name>services/TestService.php</name>
<type>1</type>
<location>C:/projects/www/htdocs/PdtFlexTest-debug/services/TestService.php</location>
</link>
</linkedResources>
</projectDescription>
13. Now click on the Debug menu and go to Debug configurations, create a new “PHP Web Page” debug configuration.
14. Click on debug, the browser will open and this debug session in PDT will wait for the service class to be invoked.
15. Now launch your flex application which uses this services, the PDT debugger should break at the first line of gateway.php. In case you would like the debugger to break on a breakpoint in the service class, uncheck the “Break at First Line” option in the Debug launch configuration and place a break point on the exact line in the service file where you would like the debugger to stop.
That’s all there is to it J. You can now edit your PHP code and Flex code in the same instance of eclipse. Full coloring, autocomplete and other PDT feature support for editing your PHP file in addition to all the awesome features of Flash Builder for editing you Flex applications J.
Enjoyyy!!!
How Service calls work in Flex
Nice explanation by Tom Lane about the inherent async nature of all service calls in flex and how call responders help a user work with the results returned by such services calls.
<snip url="http://forums.adobe.com/message/2017154#2017154">
Let me take a shot at explaining asynchronous calls. Most PHP/CF/web developers are used to calling functions in one way only: synchronously. In ActionScript a sychronous function call looks like this:
var stuff = getStuff();
Pretty straightforward. It's how you expect functions to work: you call them, and then immediately on line #2 of this example you have a value in the stuff variable to work with.
But when it comes to calling remote functions on services sitting on a server somewhere, Flex calls them asynchronously. This is so that the Flex client can continue working while the request is pending. An aync call looks more like this (at least, the first part):
responder.token = getStuffFromService();
What this means is, "stuff" does not come back right away as the result of the function. Instead, what it returns is a kind of ticket. Sort of like ordering some food from a lunch counter and getting a receipt with a number on it. You don't get your food right away. Instead, you go hang out or do some other stuff while your order is pending, and then your number is called when it's ready. And then you "respond" to your number.
Well, that's what a CallResponder is. When you "place your order", you hook up a CallResponder to it. When your order is ready (data comes back from the service call), the responder kicks into action. It fires a result event (or a fault if something went wrong), and it updates its bindable lastResult property.
So, if you want to work with data from an async call, you can't simply do it on line #2 of the above snippet. You have to wait until the CallResponder for that call gets its result. If you create a databinding to lastResult, that will automatically update when the result is ready. But since you want to run some script on the result, you have to trigger that script from the CallResponder's result event handler.
Does that help? Async is definitely a new concept for many web developers to wrap their heads around. But it lets you build some interesting UIs once you get the hang of it.
</snip>
Hope this helps ...
Enjoyyy !!!
Howto: Use the update and delete methods of the generated sample code
Related posts:
1. Howto: Connect a flex application to database (for PHP developers)
2. Howto: Use createItem method of the generated sample PHP file
The following video shows how simple it is to connect the PHP sample's update and delete methods to your flex application.
http://my.adobe.acrobat.com/p77178814/
Now we have a fully functional CRUD application.
The next post will discuss how client side data management can take this CRUD application to the next level .
Enjoyyy!!!
Howto: Use createItem method of the generated sample PHP file
The generated sample PHP in FB has 5 methods/functions:
- getAllItems()
- getItem($itemID)
- createItem($item)
- updateItem($item)
- count()
- getItems_paged($startIndex, $numItems)
These methods help you easily use the client side data management functionalities of FB. Before we reach the final goal of using client side data management, we'll explore how these methods would be used conventionally.
My previous post explained how you can connect to the getAllItems() method of the generated file. This post I'll explain how to configure and use the createItem method.
Video - http://my.adobe.acrobat.com/p15003296/
Next post I'll cover delete and update.
Enjoyyy!!!
Howto: Enable Automatic Paging in Flex Applications for Any Kind of Service
Nice post from Sujit -> http://sujitreddyg.wordpress.com/2009/06/03/built-in-data-paging-using-flash-builder-4/
The post takes PHP as a sample service, the same workflow holds good for all services in Flash Builder. One of the cool benefits of using Services and DCD workflow in Flash Builder 4.
One point to note while trying to enable paging for functions you write on your own. For PHP & CF, the operation should contain two parameters startIndex and numItems as the last two parameters of the operation. Their types should be number/int.
getItems_paged($startIndex, $numItems)
For Java the name restriction is relaxed, but the type of the last two parameters should be int.
Once paging is enabled for an operation, the data will be paged automatically by the flex controls! How cool is that . Paging enabled operations can then be bound to data-driven controls like datagrid, list controls, combo box, advanced data grid and tree. These controls take care of asking of invoking the paging enabled operation to fetch the required data.
Short video (http://my.adobe.acrobat.com/p27433395/) showing the paging enabled operation working with a tree .
Enjoyyy!!!