POD component – Dashboard

Posted by admin on January 10th, 2009

Yesterday I was looking for a way to show multiple statistics next to each other. I had a component in mind that could contain Panels. The Panels would have to be divided over the available space. If there was one Panel, it would get all the space, with two Panels the space would be divided in two, … Also you need to maximize, restore and minmize the Panels.

Thx to Tom Van den Eynde from VDE Projects I found a very nice example of such a component.

Here is the link: http://www.adobe.com/devnet/flex/samples/dashboard/dashboard.html. The Panels are also draggable.

I haven’t begun to use it but I’m sure this will be a great example to start from.

Thx, Lieven Cardoen

<

Shortcuts in Eclipse

Posted by admin on December 25th, 2008

Try hitting Ctrl-Shift-L and you’ll see all the shortcuts available!

<

Rounding Up 2008

Posted by admin on December 24th, 2008

I started this year by taking over the lead of a big project for the Belgian government. The project is an e-learning environment created mainly with Flex, WebORB, .NET, MSMQ and MSSQLServer 2005. Daily hundreds of candidates go to Brussels were they are being tested by our software. Typically some 300 candidates start off at the same time to take a test.

So what have I learned this year (some of the things ;-) ):

Database

  1. Indexes are very important because they can speed up things a lot. However they can also be misused!!! So read about them.
  2. Stored Procedures made it easy to quickly write logic (transaction scripts). However it’s hard to maintain these Stored Procedures and Cache dependencies don’t work with complex Stored Procedures.
  3. MetaData was a very usefull mechanism to add new logic in Flex without having to change table designs.
  4. We also used MetaData for tags which wasn’t the best choice.

.NET

  1. I didn’t have a lot of experience in the beginning of this year so things kind of moved in the direction of Transaction Scripts. They aren’t a bad choice but as the project gets complexer, transaction scripts are difficult to maintain.
  2. SubSonic (o/r mapping tool) did it job very good but I’m not very pleased with the lack of documentation, tutorials and clear explanations. I will certainly look into nHibernate and Entity Framework and see how they work with some of the patterns described in ‘Patterns of Enterprise Application Architecture’ by Fowler. In the future the project will certainly need to be scalable so things will have to change.
  3. Visual Studio is a great IDE.

IIS and ASP.NET

  1. By default IIS recycles application pools every 29 hours (will come back to that later because this caused a lot of problems).
  2. HttpHandlers are great.
  3. Cache is a very important feature if you want to speed up your application.

Flex

  1. Very good choice for our client side development. Application development however is far more complex than writing web pages in .NET. If you need your code to be maintainable you need to know about design patterns, frameworks, refactoring, architecture, … Those things are mainly things you learn after having used them a couple of years.
  2. We now work with modules but in the future we will have to check out those shared libraries as well. Our application is now 2mb big so some kind of intelligent caching will be needed.
  3. Prana is great to configure your application externally. Check it out!
  4. The Flexbuilder Eclipse Plugin is a waste of memory and I hope Adobe tries to improve this in the future. Building our project takes far too long.
  5. Resource bundles could be made easier.
  6. Designing a Flex application is a hard thing because you really need a designer who knows some basic things about Flex.
  7. Implementing Pessimistic Concurrency with Messaging was a very hard one this year!
  8. Looking forward to create a desktop application version of our project.

WebORB

  1. Great product. FluorineFX is the open source alternative, but WebORB has a lot more features. Without a support plan however some things are really hard to debug.
  2. Authentication and Authorization is worth to take a look at, but it’s important to fully understand it.
  3. WebORB messaging integration with MSMQ is great to let other applications know what’s happening.

Other tools that have been very usefull are CvsDude, Trac, Mylyn, SubVersion, Charles, SQL Compare, SQL Data Compare, ant, cruisecontrol, Linq, SilverLight (very promising), Spring,…

Ciao!

<

Stress Testing with WebORB

Posted by admin on November 19th, 2008

Yesterday and today I worked on a performance issue where 350 candidates had to wait more than a minute before their data was loaded. The 350 candidates start their exam simultaenously so the server is heavily loaded at that time. I had a couple of ideas in mind like caching certain things but how was I going to test this. I haven't got 350 computers at my desk, I just have one laptop (and a development server).

A first tool I got from an answer on StackOverflow. AB is a tool for benchmarking apache server, but it can be used to benchmark any url(in my case local IIS). To do this I created an aspx page that loaded the same data that was loaded by one candidate. I then used AB to call that page multiple times. With this tool I already got a good idea how good my caching was working but I didn't know if WebORB was also causing performance problems.

Since the last update we put on the development server of the customer, candidates had to wait much longer to get started. My guess was that it had to do with WebORB authentication. I now had to find a way to test my services by using the WebORB gateway. Asynchronous Unit Testing with FlexUnit had to be one of the answers. So I got started and two hours later I had my test. I did however had to try three different things.

In the first try I created a Test and added it a hundred times to the TestSuite. This wasn't so usefull because the next Test starts only if the previous had ended. I needed simulteanously remote calls, parallel, not serial.

In the second try I created a Test that does a remote call a hundred times and is added only once to the TestSuite. This second try looks like this:

Actionscript:
  1. package {
  2.     import flexunit.framework.Assert;
  3.     import flexunit.framework.TestCase;
  4.    
  5.     import mx.rpc.AsyncToken;
  6.     import mx.rpc.Fault;
  7.     import mx.rpc.IResponder;
  8.     import mx.rpc.Responder;
  9.     import mx.rpc.remoting.mxml.RemoteObject;
  10.    
  11.     public class LoadExamSessionTest extends TestCase  {
  12.        
  13.         private var remoteObject:RemoteObject;
  14.        
  15.         override public function setUp():void {
  16.             remoteObject = new RemoteObject("GenericDestination");
  17.             remoteObject.source = "Edu3.ApplicationTestServices.LoadExamSessionBenchMarkTestService";
  18.             remoteObject.endpoint = "http://localhost/edumatic3/local/weborb.aspx";
  19.             // This is needed because the weborb authentication is enabled on the server side.
  20.             remoteObject.setCredentials("credentials", "credentials");
  21.            
  22.         }
  23.        
  24.         public function testLoadExamSessionTest():void {
  25.             for(var i:int ; i <200 ; i++){     
  26.                 loadExamSession();
  27.             }
  28.         }
  29.        
  30.         public function loadExamSession():void{
  31.             var token:AsyncToken = remoteObject.LoadTest();
  32.             var responder:IResponder = new Responder
  33.             (
  34.                 addAsync(onLoadExamSessionResult, 1000000),
  35.                 null
  36.             );
  37.             token.addResponder(responder);
  38.         }
  39.        
  40.         public function onLoadExamSessionResult(data:Object):void {
  41.             assertNotNull(data.result);
  42.         }
  43.     }
  44. }

This worked like a charm, but Authentication on the server side is only done once with the frist call because I'm using the same Remote Object every time. You should also check Charles to see what happens because it's very interesting. Apparently the there are only two calls to weborb.aspx. The first call is the one that will trigger my custom authentication handler, the next call has packages 199 calls to the service... I won't put a screenshot here because testing it is so much cooler. You can actually see in Charles that the server has started 199 threads and you can follow how much of the amf package is downloaded.

But this wasn't what I needed because all 350 candidates are authenticated seperately. To simulate this I just create a new remote object for each call. Class now looks like this:

Actionscript:
  1. package {
  2.     import flexunit.framework.Assert;
  3.     import flexunit.framework.TestCase;
  4.    
  5.     import mx.rpc.AsyncToken;
  6.     import mx.rpc.Fault;
  7.     import mx.rpc.IResponder;
  8.     import mx.rpc.Responder;
  9.     import mx.rpc.remoting.mxml.RemoteObject;
  10.    
  11.     public class LoadExamSessionTest extends TestCase  {
  12.        
  13.         private var remoteObject:RemoteObject;
  14.        
  15.         override public function setUp():void {
  16.         }
  17.        
  18.         public function testLoadExamSessionTest():void {
  19.             for(var i:int ; i <200 ; i++)
  20.             {         
  21.                 loadExamSession();
  22.             }
  23.         }
  24.        
  25.         public function loadExamSession():void{
  26.             remoteObject = new RemoteObject("GenericDestination");
  27.             remoteObject.source = "Edu3.ApplicationTestServices.LoadExamSessionBenchMarkTestService";
  28.             remoteObject.endpoint = "http://localhost/edumatic3/local/weborb.aspx";
  29.             // This is needed because the weborb authentication is still enabled on the server side.
  30.             remoteObject.setCredentials("credentials", "credentials");
  31.            
  32.             var token:AsyncToken = remoteObject.LoadTest();
  33.             var responder:IResponder = new Responder
  34.             (
  35.                 addAsync(onLoadExamSessionResult, 1000000),
  36.                 null
  37.             );
  38.             token.addResponder(responder);
  39.         }
  40.        
  41.         public function onLoadExamSessionResult(data:Object):void {
  42.             assertNotNull(data.result);
  43.         }
  44.     }
  45. }

Now you'll see 200 calls to weborb.aspx in Charles and my custom WebORB authentication handler will be called 200 times. This is somewhat the customers case I wanted to simulate.

What did I find out, well, for 200 remote calls, the third scenario (200 times weborb authentication) takes double as long as the second scenario (once weborb authentication).

The Caching on the server times now speeds up the loading of the data five times!

ps: I do need to dig in a little deeper in the addAsync from FlexUnit because when I add another addAsync for my fault event in the Reponder, things get messy... Will keep you posted on this.

Ciao! Lieven Cardoen aka Johlero

<

WebORB Authentication Issue

Posted by admin on November 16th, 2008

Imagine you have a Flex Applicatin using WebORB Authentication. When the first Remote Call is done you supply the Remote Object with credentials. The server authenticates and from then on you don't need to supply credentials anymore. The server side session will remembler who you are.

But if for some reason your server side session is ended (to to session timeout, applicatin pool recycling, ...) the next Remote Call will get a Weborb Security Error.

We have solved this by catching this error in the OnFault event from the responder and retrying the remote call again with the credentials. However, this wasn't as easy as we thought. Apparently the client side code remebers that it's been authenticated and will not re-authenticate automatically (because the client doens't know the session has ended). First we tried to call logout() on the remote object but that didn't work (we got an error saying that logging out and setting the credentials couldn't be done simultaenously). We then tried disconnect() and this worked like a charm. After the disconnect() on the remote object we resetted the credentials. If we then called a server side function, WebORB would re-authenticate again. Without the disconnect() WebORB would'nt re-authenticate again (apparently the remote object holds some flags which tell WebORB to authenticate or not). We do need to go and find out the difference between the logout() and the disconnect().

I will definetily come back to this because it isn't a hundred procent clear to me.

Ciao, Lieven Cardoen aka Johlero

<

IIS Recycling

Posted by admin on November 16th, 2008

Last week I got a call from a big customer saying that the 100 of the 200 candidates had just received an error log window in our Flex Application. I knew that this could happen someday, but what had caused this error log...?

After a lot of searching in the logs of the two servers at the customer, I found out that at a certain time on one of the two servers all sessions and application pool were ended. Why? Well, after again a lot of searching I found out that IIS recycles an application pool every 29 hours... Man, why is this default enabled???

Apparently a lot of these recycle events are nog logged by default. Only the 29 hour recycle event apparently is logged by default. As for now I haven't found this log yet, so I will have to enable all those logs to find the actual reason why the application pool recycled...

That's done by this command on IIS6:

cscript %SYSTEMDRIVE%\inetpub\adminscripts\adsutil.vbs Set w3svc/AppPools/LogEventOnRecycle 255

On IIS7 you can enable them in the Advanced Settings of the application pool.

The problem with our Flex Application was that it uses WebORB Authentication. This authentication is done by the first remote call after which the server side session remembers the credentials. After the recycle the sessions were gone and 100 candidates received a WebORB Security error... We have already solved this problem by re-authenticating when this happens but I'm also really hoping to find out why the application pool recycled in the first place... Any suggestions are welcome... (memory?, too mucht connections?, database problem?, ...).

Ciao, Lieven Cardoen aka Johlero

<

Prana Array and Method-Invocation

Posted by admin on November 2nd, 2008

In the next example I extended the previous example with declaring an array and invoking a method on an instance of an object.

Download Project

Example

In the ModelLocator I added two variables which will be manipulated by the prana container.

Actionscript:
  1. public var users:Array;
  2. public var typedUsers:TypedCollection;

Users is an Array, typedUsers is a TypedCollection of User objects (see the Constructor).

There's also a function to add an instance of a User to the typedUsers collection.

Actionscript:
  1. public function addUser(user:User):void
  2. {
  3.     this.typedUsers.addItem(user)
  4. }

In the PranaExample.mxml (application starting point) I added two List controls with dataproviders users and typedUsers.

XML:
  1. <mx:List dataProvider="{JohleroModelLocator.getInstance().users}"
  2.     labelField="name"
  3.     rowCount="{JohleroModelLocator.getInstance().users.length}"
  4. />
  5. <mx:List dataProvider="{JohleroModelLocator.getInstance().typedUsers}"
  6.     labelField="name"
  7.     rowCount="{JohleroModelLocator.getInstance().typedUsers.length}"
  8. />

The two variables (users and typedUsers) are being populated by the Prana Framework like this:

XML:
  1. <object id="johleroModelLocator" class="johlero.model.JohleroModelLocator" factory-method="getInstance">       
  2.     ...
  3.     <!-- Example declaring an array -->
  4.     <property name="users">
  5.         <array>
  6.             <value>
  7.                 <object class="johlero.model.User">
  8.                     <constructor-arg value="Johlero"/>
  9.                 </object>
  10.             </value>
  11.             <value>
  12.                 <object class="johlero.model.User">
  13.                     <constructor-arg value="John"/>
  14.                 </object>
  15.             </value>
  16.             <value>
  17.                 <object class="johlero.model.User">
  18.                     <constructor-arg value="Mark"/>
  19.                 </object>
  20.             </value>
  21.         </array>
  22.     </property> 
  23.  
  24.     <!-- Example using method-invocation -->
  25.     <method-invocation name="addUser">
  26.         <arg>
  27.             <object class="johlero.model.User">
  28.                 <constructor-arg value="Johlero"/>
  29.             </object>
  30.         </arg>
  31.     </method-invocation>
  32. </object>

As you can see the users array is just populated by an array tag with multiple value tags.
To populate the typedUsers TypedCollection, we need to call the addUser function on the JohleroModelLocater. The arg tag defines the argument that will be passed to the addUser function.

In the lib there's a prana-main.swc. This swc is not the same as the swc of the latest production release from prana. There was a bug and it's fixed in this swc. You can allways checkout the prana repository from https://prana.svn.sourceforge.net/svnroot/prana/prana-main/trunk and add a reference to your project. Like that you'll allways have the latest code available (with its risks).

That's it. See the example and project to see it work!

Ciao! Lieven Cardoen aka Johlero

<

External Configuration Using Prana Framework – Simple Example Extended

Posted by admin on October 26th, 2008

In this post I somewhat extended the previous example to show you how to work with a properties.txt file and interface-based programming.

Download Flex Project

Example (right click swf to see source)

The application-context-johlero.xml looks like this:

XML:
  1. <?xml version="1.0"?>
  2. <objects xmlns="http://www.pranaframework.org/objects"
  3.         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  4.         xsi:schemaLocation="http://www.pranaframework.org/objects http://www.pranaframework.org/schema/objects/prana-objects-0.6.xsd"
  5. >
  6.     <property file="application-context-johlero.properties.txt" />
  7.    
  8.     <!-- Create an instance of a class implementing ICalculationFactory interface         -->
  9.     <!-- You can switch between MultiplyFactory and DivisionFactory to see the difference -->
  10.     <!-- object id="multiplyFactory" class="johlero.factory.MultiplyFactory"/-->
  11.     <object id="divisionFactory" class="johlero.factory.DivisionFactory"/>
  12.    
  13.     <!-- ================================================ -->
  14.     <!-- Singleton -->
  15.     <!-- Prana will call getInstance() function on instance of johlero.model.JohleroModelLocator -->
  16.     <!-- Next Prana will set the four variables -->
  17.     <!-- ================================================ -->   
  18.     <object id="johleroModelLocator" class="johlero.model.JohleroModelLocator" factory-method="getInstance">       
  19.         <property name="selected" value="true" />
  20.         <property name="title" value="Johlero Prana Framework Example" />
  21.         <property name="fontColor" value="0xFC0C06"/>
  22.         <property name="fontSize" value="40"/>
  23.        
  24.         <!-- the ref attribute is a reference to previous defined instance -->
  25.         <property name="calculationFactory" ref="divisionFactory"/>
  26.        
  27.         <!-- Next property is assigned a value that is defined in  -->
  28.         <!-- application-context-johlero.properties.txt            -->
  29.         <property name="gatewayUrl" value="${gatewayUrl}"/>
  30.        
  31.         <!-- Next Commented lines are another way of assigning an object to  -->
  32.         <!-- the calculationFactory property                                 -->
  33.         <!--<property name="calculationFactory">-->
  34.             <!--<object class="johlero.factory.DivisionFactory"/>-->
  35.         <!--</property>-->
  36.     </object>
  37. </objects>

There are two new things here. First is the reference to a property file application-context-johlero.properties.txt (containing key value pairs) and the assignment of an instance of a class to a property. Notice that the property calculationFactory in JohleroModelLocator can be set to an instance of DivisionFactory or MultiplyFactory in two ways.

In my experience using a property file is usefull to seperate program specific configuration from environment specific configuration. In my example a have a gatewayUrl which is defined in the property file because this gatewayUrl will probably change when deploying on another server.

To learn some things about interface based programming I suggest you read a book about Design Patterns (Head First, Gang of Four) and OOP (Head First) but you can see that Prana is a great way of keeping your application kind of stupid. The application doesn't know if a division of multiplying will be executed. Only at runtime an instance of DivisionFactory or MultiplyFactory is injected in the application. Because the application doesn't have a reference to DivisionFactory or MultiplyFactory (only a reference to ICalculationFactory exists) you need to add these Classes to your application. If you don't do this, Prana will not be able to create an instance of these classes at runtime.

That's why you'll see in the PranaExample2.mxml:

Actionscript:
  1. {
  2.     MultiplyFactory,
  3.     DivisionFactory
  4. }

Well, I think this is about all the explanation you'll need. The example speaks for itself.

Ciao!

<

External Configuration Using Prana Framework – Simple Example

Posted by admin on October 25th, 2008

This post is a call to Flex Developers to start using the Prana Framework. If you want more information on Prana Framework then look at the site. Because a lot of developers probably get scared when hearing terms like Inversion of Control, Dependency Injection, Spring, ... you can just go on without reading about this and check this simple example. The purpose is to configure some variables externally in a xml file using the Prana Framework. Other ways of doing this could be:

  1. Creating your own XML-file.
  2. Creating a txt file with key value pairs.
  3. Having some configuration info in your database.

In all three cases you would need to read the xml, txt or database data and parse it yourself in the application.

Prana does this all for you automatically. Get on to the example.

Download zip Flex Project

Example + source view : Right click swf --> View Source to see source.

The only lib you'll need is prana-main.swc, which is in the libs folder.

The three files that I created are PranaExample1.mxml, Singleton.as and application-context-johlero.xml.

PranaExample1.mxml is the main application mxml. Singelton.as is a singleton with a few variables that will be set by Prana and application-context-johlero.xml is the XML file that will be read and parsed by Prana.

I have put comments in the three files that should be enough to understand the example.

In next examples I'll show some more complex examples of what you can do with the Prana Framework. Anyway, their's also documentation on the site of Prana Framework, so go and check it out.

Interview about Prana Framework on InfoQ

The Flex Show Episode 57: The Prana Framework with Christophe Herreman

Ciao!

(Thx to Herre aka Herrodius! Respect!)

<

SilverLight

Posted by admin on October 18th, 2008

The last couple of days I played around with Silverlight 2.0 and it's the first time I really enjoy it! That's probably mainly because doing SilverLight in VS2008 works great. Installing all the things I needed was another thing. I had to uninstall several things, examples created in beta versions of VS2008 didn't work, ... Anyway, if you start off at http://silverlight.net/GetStarted/ and google for some blogs on installing it, you should be fine after while!

I'm currently using the book Introducing Microsoft Silverlight 2 to get started and it isn't bad. Some examples though have mistakes (never understood how one can put code in a book that has mistakes and doesn't build...). After finishing the book I'll start off with some examples on the site of silverlight.

The coolest thing for me is debugging with Visual Studio. Until a year ago I mainly programmed in Flex, which also has a great debugger, but not like VS2008. When doing Flex together with WebORB and .NET (ASP, C#) I could easily debug in Flex and in ASP.NET but still needed to IDE's. With Silverlight I only need one IDE, VS2008, where the debugger is awesome.

There are lots of discussions about Flex vs. Silverlight but I guess the truth is just that SilverLight has a lot of catching up to do. Components need to be created, bugs will need resolving, something like AMF would be great (I know WebORB is working on SilverLight support), ... I think SilverLight is finally at a point where it becomes interesting to grab a book and play around with it!

The only thing that's strange to me is the lack of sites, games, examples in silverlight on the internet. I have found some but they are just extremely simple. Would like to see some examples of silverlight sites that can be compared to business solutions in Flex.

I also installed Expression Blend and I don't like it at all. Maybe because I'm a programmer and not a designer, but still, I found Flash more intuitive. And what is all that black doing there in Blend... Hopefully it's just me feeling novice in Blend but if not, then I hope they will improve Blend a lot.

Be well! Lieven Cardoen

<

Copyright © 2007 Johlero – Cardoen Lieven. All rights reserved.