Category Archive : Engineering

Performance | Reducing SWF file size

If you are developing an Enterprise application in Flex, you must be asking yourself “how do i reduce the size of my SWF file?”. This is important because, bigger the file, the more time it will take to load. There are a few ways to do, but one of the ways that is not so common is out there is “not to embed images” in the SWF file.

Most of the examples that I have seen and gone through I have seen people do the following; which leads to Flex compiler picking up the image and puts that in the SWF file. This leads to increasing the file size.

<mx:Image source=”@Embed(source=’assets/welcome.jpg” height=”228″ scaleContent=”false” top=”10″ width=”429″ horizontalCenter=”0″‘)/>

Instead, if you would do the following, the image will requested from the web server when the Flex needs it. And, also as the images can be cached by the browser, after first time load, your client would not even need to request them again. How many times do you change assets in your application, so on every new deployment of the SWF file you do not need to worry about the static assets.

<mx:Image source=”assets/welcome.jpg” height=”228″ scaleContent=”false” top=”10″ width=”429″ horizontalCenter=”0″/>

Bug – TextInput not capturing repeated keystrokes

I noticed that the “Text” controls i.e. TextInput, TextArea and RichTextEditor are behaving differently capturing Key strokes. This is happening only on Firefox 2.x on Mac OSx 10.4 where repeated keystrokes are not getting captured and holding down the key does not print the character on the screen.

This has also been logged with Adobe as a bug. If you have solved this problem please let me know.

Flex gets difficult !!

Now that I an over some of the simple things in Flex and started to use this in a real application, I am finding limitations in Flex. Just today, I created my account with Adobe Bug System. While I wait for Adobe to start replying, I am going to use my blog to communicate these to the community and hoping that we can also find a solution.

Keep listining.

Performance Benchmarks – C++

If you are a C++ developer, this benchmark release will interest you very much.

Integrating Flex with Spring

When I started to look at building front-end of my application in Flex, the very first challenge was the back-end integration. Being on the J2EE tech stack, it was easy because of the BlazeDS provided by Adobe itself. But, still there was challenge to integrate the application with Spring. There was another option GraniteDS which provided Spring out of the box.

I was getting inclined to BlazeDS, for the top reason that it was provided by Adobe and at a later point if we ever needed to move to LCDS, it would be easy.

Once the decision was made, the problem that loomed at large was the Spring integration that was not taken care in the BlazeDS yet. And, I struggled quite a bit to get that working for my application. Below you will find detailed steps to provide an integration between Flex and Spring. For the purposes of this demo, I am assuming that you know how to configure Spring and already have that in place.

Setup your Spring destinations

1. You need to configure a factory that can be used to fetch spring beans from the J2EE container. To do that, you need to define an entry in the services-config.xml as:

services-config.xml

<factories>
<factory id=”spring” class=”com.kapil.myapplication.flex.common.SpringFactory”/>
</factories>

2. Now you have to define your destinations so that they can ask the Factory to get the bean to them. As I am using remoting (on AMF), I have configured the remoting-config.xml. The entries below state that that the destinaton “userService”, shoudl get the service from the SpringFactory

remoting-config.xml

<destination id=”userService”>
<properties>
<factory>spring</factory>
<source>userService</source>
</properties>
</destination>
Setup Spring Factory on the container

As I said that there is not out-of-the-box integration between BlazeDS and Spring, I wrote my own implementation of the “flex.messaging.FlexFactory” interface and placed that in the classpath of the J2EE container. Various methods that you need to implement are:

public void initialize(String id, ConfigMap configMap);

You do not have to write any implementation, through you can use this for doing any kind of initialization that you may need.

public FactoryInstance createFactoryInstance(String id, ConfigMap properties);

This method is called when we initialize the definition of an instance which will be looked up by this factory. It should validate that the properties supplied are valid to define an instance. Any valid properties used for this configuration must be accessed to avoid warnings about unused configuration elements. If your factory is only used for application scoped components, this method can simply return a factory instance which delegates the creation of the component to the FactoryInstance’s lookup method.

public Object lookup(FactoryInstance inst);

Returns the instance specified by the source and properties arguments. For the factory, this may mean constructing a new instance, optionally registering it in some other name space such as the session or JNDI, and then returning it or it may mean creating a new instance and returning it. This method is called for each request to operate on the given item by the system so it should be relatively efficient.

To do the actual lookup, you need to also subclass the FactoryClass interface. The class should have the following implementation:

public Object lookup();

Is the method that has the actual code for you to find the Spring bean. You can write which ever way to load the SpringContext and then find the bean. I had used the approach of a ServiceLocator which is a singleton and helps me find the bean from the common pool of beans. You can do whatever you like to do.

Hope this helps.

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

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

Garbge Collection and ActionScript

Performance has been a buzzword for all of us who are into writing super fast applications and with Flash games it has been more so important. As, I started to move into Flex, this was one of areas that I wanted to get a hang on real fast. No one wants, to write code that is not per formant and no one wants to come back and fix code that is not performing.

So, in came Garbage collection in Action script, and I tried a simple and very straight forward spike. I created two buttons and placed then in a Canvas. Then on click on a button i removed the other button. I kept on checking on for quite some time, if the GC had collected the resources, but it did not.

Lesson 1: Garbage Collector does not run as soon as you remove a control. It will run when it is needed. It will check upon system resources like available memory, stack, heap and decide when to collect.

It dawned upon me how would then I know when it collects and how do I optimize or in other words how do I make sure that when a GC collects, it will find what I want to destroy. Complicating the scenario, this is an issue when you have many screens in the application as re-usable objects (creating modules and that can be reused. So, a strategy that comes to mind is what I learned in ASP.NET to have an initialize() and destroy() methods. When I want to load the view for the first time (create) or navigate back in, then i use the initialize() to add all event listeners and when I navigate out, then use the “destroy()” to remove all the events listeners.

This keeps things really simple and also ensures that you will not end up have memory hogged.

Lesson 2: Make sure that you are cleaning up your trail as you move on. Do not leave bread crumbs for monsters to catch up.

I am still learning, so I will continue to post more.

What is Flex?

Long time back Macromedia introduced Flash, the next generation Multimedia. Flash was all about timeline-based approach. Consider everything as an image put in a strip that you run through very very quickly to get some movie. People started to realize that Flash they can do some real cool stuff with and we started to see new way of web content coming up.

When people realized that Flash can be used to do much more than static web content. But, when developers open up the Flash player they froze to see the timeline view. We can just not see programming the timeline way – we are OO guys.

So, Adobe decided to provide a way that works for developers as well and up came out Flex. Flex framework is a code library of components that facilitate building applications which run on Flash Players. Adobe also wanted to make sure that the community can benefit from the framework so they open-sourced the framework. Adobe also provided with a tool the Flex Builder based on Eclipse framework that assists developers to make Flex applications. The Flex SDK (software development kit) has all i.e. Flex source code library, compiler which will let you develop applications in any IDE (even a Notepad) but requires more time and effort to setup. The trade-off for the costly Flex builder is productivity and I find that value for money. Adobe also offers free licenses for students.

Some thing about Flex applications… Flex applications are written in MXML which is a declarative language based on ActionScript 3. The MXML files are first compiled into an ActionScript3 file and then the same is compiled in a SWF file. the SWF file can then be executed in any Flash player.