Comtaste Consulting | Enterprise RIA consulting and development

A very common UI element found in many applications are those little square handles around an on-screen object that allow you to move & resize it. To do this you can use the great ObjectHandles library.

ObjectHandles (http://osflash.org/projects/objecthandles) is a library to allow a user to move and resize UI elements in a Flex based application.
It provides drag handles around controls that users can manipulate with their mouse. Any Flex component can be placed within an ObjectHandles container to quickly allow you to add functionality.

It behaves as a container object where you can put any other flex components and use its resizeable functionalities.

Features of the ObjectHandles library:

* Move & Resize Functionality for any flex component
* Ability to limit movement and/or resizing in both vertical and horizontal directions
* Ability to limit movement and/or resizing along an anchor
* Simple 1-file (.swc) install
* Mouse cursors change when over different handles
* Graphical handle support
* Aspect ratio support
* Initial rotatation support has been added

ObjectHandles is a very cool library for your project when you want to implement moving & resizing any kind of flex object.

Example usage:

In the example below you'll see two buttons in a vbox that can be moved together. This is the mxml to achieve that:

<oh:ObjectHandles x="10" y="158" width="107" height="108"
minHeight="30" minWidth="30">
<mx:VBox borderStyle="none" top="0" left="0" right="0" bottom="0">
<mx:Button width="100%" height="50%" />
<mx:Button width="100%" height="50%" />
</mx:VBox>
</oh:ObjectHandles>

Or if you want an Actionscript example:

Here's an example to dynamically load an image into an ObjectHandle and allow resize movements:

protected function init() : void
{
var oh:ObjectHandles = new ObjectHandles();
oh.height = 50;
oh.width = 50;

var image:Image = new Image();
image.source = "snowflake.png";
image.percentHeight = 100;
image.percentWidth = 100;
image.maintainAspectRatio = false;

oh.addChild(image);
oh.allowRotate = false;

genericExamples.addChild(oh); // replace genericExamples with a canvas in your application
}

Improving the experience of the ObjectHandles library

When you drag or resize an object from right to left or from up to down everything works great.

But if you to resize the object back (from right to left) you'll see that the inside object will cause a strange flickering.

To prevent this we can use the "Flex Move Effect" and "Flex Resize Effect" instide of change programmaticaly width and height and x and y.

How it actually works:

Inside the ObjectHandles.as Actionscript 3 class, you can find the protected function onMouseMove(event:MouseEvent) : void.
This is the function that moves and resizes UI elements in a Flex based application. Find the following line inside the ObjectHandles.as:

if( wasMoved || wasResized )
{
applyConstraints(desiredPos,desiredSize);
x = desiredPos.x;
y = desiredPos.y
width = desiredSize.x;
height = desiredSize.y;
}

The applyConstraints() method simply applies restrictions to your objects like xAnchor, minium size, etc. The other four lines simply set the x,y coordinates and the width and height properties of the Flex object.

Now let's change this four lines to prevent the strange flicker bug that affects the object :

if( wasMoved || wasResized )
{
applyConstraints(desiredPos,desiredSize);

if(moveEffect.isPlaying){
moveEffect.end();
}
moveEffect = new Move();
moveEffect.target = this;
moveEffect.duration = 1;
moveEffect.xTo = desiredPos.x;
moveEffect.yTo = desiredPos.y;
moveEffect.play();

if(resizeEffect.isPlaying){
resizeEffect.end();
}
resizeEffect = new Resize();
resizeEffect.target = this;
resizeEffect.duration = 1;
resizeEffect.heightTo = desiredSize.y;
resizeEffect.widthTo = desiredSize.x;
resizeEffect.play();
}

It replaces the brutal property changing of the widget with a smoothness move and resize effect provided by Flex.

In the next post we will see how to create a snap to grid and a snap to line effect.

Conclusion and references:

ObjectHandles google code home
Class Move
Class Resize

The ROI index is a synthetic yet meaningful parameter used to express the benefit of making a project, as well as the benefit of making a certain choice related to a project, for example the technology to be used.

During my speech at the recent 360Flex Conference in Milan I presented the benefits achieved as a consequence of adopting Flex to re-design an enterprise application.

After an overview concerning the practical methods that can be used to evaluate the benefits and to calculate the Return On Investment (ROI), I presented a real-world case of an application for banking operations.

In that case, the benefit was measured in terms of the time saved to execute an ordinary operation (cashing a check) by using the Flex re-designed application respect the time that was formerly necessary to execute the same operation by using a "common" Oracle form-based application (simple html using the "traditional" logic of 1 click=1 page).

A tipically physical kind of measurement (time saved) was then translated into an economic parameter by valueing the time by the standard hourly wage of the staff involved in the operations of that kind.

The final passage was the calculation of the ROI formula.

The important and evident result was that the use of Flex contributed to leverage the ROI formula numerator (return) and to decrease its denominator (investment), for a double action of increment on the final result.

| View | Upload your own

The slides of that speech can be found on SlideShare

All Java developers that start developing software in Flex know what garbage collector is and how it works; the Flash developers, who can be not so well-informed about it, should begin to understand what it is, because the new functionalities introduced into Actionscript 3 can lead to memory leaks.
The garbage collector of actionscript 3 works in 2 different ways to know which object should be deleted from memory: the reference counting method and the mark&sweep.
In the first case every object maintains the number of references to it during the application's execution; when an object is created its reference count starts from 1, every time this object is referenced by others its reference count grows, on the contrary the reference count decreasees when another object with a reference to it is deleted.
When the number of references goes down to 0, then the garbage collector can remove the object from memory.
In the mark&sweep method the flash player starts from the application root object and visits al its referenced object, gradually reaching all the leaves of the reference tree; the flash player marks all the objects met. This way all the objects connected directly or indirectly to the root object will be reached and marked.
At the end of the visit all the objects not marked could be deleted from memory.
The first methid is faster and easier but there are problems like round references, that is those objects that have references between themselves.
The second method, introduced with flash player 8, is a lot more effective, but the visit in depth of the reference tree is really expensive speaking about CPU, so it can be used only sometimes.
It has to be clear to developers that the garbage collector doesn't delete an object from memory immediately. An object remains active for some time and it will keep going listening to and launching events until it will be definitely cancelled.
The biggest risk to create memory leaks comes from event listeners; in actionscritp 3.0 has been added the chance to create listeners with weak reference, that is they will not be considered in reference counting.


//the last parameter is the weakReference flag
object.addEventListener("eventName", listenerFunction, false, 0, true);


This way we don't take the risk that an object will never deleted from memory due to listener fault, anyway there is the possibility to remove the event listener, so we can avoid the risk in any case:


object.removeEventListener("eventName", listenerFunction);


Whe we use a ChangeWatcher on a Bindable propery of an object


var watcher:ChangeWatcher = ChangeWatcher.watch(object, "property", listenerFunction);


we should always remeber to call the unwatch method when the watcher is not necessary anymore


watcher.unwatch();


otherwise it will not be possible anymore to delete the object from memory.

With Java it is possible to call clearly the garbage collector using this two simple istructions:




      Runtime r = Runtime.getRuntime();

      r.gc();


in flash there in no way to explicitly invoke the garbage collector, but on the web there is a hack that can be found with a simple search:


private function gcHack():void

{

       // unsupported hack that seems to force a full GC

       try

       {

              var lc1:LocalConnection = new LocalConnection();

              var lc2:LocalConnection = new LocalConnection();



              lc1.connect('name');

              lc2.connect('name');

       }

       catch (e:Error)

       {

       }

}


it seems to work without problems, so we hope to find an official and documented function that does this as soon as possible.

The script.aculo.us library is the first collection of visual effects developed using javascript. The first 3 functions are:

1. effects - new Effect.effectName() and drag&drop control - new Control.controlname()
2. events - new Event.observe([click,mouseover,mouseon,etc], elements id, callback function)
3. ajax - new Ajax.update()

Other interesting functions of script.aculo.us are "edit in place", "drag&drop" and sliders. In this post we will look to the sliders controll and particulary to how to implement a dual slider in a real application, and select an interval range of value.

To do this we will need two overlapping sliders, and two images as selector. This can be transparent gif or png.

Download the image files

The first image is very close. This will be used as repeated bakgrounds for the div elements used for the sliders.
The others two image are the control: the yellow for the minimum value, and the red for the maximum value.

So let's see how will look the html of the sliders:

<div id="price_track" class="slidername_track">
<img id="price_yellow" class="slidername_yellow" src="images/i_slidername_yellow.png" />
<img id="price_red" class="slidername_red" src="images/i_slidername_red.png" />
</div>

The functions that will be created will need to have a standard name. We need a handler (id of the element) pointing the background div, where will cross the slider, and we will need an handler for every slider. We will use the name "sildername_track", "slidername_yellow",
"slidername_red". Soo if we need onther instance in the same page we must change only the "slidername" part.

Also we need something that will display the range value selected live when the slider moves. I've used a standard paragraf with the respectiv color yellow red.

<p>Prices from $<span class="yellow" id="pricename_yellow_tag">0</span> to $<span class="red" id="pricename_red_tag">200000</span></p>

Here we can observe that we need other two handlers, that i've named like pricename_yellow_tag pattern and pricename_red_tag. Also you can see that i've setted the initial value of minimum and maximum, 0 and 200000.

Here you can see the CSS used for the example:

.slidername_track{
margin:auto;
width:80%;
background:url("images/b_slidername.png") repeat-x;
}

span.yellow{
color:#e48800;
}

Now it's time for the intresting part of this example, the javascript code. When we have the HTML code, we need a function to transform the two triangle images in a slider that will update the price. Using only script.aculo.us, we can create the slider objects calling new Control.Slider two times for every slider.

Also we need to transform the script.aculo.us results, because we have a result from 0 to 1, but we need form 0 to 200000. So we need another function that transform those ugly decimal number.

Another prbolem that we will find is about stepping of the sliders. So i've created another function that with the min, max and step parameters and will return an array with all values that the sliders can use.

function buildsteppervalues(min,max,step){
var vals=[];
y=0;
for(i=min;i<=max;i+=step) {
vals[y]=i;y++;
}
return vals;
}

Continue reading "Customizing widgets using the script.aculo.us library" »

Comtaste has just launched its new training courses on Adobe Flex3 and AIR for late spring-early summer 2008.

First courses to be scheduled are:

"Flex 3 and Flex Builder 3: Developing Rich Internet Applications with the new Flex 3 SDKs" (Milan and London 26-29 May, NYC-Manhattan 2-5 June)

"Developing desktop applications with Adobe AIR, Ajax and Flex" (Milan 14-17 April, NYC-Manhattan 9-12 June, London 23-26 June).

Our educational proposal, designed and set up by Flex expert Marco Casario, is mainly the result of our strong experience in real world enterprise projects.

Our courses reflect our clients' training needs that our consultants have encountered in the day by day running of enterprise-class projects, where Flex and AIR are also connected to backend applications under robust and rigid JEE architectures or other server side technologies.

Training programs and other details on company's website www.comtaste.com/en/training.htm

I am totally convinced that the next 360Flex conference in Milan (7-9 April) is a fantastic chance for a profitable full immersion into Flex and Flex related themes, there including Adobe AIR.

Besided the fact that the previous editions which took place in the States have been tremendously successfull, this is the only event in Europe with such a strong focus and such a big concentration of interational technical expertise on Flex.

Who should really grab the opportunity to attend the 3 day conference (for just 360 euros)? Here is a synthesis from the 360Flex website (http://www.360flex.com/360flex_europe/):

- Flex developers (of course!)

- ColdFusion, COBOL, .NET, LISP developers, looking to move more into UI and RIA technologies.

- Flash developers, looking to leave timelines and keyframes behind

- AIR developers (or would-be ones)

- Those who think that Flex might be the technology direction their company will want to take

Don't miss out, only €360. This includes over 35+ speakers/sessions and free hands-on "Getting started with Flex" training. More details can be found at http://360flex.com/360flex_europe

To register http://360flexeurope.eventbrite.com/

If you're a FlexGala members there is a discount code to use during the registration phase. Register to FleXGala (http://www.augitaly.com/flexgala/index.php?cmd=register) and you'll receive it via the FlexGala newsletter.

KEYWORD: INTERACTIVITY

The lait motif of this design & technology conference was the interactivity as part of everyday user experience. Both if you are navigating the Net or visiting an exhibition the most important thing nowadays is to interact with things around you.
We all like to click everywhere on the screen when there are buttons and icons showing that "something is going to happen then" and at the same way we would like to touch every paintings and sculptures or installations we see in exhibitions. We all want to interact, we all want more action, that’s the main point now. In the design process we must consider people necessity to use things, to find them attractive and even useful, we must create really fancy interfaces even when we follow the usability strict rules.
The world we live today it’s full of new technologies, futuristic approaches and everything it is changing so fast, our minds are most of the time incited by millions of images, videos and sounds so that it’s difficult to capture someone’s attention in a very effective way, in order to make him/her buy or use our product or service. And I doubt it will become easier in the future.
That’s why designers and developers are always looking for something new to surprise people.

At FITC I attended many interesting speeches about the way to use code to create amazing effects, 3d interfaces and website where users could interact with characters inside, and I got really useful advices on how to approach design projects. There were a couple of big company showing great examples of video installations or structures which could interact with the environment.

About the 3D and original interfaces I think that Carlos Ulloa’s work with Papervision3D was really something different for users, you can take a look to the Sony Bravia project to get the idea. The kind of interaction you can have with this tridimensional space is great and the way you can move between different levels to read information or to play with images gives you a real new experience.
It was interesting to see how GMunk use a complex 3d software as Maya, to create really nice special effects in his video ads, even if I found his website a little bit difficult to navigate:) have a look at some of the motion graphics work he has there. How dynamic media design and development converge was the focus of Remon Tijssen (Fluid) presentation, he showed some games’ interfaces where the most important thing was the entertaining part. Flash has been used just to let users play and have fun with characters or environment inside a game, not paying attention only to what a functional application is.

About the special effects I can say that we should call people like Joshua Davis and Erik Natzke artist more than designers, they found the way to use code to create pieces of art, to transform letters and numbers in beautiful moving effects, it was interesting for me to listen how they can found themselves, naturally, writing code in order to reach the final results they have in mind, that was something visible as a static image or a dynamic one.

Anyway, as I saw during the presentations about projects of big company as Imaginary Forces , Bigspaceship or designers as Nikolai Cornell, we can find interactivity not only on a computer screen, but even in exhibition or inside an event going around the showroom. It was amazing to see how architecture can be mixed with technology creating decorative video panel placed on buildings that interact with the weather, changing colors or movies to show, or the entrance door of a car expo that people could touch to get information. I think this is our future, the structure around us can be part of our everyday life not only because they are schools, offices, houses or bars, but also because we can mix pixels with glass, wood and every kind of material to make them interact with us in different way so to be even more useful.

On the other side of the interactivity concept there was a discussion about communication and how to approach design project even with different media. Keywords in these case were: simplicity, detail observation, sharing ideas, experimentation and passion. I agree with Aral Balkan when he says that software are only instruments like brushes for painters and that we must look around us to see how things change, we should use all kind of services on-line to understand better what’s going on in the Net.

If we think about communication generally it’s important for a creative mind to ask the right question while working on a project even if it’s a poster, a logo, a brochure or a video, and Robert L. Peters suggest us the most important ones: how, why, what, whom, when and where. Maybe this seems to be a commonplace idea, but when we are creating something for other people, not only for ourselves, that has to be seen by different people, that’s the way to think because we are part of a big world with lots of different cultures, different way of living, of behaving and we are most of the time responsible for what we do in our works.

In any case all the speakers at Fitc agree with one main point: the real secret for everybody success and to get satisfaction from the work you do, is to work hard, or like hell as someone said:)

The template component enables you to define and create properties in the components with a general data type. This means that a template component is equipped to act as a property or as the defined object with the same data type of the property declared in it or a subclass of that data type.
In previous solutions, when you created a property for a component created with MXML or ActionScript, you assigned an ArrayCollection or a String as the data type to these properties. In the invocation phase of the component in a main application, if you try to send another type of value to this property (such as an XMLListCollection data type), you receive an error at compile time.
With template components, the properties that are defined by the developer are the placeholders that wait to be used.
In this way, you can create components that are more reusable. You can also guarantee to everyone who will use this component that you have respected the rules for object creation.

To create a template component, you create an ActionScript or MXML component and define the properties linking them to a general data type; for example, one of the UIComponent or Container classes:

public var header:mx.controls.Image;
public var footer:mx.controls.Image;

When you invoke the component in the main application file, the developer can specify the properties to send, defining a valid subclass of the UIComponent or Container class, according to the data type used:

<comp:Chapter_2_Sol_10 id="myTplComp">

<comp:header>

<mx:Image source="" />

</comp:header>

<comp:bottomRow>


To create a template component, follow the same procedure that you used when you created a normal component.

1. Create an MXML component in the com/flexsolutions/chapter2 folder by selecting File > New > MXML Component and give it the name Chapter_2_Sol_10.mxml. Base the component on a VBox container:


<?xml version="1.0"?>

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" >

</mx:VBox>


2. In the MXML component, start a block of ActionScript code in which you define the property of the component with the general data types:


<?xml version="1.0"?>

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" >

<mx:Script>

<![CDATA[

import mx.controls.Image;

import mx.core.UIComponent;

public var header:Image;

public var footer:Image;



[ArrayElementType("mx.core.UIComponent")]

public var content:Array;

]]>

</mx:Script>

</mx:VBox>


Continue reading "Creating template components in Flex 3 and AIR" »

GSMA Mobile World Congress 2008 in Barcelona has just concluded, it is the world's largest exhibition for the mobile industry and a congress featuring prominent Chief Executives representing mobile operators, vendors and content owners from across the world.
The Mobile World Congress offers the very latest in technology, services, and developments, defining the future of mobile broadband and industry's path to growth.
This year Comtaste attended to the MWC to analyze what's going on in the mobile market, both in hardware and software fields. The most relevant topics at the congress were:

- Wimax and Broadband
- Convergene
- Operating systems
- Touchscreens
- Mobile Tv
- Style and design
- Femtocells
- Mobile navigation
- Services and software: IM, Widgets, Sharing, Social Networking, Adobe Flash Lite

In the field of broadband and mobile transmission technologies Wimax dominated, it was presented as the wireless transmission of the near future. Some test at the stands showed a stable download speed of 20Mbit/s. In contrast to Wimax there were some technologies for a future to come, called 4th Generation Technologies, including 3GPP-LTE (Long Term Evolution). Also in broadband field there was a massive presence of so-called "femtocells", small domestic cells able to create a coverage area in user's apartment, providing a broadband connectivity through mobile network operator. This is a mature technology, ready to enter the market very soon, we will see if this solution will solve the problems of broadband mobile Internet and fixed-mobile convergence.
This convergence has been a major element in preview devices shown at the congress, especially in high-end smartphones. Now a mobile device that incorporates phone, photo / video camera, full keyboard, radio and music player, TV, GPS, Wifi and many other functions can not simply be called "mobile phone". The only limits of these small PCs are the immagination (and knowledge) of users and the fact that all of these functionalities and technologies could be battery-intensive and can significantly reduce battery consumption. For the first problem, however, the solution is quite easy: improve the operating system, giving to everyone a mobile that can be easily used. At the same time a good hardware interface can provide an user experience without comparisons. Among the best operating systems for mobile phones, there are Symbian OS (67% of devices), Windows Mobile (13%) and BlackBerry (10%) and among these, Windows Mobile is catching up on Symbian thanks to its new version (6.1) and some agreements with major manufacturers; nowadays only Nokia has no devices with Windows Mobile.
Others not mentioned operating systems are Linux-based ones, lead by LiMo Foundation, and the famous iPhone, which was in Barcelona only at the Telefonica stand, even if this last one is perhaps the best representative of the new generation of touchscreen interfaces, that in this period are appearing on many producers devices.
In the next post I will talk more about these devices and the other topics on the list.

I want to point out for the readers of this blog (mainly Java, Flex and Livecycle developers) an article I published on my personal blog :
Passing connection-level credentials to the JMSAdapter of BlazeDS
One of the limit if the Messaging Services of Livecycle Data Services is the inability to define a username and password in the configuration file to pass them to the JMS.
I discovered that in BlazeDS there is a new JMSAdapter that allows you to set the connection-level credentials passing the username and password.
The new connection-credentials XML node sets the the username and password used while creating the JMS connection.As the documentation said, use only if JMS connection level authentication is being used :

...

Topic
javax.jms.TextMessage
jms/flex/TopicConnectionFactory

jms/topic/flex/simpletopic

NON_PERSISTENT
DEFAULT_PRIORITY
"true"
AUTO_ACKNOWLEDGE

1

For many developers this new features supported by the JMSAdapter could be very appreciated and could solve problems in many different scenarios where the authentication is required in JMS.

Read the full Passing connection-level credentials to the JMSAdapter of BlazeDS article.