View Doron Katz's profile on LinkedIn

The most comprehensive explaination of Flex 4 Skin
starFlex RIA United
3 February 2010 2:46 AM
by Charles

The most comprehensive explaination of Flex 4 Skin

flexskinslides The most comprehensive explaination of Flex 4 Skin

One of the biggest change you will encounter when develop or migrate to Flex 4 is the spark skin creation. It’s a big leap to separate UI design from programming. There are many resources available to start tutoring the skin development. I found the best one so far among them is this slides created by Saurabh Narula.

It’ll make a lot easier to go over this stack first before diving into the thick document. It’s worth the time.

The most comprehensive explaination of Flex 4 Skin
The most comprehensive explaination of Flex 4 Skin

Adobe Flex

E:        doronkatz@mac.com  
PH:      +61 (0) 410 740 678 
SKYPE:  doronkatz1981
Filed under: Flex Web development

Flex 3: Delaying Instantiation to Improve Startup Time with Components

This tutorial is inspired by the book Flex 3 Cookbook  

A quick tip to ensure components render in your Flex application, only when needed for display. You work with the creationPolicy property of the Container class. 

By default, Flex creates components only when they are displayed in the mxml, which infers the creationPolicy is set to auto.  You can either leave it at default, or use:
  • none - no components created.
  • all - all components will be created, and queued, based on their creationIndex. 

To illustrate this, the chapter shows a ComboBox sample snippet: 

...
<mx:Script> 
[![CDATA[
   
   private function changeViewStackCreation(): void {
    viewStack.creationPolicy = all;
viewStack.createComponentsFromDescriptors(true);
  }
..

You can find more by buying this book for only £24.54. 
Filed under: Flex Web development

Flex: Basic overview of Cairngorm 3 Libraries
Cairngorm 3 was announced as being available last month, with an increase in functionality scope, and some nice draft documents to keep us busy for a while. Adobe Technical Services decided to split the implementation into three specific parts : 
  • Guidelines explaining the motivation
  • Tools to adhere to this guideline framework.
  • Libraries to extend existing architectural framework and solve existing problems.

I am going to discuss the latter in brief, the Libraries to extend existing architectural framework. 

#1 Observer Library
The Cairngorm Observer library provides a set of non-visual components for declaration in MXML that observe other objects, react to changes in some way and execute view behavior. These components can help to reduce the amount of Script-block logic required in MXML components.

We find ourselves when working with Cairngorm, having to find ways to observe and react ot changes in a model object. I have been using mx.binding.utils.ChangeWatcher but with this new library,but for a simple MXML way of binding, we normally do something like:

<mx:TextInput text="{ model.firstName }"/>

 

Sometimes though, such a property might not exist and a developer needs to call a method defined on a view component, so enter Observe: 
<cg:Observe      source="{ model.firstName }"      handler="runEffectFunction"/>
..
<cg:ObserveValue      source="{ model.firstName }" value="{ Name.SARA }"       handler="runEffectFunction"/>

The second, ObserveValue tag only calls the method handler if the value of the property equals the source, so if the name equals SARA, the observer will be triggered.

Observer and ObserveValue can only listen to bindable properties of models. The EventListener tag adds the ability to listen to events that a model dispatches as the following examples shows:
<observer:EventListener      source="{ model }"     type="{ Person.UPDATE_EVENT }"     handler="runEffectFunction"/>

#2 Popup Library
The Cairngorm Popup library is a small Flex library for opening and closing popups. Instead of using the PopUpManager directly and writing script-block logic to manage their creation and removal, a pair of simple MXML tags are available for declaring within view components. Here's the "Hello World" of declarative popups:

This simple library is simple in that its in charge of opening and closing popup windows, based on whether the open property is set to true or not, or if you decide to work with the dispatched EVENT.CLOSE event to be handled elsewhere.

<popup:PopUpWrapper open="{model.openPopUp}">    <mx:Label text="Hello World"/> </popup:PopUpWrapper>
...

<popup:PopUpWrapper     
  open="{model.openPopUp}"     
  center="true"     
  modal="false"     
  childList="{PopUpManagerChildList.POPUP}"     
  opening="openingHandler()"     
  opened="openedHandler()"     
  closing="closingHandler()"     
  closed="closedHandler()">     
  <mx:Label text="Hello World!"/> 
<popup:PopUpWrapper>

Therefore, this clean and easy approach aims to remove duplicity of code whilst controlling the appearance of the window through bindings.

#3 Task Library
Events are fundamental to Flex. Every component in the SDK dispatches an assortment of them, while application developers regularly create their own to represent user gestures and other significant occurrences. With so many events being dispatched and handled, coordination can become challenging. A class may assume too many responsibilities, such as initiating an asynchronous service call, handling the result, then triggering a subsequent service call and handling that result also. 

A general task-processing library has been introduced to ensure the asynchronous sequencing of tasks are performed orderly, whether concurrently or queued according to dependencies, with indicative events to portray the progress to higher-level components.

#4 Validation Library
The Cairngorm Validation library is designed to simplify validation of user input and other data. Instead of declaring validators individually in MXML and coordinating them manually, a group of validators can be defined using the ValidatorGroup component. The validity of the whole group can then be determined as one. Validator groups can be detached from the view and applied to other layers of an application, such as a domain model. Additional components are provided for observing validation rules and updating view components to highlight validation errors.

<validators:ValidatorGroup id="validatorGroup">
        <validators:validators>

            <mx:StringValidator id="firstnameValidator"
                source="{ firstnameInput }"
                required="true"
                minLength="3"
                property="text"
                triggerEvent="change"/>

            <mx:StringValidator id="lastnameValidator"
                source="{ lastnameInput }"
                enabled="{ lastnameValidatorEnableFlag }"
                required="true"
                minLength="2"
                property="text"
                triggerEvent="change"/>

        </validators:validators>

For more information on each of the libraries, whether you are after more comprehensive technical descriptions, or usage examples, you can visit the official web location.
Filed under: Flex Web development

Adobe Demonstrating iPhone Applications Built Using Flash

topright

Adobe Demonstrating iPhone Applications Built Using Flash

Monday October 05, 2009 03:05 PM EST; Category: iPhone
Written by Eric Slivka

Mac News

While Apple's iPhone has notably been left out of Adobe's new initiative with Flash Player 10.1 to bring an integrated Flash experience to browsers on smartphones and other platforms, TechCrunch notes that Adobe has also been using its Adobe MAX 2009 conference to show off capabilities found in the company's forthcoming Flash Professional CS5 that will allow developers to build Flash-based applications and then export them to the standard .ipa format used for native iPhone applications.

The new support for iPhone applications in the Flash Platform tooling will not allow iPhone users to browse web content built with Flash technology on iPhone, but it may allow developers to repackage existing web content as applications for iPhone if they choose to do so.

Flash Player uses a just-in-time compiler and virtual machine within a browser plug-in to play back content on websites. Those technologies are not allowed on the iPhone at this time, so a Flash Player for iPhone is not being made available today.

Flash Professional CS5 will enable developers to build applications for iPhone that are installed as native applications. Users will be able to access the apps after downloading them from Apple's App Store and installing them on iPhone or iPod touch

Applications created using Flash Professional CS5 meet all iPhone .ipa and SDK requirements, allowing them to be included in Apple's App Store via the standard iPhone Developer Program. Adobe has even featured seven current App Store applications that were built using a pre-release version of Flash Professional CS5.

Rating (58 Positives; 33 Negatives)
[ 51 comments ]

via macrumors.com

Looks like Apple will provide a compromise to Flex/Flash developers, allowing them to develop and with the aid of a compiler, convert native Flash/Flex code to native iPhone code. Adobe has a demo video on how its done. What do you all think?

Filed under: Flex iPhone Dev Mobile

FirebugTarget - A Flex Logging Tool I found

Hey folks, I came across this simple Flex logging when I was investigating the latest developments in the logging framework world, for my project at work. While I will do a good review of one of the best logging tools out there, Thunderbolt, for now I just wanted to bring up a simple blogging utility. It's called FireBugTarget and was made to be able to use Firefox's Firebug console, to log warnings, information, errors and so forth. I found it on Danny Patterson's blog, and he explained how he created a simple mx.logging framework implementation, and I have tested it on both Firefox and Internet Explorer (with Internet Development Tools). All you have to do to get this working is, put the .as file somewhere in amongst your packages and refer to it, as shown below:

import com.dannypatterson.logging.FirebugTarget;
import mx.logging.ILogger;
import mx.logging.Log;

var logger:ILogger = Log.getLogger("myLogger");
var logTarget:FirebugTarget = new FirebugTarget();
logTarget.addLogger(logger);
logger.info("info from flex");
logger.error("error from flex");
logger.warn("warn from flex");
logger.debug("debug from flex");

Filed under: Flex Web development

Flex:: Introduction to Cairngorm

 Cairngorm, a really nifty Flex framework that I use quite often at work, with my company, and therefore would give my highest recommendations for it to be the enterprise-framework of choice for Flex developers. Adobe identifies Cairngorm as a micro-architecture that addresses key issues through best-practices in the areas of (1) handling user events in the front-most layer, (2) arranging and managing business logic elegantly, and (3) consistently managing state on the client-side. That is, unlike traditional web-development situations, RIA and Flex in particular is more stateful. [ad] 1. Value Objects Part of keeping the promise of having a stateful application, Cairngorm has borrowed a concept from J2EE, Value Objects or Transfer Objects, which are passed across various layers of our application, in a decoupled way. The following is an example of what a VO looks like : 
class com.doronkatz..application.vo.CarVO
implements ValueObject, Comparable
{
        public static var registered:Boolean =
 Object.registerClass( "com.doronkatz.application.car.
vo.CarVO", CarVO ); 

        public var id : Number;
        public var make : String;
        public var model : String;
        public var year : Date;
}
The value object is connected through to the front-layer UI through a concept called data-binding leaving objects to act as source and destination, so if changes are made on one side, it is updated for the other side (i.e updating a text box updates the value through live binding). This is more commonly evident when we play around with Data Grids. The diagram below put's the VO and binding in context. We will explain the rest of the diagram, bit-by-bit. [ad#Adsense]
2. View Layer The view layer, or the front-most layer contains the MXML Views. The users interact with this part of the application, which contain Data Grids, buttons and text-boxes. The Text-Boxes are binded to the Model Layer (to be discussed below) which in turn binds to the Value Object. Clicking on a button for example in the View layer could trigger an Event which in turn uses the Cairngorm process to get to the Controller layer, which chooses the best Command to proceed with. 3. Model Layer The Model layer sits next to the View layer, and acts as the single state-manager for the application, and this is a Singleton (single instance of Model Locator). The model pretty much stores arrays, variables of different types and sorts to keep state. A shopping cart basket contents would be an excellent example. 4. Controller Layer The Controller layer contains the commands that the events would trigger, from the View Layer. It also contains the Business Delegate which will discuss shortly. The commands are enlisted by the events, and are basically classes that do the functionality part of the application (the methods sit here). The results of the command get persisted in Value Objects and the Command objects update the model properties. Some of the commands could enlist the Business delegate, if for example, you have a Web Service or use Blaze and need to interact with objects in other langauges, such as J2EE. This can also be categorised in the Service Layer . In work I mainly use it for SOAP messages to Web Services and could also be used for XML communications. Most important thing to remember in this interaction thing, the Business Delegate passes reference to the Command's 'onResult()' method (or onFault() if we get an error back).
This is it for the first introduction. I will go into each of the components with code samples in the next article.
Filed under: Flex Web development

Flex Tutorial #1: Colour a Button using a Colour Picker

 Ok guys, this is the first of my tutorials in Flex, and I will regularly be writing up tutorials to help other fellow Flex developers learn a few basic tricks. Please feel free to comment or offer suggestions (or G-D forbid even correct me) on each of my Tutorials: And for the first tutorial, I will show you how to change the colour of a button or any object for that matter, using a colour picker. In the MXML, enter the following: 
...
<mx:ColorPicker change="changeButtonColour(event)" />
<mx:Button id="test_Button" label="Change My Colour"
click="" />

<mx:script>
<![CDATA[
import mx.events.ColorPickerEvent;
private function changeButtonColour(e:ColorPickerEvent):void
{ test_Button.setStyle("backgroundColor", e.color); }
</mx:script>
[ad#WidgetbucksComputers]
Filed under: Flex Web development
11