Notes on RIA - Flex, Catalyst, AIR, Lcds, CF, Java.....

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

2010-11-02T16:09:00.001-04:00

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)

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

2010-09-21T20:13:00.000-04:00

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 -

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

2010-08-27T23:25:00.000-04:00

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

<?php
/*
 * @Author Arun Kumar Madas (arun.com@gmail.com)
 * 
 * Created on Apr 8, 2010
 *
 * All Copyrights on this code are owned by the author and
 * this code cannot be distributed, tampered by no means.
 * 
 * Last Edited by Author on Apr 8, 2010
 * 
 */
 require_once("UserLogin.php");
 
 class UserLoginService
 {
 public function validateUserLogin(UserLogin $userLogin)
 {
 //$link = mysql_connect("localhost", "root", "");
 $link = mysql_connect("localhost", "root", "");

if( !$link )
   throw new Exception( "cannot connect to database" );

if( !mysql_select_db("database_schema_name", $link) )
   throw new Exception( "cannot select database - amadas_passwordgenie" );

$query = sprintf( "select screenname, password from userlogin where screenname = '%s' and password = '%s'", mysql_real_escape_string($userLogin->screenname), mysql_real_escape_string($userLogin->password ) ); 
 $result = mysql_query( $query ); 
 
 if( !$result ) 
 throw new Exception( 'Error executing Query ' . mysql_error() ); 
 
 if(mysql_num_rows($result) == 0) 
 throw new Exception ( 'Invalid User/Password combination' ); 
 
 $passwordQuery = sprintf( "select id, screenname, companyname, companyurl, loginid, password, additionalinfo from passwords where active_flag = 'A' and screenname = '%s'", mysql_real_escape_string($userLogin->screenname)); 
 $passwordResult = mysql_query( $passwordQuery ); 
 mysql_close( $link ); 
 return $passwordResult; 
 } 
} 
?>

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 –

<?php
/*
 * Created on Aug 26, 2010
 *
 * To change the template for this generated file go to
 * Window - Preferences - PHPeclipse - PHP - Code Templates
 */
 class DBUtil
 {
 public function executeTheQuery($query)
 {
 
 /******************************************************
 * Begin : DB Parameters
 *****************************************************/
 $DBHOST = "localhost";
 $DBUSER = "root";
 $DBPASSWORD = "";
 $DBSCHEMA=" database_schema_name ";
 /******************************************************
 * END : DB Parameters
 *****************************************************/

$link = mysql_connect($DBHOST, $DBUSER, $DBPASSWORD);
 
   if( !$link )
    throw new Exception( "cannot connect to database" );
 
   if( !mysql_select_db($DBSCHEMA, $link) )
    throw new Exception( "cannot select database - amadas_passwordgenie" );
 
    $result = mysql_query( $query );
 
    if( !$result )
     throw new Exception( 'Error executing Query - ' . mysql_error() );    
 
        mysql_close( $link );
   
    return $result;
  }
 }
?>

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 –

<?php
/*
 * @Author Arun Kumar Madas (arun.com@gmail.com)
 * 
 * Created on Apr 8, 2010
 *
 * All Copyrights on this code are owned by the author and
 * this code cannot be distributed, tampered by no means.
 * 
 * Last Edited by Author on Apr 8, 2010 
 */
 require_once("UserLogin.php");
 require_once("../dbcon/passwordgenie/DBUtil.php");
 
 class UserLoginService extends DBUtil
 {
 public function validateUserLogin(UserLogin $userLogin)
 {
 $query = "select screenname, password from userlogin where screenname = '". $userLogin->screenname . "' and password = '". $userLogin->password ."'"; 
 $result = $this->executeTheQuery( $query ); 
 if( !$result ) 
 throw new Exception( 'Error executing Query ' . mysql_error() ); 
 if(mysql_num_rows($result) == 0) 
 throw new Exception ( 'Invalid User/Password combination' ); 
 
 $passwordQuery = "select id, screenname, companyname, companyurl, loginid, password, additionalinfo from passwords where active_flag = 'A' and screenname = '". $userLogin->screenname ."' order by companyName"; 
 $passwordResult = $this->executeTheQuery( $passwordQuery ); 
 return $passwordResult; 
 } 
 } 
?>

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)

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

2010-08-18T23:34:00.000-04:00

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?

2010-08-18T23:18:00.000-04:00

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

Easy way to Read Flex 4 SDK Code in Flash Builder

2010-08-04T22:01:00.000-04:00

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

FlashBuilder: Missing "Delimiter" from SyntaxColoring->ActionScript

2010-07-17T21:40:00.001-04:00

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.

Flat View, Package Explorer in FB4

2010-04-08T23:59:00.000-04:00

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?

2010-04-08T17:10:00.004-04:00

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

public class HTTPClientInvokerThread implements Runnable {
 
 public void run()
 {
  String SOAPUrl = "http://serverhostip/webservices/ /PointOfSaleWebServices.cfc";
        String xmlFile2Send = "resources\\input.xml"; //relative to proj source directory
        String SOAPAction = "";
        
        try
        {
      // Create the connection where we're going to send the file.
         URL url = new URL(SOAPUrl);
         URLConnection connection = url.openConnection();
         HttpURLConnection httpConn = (HttpURLConnection) connection;
 
         // Open the input file. After we copy it to a byte array, we can see
         // how big it is so that we can set the HTTP Cotent-Length
         // property 
         FileInputStream fin = new FileInputStream(xmlFile2Send);
 
         ByteArrayOutputStream bout = new ByteArrayOutputStream();
     
         // Copy the SOAP file to the open connection.
         copy(fin,bout);
         fin.close();
 
         byte[] b = bout.toByteArray();
 
         // Set the appropriate HTTP parameters.
         httpConn.setRequestProperty( "Content-Length",
                                      String.valueOf( b.length ) );
         httpConn.setRequestProperty("Content-Type","text/xml; charset=utf-8");
     httpConn.setRequestProperty("SOAPAction",SOAPAction);
         httpConn.setRequestMethod( "POST" );
         httpConn.setDoOutput(true);
         httpConn.setDoInput(true);
 
         // Everything's set up; send the XML that was read in to b.
         OutputStream out = httpConn.getOutputStream();
         out.write( b );    
         out.close();
 
         // Read the response and write it to standard out.
 
         InputStreamReader isr =
             new InputStreamReader(httpConn.getInputStream());
         BufferedReader in = new BufferedReader(isr);
 
         String inputLine;
 
         while ((inputLine = in.readLine()) != null)
             System.out.println(inputLine);
 
         in.close();
        }
        catch(Exception e) {
         e.printStackTrace();
        }
 }

// copy method 
   public static void copy(InputStream in, OutputStream out) 
    throws IOException {

// don’t allow other threads to read from the
     // input or write to the output while copying is
     // going on

synchronized (in) {
       synchronized (out) {

byte[] buffer = new byte[256];
         while (true) {
           int bytesRead = in.read(buffer);
           if (bytesRead == -1) break;
           out.write(buffer, 0, bytesRead);
         }
       }
     }
   }

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.

Some Interview Questions on Flex

2010-04-02T10:28:00.004-04:00

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?

Running out of logical names for a Class Name?

2010-03-26T13:22:00.003-04:00

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

2010-03-26T11:44:00.019-04:00

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.

Which one do you like?

2010-03-25T15:55:00.002-04:00

"Application Startpage" or "Start Page"? I like the later but i wish they were consistent.. doesn't matter :-p !!

Tired of Seeing CF Builder Start up page?

2010-03-25T15:38:00.004-04:00

If you have just installed Coldfusion builder, you will be shown the coldfusion builder start page every time you quit and re-launch the IDE. To get away with start page, Find the Menu option-> Window->Preferences->Coldfusion->Startup->Show Welcome page on startup and uncheck it. Flash Builder doesn't do this magic everytime you quit and relaunch, Keeps it simple. I like that.

Some Un-reproducible errors with Flex

2010-03-03T13:22:00.003-05:00

Here are some errors i've encountered working on the flex and these are not reproducible (rare to see..)

RSL Error when loading application (swf)

Hidden frame for tracking browser history opens up

Famous error 2032

Random SOAP Faults in application (Part II - Finding the Cause of problem)

2010-03-02T23:42:00.012-05:00

This is in continuation to my last post where some of our end users running low b/w were encountering random SOAP faults in the flex application.

To debug the problem i have requested access to one of the end users machines to see what was going on. Spending good amount of time trying to work with the end users machine didnt give any clue though. I have found that while the end user recieves the SOAP Fault in the flex application, the response sent by the server for that specific request returned just fine with HTTP 200 OK with SOAP body and header looking just perfect in fiddler (http debugging tool). I didnt have a clue on what was going wrong when the response looks perfect.

Next, I took the SOAP body from the fiddler and started looking into the Flex framework, SOAP Decoder to analyze if something is wrong with the response body content, content lenght etc. After spending more time, Everything went through fine. The response was indeed getting decoded fine and everything looks perfect. Since these SOAP Faults were random and cannot be reproducible often, it was making the client frustrating putting us through difficult situations. Time is ticking without any solution yet.

I thought of the idea of trying to deploy a debug build for one release where i enable flex framework logging. I really thought this would give hints to what is happening internally.

Call this function in your creation complete of your flex application and it would enable debugging all the messaging, rpc logs in the framework.

private function setLogLevel():void { var logTarget:TraceTarget = new TraceTarget(); logTarget.level = LogEventLevel.ALL; logTarget.filters = ["mx.messaging.", "mx.rpc."]; logTarget.includeDate = true; logTarget.includeTime = true; logTarget.includeCategory = true; logTarget.includeLevel = true; Log.addTarget(logTarget); }

This link would give you complete details on what to do next to enable logging in flashlog file. After I deployed the debug build into a custom environment, I have installed debug version of flash player on couple of end users machines, configured the flashlog settings and asked them to run their tests on this custom environment swf. I should say i was really lucky to get helpful hand from the end users who were willing to nail down this problem as there was no pattern for reproducing the problem.

After couple of days, I got this error SOAP Fault hit once by the end user running the debug flex build. Without any delay i got the flashlog.txt on their machine and looked for the traces of the problem. 2/17/2010 09:28:11.935 [INFO] mx.rpc.soap.Operation Creating SOAP Operation for getCacheUpdates 2/17/2010 09:28:11.935 [DEBUG] mx.rpc.soap.Operation Invoking SOAP operation getCacheUpdates 2/17/2010 09:28:11.935 [DEBUG] mx.rpc.soap.SOAPEncoder Encoding SOAP request envelope 2/17/2010 09:28:11.945 [DEBUG] mx.rpc.soap.SOAPEncoder Encoding SOAP request body 2/17/2010 09:28:11.945 [INFO] mx.messaging.Producer 'E62FB659-260E-FDD0-479B-DC8AAF12EE52' producer sending message 'FACB3D46-5745-E0B7-4F3C-DC8B26A9872C' 2/17/2010 09:28:11.945 [DEBUG] mx.messaging.Channel 'direct_http_channel' channel sending message: (mx.messaging.messages::SOAPMessage)#0 body = "<SOAP-ENV:Envelope xmlns:SOAP-ENV="http://schemas.xmlsoap.org/soap/envelope/" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> <SOAP-ENV:Body SOAP-ENV:encodingStyle="http://schemas.xmlsoap.org/soap/encoding/"> <intf:getCacheUpdates xmlns:intf="http://webservices.com.webservices"> <adex xsi:type="xsd:string"><adex> <header> <status>true</status> <operatorToken/> <terminalToken/> </header> <body> <data name="cacheStatus" dataType="object"><![CDATA[{"park":"02/16/2010 06:02:07 PM","parkPass":"01/01/2000 12:00:00 AM","country":"02/16/2010 06:02:07 PM","site":"02/16/2010 06:02:07 PM","loop":"02/16/2010 06:02:07 PM","ticketType":"02/16/2010 06:02:07 PM","discount":"02/16/2010 06:02:07 PM","location":"02/16/2010 06:02:07 PM","equipment":"02/16/2010 06:02:07 PM","campground":"02/17/2010 09:28:11 AM","asset":"01/01/2000 12:00:00 AM","state":"02/16/2010 06:02:07 PM","retail":"02/16/2010 06:02:07 PM"}]]></data> <data name="parkId" dataType="numeric"><![CDATA[511]]></data> <data name="locationId" dataType="numeric"><![CDATA[6558]]></data> </body> </adex></adex> </intf:getCacheUpdates> </SOAP-ENV:Body> </SOAP-ENV:Envelope>" clientId = "DirectHTTPChannel0" contentType = "text/xml; charset=utf-8" destination = "DefaultHTTP" headers = (Object)#1 httpHeaders = (Object)#2 SOAPAction = """" messageId = "FACB3D46-5745-E0B7-4F3C-DC8B26A9872C" method = "POST" recordHeaders = false timestamp = 0 timeToLive = 0 url = "http://xyz/webservices/com/webservices/CachingWebServices.cfc" 2/17/2010 09:28:12.505 [INFO] mx.messaging.Producer 'E62FB659-260E-FDD0-479B-DC8AAF12EE52' producer acknowledge of 'FACB3D46-5745-E0B7-4F3C-DC8B26A9872C'. 2/17/2010 09:28:12.505 [ERROR] mx.messaging.Producer 'E62FB659-260E-FDD0-479B-DC8AAF12EE52' producer fault for 'FACB3D46-5745-E0B7-4F3C-DC8B26A9872C'. Its actually getting generated from Line 710 of mx.messaging.MessageAgent.as

Without much help from flexcoders@yahoogroups or the adobe-flex-forums, I spent a lot of time trying to debug through the flex framework to identify the problem. After going through the framework code i have bottomlined it to the fact that the culprit was FIDDLER. The message is not reaching the flash player properly.

This link on the msdn gives how fiddler works. Since fiddler acts like a proxy, messages go and come via fiddler. Unfortunately Client was running old version of fiddler...In some scenarios, even though fiddler recieves the response message fine HTTP 200 OK, it doesnt throw it back to IE properly (so FP doesnt recieve it fine). One of our QA person, running old version of fiddler encountered the problem and the cause was identified by running the same scenario 20 times, with fiddler on, Flex shows SOAP Fault events vs Without fiddler on, it never shows SOAP Faults.

When the end users removed fiddler things started to work since last one week without any random SOAP Faults in the application. It looks to be problem with older version of fiddler 1.x and not with newer versions as we could not reproduce the problem in newer versions. I hope this saves someone's time. I would encourage running network sniffers instead of HTTP Debuggers for debugging purposes for these reasons

PS: The thoughts shared in this blog post are purely experimental based on what we encountered inhouse and may differ

Random SOAP Faults in the application - Part I (Avoiding HTTP 504 errors)

2010-02-15T21:22:00.025-05:00

This is in continuation to my earlier post where some of our end users running low B/w were experiencing random soap fault events using our application. I dont have a solution outright but i have made attempts to minimize a lot of these errors

This is the description of the fault errors we were encountering -
  fault String = "SOAP Message cannot be decoded. Raw Response : null"
  fault Code = SOAP Decode Error

So where do i start, what do i nail down? I knew, I wanted to first simulate a low bandwidth in my office machine. Talking to our network administrator was of little or no use (no offense!). I kept googling searching for tools that can reduce the network bandwidth only on my machine. Thanks to Vaideki, who found me this link that helped a lot (a link on raymond's blog archive)

I downloaded Shunra Nimbus from this URL that would exactly simulate a very low bandwidth only on my machine in the network. After installing it, all i have to do is select the speed i want (the reading is in kilobits or divide by 8 for kilobytes) and hit the play button. Browse to the URL http://www.speedtest.net to check the upload and download time.

Now that I have the lowest possible band-width set on my machine, I started to run my application with fiddler on, so i could monitor the http traffic going over the network. Due to very low speed, I have found some interesting results. The amount of time taken to load my swf file (which was around 1.5mb) was really high. I turned on RSLs to reduce the size of my actual swf. This bettered my download time but boom, errors... errors.. errors...

I was seeing them as HTTP 504 Errors in the fiddler. During the creationComplete() were were loading the WSDL's (multiple) and one or two will load fine and then rest will give HTTP 504 errors.

The problem was we were loading multiple wsdl's in a sequence. I changed the code to load these multiple wsdl's sequentially by waiting for LoadEvent.LOAD. After the first wsdl is loaded, it fires the LOAD event and then proceed with loading the second wsdl and so on... This completely got rid of the HTTP 504 errors when running very low bandwidth..

FaultEvent.FAULT night-mare when network b/w is low / load is high on the server

2010-01-26T20:23:00.010-05:00

I have a task ahead tomorrow to resolve why the flex code randomly hits FaultEvent.fault event handler when the network bandwidth is low and the load on the coldfusion server is high. Watching the HTTP requests through Fiddler (HTTP Debugger) confirms that the request and response packets go through fine without any soap faults / http errors. So the big question ahead is why does some users encounter fault events randomly instead of hitting the ResultEvent.RESULT when the response looks fine on the network http debugger?

Herez a glimpse of what we have -

- We have a CF coldspring implementation exposing webservice operations.
- Flex app loads the wsdl's on load

As the user logs in, we invoke operations on the webservices -

Our end users are running 0.45 Mbps upload and download speeds... Has anyone encountered something like this before? Whats going wrong is a big question for me.... WS code is just a wrapper on the bottom line HTTPService in as. Guess I get a chance to reproduce the scenario and i get to debug through the flex framework to see which piece is actually getting me into this..

Does size matter?

2009-07-26T19:42:00.002-04:00

Gone are those days where we used to tightly stuff a lot of files & folders - setup's, dvd's copies, music collection and some movies into the 20GB HDDs.... These days everything comes in larger sizes. So is Flash Catalyst Beta 1. I was stunned to see the size of it after installation, (is it still a bug? or for real?) - 5.36GB? Wish the number is wrong... wow...

Wondering why its showing "Adobe Flash Catalyst" instead of "Adobe Flash Catalyst Beta 1", hmm... thats a bug... Icon overriding is also a bug...

Auto doc snippet generation in IDE's...

2009-07-25T16:24:00.001-04:00

What is Auto doc snippet generation? Its a very simple feature that i think should atleast be optionally be provided in every IDE tool to enhance overall project coding experience. Let me describe what this simple feature should do (I am not aware of any tool/plugin which is already available so far)...

Just as you declare a variable, and just as you are done, ';' should auto generate the doc skeleton, create a //TODO:write comment snippet auto-select it and get you ready to just type what it is supposed to do.

Just as you write a function and as you "}" (close) the function, it should auto generate the doc skeleton, create a //TODO:write comment snippet auto-select it and get you ready to just type what it is suppsed to do. As you change your function signature it should introspect existing doc skeleton and alter the argument types, return types etc. without having to manually go and edit it.

Just as you close a loop (ex: for, while etc.), it should auto generate the doc skeleton, create a //TODO:write comment snippet auto-select it and get you ready to just type what the logic is for..

Just as you write an if condition, it should auto generate the doc skeleton, create a //TODO:write comment snippet auto-select it and get you ready to just type what this condition is for..

I've worked on a lot of projects but none of the projects were fully documented. Every developer has his/her own way of writing a piece of code. Even when you have a code monitoring tool, peer code review process, strict code guidelines to follow on every project (which is predominently seen in product based companies than services based companies and a less often in some companies who just want to get things working without having to bother much about spending time in writing code comments), there is always a scope of the code being written is left undocumented. There are some companies who enforce strict documentation on the code written but at the end they see themselves doing just 50-60% of it overall. I would say there are atleast 70% or more of the larger audience who concentrate on putting their brain at work by writing the actual code and get things working and leave their baby code undocumented unintensionally due to other work priorities. Developers may change and a new developer joining in is always targetted to face the tough time with the gaint code. Even the developer who wrote the code 4 months ago doesnt completely remember what's written unless he spends some time by going through the code again.

How does a fully-documented code look like? Many people like to read the lines of code as they glance it and seeing a lot of comments written due to auto-doc snippet generation sometimes might disturb them. I do agree, but we can always have preference options to show/hide doc snippets, fold/unfold doc snippets.. everything is possible. As the application code grows larger and larger with tons of frameworks out there, the code is crying out loud - "If you dont document me now, i'll kill you or someone in the long run"...

Life Cycle Data Services 3 - New !!

2009-07-22T22:04:00.001-04:00

With Adobe's showering a bunch of products into beta (almost at the same time), CF9, CFBuilder, FlashBuilder, FlashCatalyst, Flex4, LCDS3... wow..thats a lot.... Yesterday i had a chance to look at the video tutorials posted on the labs for the new lcds 3 beta features. Adobe's Romania team scores high in delivering these server spice into flex. From my LCDS 2.5+ experience, this was really a new ball game. Here are some of the highlights -

Model driven development brought into Flex with Fiber (language?)... Model View perspective in flash builder (earlier flex builder), create models from the RDS View connected to db from within flash builder, create services for the operations, generating model driven forms from within flash builder to quick test your model
Easy creation of filters from within flash builder
Annotations
localization, validation, data formats
Reliable messaging - this is one of the best features. Having AdvancedChannelSet, AdvancedMessaging This feature ensures that messages sent over the wire do not get dropped out due to network fluctuations (on and off). Before it tries to give you a feedback saying message sending error it does try to resend it for some time (configured) so it gets around the problem of fluctuating networks.
Message Throttling - Video streams for bad network are always hit. With this feature, you have more control on how your data messages can be handled with care to ensure to fit it in your network. You have options to pamper the inbound messages and outbound messages. InBound Messages have policy options - ERROR, IGNORE, NONE and OutBound Messages have policy to ERROR, BUFFER, NONE..

Its amazing to see the new developments...

Converting AS Objects to XML and reading the same XML into AS Objects...

2009-07-22T21:24:00.001-04:00

One of the requirements i had was to write down the Action Script object returned from the Coldfusion webservice call into a flat xml file. This was a temporary solution i had to provide seamless integration between flex app and AIR app..

I had a huge bunch of query object data returned through CF webservice call and i needed to persist the data into an xml file without having to write a whole bunch of code to navigate to each and every property of the object (introspect)...

This simple code here lets you write the crude CF returned object into a nice XML

And this code below converts the XML into an action script object that can be used during your persistence..

Invoking JavaScript from Flex AIR App (in FlexBuilder)

2009-07-22T21:08:00.001-04:00

This is with FlexBuilder3. If you have a lot of javascript source files made on another project of yours (presuming to have used another technology like CF, .NET, Java) and you are intending to use those javascript source files while porting to Flex based AIR Application, then here is a sample to load all your javascripts and invoke the functions from With in the Flex application.

"Note: Adobe AIR currently does not support the ExternalInterface class" is clearly indicated in the API. So whats the alternative to this.

The API link for ExternalInterface.as (Search in AllClasses for ExternalInterface.as) also clearly indicates the following are possible:

From ActionScript, you can do the following on the HTML page:

Call any JavaScript function.
Pass any number of arguments, with any names.
Pass various data types (Boolean, Number, String, and so on).
Receive a return value from the JavaScript function.

So What we are going to do is "Load a dummy html page carrying links to all the javascript files to be invoked from the Flex AIR Application"...

Step 1: Get your js files into a directory

Step 2: Create a dummy html file and include your scripts as here

Step 3: use <mx:HTML /> tag of Adobe AIR to reference it in your app

Step 4: On Creation complete handler of your Adobe AIR application, load the html file which contains your js files, so you can reference it later on to invoke javascript functions...

Step 5: Use the reference as below and invoke a javascript function from within flex. You can pass arguments to the js function and retrieve return values as well.

Reading .sol (SharedObjects) created by Browser Flex App in a new AIR Application - Seamless integration? Web & Desktop?

2009-06-30T14:29:00.005-04:00

One of the requirements was to provide seamless integration between the browser flex application serving the client needs when the network is on vs an AIR Application as an offline system when the network turns off. But the requirement isnt straight as you think. What it says is, When network is connected the end user will be using flex browser application by navigating to the URL which downloads a lot of data on to the client machine from the server which periodically gets updated based on the data-change on the server. This is stored as client side SharedObjects through the browser ran flex app. Now when the network turns off, the end user would launch the offline system that should read through earlier created sharedobjects while network was on and work through it. AIR App should also be able to write a shared object containing data required to be parsed through the browser flex app when launched (when network is back)...

This kind of sounds so wierd to me. After hearing the requirement, i was like WHAT?? But then i started to see through different ways of achieving it. With Browser Sandbox Security, browser flex app always can get hold of SO (Shared objects) created through SharedObject.getLocal(). Even if we were to understand and agree to one common location that AIR Could understandably read, keeping the location parameter excluded for a whole lot of argument... The Important thing is to consider serialize and de-serialize a FileStream read ByteArray into AS Objects that can be natively used in the code. Well, more to that is the SharedObjects written through the browser flex app could also carry complex data structures which could carry more information rather than a simple data->name/value

While doing the research, i went through a lot of google search - .minerva was exactly doing what i was looking for but its not open to go through the bits of it and tweak to get it working !!

Link to AMF 3 Specification document
Format of a Shared Object
Open Source Flash
Storing Custom AMF Objects for AIR App Storage
Reading ByteArrays either from Web or AIR app (I couldnt connect through it well)
Reading and Writing a ByteArray - Flex Docs (on zip file formats) & also here
AIR App Named .minerva (this is exactly what i was intending to do, but after installing .minerva i didnt open up some of my other .sol files even though they were good)
Link to AMF-PHP Open Source porting link
Persistence Storage with .SOL (shared objects), a just like that content.
SharedObject API doc
AMF Serializer/deserializer for java/flex - Google Code
Granite DS (what they claim is alternative to LCDS)

Here is a sample code demoing the problem:

Browser Flex App creates a shared object (typed ClazzTest.as containing two public variables value1 and value2 of type string)

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Script> <![CDATA[ import com.arun.ClazzTest; import flash.net.registerClassAlias; private function generateWebFlexSharedObjects():void { var clazzTest:ClazzTest = new ClazzTest(); clazzTest.value1 = 'Value1'; clazzTest.value2 = 'Value2'; registerClassAlias('com.arun.ClazzTest',ClazzTest); var so:SharedObject = SharedObject.getLocal("cachename"); var b:ByteArray = new ByteArray(); b.objectEncoding = ObjectEncoding.AMF3; b.writeObject(clazzTest); so.data.clazzTest = clazzTest; so.flush(); } ]]> </mx:Script> <mx:Button label="Generate SO" click="generateWebFlexSharedObjects()"/> </mx:Application>

AIR App code that tries to read the shared object created by the browser flex app above.. (for now assume that the object location is hardcoded)

<?xml version="1.0" encoding="utf-8"?> <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="500" height="422"> <mx:Script> <![CDATA[ import flash.utils.getQualifiedClassName; import flash.utils.describeType; import mx.controls.Alert; import mx.utils.ObjectUtil; private function readBrowserFlexCache():void { var path:String = "C:\\Documents and Settings\\amadas\\Application Data\\Macromedia\\Flash Player\\#SharedObjects\\5RP3MMUQ\\#localhost\\BrowserFlexSharedObjects\\bin-debug\\BrowserFlexSharedObjects.swf\\cachename.sol"; var solFile:File = new File(path); txtOutput.htmlText = 'File Exists ? ' + solFile.exists + '\n'; var fileStream:FileStream = new FileStream(); fileStream.openAsync(solFile, FileMode.READ); txtOutput.htmlText += 'File Bytes Available : ' + fileStream.bytesAvailable + '\n'; var bytes:ByteArray = new ByteArray(); fileStream.readBytes(bytes, 0, fileStream.bytesAvailable); txtOutput.htmlText += 'Bytes Read = ' + bytes.bytesAvailable; bytes.objectEncoding = ObjectEncoding.AMF3; //trace(describeType(bytes.readObject()).toXMLString()); //var objInfo:Object = ObjectUtil.getClassInfo(bytes); var obj:Object = bytes.readObject(); //trace(getQualifiedClassName(obj)); if(obj != null) { Alert.show('Object retrieved !! '); } fileStream.close(); } ]]> </mx:Script> <mx:Button label="Read SO" click="readBrowserFlexCache()" x="23" y="30" width="146"/> <mx:TextArea x="23" y="80" width="452" height="259" id="txtOutput"/> </mx:WindowedApplication>

The above AIR App code doesnt work. Its just the way i wish it would. But i believe we need to go through the entire signature of SharedObject and read the bytestream in the way SharedObject is defined as an entirety like header, body etc. I just looked at the Serializer and Deserializer in AMF-PHP and that just gives me some idea. Trying to do this entirely might take a long time than to get it just working quickly... I am still on a hunt !! ------------------------------------------ If someone is looking out for a quick solution where in you wont have enough time to write an AMF object parser, you can follow my quick solution. We lowered the IE settings to allow scripting, there by i invoke a javascript function which writes the data to the flat xml file in the client machine from the flex application through ActiveXObject(), and these flat .xml files are read by the AIR app later on. Atleast this seems to work fine for me until i converge on a right solution !!

Flashplayer ScriptTimeOutError, A Script has executed longer than 15 seconds

2009-06-11T18:44:00.005-04:00

While doing Load testing of the flex application we've developed, we hit upon this scenario where our test load data was so huge that optimizing DB queries, webservice logic, client logic took us more than 60 seconds which is the maximum timeout limit Flashplayer can be increased to.

To find a solution to the problem, I have googled around and found some interesting articles.

When the load data is so huge, and you are tired of optimizing code just to fit in the 60 seconds time intervel before the timeout error is thrown by flash player... I tried to workaround it with a solution that will run for enough time without freezing / breaking your load data...

Here is the sample Flex code that would throw the Flashplayer script timeout error.

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Script> <![CDATA[ private var i:Number = 0; private function startInfinite():void { while(++i > 0) { //txtArea.htmlText = i + '\n'; } } ]]> </mx:Script> <mx:VBox> <mx:Button label="hang me" click="startInfinite()" /> <mx:TextArea id="txtArea" /> </mx:VBox> </mx:Application>

Error message -

My Solution to this problem is to workaround by giving flashplayer a breathing time. This is however not a full-fledged code but would completely give you an idea on what i am trying to achieve. The below code would run a timer for say 100 milli-seconds and execute your piece of code which you think is consuming more time... say if you are iterating over 10,000 items with a lot of data or something similar... This solution would run a timer and call it over and over until your job execution is done, when you delete the listener and proceed further with your logic. This way flashplayer break due to heavy load is taken care of. Flash player would get a breathing time to perform any UI operations if any meanwhile. In my actual code at work, i display a popup modal window before the timeconsuming operation begins that displays - "Please wait, while we are processing the data", and i remove the modal dialog once the entire process is done. This way end user feels that he has a feedback from the app and even if it were to take a bit more time, this solution will scale for you even if your load were to increase in more numbers...

See the Solution here (Iterating based on a timer until execution is complete)...

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
 layout="absolute">
 <mx:Script>
 <![CDATA[
 private var i:Number=0;
 private var mytimer:Timer=new Timer(100);
 private var isCodeRunning:Boolean=true;
 private var testIterateCount:Number = 0;

private function timeBasedLoading():void
   {
    isCodeRunning=false;
    mytimer.addEventListener(TimerEvent.TIMER, startInfinite, false, 0, true);
    mytimer.start();
   }

private function startInfinite(event:TimerEvent):void
   {
    try
    {
     if (!isCodeRunning)
     {
      isCodeRunning=true;

while (++i > 0)
      {
       //txtArea.htmlText = i + '\n';
      }
     }
    }
    catch (e:ScriptTimeoutError)
    {
     isCodeRunning=false;

//trace(e);    
     // ScriptTimeoutError: Error #1502: A script has executed for longer 
     // than 15 seconds
     testIterateCount++;

//Arun:Break your logic after 5 iterations,
     //just a test...

if(testIterateCount==5) 
 {
 mytimer.stop();
 mytimer.removeEventListener(TimerEvent.TIMER, startInfinite); 
 }
 txtArea.htmlText+=i + '\n';
 }
 }
 ]]>
 </mx:Script>

<mx:VBox>
 <mx:Button label="hang me"
 click="timeBasedLoading()"/>
 <mx:TextArea id="txtArea"/>
 </mx:VBox>
</mx:Application>

First Look at Flash Builder 4 (Beta1)

2009-06-06T22:18:00.002-04:00

I wanted to list down my first feel of launch of FlashBuilder4-Beta1 and how it made different from FlexBuilder3. This post is not intended to list down all the differences between FlexBuilder4Beta1 and FlashBuilder3 but however, it is only intended to get the FIRST FEEL DIFFERENCE of your regular FlexBuilder3 and FlashBuilder4 Beta1

Name Change of FlexBuilder perspective to Flash - (Flash vs Flex Development, Flash Debug vs Flex Debugger, Flex Profiling vs Flash Profile)

New Start Page

First thing, you do is to right click on the Package Explorer and create a new project. As you rightclick you see new entry "Execute FlexUnit Tests". FlexUnit integrated into flex builder... New->Test Case Class, New-> Suite Class are also new entries.

New Panels - Data/Services, Network Monitor...

New Data-Connect wizards...

Blaze DS (integrated option)

Fx icon changed to f with new Flex 4 libraries

New Enhanced Package Explorer, Shows package view, Flex4 lib....

AS Doc as soon as you try to open up type on the tag name through the code hinting dialog. ASDoc panel which shows docs. Its one of the best features that has been missing for a long time (ofcourse driven from java perspective - eclipse)

<mx:script> changed to <fx:script>

Auto-Generation of event handlers from within flex builder...auto-generated click event handler for the button..

AsDoc comment....

and a lot more....

Installing FlashBuilder4 Beta1 (Earlier FlexBuilder)

2009-06-06T20:10:00.002-04:00

Step by Step - Installing Flash Builder Beta 1 (Earlier Flex Builder)

Flex SDK 4, Flash Builder 4, Flash Catalyst (earlier Thermo) - Beta1 Launch

2009-06-02T22:39:00.002-04:00

Well, old news first - Flex SDK 4, Flash Builder 4 (Earlier Flex Builder 3) and Flash Catalyst (Earlier called Thermo) are now available on labs.adobe.com for BETA1. I've atleast waited for this release since long. With Flash Catalyst, Adobe brings a lot to the community in terms of new roles - Flex Designer, Sr. Flex Designer, Flex Designer - Architect etc. - new opportunities adding new jobs to the market sunk in recession and above all, it takes Flex/Flash to a whole new dimension enchanting that no two applications in the market should look alike with the default halo theme... Explore the richness of each application, design appealing UIs that make your application uniquely shiny, and extra-ordinary... A lot is already said about already about whats new and all... some of them i came across are - sujit, tim buntel , matt chotin, whats new flex 4 - dev specs with examples, sean moore etc.

Slide Move Effects to your Flex Components

2009-04-13T14:58:00.002-04:00

I was just playing around with a simple effect in flex that gives you a slider feeling... how you slide your closet? This is pretty simple and many starters would already know. I was just playing with it to see how i can create dynamic elements and have those dynamically created elements play this effect.

Simple Plain code

      private function onClickNext():void
      {
       var xByValue:Number = -455;
       loopNavigator.xBy = xByValue; 
       
       loopNavigator.play([panel1, panel2, panel3, panel4]);
      }
      
      private function onClickPrevious():void
      {
       var xByValue:Number = 455;
       loopNavigator.xBy = xByValue; 
       
       loopNavigator.play([panel1, panel2, panel3, panel4]);
      }

This is how the output would look like (crude form)

Dynamically added Elements will now animate with this code (crude form)

   import mx.controls.Text;
   import mx.containers.Panel;
   import mx.effects.easing.Bounce;
   
   public var tmpPanelElements:Array = new Array();
   
   private function onCreationComplete():void
   {
    var tempArray:Array = getTempArray();
    for(var i:int = 0; i < tempArray.length; i++)
    {
     var panel:Panel = new Panel();
     panel.width = 400;
     panel.height = 400;
     panel.id = 'panel' + i;
     
     var text:Text = new Text();
     text.text = 'text' + i;     
     panel.addChild(text);     

     panelContainer.addChild(panel);
     tmpPanelElements.push(panel); 
    }
   }
   
   private function getTempArray():Array
   {
    var tempArray:Array = ['one', 'two', 'three', 'four'];
    
    return tempArray;
   }
   
      private function onClickNext():void
      {
       var xByValue:Number = -455;
       loopNavigator.xBy = xByValue; 
       
       loopNavigator.play(tmpPanelElements);
      }
      
      private function onClickPrevious():void
      {
       var xByValue:Number = 455;
       loopNavigator.xBy = xByValue; 
       
       loopNavigator.play(tmpPanelElements);
      }

Show No Leaf, Parent Nodes in grouped Flex Advanced data grid

2009-03-16T16:38:00.002-04:00

I hit upon this scenario which is unique to one of my project. I would like to describe it in my own words taking a simple example. This example is targetted at showing the empty PARENT nodes (as empty folders) of the advanced data grid when the LEAF node is not present.

There is a reservation system where the reservation is made for 4 nights. Each night can contain an optional vehicle (can contain one or more vehicles). Lets take a scenario where the first three nights of the reservation object having vehicles, but the fourth reservation does not have vehicles. Now you are asked to provide a dynamic-UI in the flex Advanced data grid to show the fourth night (a parent node) of a grouped data whose child does not exist. So when they want to add a vehicle later they can select the button to add vehicles for the fourth night.

I am not sure if i had made it clear when i described above (here i go with an example).. I have "1" and "2" grouped as they are grouped by the property "id" and that internally contains children. So they look fine. Look at the code below:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="onCreationComplete()" width="241" height="214">
 <mx:Script>
 <![CDATA[
 import mx.collections.ArrayCollection;
 
 [Bindable] private var flatData:ArrayCollection = new ArrayCollection();
 
 private function onCreationComplete():void
 {
 var obj1:Object = new Object();
 obj1.id = 1;
 obj1.name = 'One';
 flatData.addItem(obj1);
 
 var obj11:Object = new Object();
 obj11.id = 1;
 obj11.name = 'Another One';
 flatData.addItem(obj11);
 
 var obj2:Object = new Object();
 obj2.id = 2;
 obj2.name = 'Two';
 flatData.addItem(obj2); 
 }
 
 ]]>
 </mx:Script>
 <mx:AdvancedDataGrid x="24" y="15" id="adg1" designViewDataType="tree" sortExpertMode="true" width="187">
 <mx:dataProvider>
 <mx:GroupingCollection id="gc" source="{flatData}">
 <mx:grouping>
 <mx:Grouping>
 <mx:GroupingField name="id"/>
 </mx:Grouping>
 </mx:grouping>
 </mx:GroupingCollection>
 </mx:dataProvider>
 <mx:columns>
 <mx:AdvancedDataGridColumn headerText="ID" dataField="id"/>
 <mx:AdvancedDataGridColumn headerText="Name" dataField="name"/>
 </mx:columns>
 </mx:AdvancedDataGrid>
 <mx:Button x="24" y="179" label="Add to Selected Row of ADG"/>
 
</mx:Application>

Here is how the current code output looks like... Its traditionally grouped by id as long as they have their children (name) fine with them.

Now all i want is - Have a parent with id = "3" shown as a folder on the grouped collection, so i now have an option to select the id="3" empty folder and add something to it (assuming there is no name already to it and user wants to add names dynamically by clicking on the button by selecting the row with id="3")

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="onCreationComplete()" width="325" height="218">
 <mx:Script>
 import mx.collections.IHierarchicalCollectionView;
 import mx.collections.ArrayCollection;
 
 [Bindable] private var flatData:ArrayCollection = new ArrayCollection();
 
 private function onCreationComplete():void
 {
 var obj1:Object = new Object();
 obj1.id = 1;
 obj1.name = 'One';
 flatData.addItem(obj1);
 
 var obj11:Object = new Object();
 obj11.id = 1;
 obj11.name = 'Another One';
 flatData.addItem(obj11);
 
 var obj2:Object = new Object();
 obj2.id = 2;
 obj2.name = 'Two';
 flatData.addItem(obj2); 
 }

private function addDummyParentNode(dummyValue:Number = 5):void
   {
       var dp:IHierarchicalCollectionView = groupedADG.dataProvider as IHierarchicalCollectionView;    
    var groupedData:ArrayCollection = (dp.source as GroupingCollection).source as ArrayCollection;

for(var j:int = 0; j < groupedData.length; j++) 
 {
 var item:Object = groupedData[j] as Object;
 if(dummyValue == Number(item.id)) 
 {
 break;
 } 
 else
 {
 var dummyParentNode:Object = {"id":3, children:[]};
 dp.addChild(null, dummyParentNode);
 
 groupedADG.dataProvider = dp; 
 groupedADG.validateNow(); 
 groupedADG.dataProvider.refresh();
 
 break;
 } 
 }
 }
 </mx:Script>
 <mx:AdvancedDataGrid id="groupedADG" x="10" y="15" designViewDataType="tree" sortExpertMode="true" width="305">
 <mx:dataProvider>
 <mx:GroupingCollection id="gc" source="{flatData}">
 <mx:grouping>
 <mx:Grouping>
 <mx:GroupingField name="id"/>
 </mx:Grouping>
 </mx:grouping>
 </mx:GroupingCollection>
 </mx:dataProvider>
 <mx:columns>
 <mx:AdvancedDataGridColumn headerText="ID" dataField="id"/>
 <mx:AdvancedDataGridColumn headerText="Name" dataField="name"/>
 </mx:columns>
 </mx:AdvancedDataGrid>
 <mx:Button x="10" y="179" label="Add a grouped parent id=3 folder with no child" width="305" click="addDummyParentNode()"/>
 
</mx:Application>

In the above, i have just tried to check if the data already has a item or not.. I am just adding this for someone to know that it could be done...

Here is how the output will look like:

Refreshing the Binded dataprovider based on Custom Event in the Model

2009-03-16T16:14:00.002-04:00

Say you have an array of (Object) Sites shown in the data grid with labels Site Name. Also you have a column to delete the site as an item renderer in your sites list. There are easier ways to handle this scenario.

onItemDelete(); => removeTheSiteFromTheDataProvider(); => refreshTheDataProvider();

Imagine if you were to bind the array as an instance of an object. Say applicationData.sites is a getter function that is bindable and returns a custom array of sites handled through the instance applicationData object. Also, you dont have a simpler deletion logic now. Now on deleting the site from the data grid, i would want you to process a few operations, based on the result of the same, either proceed to refresh or not. To write this whole logic outside the view in the applicationData (class/Model), you may have to do the following:

Here is the MX-Script part of it...

import mx.collections.ArrayCollection;
 
 private var dp:ArrayCollection = new ArrayCollection();
 
 private function onCreationComplete():void
 {
 //Contains a large data of site objects
 var site1:Object = new Object();
 site1.id = 100;
 site1.name = 'Land';
 site1.area = 300;
 site1.height = 30;
 site1.width = 10;
 site1.owner = 'Arun';
 dp.addItem(site1);
 
 //contains a large data of site object
 var site2:Object = new Object();
 site2.id = 101;
 site2.name = 'Air';
 site2.area = 400;
 site2.height = 40;
 site2.width = 10;
 site2.owner = 'Kiran';
 dp.addItem(site2);
 
 dispatchEvent(new Event('dataChange')); 
 }
 
 [Bindable(event="dataChange")]
 public function get simpleSites():ArrayCollection
 {
 var simpleSitesCollection:ArrayCollection = new ArrayCollection();
 for(var i:int = 0; i < dp.length; i++)
 {
 //Just to mimic a slim object
 var newSlimObject:Object = new Object();
 newSlimObject.id = dp[i].id;
 newSlimObject.name = dp[i].name;
 
 simpleSitesCollection.addItem(newSlimObject);
 }
 return simpleSitesCollection;
 }
 
 // Called when deletion is invoked... Assume you are writing this as a part of ApplicationData and not in the same view
 // As a simpler case, you can always remove the item from dp and say simpleSitesDG.dataprovider.refresh() assuming the dataprovider is directly set 
 // But this is a dynamic event
 public function deleteSite(obj:Object = null):void
 {
 if(obj != null)
 {
 for(var i:int = 0; i < dp.length; i++)
 {
 if(dp[i] != null && dp[i].id == obj.id)
 {
 dp.removeItemAt(i);
 dispatchEvent(new Event('dataChange'));
 break;
 }
 }
 }
 }

Here is how the output will look like, when you delete the item, it throws up the event. This kind of dispatch is typically done in framework code and recommended practice.

Advanced Data Grid, Grouping based on Id but displaying Name

2009-03-16T13:44:00.002-04:00

I had a small requirement to work up on the advanced data grid as below:

a) There are a few vehicles (objects of type Vehicle)
b) All these vehicles are to be grouped by their ID (there is a property by name id in the vehicle obj)
c) But the grouping in the flex advanced data grid should be displayed with the vehicle name and not the vehicle id

This is the simple example of using the "groupingFunction" on the grouping Field of the flex advanced data grid.

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="onCreationComplete()" width="233" height="186"> <mx:Script> <![CDATA[ import mx.collections.ArrayCollection; [Bindable] private var flatData:ArrayCollection = new ArrayCollection(); private function onCreationComplete():void { var obj1:Object = new Object(); obj1.id = 1; obj1.name = 'One'; flatData.addItem(obj1); var obj11:Object = new Object(); obj11.id = 1; obj11.name = 'Another One'; flatData.addItem(obj11); var obj2:Object = new Object(); obj2.id = 2; obj2.name = 'Two'; flatData.addItem(obj2); var obj22:Object = new Object(); obj22.id = 2; obj22.name = 'Another Two'; flatData.addItem(obj22); } private function getName(item:Object, field:GroupingField):String { var result:String = ''; //If you have loaded objects of multiple types you can check like this at runtime and have custom values sent out if(item is Object) { result = item.name; //item[field.name].toString().substr(0, 1); } else { result = ''; } return result; } ]]> </mx:Script> <mx:AdvancedDataGrid x="24" y="10" id="adg1" designViewDataType="tree" sortExpertMode="true" width="187"> <mx:dataProvider> <mx:GroupingCollection id="gc" source="{flatData}"> <mx:grouping> <mx:Grouping> <mx:GroupingField name="id" groupingFunction="getName"/> </mx:Grouping> </mx:grouping> </mx:GroupingCollection> </mx:dataProvider> <mx:columns> <mx:AdvancedDataGridColumn headerText="Name" dataField="name"/> </mx:columns> </mx:AdvancedDataGrid> </mx:Application>
Here is how it looks like as an output: (grouped by ID but shown as names)

Back to Basics - Event Propagation by Simple Example

2009-03-16T10:17:00.001-04:00

Its very common to ask this question in interviews related to flex but some on the application development background dont even bother to know these minor things. It doesnt deny them from getting onboard as well. But this has been the most favorite topic of Ananth (my Ex-director @ Flex Team). Okay, here is the glimpse of it in few words:

Capture phase: Flash Player checks every node from the root of the tree to the direct parent of the target node to see whether it has a listener registered to
handle the event.
Target phase: The event is dispatched to the target node.
Bubbling phase: Flash Player carries out a check in a reverse manner with respect to that of the capturing phase (starting from the direct parent of the target node to the root of the tree).

Here is a lay-man's sample:

There is obviously a lot more to it, but this is only a basic...

A pick of para from Flex Solutions..

2009-03-16T10:05:00.001-04:00

I just started to read the book "Flex solutions - Essential Techniques for Flex 2 and Flex 3" as i wantd to quickly browse through and the catchy first para stunned me making me comment on this to the author - Marco Casario (http://casario.blogs.com). Here is the snippet directly from the book.

"Since I first opened Flex Builder and learned the basics of Flex, I’ve fallen in love with it: a framework to create Flash applications easily. Thank God. The first version of Flex suffered from Macromedia’s poor market positioning of the technology (at that time, it was Macromedia, not Adobe). Flex 1 required an expensive server module to compile applications. How could I convince my boss to buy a Flex server just to make my life easier for Flash application development?"

I had been part of the Macromedia and Adobe. I could see how things were when it was macromedia and how things turned on when it became adobe. Flex 2 was infact from Macromedia and not Adobe. The inception of flex had a lot of questions when it began to start on, but after the AS3 plunge and the version 2 seperation it had made its own way clearly. If the version 2 werent from macromedia a hit version, it would have been a life of JRun as adobe is clear on thier investments.

Flex - Internal Build Error has occured. Click for more information

2009-01-09T15:42:00.001-05:00

If you happen to encounter this error message - "An Internal Build Error has occured. Click here for more information" in your flex builder, the solution you can think of trying are the following:

a) Your code might not have a case for the switch brackets.

    switch (value)    
    {       
        // No case statements are written below but it has just the switch skeleton 

        //   case '1': 
        //      break; 
        //   default: 
        //      break; 
    }

b) Try to locate the problem. The problem is thrown by the Flex Compiler. Click on your flex builder menu option Help->About Eclipse SDK-> click on the button "Configuration Details"-> opens up a configuration dialog -> click on the "Error Log" button. You will see the error log on what is happening (why the flex compiler is failing, this is mostly because of Null pointer exception in the compiler code)

c) Change your SDK version. Window -> Preferences -> Flex -> Installed SDKs -> {try a newer version of sdk download it from opensource.adobe.com/flex (look for sdk). Sometimes there could be a problem with a specific version of the sdk and it might be fixed in later versions. So Trying out later versions would help.

d) Another alternate could be to switch the workspace (though not recommended). This could be the last resort for your options. Some times your workspace configuration files might get messed up and you might not have much time to even think further (instead of getting stuck as your compiler wont work). Change your workspace to a brand new one and create your project from scratch (SVN?)

e) Have ANT Script for your project which you can run through command line. So you will atleast know which package has a problem. So you can comment out that package / file for time being to resolve the issue to quickly and get going fast.

Looking for Flex 3.02 ?

2009-01-09T09:33:00.001-05:00

If you are looking for Flex 3.02 (Flex builder dot release) either standalone version or Eclipse plugin installer version go here - http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex3email

It got me sometime to figure out where Flex Builder Eclipse 3.02 plugin installer is.... Hope you dont find much time figuring it out.

Null Pointer Error in HaloBorder.as in Flex 3 SDK

2009-01-08T13:54:00.001-05:00

I happened to encounter a null pointer exception in the flex 3.0 sdk in the mx.skins.halo.HaloBorder.as, when i try to refresh multiple dataproviders on the screen (one for shoppingcart and one for siteslist through same time notifications using pure mvc framework)

Its not good for writing a code like this, without checking if parent is null or not. [Click on the window to see the exact error]

Flex 3 - KeyBoard Events, Flash Player 10 vs Flash Player 9

2008-11-07T15:11:00.000-05:00

In trying to work on one of the requirements which requires us to handle Shortcut keys (example: Cntrl+1, Cntrl+2 etc), Using Flex Keyboard events, I happened to hit upon this same on the live docs. Flex 3 Docs Sample

Initially i thought It broken in Flash player 10 and is working fine in flash player 9. Place your cursor in the Text area below and press (cntrl+1) and see what you get. (Keycode for Cntrl key = 17). This swf is generated using flash player 10

See this SWF (generated using flash player 9) which works almost the same way. Place your cursor in the Text area below and press (cntrl+1) and see what you get. If you press the keys 'cntrl' and '1' fast and release them fast, only cntrl event is fired and cntrl+1 event is not fired. Keep doing it fast, and at one point you will see both the keys start to respond, from here on everything keeps to be working. Open the url in a new browser window to retry this scenario (looks like key-up event is not getting fired initially when we press and release the keys faster).

And here the the same code that made it happen..

        private function initApp():void {
            application.addEventListener(KeyboardEvent.KEY_UP, keyHandler);
            my_vbox.addEventListener(KeyboardEvent.KEY_UP, keyHandler);
            my_textinput.addEventListener(KeyboardEvent.KEY_UP, keyHandler);

            // Set the focus somewhere inside the application.
            my_textinput.setFocus();
        }

        private function keyHandler(event:KeyboardEvent):void {
            ta1.text += event.target + "(" + event.currentTarget + "): " + 
                event.keyCode + "/" + event.charCode + "\n";
        }

Getter / Setter Generator in Adobe Flex

2008-11-03T09:08:00.001-05:00

While working on my current project using the Pure MVC framework, which involes writing a lot of VO (value objects) that are a set of getter, setter accessor methods, using Flex Builder 3 is really tough. Thanks to these guys who created the Eclipse Monkey Plugin - Wow amazing. This saves a lot of time atleast in writing actual code instead of just getters/setters. Just to give you a headsup, this feature was implemented as a part of Flex Builder 4 feature by one of the developers at US, while i was at adobe bangalore about 6 months ago. I am sure that will help a lot of developers in not reiterating a routine boring work of hand-coding it.

Verify if Object contains a proprety defined or not

2008-11-02T14:09:00.000-05:00

In Adobe flex, you want to check if a property is defined inside an object, its pretty easy.

  /**
  * Test if the object obj contains a property named val
  *
  **/
  private function propertyTest(obj:Object):void
  {
     if(obj.hasOwnProperty("val"))
     {
       Alert.show('Has property named val defined and its value = ' + obj.val);
     }
     else
     {
       Alert.show('Property val is not defined in the object - obj');
     }
  }
  
  /**
  * Test method
  *
  **/
  private var testProperty():void
  {
     var val:String = "Test String";
     var obj:Object = new Object();
     obj.val = val;
 
     //test method call
     propertyTest(obj);
  }

Icon on Grouped Column of Advanced Data Grid

2008-10-23T11:10:00.001-04:00

In Flex, On a GroupingCollection as a DataProvider to my AdvancedDataGrid, i wanted to have an icon (itemRenderer) only on the leaf nodes of my AdvancedDataGrid (grouped data). This is how my initial code was: -> Script block of my ActionScript->

   import mx.collections.ArrayCollection;
   
   [Bindable]
   private var collection:ArrayCollection = new ArrayCollection([{group:'group1', id:'1', name:'name1'}, 
                    {group:'group1', id:'2', name:'name2'}, 
                    {group:'group2', id:'3', name:'name3'}]);
   private function setDP():void
   {
    gc.refresh();
    adg.expandAll();
   }

And my surprising output was -
I then removed inline item renderer and used external renderer (thanks to Srinivas Annam).



 
  private var obj:Object;
  
  override public function set data(value:Object):void
  {
   super.data=value;
   obj=value;
   apply(value);
  }
  
  private function apply(data:Object):void
  {
   if(data == null)
    return;
   
   img.source="";
   if(data.name)
   {
    img.source="assets/test.png";
   }
  }

And I added the itemrederer for the column as :

And I got the output i wanted:

labelFunction on GroupingCollection of Advanced Data Grid

2008-10-23T11:08:00.001-04:00

Probably this is little simpler, or there may be more simpler solution. I was trying to hit upon an requirement which looks like this -

A Class Book which contains information about bookId, bookName
A Class BookShelf which contains information about bookshelfId and book (object of Book)
There is an array of BookShelf objects that form dataprovider for Advanced data grid where i want to show books grouped by BookShelfId and show the Book Information in the Advanced Data Grid.

package
{
 public class Book
 {
  private var _id:int = 0;
  private var _name:String = '';
  
  public function Book()
  {   
  }

  public function set id(val:int):void
  {
   this._id = val;
  }

  public function get id():int
  {
   return this._id;
  }

  public function set name(val:String):void
  {
   this._name = val;
  }

  public function get name():String
  {
   return this._name;
  }

 }
}

package
{
 public class BookShelf
 {
  private var _id:int = 0;
  private var _book:Book = new Book();
  
  public function BookShelf()
  {
  }

  public function get id():int
  {
   return _id;
  }

  public function set id(val:int):void 
  {
   _id = val;
  }

  public function get book():Book
  {
   return _book;
  }

  public function set book(val:Book):void 
  {
   _book = val;
  }
 }
}

   import mx.collections.ArrayCollection;
   
   [Bindable]
   private var dataCollection:ArrayCollection = new ArrayCollection();
   
   private function setDP():void
   {
    var book1:Book = new Book();
    book1.id = 1;
    book1.name = 'Book Name 1';
        
    var book2:Book = new Book();
    book2.id = 2;
    book2.name = 'Book Name 2';

    var book3:Book = new Book();
    book3.id = 3;
    book3.name = 'Book Name 3';

    
    var bookshelf1:BookShelf = new BookShelf();
    bookshelf1.id = 100;
    bookshelf1.book = book1;
    
    var bookshelf2:BookShelf = new BookShelf();
    bookshelf2.id = 100;
    bookshelf2.book = book2;

    var bookshelf3:BookShelf = new BookShelf();
    bookshelf3.id = 101;
    bookshelf3.book = book3;
    
    dataCollection.addItem(bookshelf1);
    dataCollection.addItem(bookshelf2);
    dataCollection.addItem(bookshelf3);
    
   }

Change the BookShelf.as to contain the following getter function that retrieves the property of internal object..


  private var _bookName:String = '';

  public function get bookName():String
  {
   return this._book.name;
  }

Change your MXML to use the new property that lies outside now! (Not an efficient solution but that works for time being)

Number validation and Reset in Flex

2008-09-04T16:56:00.000-04:00

Right Click on the SWF to view source

Unregister your Mediators after popupmanager.remove();

2008-08-06T20:53:00.000-04:00

I had a strange behavior today with my pure MVC where i had spent couple of hours analyzing what was going wrong. I had a grouping collection for my Advanced datagrid that groups based on the customer name, where the list of passes vary depending on the pass types. The best way to do this type of scenario is to group the search results based on the customer name and show the varied number of entries in the customer name based on the pass types available. All the while i had been refreshing my grouping collection source but i completely missed that the creation complete checks to see if i already have the mediator registered but the reference to the window created by the popup manager is generated every time newly but the mediator will be pointing (registered and listening) to a old pop up thats still not garbage collected. Always ensure to unregister your mediators after the use !! that would solve a lot of problems.

Flex Builder 3 and Eclipse 3.4 (J2EE pack) - Not there yet !!

2008-07-18T23:05:00.001-04:00

I loved the eclipse.org showing me today Eclipse 3.4 (Ganymede). Wow, its time for me to update my good old europa eclipse 3.3.2 to a new fantastic Eclipse 3.4 Pretty fast, i have 600kbps line at home so the download was pretty fast. Yup thats my eclipse 3.4 up and running. Installing Flex builder 3 professional plugin ofcourse gives me a warning during my installation that it cannot find eclipse 3.3 or eclipse 3.2 (the supported versions). I really liked the eclipse 3.4 that works superb with the SVN subclipse plugin. I just loved it. I installed flex builder ahead and imported my flex project and find an error opening my .mxml file (right at the first step). Hmm then i remembered, the configuration files present in the eclipse/configuration directory and flex builder 3 / eclipse directory that claim the support for the product. You know what, we need rework on the new eclipse. Sometimes, i wish the related products should be aligned with their releases and corresponding supports but well, blame no one.. its the world that moves faster than what we do. I love both adobe and eclipse for their lovely tools at the end.

Pure MVC and Flex

2008-07-18T22:45:00.000-04:00

After the cairngorm made by the adobe consulting, i hit upon this framework Pure MVC that seperates Model, View, Controller and also seperates the view with the observer design pattern. To make it simple look at it as this: a) Model => b) View => c) Controller => ApplicationFacade -> controls the commands to be added controllers are similar to commands view talks to the Mediators (that are registered) and ensure to unregister them after you use them. You would send notifications to the mediators and the mediators catch the notifications, call the proxies registered with the applicationfacade during the app start up. Proxies can be used to make webservice calls or any other model calls. Proxies return back to the mediator that talks to the view again. It really looks very logical but i feel its a bit overheard in terms of development. Too many listeners, too many things listening to the notifications... too much of a granularity in terms of programming... hard to find guys with adequete knowledge to get on with it. But this is the trade off between developing a huge enterprise application with ease of development or best practises. If not written properly PureMVC can turn out to be a nightmare to figure out what is happening in the entire application. If the registered mediators are not removed out after the use, the memory consumption can go bizzare. I will come up with a sample example after a while and show you how it works after a later time.

Adobe Cricket AIR Application - My work goes live

2008-06-15T00:40:00.001-04:00

Happy to share that some of my regular work at office for a short span of time went live ... here is my story of the same.. About the app

mx:ColorPicker set color, convert uint to string of selectedColor

2008-04-17T11:34:00.001-04:00

If you are working with <mx:ColorPicker /> in flex and assuming the following are your requirements:

a) You want to set the colorpicker to some color

b) working with selectedIndex, selectedColor

c) you want to store the selectedColor of the color picker as a String in your database and convert the stored String value to set it back to colorpicker so you can set the color to the color picker (<mx:colorpicker>), here you go:

Assuming you have two color pickers and you want to set the color picker value of 'cp' to 'newcp'

 <mx:ColorPicker id='cp'/>
 <mx:ColorPicker id='newcp' />

if you do {cp.selectedIndex} in your action script code, it will return you an int value which is equal to the index number of the palette. Every color has a index number, the default value=0.

 var cpSelectedIndexStr:String = cp.selectedIndex.toString();
 newcp.selectedIndex = int(cpSelectedIndexStr);

if you do {cp.selectedColor} in your action script code, it will return you a uint value. The following code will NOT work -

 var cpSelectedColorStr:String = cp.selectedColor.toString();
 newcp.selectedColor = uint(cpSelectedColorStr);

The following code will work -

 var cpSelectedColorStr:String = cp.selectedColor.valueOf().toString();
 newcp.selectedColor = uint(cpSelectedColorStr);

This is a very basic conversion funda.. hope you get it...

AIR & LCDS - How do they work together?

2008-03-31T04:23:00.001-04:00

LCDS,Adobe AIR,Flex Builder,services-config.xml for AIR

Its easy to get started with Flex App and LCDS (i assume you know how to).. Use Flex Builder and create a J2EE Project with Remoting enabled. Use the LCDS setup install path for the context root in your dialog and set up the project.

Typically if you make a Flex Application you would ensure that your output directory of the generated SWF lies in the folder location inside the /flex directory or /samples/ directory of your flex application. Relevant config files have to be picked up ... I will describe the configuration files here in brief about LCDS:

-> service-config.xml - Main xml file that includes the below xml files and references them
-> remoting-config.xml - Used for writing destinations of Java/AS mappings using mx:RemotObject
->proxy-config.xml - Used for writing destinations for mx:HTTPServlet/mx:WebService
-> messaging-config.xml - Used to write destinations for mx:MessageProducer, mx:MessageConsumer
->data-management-config.xml - for DataService, fill operations

All these files reside in : C:\lcds\jrun4\servers\default\flex\WEB-INF\flex (On Windows) and /home/username/lcds/jrun4/servers/default/flex/WEB-INF (On Linux) (All this if you are running LCDS 2.5.1)

Using Flex Builder, You can Create an AIR Project with J2EE, LCDS Enabled for the project. So what happens? Your subscription to destinations may not work!! The same stuff on Flex Project works fine. So how do you rectify it?

AIR Projects need some extra settings in-order to work with LCDS -

A) Copy the services-config.xml from the above locatoin on the server to your project 'src' directory.
B) Raneme the copied file as 'custom-services-config.xml'
C) Open the menu in flex builder, Project->Properties
D) Go to the Compiler settings and you will find that the 'services-config.xml' need to be modified to include this one in the new path. i.e., set it as 'custom-services-config.xml'
E) Open the custom-services-config.xml file and look at your default channel (protocol). If you are using 'my-polling-amf' or 'my-rtmp', ensure that you remove the dummy 'http://{server-name}:port' and change it to 'http://localhost:portnumber or http://ip-address:portnumber' (similarly rtmp://{server-name}:port' to rtmp://localhost:portnumber or rtmp://ipaddress:portnumber)
F) Ensure that you have set your Default Channel accordingly as you altered.
G) Also, along with the custom-services-config.xml you would need remoting-config.xml, messaging-config.xml, data-management-config.xml. Copy them all to your local project src directory.
H) Ensure that you write all your destinations two times. One in the local copied files (related config file), and the remotely available config files.

Most problems related to changing of Protocol in LCDS occur due to "NOT CLEANING the Project and re-compiling it". As you change the compiler properties to include custom-services.config.xml, you would have already enabled auto-compile option. So this change will not recompile it unless you make changes to your app. So Ensure that you clean your project and recompile it.

Compiling and Running an AIR application on Linux (using sdk)

2008-03-26T00:29:00.001-04:00

"Compiling and Running an AIR application on Linux (using sdk) is same as how you do it on Windows". If you have Flex Builder, you dont have to worry about this. BTW, this post is only for beginners on AIR. If you want to compile and run the app using the sdk (terminal on linux, cmd on windows), Here is how you do that.

a) Get the SDK downloaded to a locatoin (ex: /home/username/flexsdk/)
b) If you are installing Flex Builder Linux Alpha 3 (to be released in labs around 31 March), you have an inbuilt sdk in your install location (ex: $INSTALL_LOCATION/Adobe_Flex_Builder_Linux/sdks/3.0.0)
c) Use the "amxmlc" - AIR MXML compiler present in your sdK (ex: $INSTALL_LOCATION/Adobe_Flex_Builder_Linux/sdks/3.0.0/amxmlc)
d) Assuming you have created an AIR MXML Application with its application properties file AIR XML file. (locatoin ex: /home/username/AIRApps/FirstAirApp/MyApp.mxml, MyApp-app.xml)
e) You will have to find AIR runtime directory (if you have installed Flex Builder on Linux alpha 3, Then runtime directory = $INSTALL_LOCATION/Adobe_Flex_Builder_Linux/sdks/3.0.0/runtimes/air/Linux),
e) Open your Terminal (cmd prompt on windows)

To Compile your MXML File
f) $localhost@terminal>"$INSTALL_LOCATION/Adobe_Flex_Builder_Linux/sdks/3.0.0/bin/amxmlc" <space> /home/username/AIRApps/FirstAirApp/MyApp.mxml
g) It will generate a SWF file with the same name in your directory (from where you are compiling)

Configure your *-app.xml to point it to the generated SWF
h) Open the application descriptor file "/home/username/AIRApps/FirstAirApp/MyApp-app.xml" (either in vi editor or in text editor), Find the string "[This value will be overwritten by Flex Builder in the output app.xml]" with in the tags <content> nested inside <initialWindow>. Remove the string present in the <content>...</content> and replace it with the path to the SWF file generated after you have compiled it. (example: <content>/home/username/....../Myapp.swf</content>). Save the file.

Running your air app:
i) In Your terminal run the command :
localhost@username> $INSTALL_LOCATION/Adobe_Flex_Builder_Linux/sdks/3.0.0/bin/adl_lin <space> -runtime <space> $INSTALL_LOCATION/Adobe_Flex_Builder_Linux/sdks/3.0.0/runtimes/air/Linux <space> /home/username/AIRApps/FirstAirApp/MyApp-app.xml

There you go... Your AIR App is launched for you.

PS:Please note that AIR Runtime (packaging/installing air apps etc.) does not come with Flex Builder Linux installation. You can get AIR Runtime for Linux on labs once again.

Flex Builder Linux - Alpha3

2008-03-19T11:11:00.001-04:00

The Alpha3 version of Flex Builder for Linux is gonna hit the public users on LABS.ADOBE.COM around March 31th 2008. So what would it comprise of?

As the version still stays at alpha, dont expect really much. No Design View as yet. But yet, something exciting to speak - Support for AIR in flex builder.. plus some bug fixes...

Hope you will like the addition of AIR and provide us your feedback as always...

FBLinux Alpha2 Installer on 64bit Linux OS

2007-12-19T06:53:00.001-05:00

The installer of Flex Builder Linux Alpha2 is modified slightly to help people trying it out on 64Bit OS. We need to download 32Bit Eclipse, 32Bit Sun JRE and 32bit Firefox for the installation to go successful.

If you are starting the installer on a 64bit OS - (It shows this OS Check message)

If you launch the installer with 64bit Sun JRE - (it exits with this message)

If you choose 64Bit Eclipse while selecting the eclipse path then it throws the below error and exits.

Also note that you will need to install Flash Player debug player manually by copying the libflashplayer.so file into the downloaded version of 32bit Firefox on your 64bit machine.

How to Serialize your DataVisualization Trials (Charting, ADG, ODG, PADG etc.)

2007-12-19T01:32:00.001-05:00

It is a commonly asked question on how do i serialize Datavisualization Trials that are available bundled with Flex Builder Linux Alpha 2.

You can get your Windows Flex Builder Beta 3 serial and plug-it into Flex Builder Linux to get it serialized. This may be a temporary thing for now but it might change as it goes ahead...

Open the file $HOME/.adobe/Flex/license.properties
Add a new line - flexbuilder3=XXXX-YYYY-ZZZZ-blabla...

Save the file and see your DMV Trial water mark is no more...

Flex Builder Linux Alpha 2 Available...

2007-12-19T01:19:00.001-05:00

Flex Builder Linux alpha 2 is available in Labs... http://labs.adobe.com/technologies/flex/flexbuilder_linux/ You can look at the release notes here - http://labs.adobe.com/technologies/flex/flexbuilder_linux/releasenotes.html

This release is more of a Alpha 1 Refresh where in not major features were added to it. Work is still going on to support some of the really requested features. This release however has addition to some of the new features like, Flash player r115 debug player update, Installer enhancements for better messaging in 64bit OS (doesnt natively support 64bit apps though!)..JSEclipse plugin installation, Bug Fixes which were prolonging from long time, DataVisualization Trials embedded....

All set for your Flex works to keep going on and on... Hope you liked it...

Flex for Java Developers

2007-11-23T06:44:00.001-05:00

Did you ever thought how flex would look on your Java based application...

You must learn and read on.. Watch this.. http://www.adobe.com/devnet/flex/articles/flex_java_eseminar.html

Adobe Flex Builder Linux (Alpha) on Eclipse 3.3 - Whats in the pack !!

2007-10-04T14:46:00.001-04:00

Looking for an IDE to develop RIAs using Flex on your Linux boxes.... Herez hitting "Adobe Flex Builder Linux" (Alpha - an early release)... It has a Plugin installer to install into Eclipse 3.3 (Europa) release and requiring SUN JRE 1.5...

read more | digg story

Adobe Flex Builder Linux - Whats in..

2007-10-04T13:27:00.001-04:00

flex builder linux,flex

For developing RIAs on linux, Adobe has already announced its open source Flex SDK on linux by which users can create applications (example in either vi editor etc) and compile using a command-line in the terminal. At Max 2007, Adobe has announced a fruitful product to the linux geeks.. Yes, its Adobe Flex Builder Linux... Its an early alpha release available in Adobe Labs for Download.

So What does it have inside?

It has a large set of features derived from its Windows release (Flex builder 3 beta..It does not have all the features though!!) Let me walk through some of the major features which are in...Oh yes, that would be a good start point for developing RIAs on linux...

a) Project Creation Wizards (where you can create projects integrated with ASP .Net, J2EE, PHP, Coldfusion)..
b) Code Coloring, Code Hinting, Code Auto Completion, Code Folding..
c) Running applications..
d) Debugging applicatoins with various views like breakpoints, watch variables, stack view...
e) Support to create various Flex File types (MXML Application, MXML Component, MXML Module, CSS File, New Folder, Empty file etc.)
f) Find All References in project, workspace, etc.
g) Outline view which gives a complete tree structure of your code
h) Problems panel which reports compiler errors, warnings etc.
i) Project Properties, Configuring SWC folders, Add Library Projects as references, Build path..
j) Multiple SDK Configuration
k) Import and Export projects
l) Export to release version
m) Create Ajax-Bridge wrappers
n) Find, Replace...
o) Commenting code..
p) Navigating to the declaration (Open definition), Quick outline view, Open Resource...
q) Project Properties, Auto Build on, off, build all, clean project...
and a lot more....

What is not in....(with time and as we head towards the release these might get added..)..

a) Design View
b) Web Service Introspection
c) Coldfusion extensions for FB
d) Data Visualization components (not supported by default but you can port the .SWC from valid windows/mac machine on to linux and all will start working...)
e) Data Wizards
f) AIR Support
h) Refactoring
i) States View
j) Flex Profiling

Its supported on three flavors of Linux, RHEL WS 4, SUSE 10, Ubuntu 7.. SUN JRE 1.5 and Eclipse 3.3 is required on the machine. The Installer for flex builder is a plugin to Eclipse 3.3 which also installs debug version of flash player.... Read here for installation and get set go...

Installing Flex Builder Linux Alpha

2007-10-03T15:31:00.001-04:00

Flex builder Linux,Flex builder linux installation,Linux RIA development tools,Flex Linux

If you have downloaded Flex Builder linux alpha from the Adobe labs.. Here is how you can start with for the installation... Remember to read the release notes which also has some references to installation... Flex Builder linux alpha supports only Plugin installation into Eclipse 3.3 (Europa) release and is not available via a Standalone version installer. Please do have Eclipse 3.3 downloaded...
So what do you need to have...

a) One of the supported Linux Flavor (RHEL WS 4, SLES 10, Ubuntu).. If you want to try out a new distro then its not guaranteed that it will work pretty well 100% but yeah... it might work !! (may god help you...)

b) Have Sun JRE 1.5 Installed on your machine and get going as below... (It doesnt work with 1.4.x... it can work with 1.6 but not supported as of now... pretty early drop so is it...!!)

Installation steps for Flex Builder Linux Alpha in detail:

a) Download 32 Bit version of Eclipse 3.3 (downloaded from this location).
b) After you have un-tarred eclipse into some other location… say /home/arun/FBLinux/… You now have eclipse in /home/arun/FBLinux/eclipse/eclipse.exe
c) Without installing Flex builder Linux, ensure you can launch eclipse from your terminal using "./eclipse" (from that directory)..
d) Verify when asked for “workspace” choose new custom location for workspace (say /home/arun/FBLinux/eclipse/<NewWorkspaceDirectory>/)
e) Verify eclipse launches fine without any problem and you see the “Welcome page” (of eclipse)
f) Open your terminal
g) Type “java –version” and check what is the version of JRE you are running. Lets try to install JRE 1.5 (if you have a latest than this or earlier than this)
h) Please try installing JRE 1.5 from this location. Please find “Java Runtime Environment (JRE) 5.0 Update 12” click on the Download button related to this.. Click on “Accept license”… Download the file “Linux Self-extracting file” (jre-1_5_0_12-linux-i586.bin)… Use “sh jre-1.5xx.bin”) to start installing this new JRE to a folder (say on your desktop… example: /home/arun/Desktop/jre-1.5.0.12/ directory).. It should be 32 bit version if you are not downloading from what is told here..
i) Use the command “export PATH=/home/arun/Desktop/jre-1.5.0.12/bin:$PATH” (which sets the jre bin path priority to any other path on your machine).
j) Echo $PATH, verify you see “/home/arun/Desktop/jre-1.5.0.12/bin” in the beginning of any other path.
k) Type “java –version” and verify it shows 1.5 version from Sun Microsystems.
l) Now navigate to /home/arun/FBLinux/eclipse/ directory
m) Use ./eclipse and launch eclipse now. Verify it launches eclipse fine. Open your Window->Preferences->Java->Installed JRE and verify it uses JRE 1.5 as you installed above. If its not present, please add this in the list and make it default.
n) I assume you have downloaded flexbuilder_linux_install_a1_100207.bin (downloaded installer file with this sort of name) into directory say /home/arun/downloads/ location
o) Staying/Being in the same terminal, navigate to /home/arun/downloads/ location and use ‘sh flexbuilder_linux_install_a1_100207.bin”
p) Installer should launch now with a splash screen showing "Flex Builder Linux" and shows you a UI for installation...
q) Accept the EULA
r) Choose the location where you would want to install (Adobe_Flex_Builder_Alpha) – Say create a directory as here - /home/arun/FBLinux/Adobe_Flex_Builder_Alpha/
s) Choose the eclipse installed location directory (say /home/arun/FBLinux/eclipse directory)
t) Choose to install Flash player plugin that is provided with the installer (keep the check box checked.. don’t uncheck it)... This is a debug version of flash player browser plugin that is required for debugging flex applications from with-in the IDE..
u) Proceed with installation and Click finish in the Install
v) Now in the same terminal.
w) Navigate to the directory (ex: /home/arun/FBLinux/Adobe_Flex_Builder_Alpha/ directory). You will see a script named “Adobe_Flex_builder.sh”..
x) Use ‘sh Adobe_Flex_builder.sh’ and verify it launches eclipse fine.

Later on keep using the "Adobe_Flex_builder.sh" to launch Flex builder again after exiting... Read the release notes on what it does !! Happy RIA Dev on linux..

Keep me posted if you find any issues.

Flex Builder Linux - Unveiled

2007-10-03T09:01:00.001-04:00

Time for all those linux geeks intending for an RIA development using Flex... Flex Builder Linux is launched in the Adobe Labs.... Its an Alpha release of the product.... Time for linux junta to have hands-on working on their development of flex apps using this IDE.
I shall walk you all with my experiences of the same as i go on describing more about it...

Not all of them will have a solution !!

2007-09-20T08:41:00.001-04:00

While i take sometime to explain the code i have written to generate the same using flex, i was thinking if all the puzzles that get generated randomly will have a solution or not?

Well the Answer is NO... Not all of them will lead to a solution...

Can i prove it?

There are different ways of proving it.

a) What are the possible number of cubes that can come of this format. 9! (nine factorial - Empty cube can occur in 9 positions and all the other 8 numbers can come at each position without repetetion i.e., 9x8! = 9!). We have to prove all 9! cubes will lead to a solution..

b) Prove using induction. Say Cube n has a solution, Cube k+1 has a solution if, k+n has a solution then all 9! cubes will have a solution

c) Proof by contradiction. Find one cube among the 9! that does not have a solution which proves that not all of them will have a solution....

I tried the third way - "Proof by Contradiction"... (not sure if this is the name i have to give it for)..

If you start looking at a 2X2 Cube. You will find that there is one possible way by which you cannot reach to a solution... What is it ?? See below:

Can you arrange it in the order so that it becomes 1,2,3 (1 and 2 in the first row in that order)?

No you cannot. Reason... Imagine 2x2 Cube elements as running in circle... (circular list!) 1->3->2 and remember even if you go back or forth, possible combinations are the following

1->3->2
2->1->3
3->2->1

Its very simple that we cant get any order other than this. So we cannot reach 1->2->3 state at all.

Now i say that every Cube will have atleast one 2X2 cube inside it. See the example below for a 3x3 cube where assume all the other cells have "Valid Data already filled" and only this 2X2 data forms a circular loop... Now does it have a solution? I say NO.

Here is an application if you want to try it out...

Small Game in Flex

2007-09-20T01:14:00.001-04:00

Download the game here... by right click and choose "Save AS" and save the SWF.. Open the SWF in your browser.. if it doesnt play then you are running an older version of flash player.. please upgrade to Flash player 9 and it works pretty fine...

An Enhanced version of the same is here again:

Ajax and RIAs

2007-09-11T09:39:00.001-04:00

I was welcomed today in my office with conference room GOA where Ananth (my Sr. Engg. mgr) and Rakshit (Coldfusion developer) set the agenda for giving insight into the world of RIAs.

Ajax techniques - Hidden frame technique, Hidden iFrame technique, XMLHttp technique.. Ajax - XML-Dom Parser, Ajax Patterns... XPath, XSLT... JSON Data Format, Firebug, REST, XML RPC, SOAP, AjaxStub... Coldfusion for Ajax, Spry framework, spry effects, AIR introduction, hello world sample, Packaging AIR Apps, Using Dreamweaver or Flex Builder to build apps.. Building mashup applications using Ajax, AIR ... It was an awesome training atleast for a beginner like me.. i feel this is a real good start to start from this...

I have worked on developing database driven, web based applications using J2EE... But wow.. Ajax is the Web 2.0 now taking it to the next level... Let me also take some time to understand how Silverlight and JavaFaces work... I my next posts i would try to describe my understanding of each of them with an example to the best of my knowledge...

Apache Projects

2007-09-10T23:58:00.001-04:00

If you think you know about "Apache Web Server" and "Apache Tomcat"... here is the complete list of apache projects... They are wide spread... http://www.apache.org/dyn/closer.cgi

Float vs Double in Java

2007-09-10T08:42:00.001-04:00

float x=2.3;

if(x>2.2) {
System.out.println("X is greater than 2.3");
}

What is the output of this program in Java..
Ans: Compilation fails.
Solution: 'x' is a float variable. and '2.2' gets converted to 'double'. we cannot compare a float and a double. We need to mention it as 'x>2.2f' for the above code to print the output.

Sun Certifications

2007-09-10T08:37:00.001-04:00

If you plan to take up - This is the ladder for you...

Read here for a complete overview of the same - http://www.sun.com/training/certification/java/index.xml

J2EE Design Patterns

2007-09-10T08:28:00.001-04:00

http://java.sun.com/developer/technicalArticles/J2EE/despat/ is one good place to study about the J2EE Design patterns. They are very good. Design patterns help you solve a business problem (depending upon your requirement, you choose which pattern - which was already implemented successfully by some one - suits you and you just choose that one)... its very good to learn the design patterns immediately after you are done with your learning of specific technologies or may be in parallel.

boolean vs int in Java

2007-09-10T07:02:00.001-04:00

Some of us might think C and Java might behave the same manner...
for example, the code below:

int x = 3;
if(x=4) {
System.out.println("X is assigned value 4");
}

if(x) {
System.out.println("Value of X is 4");
}

What is the output of the above programs in Java?
Ans: Compilation fails.
Reason: The 'if()' Condition in java expects a boolean argument. when we assign x=4, it returns an integer which is the value of 'x' i.e., 4.

Welcome

2007-09-10T06:44:00.001-04:00

Having come across a lot of stuff related to the technologies i am working on, i have decided to jot down some of the thoughts (intricacies involved) in some of them where ever i encounter. I would also make sure this would serve as a simple teasers as well. Its hard to get everything at one place, but yes.. this is not a place for you to learn about something which is already existing else where... probably somethings that i encounter and i feel its worth noting it down (if its not so simple to understand)... Let me kick off... Sorry about my wierdo thoughts in these programming languages.. definately this would make you feel interesting in some or the other manner... There i go...