October, 2008

flex — 3 Comments
18
Oct 08

top 10 mistakes while building a flex application

  1. Using an RIA framework to build Web 1.0 applications (aka. New technology same old stuff).

    2. One of the largest challenges when moving from Web 1.0 applications to the RIA’s development paradigm is learning to think differently. Flex gives developers an advanced component library that allows for doing things that simply weren’t possible only a few years ago. Often, the power of Flex is missed, and the framework is used to implement more traditional Web 1.0 applications.

    Building Web 2.0 applications is more than partial page refresh and rounded corners. For example, Flex developers should be using vectors to provide users a visual understanding of data, and advanced controls for a rich application flow. Stephan Janssen discusses this struggle recently with InfoQ.com:

    As a Java developer, learning Object Oriented ActionScript and the UI markup language is really a walk in the park. The challenge however for (Java) developers is that we’re not designers, and with RIA technologies these two skills are very much needed.

  2. Breaking standard browser experiences.

    3. While Flex does provide an excellent platform for improving the user experience, it still important to maintain familiarity of things like the back button, book marking, and auto complete.

    Flex 3 includes new Deep Linking features for back button support and book marketing. You can learn more at labs.adobe.com. There are number of components out there for implementing auto-complete. From the Adobe Exchange, you can use the AutoComplete Input component.

  3. Slowing the application down with the use of too many containers.

    4. Flash Player uses a hieratical display object graph, similar to the HTML Document Object Model (DOM). The deeper containers are nested the longer the rendering takes. Adobe’s Flex Developer Center has an article that covers best practices related to Flex performance, including the use of containers in detail:

    The biggest Flex performance danger is yielding to the temptation to use containers randomly. Deeply nesting too many containers hinders the performance of your application. This is the number one performance danger that Flex developers succumb to—and luckily it is 100 percent avoidable.

  4. Slowing the application down by using XML for data transfer over optimized protocols.

    5. Flex offers developers a number of options for data transfer between the Flex client application and the server, including AMF3, XML, SOAP, and straight HTTP requests. Ward demonstrates the use of these technologies and performance benchmarks in his Census application.

    BlazeDS should be considered for Greenfield projects using Java on the backend. BlazeDS is Adobe’s recently open sourced Data Services product that uses the AMF3 protocol. AMF is a binary transfer protocol that is easy to integrate with Java, and offer significant performance benefits over XML. There are open source implementations of AMF for every major backend technology.

    If BlazeDS is not an option, Hessian could be an option. Hessian offers ActionScript/Flex support for their binary web services protocol.

  5. Trying to hire Flex developers.

    6. Experienced Flex developers are very hard to find right now. Flex is at the point in the adoption curve which Java was at in the late nineties. The demand for Flex developers is exceeding the supply. This makes finding experienced Flex developers difficult. This, however, creates a huge opportunity for Java developers to expand their skill sets and work with a fun emerging technology. Many companies looking for Flex developers have great success training Java or other web application developers for only a few weeks on Flex. Flex’s language and APIs are easily learnable by developers who are familiar with Web and GUI programming.

  6. Over use of animations

    7. Using Flash as the runtime enables developers to easily add animations and effects. However, developers should make sure that the animations have meaning and provide context. Otherwise, they will annoy users. The timing of animations is also important. Interaction designers can help make recommendations on when animations should and should not be used. Interaction designers can also recommend the best type of animations, the duration, and the best easing function.

    There is good a post on the use of animations at laair.org:

    Most animations are simply TOO LONG. They are long, and slow, and boring, and excessive. Tone it down. If there is one thing I have found, its that I hate waiting for stupid animations to finish so I can do something else.

    Don’t get me wrong I am not bashing animations. I am simply bashing animations that are simply too long or too extravagant for their purpose. Every animation can be broken down to having a purpose. Figure out the purpose of your animation and apply accordingly.

  7. Not setting up an enterprise ecosystem.

    8. As with other software projects, it is important to setup an enterprise ecosystem for your Flex applications.

    Test Driven Development (TDD) is a staple of most any enterprise project in this day-and-age. For Flex, the FlexUnit framework is available for coding unit tests. On Adobe’s Developer Connection, Neil Webb discusses TDD for Flex developers and using FlexUnit. In addition, Flexcover is available for code coverage reporting.

    Continuous Integration (CI) is a proven practice for building cohesive applications when multiple developers are contributing. Similar to Java applications, both Ant and Maven plug-ins are available for CI builds of your Flex applications.

  8. Not using the entire framework.

    9. There are a number of optional features available in Adobe Flex that you should consider using in your applications. For example, Runtime Shared Libraries (RSL) is available for reducing the size of your applications:

    You can shrink the size of your application’s resulting SWF file by externalizing shared assets into standalone files that you can separately download and cache on the client. Multiple Flex applications can load these shared assets at runtime, but each client need only to download them once. These shared files are called Runtime Shared Libraries.

    Another under used feature of the framework is the built in accessibility features. You can read more about the accessibility features of Flex in Adobe’s livedocs. In addition to built in accessibility, the framework provides built in features for localization. For the latest Flex 3 framework features, checkout Adobe’s Getting Started introduction page.

  9. Slowing the DataGrid down with complex renderers.

    10. The out-of-the-box itemRenderer for the DataGrid is very optimized. Mistake #3 discussed the performance impacts of deeply nested containers. One of the places in Flex where containers can easily get deeply nested is in the DataGrid’s item renderers. The number of item renderers which are rendered by the DataGrid is the number of visible rows times the number of visible columns. Custom DataGrid and List item renderers should be very optimized. When complex layout logic is needed in an item renderer, it is best to use UIComponent (or other more low-level classes) and position the contents for that cell manually.

  10. Not Preparing for Offline Applications.

    11. The traditional model for RIAs is in the browser. However technologies like Adobe AIR and Google Gears is allowing those applications to run offline. By not preparing for a potential offline architecture when users demand it, changing your applications to support offline features may be very difficult. Typically, in web applications business logic lives on the server. In offline RIAs, business logic must transition to the client. This makes it nessecary to architect ahead of time where certain business logic will need to live in order for applications to work both offline and online.

    Find the orignal post here

flex — 8 Comments
16
Oct 08

Printing dataGrid in Flex

There are very few resources on the web about printing in Flex. Adobe LiveDocs is an excellent on-line reference for Flex. I thought of sharing my experience and the way I successfully printed the dataGrid in Flex.

Example below: shows how to call a function to print a datagrid

public function printDataGrid() : void
{
var printJob : FlexPrintJob = new FlexPrintJob();
var thePrintView : FormPrintView = new FormPrintView();
Application.application.addChild(thePrintView);
if(printJob.start() != true)
return;

//Set the print view properties.
thePrintView.width=printJob.pageWidth;
thePrintView.height=printJob.pageHeight;
thePrintView.printableDataGrid.dataProvider = originalDataGrid.dataProvider
thePrintView.printableDataGrid.columns = originalDataGrid.columns ;
thePrintView.printableDataGrid.setStyle(”fontSize”, 8);
thePrintView.printableDataGrid.setStyle(”wordWrap”, true);
printJob.addObject(thePrintView);

printJob.send();
Application.application.removeChild(thePrintView);
}

<mx:DataGrid id=”originalDataGrid” width=”100%” height=”100%” dataProvider=”{dataForGrid}”/>

Example below: shows printview

<!– FormPrintView.mxml –>
<mx:VBox xmlns:mx=”http://www.adobe.com/2006/mxml”>
<mx:PrintDataGrid id=”printableDataGrid” width=”90%” height=”100%”>
<!– Specify the columns to ensure that their order is correct. This is not mandatory–>
</mx:PrintDataGrid>
</mx:VBox>

Below are the simple steps to print the DataGrid in Flex

1. Create an instance of the FlexPrintJob called printJob (you can call anything you want to)

2. Create an instance of the PrintDataGrid in another MXML file FormPrintView.mxml and create an instance of that – thePrintView (if you create<mx:PrintDataGrid/> in  the same MXML, which uses the function –> printDataGrid() then the application reservers some place for <mx:PrintDataGrid/> component. This looks a bit ugly as we do not want to see that extra space in our application). Always use PrintGrid class to print the dataGrid instead of the DataGrid, which originally displays content in the application, as it is tailored to print DataGrid in flex

3. Add the thePrintView object to the application container

“Application.application.addChild(thePrintView);”

4. Only one print job can be active at a time. So check to see if the printJob.start() is true. Start printing when it is true

5. Set the height, width properties of the thePrintView object to the pageWidth and pageHeightof the pringJob object

6. Assign the dataProvider of the DataGrid to be printed to the instance of the PrintDataGrid class, You also need to set the columns of the original dataGrid to the thePrintView object. You can also control the appearance of the printDataGrid object as follows

printDataGrid.setStyle(”fontSize”, 8);
printDataGrid.setStyle(”wordWrap”, true);

7. Use addObject method to add object to the printJob instance

8. Use printJob.send() to send the print job to a printer

print datagrid
Download source here

flex / Usability — No Comments
15
Oct 08

Flex dataGrid default column sort

The below example  gives you a hook to sort a  particular column in a datagrid without user input. One can use the below function where ever a datagrid has to have a default sort order on its column(s).  Note : This works with flex 2 datagrid and not with Advanced datagrid in Moxie.

The dataGridDefaultSort functions requires two input items. The dgName which as the variable suggest is the name of the DataGrid and the dgColumn, DataGrid Column, to be sorted by the numbers. column numbering begins with zero.

These input items are used with the DataGridEvent below and is dispatched (excuted). The DataGridEvent has a total of 9 values for successful operation. They are listed below in expanded detail.

1. type : String — The event type; indicates the action that caused the event. This is represented by the dgName input variable. The DataGridEvent.HEADER_RELEASE constant defines the value of the type property of the event object for a headerRelease event, which indicates that the user pressed and released the mouse on a column header
2. bubbles : Boolean (default = false) — Specifies whether the event can bubble up the display list hierarchy.
3. cancelable : Boolean (default = false) — Specifies whether the behavior associated with the event can be prevented.
4. columnIndex : int (default = -1) — The zero-based index of the column where the event occurred. This is represented by the dgColumn input variable.
5. dataField : String (default = null) — The name of the field or property in the data associated with the column.
6. rowIndex : int (default = -1) — The zero-based index of the item in the in the data provider.
7. reason : String (default = null) — The reason for an itemEditEnd event.
8. itemRenderer : IListItemRenderer (default = null) — The item renderer that is being edited or the header renderer that was clicked.
9. localX : Number — Column x-position for replaying columnStretch events.

Call this function anywhere in the program and  use as per above attributes.

1
2
3
private function dataGridDefaultSort (dgName:Object, dgColumn:int): void {
dgName.dispatchEvent(new DataGridEvent(DataGridEvent.HEADER_RELEASE,   false,true,dgColumn,null,0,null,null,0));
}
flex — 1 Comment
10
Oct 08

Password Strength monitor in flex

Yesterday I spent hours writing my own password strength monitor utility in for a personal project but i couldn’t make it work properly, So i did exactly what every other developer does after getting thoroughly frustrated i.e.  I Googled until i reached this: geekWisdom ;)

  • Download source from here
  • Click on the image to view sample

You can even use a text input validator which would give you  the similar result. Depends on the requirement … one can make it as  fancy as  the one mentioned above or as simple as a validator

below is the code for textInput validation

package co.uk.BetaDesigns.utils.string
{
public class PasswordStrength{
private static var _strength : Number = 0;
private static var _regSmall : RegExp = new RegExp( /([a-z]+)/ );
private static var _regBig : RegExp = new RegExp( /([A-Z]+)/ );
private static var _regNum    : RegExp = new RegExp( /([0-9]+)/ );
private static var _regSpecial : RegExp = new RegExp( /(\W+)/ );

public static function checkStrength( password : String ) : Number{
_strength = 0;
if( password.search( _regSmall ) != -1 ){
_strength ++;
}
if( password.search( _regBig ) != -1 ){
_strength ++;
}
if( password.search( _regNum ) != -1 ){
_strength ++;
}
if( password.search( _regSpecial ) != -1 ){
_strength ++;
}
return _strength;
}
public function PasswordStrength( se : SingletonEnforcer ){
//Force it so the user can’t get here;
}
}
}
class SingletonEnforcer{}

flex — No Comments
9
Oct 08

FlexBox

Flexbox is a directory with a whole bunch of fine Adobe Flex components available for developers, compiled and managed by Mrinal Wadhwa.

Go check it out :)

flex — No Comments
5
Oct 08

Search dataGrid and Simple dataGrid Itemrenderer example

The following example is a Simple searchable DataGrid, I have also included dataGrid item renderer to show how to define/use a dataGrid “itemRendrer”. Search and Highlight a row depending on the searched text in a dataGrid. Define a cursor to traverse dataGrid rows.

The Objective of this example :

  • How to create custom item rendrer using Updatedisplaylist and data property.
  • How to use the itemrendrer (detail).
  • How to use custom cursors in a dataGrid.
  • how to write a custom component extending a base component in this case dataGrid. (highlight a row in the dataGrid).

Download source:

Sample : search_datagrid