Month: April 2008

Could making CSS for Flex be easier?

Maybe there is a faster way, but I found this one really good. Checkout: http://weblogs.macromedia.com/mc/archives/2007/02/new_flex_style.cfm

Why do I Test?

Most of you who would read this would have done some level of testing in their programming career. Many of you would appreciate the fact that unit testing exists in the world.

Analogy that works for me is that in real life, I test all the time. I test so much that it has become a habit so much so, that I now do not even realize that I am testing. If I think about it, I can site many examples. The reason I test so often is because I want to be sure that things will work when I need them to.

When I became a programmer, I found myself doing that same just out of habit of testing everything. Since I started to code, I have come across may programmers who have reasons not to test and they resist testing al their life. Once they find themselves in a the arena of no testing, they enjoy and as per them are most productive. As for me, there have been times, when I have not tested myself, and I have been productive as well, but I have always found that the applications that I design/code with writing tests end up being prototypes.

I see many benefits of testing, and thats the reason when I start a project, I make sure that the first thing that is done is to setup an integrated unit testing tool for me to write my tests. In other words, without unit tests, I do not trust my own code and I would not even go into changing it – I can never know after a few changes if I broke something. Unit tests act as an umbrella that saves you from a downpour for defects in the application.

Passing my code along to a new developer has been a challenge. Ever tried giving a new programmer a code walk through. I tried test walk through and it has been a wonderful experience. They understood the code once and were able to start coding faster. I like to call my tests as API documentation for my code.

I have been unit testing in projects for last 3.5 years now and always I have found in a later stage how valuable those tests were. Coming to Flex, I started to find similar options and Flex Cover was the answer. Simple to get started and now very soon I would have my testing suite for Flex as well.

Eager to hear what your experience have been.

Java to Flex

My clients were talking to me about Flex for 2 months, but one day they came back and announced that we need to move the project to Flex instead of traditional AJAX. And, it was time to get into a new technology.

Leading a team into architecture, when you are unsure of the architecture is a tough task and then when the technology is known to your clients adds to the equation, but little was I aware at that time that Flex would be a simple one to beat like a beginner level for Dungeon Siege, with someone who has the most advanced weapons in his toolkit.

I took off by reading on Flex SDK, Flex Architecture and Flex Builder (installed the trial version for 90 days). Knowing the Eclipse environment was an advantage and I did not have to learn the interface. Quickly I had setup a project and in next few minutes I had the traditional “Hello World” in place. Much like Visual Basic 6. This was cool stuff.

Now was the next challenge – ActionScript 3.0. They say that AS is bsaed on ECMAScript which also is a grandfather for JavaScript. Knowing Java, C# and JavaScript, how different can that be, but yes this time there were difference. AS was more close to Java with strongly typed objects. There is a class for everything and I was unaware of them, apart from what are native datatypes like String, int etc.

Next came Events – hmm. This made me to think for a while, something that all desktop based applications are based upon, yet it was evading me. And for goo reason, I was chose not to read through the Event model for Flex and that was my mistake (do not repeat that one). I started off by reading on the Live docs the Event Model for Flex and once that was understood it was simple one.

I knew the basics now, but this was not good enough to use in an Enterprise Application. Could I use all of this for my website – piece of cake, but that was not what I was trying to do. My clients had recommended the Cairngorm library – light-weight, quick start framework. It was said that this will solve all the problems. Before I started off with Cairngorm, it was time to put my Architect hat on and not listen to anyone. And i found out that Cairngorm had a competitor – PureMVC. So, these two have to be be on top of their game to be of any use – I started investigating, but very soon came to a conclusion that PureMVC would take more time to get going. So, Cairngorm was it; looking at the community backing and also that it comes frm Adobe decision seemed a good one.

Few weeks went well, and then we realized that Application was not looking as Crisp as it should be. If Flex builder was to be used to draw layouts quickly and that is what we were doing, what was wrong? There were fine prints missing and now came the Constraint based layouts. It was worth while looking at all different kinds of layouts and how can they work, before settling on Constraints based.

Where am I today – ready to start building training material for my team on all the items as listed down. I am hunting for some videos, so if you have some, please point them to me or else, I will end up creating a few.

Loose Coupling

Loose coupling is a practice that very strongly compliments OO principle “Programming against Interface, and not against an Implementation”. Two components are said to be loosely coupled when then are developed as interfaces that can be used for transferring data between the two. This involves lesser risk to the fact that change in one would lead to a change in the other module.

In Flex world, you can achieve loose coupling either by using Interfaces or by Events. Both, are very effective ways of getting around the same problem. People like me coming from Java/C# background find it easier to work with Interfaces due to our long association with the concept.

I personally have started to like events a lot better, we they make the components truly loosely coupled. By defining an event on a component, you do not have to worry about coding against an interface. All, you should be aware of is the event that component exposes. You can dispatch the event and you would be done. Let is see how this helps, by way of an example:

<mx:application xmlns:mx=”http://www.adobe.com/2006/mxml”>

<mx:Script>

<![CDATA[

private function onClick():void

{

// do something/anything

}

]]>

<mx:Script/>

<mx:Button id=”btn1″ click=”onClick();” />

<mx:application/>

You would notice that when the button was created (by Flex library), it just exposes an event that you can handle. Rest is taken care by the framework and you do not have to worry about any interface, yet you can use the same component anywhere you want to.

A very trivial, yet a very essential best practice. Also read my entry on best practices.

Do developers over complicate things?

A real good one…

http://www.succor.co.uk/index.cfm/2008/4/15/Do-developers-over-complicate-things

What is Flex?

This should have been the first of my posts. Someone asked this question to me and there were answers but nothing that would explain in depth. There you go…

The Adobe Engagement Platform architecture

Adobe engagement platform architecture

Universal client technology

By combining the strengths of ubiquitous Flash Player with Adobe Reader® software, HTML, and JavaScript, developers can deliver a predictable, high-quality application experience across browsers, desktops, and devices.

Programming model

The Flex development model (MXML and ActionScript) plays a central role in the platform. By providing a versatile and robust programming model, Flex enables organizations to efficiently deliver RIAs that take advantage of the universal client technology.

Development and design tools

With products like Adobe Photoshop®, Dreamweaver®, Flash Professional, and Illustrator®, Adobe is a recognized leader in the creative tools market. Through integration with Flex Builder and third-party development tools, Adobe is enabling designers and developers to work together to deliver more engaging experiences.

Server framework

Adobe server technologies build on existing infrastructure standards like Java EE and .NET, while providing services that simplify integration and extend the capabilities available to rich clients. Beyond the services provided by Flex Data Services, Flash Media Server enables applications to integrate two-way audio and video streaming, while Adobe LiveCycle® software provides services for business process management, document generation, and
information assurance.

The goal of the Adobe Engagement Platform is to blend the strengths for the Adobe technologies and open source standards to provide a versatile foundation.

Flex Product line

1. Flex Software Development Kit (SDK) – The core component library, development languages and compiler for Flex applications. This is open source and

2. Flex Builder IDE – An Eclipse based development environment that provides tools like code editors, visual layout tools, project management tools and an integrated debugger

3. Flex Data Services – Code named BlazeDS, is a Java server-based application that enables high-performance data transfer

4. Flex Charting – A library of extensible charting components that enable rapid construction of data visualization

Flex prouct line

Flex runtime architecture

The Flex runtime architecture is closely aligned with the just-in-time deployment model of web applications. The client portion of a Flex application is deployed as a binary file that contains the compiled bytecode for the application. Users then deploy this file to a web server just as they would an HTML file or an image. When the file is requested by a browser, it is downloaded and the bytecode is executed by the Flash Player runtime.

As illustrated in Figure below, once started, the application can request additional data or content over the network via standard HTTP calls (sometimes referred to as REST services) or through web services (SOAP). Flex clients are server agnostic and can be used in conjunction with any server environment, including standard web servers and common server scripting environments such as JavaServer Pages (JSP), Active Server Pages (ASP), ASP.NET, PHP, and ColdFusion®.

Flex runtime architecture

Flex development model and application framework

The development process for Flex applications mirrors the process for Java, C#, C++, or other
traditional client development languages. Developers write MXML and ActionScript source code
using the Flex Builder IDE or a standard text editor. As shown in Figure 4, the source code is then
compiled into byte-code by the Flex compiler, resulting in a binary file with the *.swf extension.

Flex framework

The MXML markup language

Like HTML, MXML is a markup language that describes user interfaces that expose content and functionality. Unlike HTML, MXML provides declarative abstractions for client-tier logic and bindings between the user interface and application data. MXML helps maximize developer productivity and application re usability by cleanly separating presentation and business logic.

The following code listing uses MXML to define the user interface for a login form. This example uses some very basic controls

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>

<mx:Label x=”47″ y=”19″ text=”Username:”/>
<mx:Label x=”47″ y=”61″ text=”Password:”/>
<mx:TextInput x=”170″ y=”17″/>
<mx:TextInput x=”170″ y=”59″/>
<mx:Button x=”112″ y=”115″ label=”Cancel”/>
<mx:Button x=”218″ y=”115″ label=”Login”/>

</mx:Application>

Sample Login page

ActionScript 3.0
ActionScript is the object-oriented programming language used for Flex development. Like JavaScript, ActionScript 3.0 is an implementation of ECMAScript, the international standardized programming language for scripting. However, because it is an implementation of the latest ECMAScript proposal, ActionScript provides many capabilities not common in the versions of JavaScript supported by most browsers. At development time, ActionScript 3.0 adds support for strong typing, interfaces, delegation, namespaces, error handling, and ECMAScript for XML (E4X).
At runtime, the most significant difference between JavaScript and ActionScript is that ActionScript is just-in-time compiled to native machine code by Flash Player. As a result, it can provide much higher performance and more efficient memory management than interpreted JavaScript. Flex developers use ActionScript to write client-side logic, such as event listeners and call-back functions, or to define custom types for the client application. For example, the following code shows the definition of the Customer class.

Flex Data Services

Flex Data Services extends the capabilities of the Flex client framework by providing additional services for managing data transfer and integrating with existing applications and infrastructure.

As illustrated below, Flex Data Services fits into an organization’s existing deployment environment. It is implemented as a Java web application and can be deployed on standard Java application servers, including IBM WebSphere, BEA WebLogic, Adobe JRun, JBoss, Tomcat, and others.

Flex Data Services

Figure shows a high-level overview of the services provided by Flex Data Services. When working with Flex Data Services, developers define a set of “destinations” using XML configuration files. These definitions are used by the built-in service adapters provided as part of the Flex Data Services application. These include low-level adapters to connect to Java objects (data access objects), JMS topics/queues, or ColdFusion components (CFCs) as well as higher level adapters for common persistence solutions such as Hibernate, Enterprise JavaBeans (EJB), and Spring. The Flex Data Services adapter architecture is open and customizable, allowing connectivity to any back-end
data system or application.

Flex Data Services capabilities

Additional resources

About

  • http://labs.adobe.com/technologies/flex/
  • http://www.adobe.com/products/flex/

Development resources

  • Flex development center: http://www.adobe.com/devnet/flex/
  • Data services: http://www.adobe.com/products/livecycle/dataservices/
  • Flex team blog: http://weblogs.macromedia.com/flexteam/
  • Live Docs: http://livedocs.adobe.com/labs/flex3/html/
  • Language reference: http://livedocs.adobe.com/labs/flex3/langref/

Creating Layouts in Flex

Creating layouts in Flex should be easy, specially when you are using Flex builder and drag and drop capabilities. But, it is a little tricky than it seems and if you choose to ignore some of the finer details, I promise you will be stumped mid-way. While, I found some articles, but I still find something consolidated that I can get into my head. These are all scattered away (maybe I can not pin-point to the right stuff yet). Here is my attempt to put down in black-n-white some guidelines and rules as to what you should be doing and what not?

While all the feedback and comments are welcome, I would appreciate if you can collaborate with me on this one for us to have a comprehensive set of guidelines 🙂

Flex default layout manager, containers and children follow sizing and measuring algorithms to layout the pages and this exercise can be very resource intensive. You never know the client (PC) that will be running your application. Also, what you can not do is to have a minimum requirement like 2GB ram on all systems that run the application, because that would not be possible practically. This is not a game but an application that business users will work on.

Rule 1: Avoid unnecessary container nesting

Coming from an HTML/CSS background it is easy to fall prey to this habit when the objective is to have flexible designs. One example where things can go wrong very quickly are

Flex Layouts | Nested Containers

When you have such kind of nesting, the containers run measuring and sizing algorithm on children. Now, if you have some of the children as containers themselves this can be very time consuming. This will also be a performance issue if you are choosing to resize your screens as the same algorithm is executed again.

You must be asking what should we be doing if we find ourselves in such a situation? Look for alternatives. You should re-evaluate your choice of containers, a better option is Constraint based layouts which makes use of Styles, Horizontol & Vertical alignments, margins, and spacers.

Rule 2: Do not use absolute layout techniques

This technique needs you to define co-ordinates (x,y) for objects. While, this technique is most performant as the there is no need for the player to find out positions for the children, it is not a recommended practice. This approach will not provide you flexible designs and re-sizing the browser window will not resize and re-layout the objects. Try avoiding this one. This approach can be used only with Canvas or Application with layout=”absolute”

Also, you can choose to hard-code widths and heights. This also is a quick win solution because the player need not calculate sizes of objects. In many applications, you will find that this is anyways needed, because, you would not want to extend/shrink the size of your controls like TextInput with changing browser size.

Rule 3: Make wireframes before you start making layouts

This is a very handy and good practice. If you can, then make sure you have a paper-layout (wire frame) of your application design. This will help you in understanding the application design and assist in choosing a container appropriately

Rule 4: Use Navigator containers

Navigator containers like Accordion, TabNavigator and ViewStack has built-in deferred creation policy. This means that all the controls are not created at application start-up, but are deferred until you have activated that view.

Rule 5: Use Box when you have line up things in one direction (horizontally or vertically)

You should be using Box, HBox or VBox only when you have to logically group some controls together and place then in a layout. Do not use nested HBox and VBox to do placements on the screen.

Rule 6: Use Constraints if you have applications that can change size

You can use top, bottom, left, right to set anchor point on the application. This will ensure that your containers and controls would be anchored to the borders as defined by you. Let us say that you have set a control with left=10 and right=10, this will mean that as you resize the application, the size of the container / control will change.

I will try to code an example and upload the same for you to view in some time.

Flex Best Practices

Best Practices while developing in Flex/ActionScript 3.0

Use of Design Patterns

As in any other language, use of design patterns is also recommended in Flex. Some of the most widely used and successful pattern in Flex world are:

  1. Command Pattern: As a design pattern, Command Pattern is used where objects are used to represents actions. If you break up your application as features, then you should be having one command per feature. This pattern brings in many benefits like:
    1. re-usability of code as we have encapsulated functionality in classes that can be invoked from various areas of the application;
    2. commands can be used queued up using a Manager and can be run in sequence or asynchronously;
    3. provides the capability to perform undo(s) by maintaining the list of commands as the get executed
  2. Model-View-Controller (MVC): You can choose to have a MVC as a “hand-rolled” code, or use some of the existing libraries like PureMVC or Cairngorm.
  3. Singleton: Flex being a client, it is recommended that you manage state on the client itself instead of a server. Singletons provide you with a capability of managing states in the objects itself.

Caveat: You can not use Singletons together with Modules. Doing so would mean that multiple instances of the same module will be referencing to the same model and hence data causing issues on the views. This is one area where you would have to careful not to tip the balance.

Performance

  1. Garbage Collection: Little known facts:
    1. runs when the Flash player needs memory and is based on many factors like available RAM, available chinks;
    2. runs automatically and you can not force it to run
    3. does not do everything in single run. Player manages garbage collector execution in a thread and it may take a while before garbage collector starts to collect memory
  2. Use weak references for event listeners if you are very sure that there would be other references. But, if you not sure of that, then you should be using a strong reference. What you do not want is to loose your event listeners just because there are no other references to the object. If you use strong references, make sure you remove event listeners as well. A weak reference is one that is not counted by the Garbage Collector (i.e. it is not counted in reference counting, and it is not followed for mark sweeping). This means that if the only references remaining to an object are weak, it will be available for collection on the next GC sweep. References associated with event listeners are often forgotten by developers, which normally results in the listener never being removed from memory. This is why weakly referenced event listeners are so handy – if you forget to remove the listener, you will not impede the Garbage Collector’s ability to collect the object. But, they can be tricky as if there are no other references, and if you are awaiting response from an event, the event will get lost as the object would be collected by GC.
  3. Defer instantiation: You should be using deferred instantiation for creating controls. Containers like ViewStack, Tabnavigator has deferred instantiation activated by default and you should not change the policy. This will lead to having quicker application startup
  4. Reuse objects instead of creating new ones: killing existing objects and creating new ones will lead to an overhead on the player. Also, this will mean that you will have to write code to cleanup references of the object or else Garbage collection would not work
  5. Cleanup: To do the cleanup make sure you always, remove all event listeners and clean up all variable references by setting the object to null
  6. Make use of runtime shared libraries to decrease startup time

Optimization

  1. Use strongly typed variables: ActionScript compiler would be able to do some good code optimizations if you are using strongly typed objects
  2. If you have to refer to an object property time and again, then set that to a variable. Like: Do not use arrayObject.length in a for loop. Make sure you have that stored in a variable before the loop begins
  3. Be conservative about using custom item renderer’s in DataGrid. Having a renderer for every column would kill the performance
  4. Avoid unnecessary component nesting. Try to use Constraint based layout for laying out your pages. Use of HBox and VBox with dense nesting is not recommended. These should be used only when you have to lay out things in a row/column
  5. Use AMF !

I would be blogging away with more detailed viewpoints on each of these in times to come.

Disclaimer: Please note that the best practices listed above are purely my ideas/opinions and not recommendation by Adobe or Sapient. You

Code generation (Cairngorm)

I blogged about Cairngen a few hours back and I have that up and running now. Following are instruction to get that running:

  1. Down the project from Google project
  2. You need to some additional JARs as well:
    1. Mozilla Rhino (JavaScript libraries)
    2. Jacarta BSF
    3. One of the blogs also called out that you may need commons-logging-1.1.1.jar (through I already had that in my classpath
  3. To provide the details, of the code generation, you would need to modify the project.properties files.
  4. Now you can run the ant build -> ant main, which will provide you with the basic setup of the folders
  5. When you are ready to generate files, you can use one of the following targets:
    1. create-multiple-sequence-exclude-delegate: Generates the commands with-out the business delegate layer
    2. create-multiple-sequence-include-delegate: Generates the business delegate layer as well

My reviews on the library/tool:

Positives

  • Nice to have in your arsenal as provides you with most of the plumbing;
  • Fast and easy to get up and running

Deltas

  • Having to mention the command/events in the properties file is not going to scale for larger enterprise based solutions
  • Same project/folder can not be used with different Flex applications. Though you can set up different projects, but needs plumbing there. There can be quick ways to manage that in Ant
  • Not having a GUI is a turn-off for me. You can not link

NEWS

MySQL 5.1 has been announced

Sun has announced the new release of MySQL 5.1. While this seems like an incremental release, there are some significant features lined up in this release. Zac Urlocker, VP MySQL products at Sun said in a video posted on InfoWorld

“One thing we’re really most proud of is, frankly, we fixed a lot of outstanding bugs in 5.0,” Urlocker said. “So 5.1 has not only greater reliability, but a performance increase of 20 percent. It will be more in some cases and less in others, but there’s a significant performance boost and scalability enhancements.”