Comtaste Consulting | Enterprise RIA consulting and development

Using the Loader class to load and set dimensions of an image from the remote server in Flex 3

2008-07-08T08:07:25Z

Working and creating images in Flex could not be as easy as it looks. When you load an image loaded from the remote server you will tipicaly receive a ByteArray data. The ByteArray image doesn't contain any information such as the width and height of that data. Moreover you must know when the entire bytearray it's been fully loaded on the client. To do this we need to load the bytearray with the Loader Class. So we need to extend an mx.control.Image Class and add the loader information: private var _loader:Loader = new Loader(); Now wee need to implement a method to load the bytes: public function loadBytes(bytes:ByteArray, context:LoaderContext = null):void { _loader.loadBytes(bytes, context); _loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onBytesLoaded); } This method will load the byte array image and add the listener to know when is ready. After the event.complete handler will bring up with the loader information: private function onBytesLoaded( e:Event ):void { source = _loader.content; width = _loader.contentLoaderInfo.width; height = _loader.contentLoaderInfo.height; removeChild(_loader); } You can see that now we can set the source for the image and than set the correct width and height getting the information from the _loader.contentLoaderInfo. Finally we remove the loader. Here you can find the complete source for the ByteArrayImage Class: The Class package { import flash.display.Loader; import flash.events.Event; import flash.system.LoaderContext; import flash.utils.ByteArray; import mx.controls.Image; public class ByteArrayImage extends mx.controls.Image { private var _loader:Loader = new Loader(); public function ByteArrayImage() { } override protected function createChildren():void { _loader.visible = false; addChild(_loader); } public function loadBytes(bytes:ByteArray, context:LoaderContext = null):void { _loader.loadBytes(bytes, context); _loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onBytesLoaded); } private function onBytesLoaded( e:Event ):void { source = _loader.content; width = _loader.contentLoaderInfo.width; height = _loader.contentLoaderInfo.height; removeChild(_loader); } } } A simple implementation: import flash.image.JPEG; import flash.image.PNG32; myJPG:ByteArray = new JPEG( bitmapData , 300, 300, 80 ); myPNG:ByteArray = new PNG32( bitmapData , 1500, 1260 ); myByteImage:ByteArrayImage = new ByteArrayImage(); myByteImage.loadBytes( myJPG or myPNG ); Reference: ByteArray LiveDocs Loader LiveDocs

Creating and accessing JavaScript objects from ActionScript classes in AIR

2008-06-20T16:29:21Z

These days I'm working on the O'Reilly AIR Cookbook creating the examples for the chapter on the HTMLLoader class. The HTMLLoader class has a powerful method that lets you to load html content from a simple html string. The method is part of the public methods of the HTMLLoader class: loadString(). It accepts a parameter that contains the html content to load within an istance of the HTMLLoader class. With this simple code you'll load the htmlToLoad string into the HTMLLoader class. The _html istance will render as HTML the content through the WebKit engine. NOTE: Due to formatting problem I've posted the code examples and the ActionScript 3 class for this post on my personal blog : Creating JavaScript functions within an ActionScript class in AIR The cool thing is that you can use this approach to write JavaScript objects, functions and properties as well as defining the HTML structure within an ActionScript class, and then access to the html DOM via ActionScript code. In the next page I've created an example where an HTML content is created within an ActionScript class and then loaded into an HTMLLoader object. I've accessed using ActionScript to the HTML DOM to get the content within the DIV tag. Consider these three important considerations: a) access to the DOM elements and JavaScript objects only after the page load event is dispatched. The page load event corresponds to the COMPLETE event dispatched by the HTMLLoader class. You can create an event listener for this event using the addEventListener() method: _html.addEventListener(Event.COMPLETE, onComplete); b) you can access to DOM elements using the window.document object and invoking the getElementById, and getElementsByTagNamer() methods. The window object represents the global JavaScript object for the content loaded into the HTML control. c) you can edit and create the content of the html content using the innerText and innerHTML properties NOTE: Due to formatting problem I've posted the code examples and the ActionScript 3 class for this post on my personal blog : Creating JavaScript functions within an ActionScript class in AIR

How to receive data in response to a file upload in Flex

2008-06-11T15:03:36Z

If you are not developing an Adobe AIR application, the only way to work with your filesystem is to upload a file to your server, so probably you have already faced the problem of receiving data in response to a file upload. To upload a file you can use the upload function of a FileReference object; obviously this can be done only after having browsed for a file and opened it; this function takes three arguments, a URLRequest that represents the server page, a String that will be passed as the first “form-data” of the POST request, and a Boolean. Only the first one is mandatory. According to the Flex 3 API there are different events dispatched by a FileReference object during upload execution:

open:Event
progress:ProgressEvent
complete:Event
uploadCompleteData:Event
securityError:SecurityErrorEvent
httpStatus:HTTPStatusEvent
httpResponseStatus:HTTPStatusEvent
ioError:IOErrorEvent

When you receive a complete Event your file has been uploaded successfully, but you have no server response. To read the response from the server you should use the uploadCompleteData event. This event has been introduced in Flash Player 9.0.28, so having this version is a minimum requirement; you will be able to add the event listener but with a lower flash player version this event will never be dispatched. This is a simple servlet that receive an uploaded file; written using the file upload utils from apache.org: http://commons.apache.org/fileupload/


protected void doGet(HttpServletRequest req, HttpServletResponse resp) {

 doProcess(req, resp);

}



protected  void doPost(HttpServletRequest req, HttpServletResponse resp) {

 doProcess(req, resp);

}



protected void doProcess(HttpServletRequest req, HttpServletResponse resp) {



	     String fileName = "";

	     InputStream is = null;

          

            

            DiskFileItemFactory factory = new DiskFileItemFactory(4096000, new File(System.getProperty("java.io.tmpdir")));

            ServletFileUpload sfu = new ServletFileUpload(factory);

            List fileItems = sfu.parseRequest(request);

            Iterator it = fileItems.iterator();

             

            

            while(it.hasNext()){

            	FileItem fileItem = it.next();

            	if(!fileItem.isFormField()) {

            		fileName = fileItem.getName();

            		is = fileItem.getInputStream();

                        //do something with the file input stream



            	}

            }

            

            resp.getWriter().write("Upload successfull"); 



}

This is the actionscript code to read the response. First of all add an the event listener to the file reference instance with which you browsed and opened the file:


fileReference.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA, responseHandler);

This simple responseHandler shows an Alert with the string received from the server:


private function responseHandler( event:DataEvent ) :void

{

          Alert.show(event.data as String);

}

Obviously this example is quite useless because an upload confirmation arrives from the "complete" event; but in a lot of cases we could receive useful information such as a detailed error, or the id of a new record in a database relative to the file upload or the file itself, transforming the servlet in a mean to read text files from the local filesystem, of course this file cannot be too large due to the bandwith and upload size limit.

Google Maps API for Flex and Flash: some tips and notes

2008-05-26T11:13:19Z

Finally the official version of Google Maps for Flash is arrived. Google has just released the Actionscript API that provides map functionalities to web applications in a way really similar to the Javascript version. You can follow the instructions in the Setup or Tutorial pages on Google Code to easily build your web map application. Here is a sample application based on data from Yubuk (click on the image): And now some hints that can be useful when creating your first Flex application with Google Maps: 1) Remember to add the .swc library provided by Google in their SDK in your compiler options. If you are using Flex Builder you can do that simply going in the project properties, under Flex Build Path, then Library Path and click Add SWC. Otherwise, if you like to use the command line, you can use the -library-path command as explained in the Google tutorial. 2) Pay attention to the events: you can't use the standard Flex events but you need that ones provided by the Google SDK, such as MapMouseEvent.CLICK. 3) Custom markers have a bug in the version 1.3. To avoid this bug there's a workaround in Google Code. The example has a small error in the marker event listener, the event should be MapMouseEvent.CLICK (as explained above). I think that Google made a great work porting their Google Maps API to Flash. It is still incomplete but it's already possible to see the huge potential provided by the cooperation between Google Maps and Flex. I'm sure that in the near future there will be many interesting RIA based on these technologies.

Flex rich interface design: why big companies choose Flex

2008-05-15T09:59:09Z

It is interesting to see how big companies choose Flex to interact with costumer on their websites. We are used to see lots of nice widgets created with this kind of technologies but maybe a little bit less used to find useful and funny applications in the Net. Letâ€™s give some example! On Harley Davidson website there is a really nice application where you can customize a bike with all the accessories and even get an estimation of the price and of a monthly payment solution. The interface is really easy to use, it has a clean design with few icon, some boxes to show images and contents, they have used some of the classical Flex elements as accordion and tab menu. You can see accessories in details and add them on the bike in order to see in real time how it will be the final result, for every pieces you can read detailed information and if you change your mind about one of them you can always take it away from the bike and start looking for something different. This is a different approach to interact with costumer, you can tell that itâ€™s not a game because of the professional interface concept, all the information are detailed and you can really buy a 14.000$ bike but at the same time you can just create your own perfect model dreaming to have it maybe one day:) http://customizer.harley-davidson.com/GMA_customizer.jsp --------------------------------------------------------------------------------------------------------------------------------- Another nice Flex application is the HP Print Studio, itâ€™s free and you can use it to create customized calendar, greeting cards, invitations and even business identities. The interface is user friendly and it is easy to follow every necessary step to print you project. In this case HP designed an interface with more interaction than the HDâ€™ s one using elements as lighting menus, pictures floating, horizontal navigation and pop-up window to show the selected item and to see some advice from the company about the right paper to use in order to print the project. The zoom system is very useful. Thatâ€™s a good example of promoting products letting people have fun with a nice tool. http://h30393.www3.hp.com/printing/app/us/en/launch.aspx --------------------------------------------------------------------------------------------------------------------------------- Speaking about widgets there is a nice one created by AOL that shows music videos using main categories as pop, country, latin, hip hop, most watched etc. It has a plain interface but very effective and easy to use, it gives you information about the artist and the song and the chance to create your list of favorites and share it with friends sending an email directly inside the application or even copy the code to post it on a website. It has some nice features to customize videos views and even the interface views as full screen mode or as side widget. You can download it here http://music.aol.com/help/syndication/desktop-widgets Have fun with all these applications!

Improve the ObjectHandles library with a smoother resizing movement

2008-05-12T18:45:05Z

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: 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

Measuring the ROI of choosing Flex for Enterprise RIAs

2008-04-30T11:02:15Z

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

Garbage collector in Flash Player 9/Actionscript 3

2008-04-26T11:13:44Z

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.

Customizing widgets using the script.aculo.us library

2008-04-05T20:00:46Z

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:

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. Prices from $0 to $200000 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;
}

.slidername_red, .slidername_yellow{
cursor:move;
}

span.red{
color:#c6523b;
}

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;
}

]]> dualSlider('price_yellow','price_red','price_track',buildsteppervalues(0,200000,1000)); function dualSlider(first_handle,second_handle,track,values){ Parameters: 1. first_handle: the id of the image for the minium value. 2. second_handle: the id of the image for the maximum value. 3. track: the id of the div that will do as background of the slider. 4. stepper values: the array of values that the slider can assume, generated by buildsteppervalues Let's see the dualSlider function code. This function must create the slider using the Control.Slider inside the script.aculo.us and set the events to change the value of the display tag, on time onSlide and onChange. This are the two callbacks of the slider controls of script.aculo.us and we will set without using the new Event.observe function.

function dualSlider(first_handle,second_handle,track,values){

//first we set the minimum and maximum range value of the array
var range_min = values[0];
var range_max = values[values.length-1];

//than we create a new object Control.Slider
s1 = new Control.Slider(first_handle,track,{range:$R(range_min,range_max),maximum:range_max,values:values});

//and then we set the callbacks function
s1.options.onChange = function(value){
value=value.toFixed();
$(first_handle+'_tag').innerHTML = value;
$(first_handle+'_form').value = value;
};

s1.options.onSlide = function(value){
value=value.toFixed();
$(first_handle+'_tag').innerHTML = value;
};

//we need to do this two time, because we want a dual slider
s2 = new Control.Slider(second_handle,track,{range:$R(range_min,range_max),maximum:range_max,sliderValue:range_max,values:values});

s2.options.onChange = function(value){
value=value.toFixed();
$(second_handle+'_tag').innerHTML = value;
$(second_handle+'_form').value = value;
};

s2.options.onSlide = function(value){
value=value.toFixed();
$(second_handle+'_tag').innerHTML = value;
};

s2.setValue(range_max);

}

Others detail about the Control.Slider object can be founded on the script.aculo.us documentation. Conclusion We must consider two terms. The first that on the callback we need this code: value=value.toFixed(); This function will delete the decimal numbers. That second important things, this also inside the callbacks, i've modified the value of the display tag using innerHTML. Another problems, the red slider is a little out on the left, the first slider create this effect: the images are inline, soo the second slider is out on left how much is large the first slider. A simple CSS code will resolve this: .slider_red{ margin-left:-18px; }

Comtaste launches new Adobe Flex 3 and Adobe AIR training courses in New York City, London and Milan

2008-03-26T23:27:49Z

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

Who should grab the opportunity to attend the 360Flex Europe conference, and why

2008-03-14T11:00:00Z

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.

A report of the FITC 2008 Amsterdam

2008-03-07T11:14:36Z

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:)

Creating template components in Flex 3 and AIR

2008-03-01T10:00:38Z

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:

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:

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:









import mx.controls.Image;

import mx.core.UIComponent;

public var header:Image;

public var footer:Image;



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

public var content:Array;

]]>

]]> To the draw() event handler, you have sent the properties to be added as children to the VBox root tag of the MXML component to the addChild() method. 4. Create the main application file that will import and invoke the template component. Select File Ã¤ New Ã¤ MXML Application, name the file Chapter_2_Sol_10_app. mxml, and define a custom namespace within it to import the component:

5. Invoke the template component in the Panel container:

6. You can now send the two properties to the invoked component as child tags of the component. Make the following change to the code:

The comp:header and the comp:footer template tags are the two properties you created in the Chapter_2_Sol_10.mxml component. They contain two Image controls because they were typed as Image classes:

The preceding code was written in the block of the Chapter_2_Sol_10.mxml file. For the comp:content template tag, define two Label controls and two Button controls nested to two HBox controls:

The comp:content property can contain any control that is a valid subclass of the UIComponent class, so enter it as an Array of UIComponent types: // Define an Array of properties for a row of components. [ArrayElementType("mx.core.UIComponent")] public var content:Array; 7. Save and run the application. The same example showed in this entries can be used in an AIR application.

Mobile World Congress 2008 - What will be the future of mobile?

2008-02-18T17:09:40Z

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.

The new BlazeDS JMSAdapter allows to pass connection-level credentials to JMS

2008-02-09T09:53:14Z

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

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.