Tuesday, November 2, 2010

(CRUD) Simple Mobile app with Hero Flex SDK 4.5 (max preview)

Its nice to see Flex SDK adding functionality to support multi-screen. I quickly wanted to get my hands-on the Burrito and Hero before the trial period expires.

I started with a simple to-do list application. What is the feature set? As Simple as it could be.

  • Create a task (enter task name, task details, set the priority)
  • Edit a task
  • Mark a task for completion
  • Viewing list of completed tasks
  • Delete a completed task
  • Un-mark a completed task to bring it back to list of pending tasks
  • Show colored bullets for priorities while viewing pending task list (red for high priority, blue for medium priority, green for low priority)
  • have the pending/completed tasks sorted by priority

Here are some screenshots of the app running in the emulator. (Unfortunately i dont own a android phone but tested it on colleagues android device and the rendering/transitions/persistence is amazing, i am an iphone user and i have to shell 99$ developer certificate just to compile the app for self-testing.. doh!). On windows 7, alt+printscreen gets that bottom bar (it doesnt come up in the real app, also the fonts are not so horrible on the real app, i had initially overwrote the font sizes to smaller sizes on the emulator but on the real device they were hard to read).


I'll share the source code in a while...

The app can be downloaded here - Todo Demo App (Note: On Android device you will have to first install ADOBE AIR Runtime first otherwise this installation will fail)

Tuesday, September 21, 2010

Setting up Eclipse IDE for ExtJS, jQuery development (using Spket Editor)

The title says everything. This post provides detailed steps for eclipse lovers to have them setup their dev environment with ExtJS, jQuery development. At the time of writing this post, Eclipse IDE version is Helios, ExtJS version is 3.2.1

Step 1 : Navigate to eclipse.org in your browser. Click on the downloads link. Click on "Eclipse IDE for JavaScript Web Developers" (or Click here). Download the eclipse IDE for your favorite platform.

Step 2: Launch Eclipse IDE. Navigate to Menu "Help->Install New Software". Click on "Available Software Sites" link. (You can alternately navigate here by choosing Window->Preferences->Install/Update->Available Software Sites). Click on "Add.." Button and enter Name: Spket, Location: http://www.spket.com/update/

Step 3: After adding the external site, close the dialog and come back to the install wizard. Select the site added in step(2) and it shows you with SpketIDE (IDE, TextEditor, Xerces). Select all and Proceed to Install (installing as plugin to eclipse)

Step 4: After Successful plugin installation in above step. Restart Eclipse.

Step 5: Switch the perspective to Spket IDE. How? In your Eclipse IDE for JS Web developers, Navigate to Window->Open Perspective->Other->Spket IDE (Choose). This is very important step.

Step 6: In your Eclipse IDE, navigate to Window->Preferences->Spket->JavaScript Profiles (select it) and click on "New" button to proceed to add a new profile. Enter profile name as "ExtJS" (or whatever you are comfortable with)

Step 7: Select the "ExtJS" javascript profile added in step(6) and hit the "Add Library" Button. This will prompt you with list of available libraries. Select "ExtJS" from the drop down (jquery at a later step similarly)

Step 8: Now select the "ExtJS" added library under the "ExtJS" javascript profile and hit the "Add File" button. You should now browse to your ExtJS (v3.2.1 in my case) downloaded unzipped folder which contains file ext.jsb2 (select this file). [Example: Select file in D:\Arun\ExtJS\ext-3.2.1\ext.jsb2]

Step 9: Expand the "ExtJS" library and select all and close the dialog

Step 10: Associate all *.js files with Spket Editor. To do this, navigate to your eclipse menu Window->Preferences->General->Editors->File Associations->*.js (select) and in the list of editors select "Spket Javascript editor" and hit the default button (make this default editor for all *.js files)

Step 11: Create a new project, create sample.js file and start seeing code hints for your code editor in eclipse by hitting cntrl+Space keys

Step 12: Similar way, Repeat Step (7) and Step (8) by adding jQuery library and start seeing jQuery code hints

Start creating a simple app and start seeing the results with-in eclipse -

Friday, August 27, 2010

WebORB for PHP - Centralizing DB Connection, Querying DB, Closing DB Connection, DB error handling (not using session)

It is pretty easy to get started with WebORB for PHP for Adobe Flex. Adobe Flex provides front end UI that can communicate with server side php objects using actionscript remoting.

What is AS Remoting? Let’s say you have an ActionScript object Account.as which contains accountNumber, accountName parameters. If you wish to save information from user interface mapped into an actionscript object instance say newAccount of type Account.as, you could send the actionscript object to php mapped object newAccount of type Account.php containing same parameters as that of actionscript object. The form of serialization of AS Object and de-serialization into native objects on the server side in simple terms is called AS Remoting.

At the time of writing this article, I am working with version 3.6 (latest) available from Midnight Coders. Like I said as I began typing the post, it’s pretty easy to get started. Download weborbphp3.6 from Midnight Coders(after a signup), and deploy it to your webroot, tweak configuration a bit and you are all set to get started. You could directly open up the weborb console which is very beautiful. It is central point to get started with examples.

In this post, I am assuming you have already setup webORB for PHP and have updated your remoting-config.xml with appropriate destination and have your Adobe flex application ready to invoke remote php service. The initial getting started examples, easily help you write simple service that connects to MYSQL db. It’s pretty good start point, but as you start to develop, you really don’t want to open a DB connection in every service call. You definitely need a central place to handle the DB handling.

Here Is an over-view of what I have in my directory structure:

  • {webroot}\weborbphp36\
  • {webroot}\weborbphp36\Services
  • {webroot}\weborbphp36\Flex-Application-bin-debug

I can access my webORB for PHP console using http://localhost:89/weborbphp36/ (I changed the port in apache to 89 to avoid conflicting with default port 80 usually with IIS) and I can access my Flex application deployed using http://localhost:89/weborbphp36/Flex-Application-bin-debug/login.html

Let’s say you are working with one remote service, UserLoginService.php which simply validates the userLogin entered using Adobe Flex User Interface.

This is how my initial UserLoginService.php will look like

  • Open a DB Connection
  • Query the DB
  • Close the DB Connection
  • Handle any DB Exception
  • Return the DB Result to the caller


And this is my UserLogin.php


See my folder structure in Eclipse (I use PHPEclipse, simple and easy). Notice, that both UserLogin.php and UserLoginService.php both reside in the same directory. Also the root of this folder structure goes into {webroot}/weborbphp36/services/{yourServicesDirectoryStructureHere…}


After you have written this service, You can write a simple test (call it _skunkworks test? Or just a UnitTest to have this invoked through a browser)

I wrote my test UserLoginTest.php into a directory named “tests” as below


Here is the code for simple test – UserLoginTest.php


Run it in browser and see the result –


The beauty of webORB for PHP is the console. You can test it directly from the console



Looks great so far. So what is the problem?

What if we have to write 100 Services to build a large application? It would be tedious to write services which always do the sequence of Opening DB connection -> query -> handle exeption -> close db -> return result. Even if the developer wants to write it this way, when deploying application to production where database connection parameters change from development, modifying it in all services is really a big pain

After a bit of search, I found this post in forums. I implemented the solution suggested, but it was very inconsistent and I was frequently getting errors in my console (I got it to work but was not consistent in browser vs console, it could be probable that I missed something?). So I wanted a robost solution to this problem.

I sought the help of Inheritence (object oriented PHP in v5). Have a super class DBUtil.php which has a method executeTheQuery($query), performs this sequence and returns.

Here is the code for DBUtil.php I have written –


Now place this in your services directory structure.


Don’t forget to extend this class in all your service classes *Service.php (in our case UserLoginService.php).

Now the simplified UserLoginService.php will look like this –


Now let’s start the tests once again.

With this approach, if you perform our browser test, it works great. But webORB for PHP console and application will not work. They throw an error DBUtil.php object not found. (how did I figure this out? Look at the error logs inside apache server, access.log and error.log).

So what is going wrong? (It took me a while to figure this out). We need to place a copy of this file DBUtil.php relative to the weborbphp36/console directory. Why? console directory is where the weborb console.swf is located. To when we try to test it in console, it refers to relative directory to that folder.

Here are the directories to note:

  • {webroot}/weborbphp36/
  • {webroot}/weborbphp36/console
  • {webroot}/weborbphp36/dbcon/applicationdirectoryname/DBUtil.php

Now if you test your application, all of them work fine (Browser based UnitTest.php, Console based service test, Application itself)

Wednesday, August 18, 2010

Frequent Flash Builder Crash w/ Oracle(sun) JRE 1.6.0_21_b06

When i was setting up Flash Builder on my laptop, I directly went to java.sun.com to download the then available latest Oracle(sun) JRE 1.6.0_21 b06. I had the vmargs set for the eclipse (launch time). I noticed Flash Builder suddenly freezes/crashes abruptly. This is more frequent if you have Subclipse 1.6 installed in your eclipse (my version is 3.5.2) and when you perform checkout/update/commit

Check your Java run time


Navigate to this URL which talks about the fix


Check the error log in your FB as here

Error Log for frequent Flex Builder crash?

Have you been tired of seeing your Flex Builder freeze/crash at times without a prompt? Here is an easy way to findout the errorLog that can help you read/diagonise what is probably going wrong.

I have FB installed as eclipse plugin. Navigate to Help->About Eclipse SDK


Click on the Installation Details. If you are using old version of ecilpse (i am using 3.5), you might want to hit the configuration button in this dialog


Click on the view error log button under the configuration tab (for eclipse 3.5). For earlier versions of eclipse, you would have already clicked the configuration button and now you can hit the view error log button


It opens up the log file residing in your workspace inner directory


You would need to scrolldown to the bottom of the page (read bottom-up) for latest crash/freeze log



Wednesday, August 4, 2010

Easy way to Read Flex 4 SDK Code in Flash Builder

A good Flex developer must read through the SDK code to understand how the internals are written. This is one of the best way to mature from a beginner/intermediate flex application developer to an advanced developer. In the early stages, developer spends more time in using existing built-in components to build the UI and to power it with jazz, an easier way is to add lots and lots of styling, skinning. Nice, looks good… So what next? Slowly, patiently reading through and understanding the SDK internals will not only enable the person to grow-up to the next level but also let think beyond current mind-set of wire-framing the UI using most basic elementary existing components. Who doesn’t want jazz? iPhone’s user controls are nice so? Don’t get me wrong, Using an inbuilt component is not wrong but I am stressing on the fact that understanding thoroughly how an inbuilt component is written will mature from a beginner/intermediate level application developer to advanced level.

Some beginners are lazy to advance (or don’t have right direction) and some intermediates are comfortable at their level in just getting the work accomplished and don’t get time to think what’s next. Who wants to go through the huge SDK code? What big difference would it make? I am not anyway helping Adobe come-up with their next version of SDK while I am just struggling to learn how to use the current released SDK. And I always open up the AS Docs for Flex SDK 4 in my nice and fancy browser to refer to the available packages, classes, functions, properties etc. The Control+F (Find) works great in there. I never needed to go through the code as long as I am comfortable getting the work done

But trust me, spending time with the SDK code is the best way to learn Flex

As you keep working with your FlashBuilder, follow how you can easily create the project in your FB as if it were one of the projects you were working on (don’t worry about building it yet) and you can navigate through the files easily and read through the implementation

Here is a small step-by-step guide:

Step 1 : From the Menu Choose File -> New Action Script Project

Step 2: Enter your project name (say SDK4Reference), Choose your workspace path, Choose Default SDK (since we are not intending to compile anything), Hit Next

Step 3: Choose the Source Path Tab in this dialog. Click on Add Folder button. Click on Browse Button, Navigate to Flex SDK 4 projects directory

Step 4 : Select the directory shown below and Hit Finish

Step 5 : Your Project will be listed on the left. Open up the [Source Path] and navigate to say framework->src->mx->collections->*. You can open the file you wish by also using a shortcut-key Cntrl+Shift+R (opening a resource), and type say DateChooser that lists you the source file from anywhere in your project

Saturday, July 17, 2010

FlashBuilder: Missing "Delimiter" from SyntaxColoring->ActionScript

I choose to change my code editor theme in Flash Builder (eclipse) to dark black (voodoo?) without having to download it from any of the openly distributed free eclipse themes. I started from the scratch and was almost finishing and i noticed that in Flash Builder eclipse preferences, Under Window->Preferences->FlashBuilder->Editor->SyntaxColoring->ActionScript, we have a missing "Delimiter" option with custom color. However, I could very well see it present under the CSS category. I was just stuck at my theme as my delimiters : (colon) and ; (semi colon) being matched with the background black and hence appear hidden breaking my theme.


Thursday, April 8, 2010

Flat View, Package Explorer in FB4

The new Flash Builder 4 comes with package explorer. Flex Builder 3 developers see this an instant eye transition in viewing project contents. Well, if you think you need some more time to move to the new package explorer in v4, you can still view the older folder structure of v3 in v4 by enabling a panel   Window->Show View->Others->General->Project Explorer (drag the panel next to package explorer so you can switch easily). No this is not your old v3 explorer though, it just gives you the old feel.

In Flash Builder 4, I like the toggle option for Flat View vs Hierarchial View. Here is the option to switch -




Flat View



Hierarchial View


In-house java robot for loading testing your webservices?

Most SOA based architected applications need to have webservices load tested before we assess the quality of code. Tools like QTP, OpenLoad, NeoLoad etc. provide you with infrastructure and sophistication to achieve this with a price tag attached to it. There is also an open source alternate Apache JMeter. If you are interested in build an in-house java code that just serves your purpose, you should be good to start here

What do you want to test?
  • Take one webservice call and test it for the load. Say webservice that fetches list of customers in the database with a matching property criteria (say search of customer from UI)
  • You can simulate a constant load of say 50 users
  • You may want to setup a step load, of say 10 initial users ramping at the rate of 5 users every two seconds
  • Or more….


 If you have a network monitor tool or a http proxy debugging tool, you can watch while you perform your screen action how data is going over the network (of-course http only). This will give you an idea of what the input payload is to the webservice end url. Say take an example of Customer search screen where user search criteria options are sent to the webservice and the results are fetched

An important point to remember is “Load Testing is not test the client front end UI but loading the middle tier to see how the database server is responding, how your application server is handling the threads, memory, CPU utilization etc.”

Let’s create the input SOAP Request in a flat XML that can be parsed in your java client which is ready to fire. Say a sample here is search a customer with SOAP request containing firstName starting with ‘Jam’ (ex: James, Jamey, Jamoe)



Simulate a constant load of say 50 users?

Lets first start with One User trying to send SOAP Request to end url



Works for one User? Lets Test it first. Yup, it works.. lets move on…

You can create instances of this thread class in a for loop (want load of 50 users, loop it on counter of 50?), kick of all threads. You can customize this code logic with how you want to see the workflow / actions the way you want to.

You may want to de-couple some of these into small functions where a constant load will just read the input SOAP one by one (50 times) and at one go you can hit the out.write(); that just flushes all at one go.

You can simulate a step-up load by implementing a timer and kicking in the users the way you need it. You can also add markers on the time taken for the requests to get served thread-wise

Want to implement a record and customize script kind of tool? Try JPCap utility which provides you with a http sniffing. Capturing the input and providing a nice interface with tons of data points, you get to keep your job for 3 months atleast.

Friday, April 2, 2010

Some Interview Questions on Flex

  • Difference between ArrayCollection and ListCollectionView?
  • Difference between ArrayCollection vs Array?
  • Difference between Sprite and UIComponent and how do you add a spite to a canvas?
  • Difference between DisplayObjectContainer and DisplayObject?
  • what does listData contain in ItemRenderers? What is the Type of listData?
  • How do you access methods in DG from external itemRenderers?
  • What is the data type of the dataprovider property in DG?
  • What are the different data types that the data provider can take? How does it resolve different data types internally in the framework?
  • What collection change event gets fired when data changes in arrayCollection?
  • What are the advantages of using arraycollection as a dataprovider instead of array in DG?
  • DataGrid extends which class?
  • What Class does all list base controls extend? and implement?
  • Difference between style and a property?
  • How do you create a new style for a brand new component just assembled with assets in createChildren() in action script extending UIComponent?
  • What will happen when you removeChild() and addChild()?
  • what does clear() do in graphics class?
  • What are non-visual components in flex? What class do they extend?
  • Where is finally used and what does it do?
  • What is overloading a constructor? How do you overload constructors in flex?
    - Action script does not support overloading constructors
  • What is invalidation Cycle? What are its uses?
  • How do you make a component participate in invalidation cycle?
    - Implement IInvalidating interface or extend UIComponent
  • What are - IStyleClient, IChildList, ILayoutManager, IToolTipManagerClient, IInvalidating, IValidatorListener, IFlexModule, IAutomationObject, IPropertyChangeNotifier, IRepeaterClient, ISimpleStyleClient, IStateClient, IConstraintClient ?
  • Why there is no invalidation cycle for createChildren()?
  • How do you make component participate in event mechanism?
     - Extend EventDispatcher or any subclass of it or implement IEventDispatcher
  • What is the DOM of a flex application?
  • Where do you normally use IFlexDisplayObject?
  • Or How do you create skinning for a component?
    - To add skin properties to component implement the interface or extend DisplayObject
  • What is a MovieClip? IUIMovieClip?
  • What is localToGlobal and globalToLocal?
  • What are explicitHeight, explicitWidth, unscaledWidth, unscaledHeight? When does flex call measure()? (when explicitHeight= NaN or explicitWidth=NaN)
  • What happens in measure()?
    measuredHeight, measuredWidth, measuredMinHeight, measuredMinWidth are set.
  • What is layoutChrome()? When does it get called?
    - before updateDisplayList() flex calls layoutChrome(). It gets scheduled to get called in next render update when invalidateDisplayList() is called
    - It is used to define the border area around the container
  • You are developing a custom component and you want to use some variables that should not be exposed outside. What is the best way to do it?
  • I'll keep adding to the list as i encounter interesting questions.

Friday, March 26, 2010

Running out of logical names for a Class Name?

Look at mx.collections.GroupingCollection2.as in sdk4

3608: 'GroupingCollection' has been deprecated since 4.0. Please use 'GroupingCollection2'.

Early migrating your projects from Flex 3.x to Flex 4 (SDK) + FlexBuilder3 to FlashBuilder4 without many code changes

For a project with close to 1000+ files in codebase, there are un-doubtedly many challenges in performing an early code migration.

It’s always tough to sell your manager an idea of migrating code base to a new version. In Medium to small corporate firms, Most Managers play multiple roles of Project Management, Technical Management and Client management. Delivery manager would slightly share or buy most of what project manager informs about technical challenges or deliver dates negotiation due to challenges. There are some advantages and disadvantages for lead / front technical guys who want to prove that the new version is going to help codebase/product in long run with tremendous enhancements. Most of these managers are typically client oriented and think in terms of numbers in most occasions and are considerably less caring about migration efforts / future code enhancements especially when there was huge effort in building a stable version, well appreciated and satisfied by the client

As a Lead or Front facing Technical guy, you are pretty excited about the release & all the news floating around about Flex 4, Flash Builder 4, Coldfusion Builder and you spread your thought across to the manager making decisions claiming that it would be great to migrate codebase for a long term plan. Having worked on the long ran Beta’s (from Adobe) Technical guys know most of the new features released in these new versions

Thanks to Adobe for giving us backward compatibility with the new version of Flex 4 SDK in Flash Builder 4. If you are working on a larger project implemented with Flex 3 and wish to migrate from Flex 3.x SDK to Flex 4 SDK and FlexBuilder3 to Flash Builder 4 (for developer IDE enhancements), start off here :

  • Export Latest copy of your Source code from repository
  • Create New Flex project in Flash Builder

Export Latest copy of your Source code from repository

Assuming you are on SVN, Switch your perspective to SVN Repository Exploring Perspective and on your source trunk, Export a latest copy of your Source directory –

Hit OK and your Code is now exported to C:\flexsourcecode

Create New Flex project in Flash Builder

Start your FlashBuilder.

Right click in your package explorer and choose New -> Flex Project

Choose your application server type, debug folder, etc. (omitted here).

Proceed and

  • Select "MX only" radio option
  • Add any *.swc to your libs directory
  • Choose appropriate setting for your Framework linkage
  • Hit Finish

Your project will be listed –

  • Copy your source code (earlier exported into C:\flexsourcecode) into the newly created project here
  • Copy any *.swc into libs if you forgot to add earlier
  • You can get rid of the test.mxml file (delete)
  • Right Click properties on the project and delete the test.mxml and set your mainapplication mxml as default here

FB builds your project and reports any changes to be made.Here are the changes I had to make:

  • In Flex 3, mx:Label textDecoration="bold" property value is wrong in Flex4
  • In Flex 3, mx:Label fontStyle="bold"property value is wrong in Flex 4
  • For the above two use fontWeight instead
  • In Flex 3, mx:states, mx:AddChild, components:xyz paddingTop="0" paddingLeft="4" paddingRight="10" paddingBottom="8", paddingType in this scenario is not supported in Flex 4. You will get compiler error
  • Plus Lots of warnings...

For most you will be done here.

As you run, you notice that your CSS will not be picked up.

Pull up your CSS file and add the following line in the beginning –

You should be done now.

Do a few testes running your application. Now that you have confirmed that your application works with Flex 4 SDK (mx set only) and Flash Builder 4 (not the right way though, I mean you are not using spark components, fx namespace yet), you can sell the idea of buying Flash Builder 4 for developer productivity and enhancements.

Migrating the code to newer Flex 4 (not just via backward compatibility) would take time and can wait and go on as you do this step.

From Flash Builder 4 docs - In some scenarios you may want to use only the MX components that were available with Flex 3. For example, suppose you have an existing Flex 3 project and you do not want to introduce the new Spark components. But you do want to take advantage of features introduced with Flex 4 and Flash Builder 4, such as the new states syntax, compiler improvements, and other language features. In this scenario, you select the MX Only component set.