Some internals related to Flex and remoting

When I started working with Livecycle Data Services and Java remoting I was afraid of doing too many remote calls at one time because of the network latency – if the network latency is 100ms and you do ten remote calls in order to fill a panel with data you will lose (10/maximum no of […]SHARETHIS.addEntry({ title: “Some internals related to Flex and remoting”, url: “http://cornelcreanga.com/2009/07/some-internals-related-to-flex-and-remoting/” });

Learn ActionScript 3.0 using Flash Professional CS4

In the summer it’s usually a little quieter at work so why not use this quiet time to learn something new? ActionScript 3.0 for instance. Doug Winnie, Adobe’s group manager for designer/developer workflows, just started a new series on Adobe TV titled: “ActionScript 1:1″.

ActionScript 1:1 is a free training resource that combines video tutorials, documentation […]

FITC Mobile – Toronto (with Sneaks ;-)

This September I’m going to travel to Toronto to present at the FITC conference.  It’s set to be an exciting show with all of the major mobile platforms being supported including Android, Palm, Windows Mobile, Flash Lite, Blackberry, OpenGL ES and of course iPhone development.  There’s even going to be a session on SMS Applications, something that is probably a lot more interesting that you’d think!

Flash Sessions

  • Martin Barclay & Robert Burdick from Nokia: Develop and Distribute for Nokia smartphones
  • Scott Janousek: Practical Design and Development with Flash on Mobile Devices
  • Scott Janousek: Leveraging Accelerometers on Mobile Devices
  • Thomas Joos: Tips and Tricks for Flash Lite Optimization
  • Weyert de Boer: Android for Flash Developers
  • Mark Doherty: Flash Lite Distribution and the Open Screen Fund

So as you can see there are going to be a number of presentations on Flash topics.  In my session I’m going to probably break the rules and just sit and have a chat with everyone.  Distribution is a complex topic and one where many misunderstand where money is made.

On top of that I’ll also be showing off sneak peaks, so if you’re in the Toronto area and not coming to Adobe MAX then I suggest you start booking ;-)

Prices are very low at $209 and $89 for students.

Sony Ericsson release Flash UI Components in AS2

Picture 1

A few days ago the team at Sony Ericsson released their first set of UI components for the Flash Player on mobile devices.  Written in AS2 and fully integrated with Adobe Flash Professional CS4.

Each of the controls are fully customizable use the Component inspector, enabling you to change the look and feel for your applications.  Everything from background colors to text values and icons are supported across the components, it’s ridiculously easy to make them fit with your apps look and feel.

The beta set includes 8 new components ready for you to use:

  • Checkbox
  • List – Single Row with Icon
  • List – Two Rows with Icon
  • Progress Indicator
  • Push Button
  • Radio Button
  • Softkey Bar
  • Wait Indicator

How to Get Started

Once you’ve downloaded the MXP file here, you can install the components by simply double clicking on the file.  The Adobe Extension Manager will install the files and add them to the Components Panel in Flash Professional, you can open it using the Window Menu within the tool.

As you see it’s then possible to start dragging the UI components onto the Stage here on the left, which in my case is set for a Sony Ericsson C905 device at 240×320.  By default the components come with a nice Sony Ericsson look and feel, and if you’re like me then a little help in the UI department always helps (as you’ll see later).

Picture 3

Using the component inspector (shown here in the middle) you can then start to customize the look and feel of the list.  Check out just how much you can configure the components simply by clicking a few options, it’s really very nice indeed.

Ok, so I said about that my design talents need some work but I’ve played around with the various options and come out all blue.  Additionally, since the list component is using live preview, you can see your items directly and the active scrollbar on the stage.

Picture 8

Of course you can configure these options with Actionscript too, which is pretty much required for anything other than static lists.  Yet for colors and sizes there’s a real value in having live preview components, particularly for the designers among you.

Picture 9

In the image above I’ve added a softkey menu to enable me to buy some Star Fruit, which is shown selected at the top.  Using the component inspector I can set each of the items too, and so disable items that may be unavailable.  I can also change their color for highlighted, selected and disabled items directly in the tool.

Picture 4

Now that I’ve completed my list I can add a simple shadow fill and the Wait Indicator component (in circle mode) to animate when the purchase is taking place.  Again it’s configurable so that I can make it fit in with my application, and of course control the spinning of the circle in Actionscript.

Then I’m ready to test in Device Central CS4 to ensure that everything looks great, before a bit of testing on the Sony Ericsson C905 :-)

Picture 5

Remember that it’s possible to begin using these components along with the extensive list of MXP files for Project Capuchin.  Targeting Capuchin devices enables you to deliver standalone applications that have full access to JavaME apis on the JP8 platform, there are seventeen devices already.

Don’t forget the PlayNow Arena available on 38 devices, 17 countries and 200million users!

A Week of Flash Collaboration: Shared Models and Collection Nodes

Update: This blog post took me the better part of a day and a half and just as I was posting it I realized I had a huge hole in the logic for my application because of the problem at the bottom. My plan is to come back and clean this up, as Peter suggested, divide it up into a couple of parts. The most important parts are the first couple of paragraphs that talk about the sharedModel classes and the last paragraph that mentions how the AFCS team architected things to build on top of very low level base classes like CollectionNode. Largely this blog post is a mess and digging into CollectionNode was interesting but I recommend it only after having some time playing with the other classes in sharedModel. After that this might be a useful post to read. Diving into the video tutorials is also highly recommended.

The basic building blocks of Adobe Flash Collaboration Services (AFCS) are really the sharedModel package which includes the CollectionNode classes. Using the classes in the sharedModel package you can share any piece of data across AFCS connections and use these classes to build custom collaboration components like charts or maps where data can be updated and must change for everyone who is connected. I’ll first talk about some of the classes in the sharedModel package and then dive into how to use the CollectionNode, which provides the base functionality for sharing data.

Shared Models
The classes in the Shared Model package include a number of ways to share data and actions with AFCS. For the most part, the classes in sharedModel all use the CollectionNode to exchange data but they abstract a bit of the nuts and bolts of CollectionNode to make it easier to use. For instance the SharedProperty class lets you take any arbitrary property and share it across AFCS instances. It includes the ability to specify a CollectionNode or to just use one that will be generated as soon as the component using SharedProperty is created. Nigel Pegg has a great tutorial which covers using SharedProperty. Another set of classes in the sharedModel package are the Baton classes. The Baton is essentially a SharedProperty that gives you more control over when a user can edit something. The Baton class helps define when something is currently in use and shouldn’t be editable by anyone else in the room. It includes methods to grab() and putDown() a baton as well as a batonHolderChange event that can be used to make changes to the user interface. Nigel’s video goes through this as well using the example of a TextInput box. Using the Baton classes it is easy to disable editing of the TextInput while someone else is typing inside of it.

CollectionNode</strong
All of the classes above use collection nodes and there are three major parts to the basic CollectionNode: creation, configuration, usage. As the documentation states, an AFCS room is essentially a bunch of CollectionNodes exchanging data and each of those nodes has specific configurations that define who and how people can interact with them. One thing to note is that CollectionNodes can only be created by a room owner, or someone with UserRoles.OWNER so when creating a CollectionNode, the owner must be the first person in the room so they can “initialize” it. After that the developer can use the NodeConfiguration classes to customize what level of user has read or write access to the node.

Creating a new CollectionNode is pretty straight forward. In this example I’m going to create a mini-game where the participants have to match up a ColorPicker to “win”. To set up the game, I’ve got one CollectionNode with a “Color” node that will contain the values of the ColorPicker. Here’s how I create the CollectionNode:

protected function application1_creationCompleteHandler(event:FlexEvent):void
{
nodeGame = new CollectionNode();
nodeGame.sharedID = "gameNodes";
nodeGame.addEventListener(CollectionNodeEvent.SYNCHRONIZATION_CHANGE, onSync);
nodeGame.addEventListener(CollectionNodeEvent.ITEM_RECEIVE, onItemRecieve);
nodeGame.subscribe();
}

A few things to notice. First, the sharedID property is described in the docs as the “logical address of the collection within the room” and is how AFCS will refer to it so it needs to be unique. It is also the name that you will see when you browse the nodes in the room console that comes with the SDK. Second, in order to use the node we have to make sure it’s synchronized or we’ll get an error. After creating the node I added a CollectionNodeEvent listener that fires when we have a synchronization change event. I also added an event handler for when we receive messages upon subscribing to the node which I’ll talk about later. Once the SYNCHRONIZATION_CHANGE event fires we can start making changes to our CollectionNode:

protected function onSync(event:CollectionNodeEvent):void
{
var config:NodeConfiguration = new NodeConfiguration();
config.modifyAnyItem = false;
config.userDependentItems = true;
 
nodeGame.createNode("Color",config);
createMessage(false);
}

Now that we’re able to make changes to the CollectionNode I can create the Node that will store messages, in this case the “Color” Node. First I need to use the NodeConfiguration class to set up some rules for the game. By setting the modifyAnyItem property to False I make sure we’re not allowing users to modify messages that aren’t created by them. The userDependentItems property set to true means that when the user leaves the room, we clear out all of the messages belonging to them. In our game we don’t want to find a match with someone who isn’t playing any more. The NodeConfiguration classes allow us to tweak things like what happens to messages as well as define permissions for specific nodes within my CollectionNode. Once we’ve created the NodeConfiguration I can use the createNode() method to create a Node named “Color” and pass in the configuration values I just created. The last method there is a function I created. After we create the node and configure it I want to send the value of my ColorPicker to AFCS so I can start playing the game. I do that with a createMessage()</code< function.

protected function createMessage(overwrite:Boolean):void
{
var colorMessage:MessageItem = new MessageItem("Color");
colorMessage.itemID = cSession.userManager.myUserID + "_color";
colorMessage.body = color1.selectedColor;
 
nodeGame.publishItem(colorMessage,overwrite);
}

My createMessage() takes one variable, a Boolean that we'll use to tell AFCS whether or not we are allowed to overwrite an existing message. The first part of the code is where we create our MessageItem to be sent. I'm just creating a new MessageItem and passing in which Node it will belong to, in this case the "Color" node I created above. Then I give it an itemID which is how it will be referred to by AFCS. I use the current userID and prepend that to the word color. Finally I set the body of the message. The body of a MessageItem can be a String, a Boolean, a Number,or a key-value pair. In this case we're just going to pass in our selectedColor value. Once we create the MessageItem we need to add it to the Node. To do that we use the publishItem() method on the CollectionNode. This is where I pass in the overwrite flag. In this case, I don't want the MessageItem to be overwritten because this should be the first time we're adding it since we called it from the OnSync method. But later I want to make sure we overwrite it because we're making updates to it.

As soon as we publish our message, it's going to go into AFCS and then AFCS is going to send it back to us so we make sure it was sent correctly. When that happens it will fire an ITEM_RECEIVE event which we added an event handler for in our initial function. That code looks like this:

protected function onItemRecieve(event:CollectionNodeEvent):void
{
var tempMessage:MessageItem = event.item;
var userName:String = cSession.userManager.getUserDescriptor(tempMessage.associatedUserID).displayName
 
arrColors.push({color:tempMessage.body,user:userName});
if(tempMessage.associatedUserID != cSession.userManager.myUserID)
{
if( tempMessage.body == color1.selectedColor )
{
Alert.show('Winner! Your partner is: ' + userName);
}
}
}

This is where we start to get to the game. The first to lines just put the MessageItem and user displayName into their own variables. Next we put the selectedColor from our message and the displayName into an array that's stored on the client. This is kind of important. A lot of the sharedModel classes, like SharedProperty for instance, will handle storing data for you but the CollectionNode class doesn't, it's a very basic, low level component. So in this case we can't tell AFCS to send us a list of messages to check and see if there is a match, we have to keep a record within our own application. I do that by storing the information in an Array. Once I do that I want to check if we have a match but I need to make sure we're not matching our own color so I do a quick check using the associatedUserID and myUserID from the ConnectSession. Once we know that isn't the case I can check the body of the message with my current color to see if there is a match and pop up the appropriate dialogue.

When we make changes to our color to try and find a match we also need to send the update to AFCS and check our Array so I added an event handler to my ColorPicker for any change event:

protected function color1_changeHandler(event:ColorPickerEvent):void
{
createMessage(true);
for(var i:Number=0; i<arrColors.length; i++)
{
if(event.color == arrColors[i].color)
{
Alert.show('Winner! Your partner is: ' + arrColors[i].user);
}
}
}

In this case the first thing we do is call createMessage() with the overwrite flag set to true so we are overwriting our current message with the new color value instead of creating a new one. Then we run through our array of colors to see if this new color matches anything on the system. Do you notice a problem?

The problem is this: We configured our Node to remove all messages as soon as someone leaves the room but because we're using CollectionNode instead of one of the higher level classes we also have that array that is storing the values. We're using that array to check for a match after we change our color but we don't ever clear out old messages from our array so we might get a match from someone who is no longer logged in. We're also not checking the array and updating values so we have a lot of old data.

Welcome to Multi-User Applications
Multi-user applications are fun but there is also a lot to deal with. Luckily, the AFCS team has done a very good job of building base functionality into classes like CollectionNode and then building on top of them with classes like SharedProperty that take care of a lot of the complicated parts of managing a collaborative application. I tried to get nitty gritty and show how CollectionNode works but I really encourage you to start with the higher level classes, get an idea of what's happening, then break down to the low level base classes when you need to start creating very customized collaborative applications with specific rules, custom components, and many different types of data.

You can grab the full project here (Flash Builder 4 FPX file) and see how the parts fit together. I'll be updating it in the next few days to take into account the problem above and include a version that people can play.

New content on the Adobe Developer Connection

Flex developers: Secure your applications with the Flexible Chimp project and Spring BlazeDS Integration project. Ryan Knight and Jon Rose show you how in their article, Enterprise security for Flex.

If you want to learn more about ActionScript programming in Adobe Flash CS4 Professional, you’ll want to watch Doug Winnie’s recent ActionScript video tutorials. In these videos, Doug teaches designers how to code interaction and animation, as well as basic programming concepts. Also be sure to check out the Components Learning Guide for Flash CS4 It will help you reduce your development time and effort by using building blocks for creating rich interactive applications on the web.

For the more advanced crowd, ActionScript expert Colin Moock’s Lost ActionScript Weekend turns a fireside chat with friends into a series of real-world lessons about ActionScript 3.

To get e-mail updates of our new content, subscribe to our newsletters: News Flash, The Edge, and the ADC update. You can also visit the Adobe Developer Connection to check for new content.

Flash Catalyst and Illustrator – vector shadows, gradients and primitives

Everybody is asking me – how is it with converting vector shadows and gradients from Illustrator to Flash Catalyst.
Answer is YES, Flash Catalyst can do this. Thanks to new MXML 2009 graphic primitives library combined with powerful gradient fills and drop shadow – which are natively supported classes in ActionScript 3.0.
FAQ:
– Gradients are converted to […]

Get industry recognition through 2009 MAX Awards

MAX09_234x60_Vasava.jpgEvery year, we celebrate creative and forward-thinking uses of Adobe software with the MAX Awards at the annual Adobe MAX user conference. This year, Adobe MAX Awards feature new categories, industry judges and dynamic online voting. Specifically we are interested to see more innovative project submissions for Social Computing and Mobile, which are the two of the fastest growing sectors in the industry.

New to this year, we have increased awards to eight categories: Advertising & Branding, Education, Enterprise Productivity, Entertainment, Mobile, Public Sector, Social Computing, and Social Responsibility. Category winners will also be chosen online via people’s choice voting. Online voting will open September 21st and close during MAX Los Angeles. The three finalists in each category will be invited to attend MAX North America in Los Angeles, where the category winners will be announced live. All finalists will receive complimentary admission to MAX.

All submissions must be received online at www.adobemaxsubmission.com/submission/ by 11:59 pm PDT on August 7th. For more information, visit max.adobe.com/awards/

Be sure to submit your project before August 7th. Good luck!

AIR-based Mortgage Calculator Desktop Widget (with ILOG Gauges)

Here is a simple example of using a chromeless, transparent window in AIR to build a widget-type application. I know: yet another mortgage application… but to make things more interesting, I used the cool ILOG Elixir gauges to display and enter the principal, monthly payment, rate, and term. No rocket science here, but a nice […]

Flash Player Marketing for the HTC Hero

28072009095

Today I was holding an analyst briefing here in London on our Digital Home Platform, and on the way to the office I spotted the advert above for the HTC Hero. The launch of the device will happen on the Orange network here first, but there’s an interesting addition in the marketing.

As you can see “with Adobe Flash Player for an enhanced online experience” represents basically the only feature other than the tariff. So in itself Flash support has become a marketable feature item, that’s great progress for the Flash Platform.

I believe this is the first time that we’ve seen this with mobile phone advertising, so keep your eyes out for more of this!