TechieLog: 2010

Sunday, November 21, 2010

Nested AdvancedDataGrid

Flex them Grids! (AdvancedDataGrid as a subgrid with flat data)

A grid inside a grid is a common requirement; I thought. Yet, I scoured the internet for a solution and I couldn’t find it anywhere (…at least not something that could be done with “flat data”). The following is something I wanted to achieve.

Adobe LiveDocs show an example here http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7bf2.html where they put a chart in an itemrenderer. However they show this example with “Hierarchical” collection. Their data structure looks like:

[Bindable]
     private var dpHierarchy:ArrayCollection= new ArrayCollection([
       {name:"Barbara Jennings", region: "Arizona", total:70, children:[  
         {detail:[{amount:5},{amount:10},{amount:20},{amount:45}]}]},
       {name:"Dana Binn", region: "Arizona", total:130,  children:[ 
         {detail:[{amount:15},{amount:25},{amount:35},{amount:55}]}]},
       {name:"Joe Smith", region: "California", total:229,  children:[ 
         {detail:[{amount:26},{amount:32},{amount:73},{amount:123}]}]},
       {name:"Alice Treu", region: "California", total:230, children:[ 
         {detail:[{amount:159},{amount:235},{amount:135},{amount:155}]}
       ]}
     ]);      

However, this is almost never how one would get data from the server. We generally get a flat data-structure as ArrayCollection. The the trick would be to convert this flat structure into a Hierarchy of objects.

…and take that too Times of India

I noticed lots of downloads for times of india source code. If you would be so kind to leave a comment...it will be greatly appreciated.

I‘ve compiled an Android app to read the newspaper ad-free. It’s the same concept as before, but I have to parse the incoming HTML with regex (I hate RegEx….I spent so much time with it).
I’m well into the night, so I’ll skip the explanation and but do enjoy the screenshots.

Text Flow in Columns (CSS, HTML, JS)

I was helping someone get some text to automatically overflow into adjoining columns. Much like a news paper. This is possible to do at run time with simply some javascript.

   1: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"   2: "http://www.w3.org/TR/html4/loose.dtd">   3: <html xmlns="http://www.w3.org/1999/xhtml">   4:     <head>   5:         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   6:         <title>Text Flow</title>   7:         <!--jq UI -->   8:         <link rel="stylesheet" type="text/css" href="./lib/lightness/jquery-ui-1.8.5.custom.css" />   9:         <!-- jQuery -->  10:         <script type="text/javascript" src="./lib/jquery/jquery-1.4.2.min.js"></script>   1:     2:         <script type="text/javascript" src="./lib/jquery/jquery-ui-1.8.5.custom.min.js">   1: </script>   2:         <!-- Custom JS-->   3:         <script type="text/javascript" src="./lib/app-js/text-flow.js"></script>  11:    12:         <style>  13:             #container {  14:                 width:1024px;  15:             }  16:               17:         </style>  18:     </head>  19:     <body>  20:         <p>  21:             <div id="container">  22:                 <div id="flow-container"></div>  23:                 <div id="flow-button-container"></div>  24:                 <div id="text-container">  25:                     <h2>What is it?</h2>  26:                     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>  27:                       28:                     <h2>Why do we use it?</h2>  29:                       30:                     <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>  31:                        32:                     <h2>Where does it come from?</h2>  33:                       34:                     <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>  35:                       36:                     <p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p>  37:                       38:                     <h2>Where can I get some?</h2>  39:                     <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>  40:                 </div>      41:             </div>  42:         </p>          43:     </body>  44: </html>

Javascript Singleton

I was working on something that required a store of arrays returned from an ajax call; so I came up with the following snippet of code.

I don’t think I words explain it better than the code below.

Optimized vs Unoptimized JSON Return in CFML

I was writing a test script for returning some user-data to a UI client. The client expected a return in two formats in different places: 1. A jqGrid to display a datagrid of users and 2. for a config object that expected data in name value pairs.

Using cfml as the middle tier makes life so easy. I banged out a simple cfml script.

Take that Times-of-India

Download & Rate latest version from Adobe Marketplace: http://www.adobe.com/cfusion/marketplace/index.cfm?event=marketplace.offering&offeringID=19225

I read the Times of India almost every morning. I like to consume the news and the rest of the “masala” with my “Cup’O Joe”. However, people running the newspaper’s electronic version seem to have forgotten that they are in the business of delivering news and not advertisements (…purely from a consumer point of view). I am aware there are ads everywhere, but nytimes.com, wsj.com, they do it “unobtrusively”.
Why don’t you try, TOI?

The Devil’s Fortune Cookies!

Today I found another Easter egg (or fortune cookie) from Google. I logged into one of my GMail accounts and the thing popped out (that's what she said). I promptly made a phone call and it worked. I got a call from 760-XXX-XXXX and it was free (just 0.06$ for India which is competitive).
When I opened Picasa I found a grid of face photos under “Unnamed”…Google was prompting me to put names to about a 1000+ faces that they had cropped from photos we upload to Picasa. I guess it will make searching easier (and in many cases obnoxious)
I am a Google fan for providing all these conveniences for free. Sometimes though, I wake up in the middle of the night with nightmares of Eric Schmidt showing me the EULA that says I sold my soul…and now he is here to claim it!

Saturday, August 14, 2010

The S.T.A.R. Stack

A few months back, I wished for a STAR here; a portable install (of sorts) for running ColdFusion applications. The use-case is the same as the one for WAMP/LAMP where you get an all-in-one stack.

A few assumptions/prerequisites were:

It should be free (… at least as in “beer”)
I shouldn’t have to delve into configuration details (e.g. apache “.conf” files) to set it up (same as WAMP); unless I wanted to
I should be able to leverage the best ability for each job (i.e. Tomcat container isn’t as good at delivering css, html, js, or images as Apache’s HTTP server)
I should be able to fit the stack plus the application on a small USB stick (256M) for redistributing my application. (perhaps even, make a windows application delivered thru’ a browser? When we have the cfexecute and the directory, file and registry api; who needs a cli?)

Well I have it made,…finally!!

I took the XAMPP Lite stack and ripped out their Apache webserver. For those who want to use PHP and MySQL, simply download their Lite version and leave it untouched with full capability. That way, you can add services to auto start/stop.

Next I got Tomcat 6 (and I have verified it works with Tomcat 7 too) and the mod_jk.so I got the latest Railo distribution (railo-3.1.2.001.war (34 MB)). I integrated Railo with Tomcat by adding the {railo}/WEB-INF/lib/*.jar to {tomcat}/lib/ and then merging the {railo}/WEB-INF/web.xml with {tomcat}/conf/web.xml.

Next step was to merge Tomcat with Apache webserver. That was easy and is documented everywhere. Long and short of it; just add the mod_jk,

# Load the JK module
LoadModule  jk_module  modules/mod_jk.so
<IfModule jk_module>
JkWorkersFile conf/workers.properties
JkShmFile     log/mod_jk.shm
JkMount     /*.cfm worker1
JkMount     /*.cfc worker1
</IfModule>

add a simplistic workers.properties as shown below

# Define 1 real worker using ajp13
worker.list=worker1
# Set properties for worker1 (ajp13)
worker.worker1.type=ajp13
worker.worker1.host=localhost
worker.worker1.port=8009

That’s it ! Download and unzip it to, then just click the “xampp_start.exe”. Since this is Apache is ripped out of xampp lite’s install, you may get an error saying “cannot find xampp directory” or “cannot find mysql”. If you are unsure if Apache webserver started, check the Task Manager processes and confirm you see the httpd*.exe is running

I also made a convenience tomcat_start and tomcat_stop batch files. You can download the stack from http://sourceforge.net/projects/starstack/ Let me know if you have any suggestions! Enjoy!!

Thursday, August 05, 2010

AIR on Android...Compiled and Deployed !!

The premise:

I finally was able to install an AIR application on my Android; and here are the results. As a matter of fact, part of the reason I've been studying Flex/AIR with any seriousness is because Adobe (and Google) made the AIR and Flash runtimes available for Android (Nexus One)

The Use Case:

I created a simple plain-vanilla desktop-application with a local SQLite Datastore. The application records a "grocery list" and then you can check-off items as you put them in your cart. Finally you can remove each item from your cart or you can delete the entire list with a single button click.

Adobe Flex 3 Certified (...at last)

I have been procrastinating for a long time. Every time I set a date for the exam, something came up, (...as it usually does); I promptly procrastinated. Blame the laziness (a programmer's best virtue). In that regard I am quite up there (where programming is concerned, of course).

30th July '10 was the day my stars aligned; I walked into a PearsonVue testing center nearby and I committed myself to the dreaded 9A0-082.

Well, here's my testimony and advice:
The exam was not that hard contrary to what many claim. I finished it in about 25 minutes and had lots of time to review the flagged questions. If you've covered LiveDocs, that's more than sufficient; for practice, Attest worked. I found I either knew the answer or I didn't. I didn't spend too much time pondering over each question (there isn't much to ponder). Maybe a few seconds to understand the code in the options.

If anyone needs any guidance, feel free to write; I'll gladly help.

Thursday, May 06, 2010

Ugly web pages

I don't really think this warrants more than a few words...but the question to pose is where does Google come up with such ugliness ?

Shiney buttons and window borders make our geeky eyes glaze over. However I've been in the utilitarian camp. I like things simple and functional (form follows function). I also like to give credit where credit's due.

Take the iPhone interface for example, or the Bing maps, or the ExtJS user interface, or any well designed Flex application. Shiny objects galore...

... but come on ...this is ugly.

[edit]
I am specifically and exclusively talking about the CSS applied to the textbox and buttons. They could have not applied that CSS at all; which causes the textbox to look raised, or the buttons to look rounded.

Don’t get me wrong; Form follows function; I love the utilitarian/spartan look, I understand that the speed is of paramount concern.
[edit]

Wednesday, April 21, 2010

Linux Stuff

Pasting some common things that I need when setting up my Linux environment (Ubuntu 9.04/10.04).

a. Setting up fstab to auto-mount at startup

   1: # mount partitions    2: /dev/sda1 /media/windows        ntfs-3g    defaults 0 0    3: /dev/sdb1 /media/common-ntfs    ntfs-3g    defaults 0 0    4: /dev/sdb2 /media/common-ext     ext3       defaults 0 0    5: /dev/sdc1 /media/multimedia     ntfs-3g    defaults 0 0 

b. Setting up samba shares

   1: sudo apt-get install system-config-samba 

This is by far the easiest way to setup a samba share.

c. Setting up the nfs share

   1: sudo apt-get install nfs-kernel-server 

... and on the client

   1: sudo apt-get install nfs-common

Tuesday, March 30, 2010

New Web Stack (STAR)

Trying to start a new web stack

[edit]follow link http://aphatak.blogspot.com/2010/08/star-stack.html to read and download the stack [edit]

S = SQLite (embed db and jdbc driver)
T = Tomcat (as dedicated Railo Container with SQLite JDBC driver)
A = Apache (for serving static stuff. Will try to sever this from WAMP stack, maybe)
R = Railo (cfml engine)

Off these, I have been able to take Tomcat and integrate it with Railo (this is also documented on Jamie Krugg's blog)

Remember...you saw it here first !!

Thursday, March 11, 2010

Simple things that we forget

Create a few simple classes (one extends the other)

   1: class A {   2:     public String prop_a1 = "property a1";   3:     4:     public String method_a2() {   5:         return "return from method_a2";   6:     }   7: }

   1: class B extends A {   2:     public String prop_b1 = "property b1";   3:     public String method_b2() {   4:         return "return from method_b2";   5:     }   6: }

Now test the methods from inheritance chain...

   1: class C {   2:     public static void main(String [] args) {   3:         A a = new B(); // this is upcasting   4:     5: System.out.println(a.prop_a1);   6:         System.out.println(a.method_a2());   7:     8:     9:         /**  10:         ** The following code is compile-time error  11:         ** System.out.println(a.prop_b1);  12:         ** System.out.println(a.method_b2());  13:   14:                 C:\Java\test4>javac A.java  15:                 A.java:24: cannot find symbol  16:                 symbol : variable prop_b1  17:                 location: class A  18:                 System.out.println(a.prop_b1);  19:                                    ^  20:                 A.java:25: cannot find symbol  21:                 symbol : method method_b2()  22:                 location: class A  23:                 System.out.println(a.method_b2());  24:                                    ^  25:                 2 errors  26:             **/  27:    28:    29:    30:    31:         B b = new A();  32:         /**  33:          ** B b = new A();  34:          ** The above code is "downcasting" [I stand corrected]  35:          * C:\Java\test4>javac A.java  36:                 A.java:45: incompatible types  37:                 found : A  38:                 required: B  39:                 B b = new A();  40:                 ^  41:                 1 error  42:             **/  43:    44:             B b = (B)new A();  45:                 /**  46:                   * Casting will compile  47:                   * But causes a runtime error  48:                  **/  49:    50:         }  51: }

[Edit]

Looking at the comments below, I feel compelled to write the reason for these snippets of code. In ActionScript 3.0, the following works in standard mode (deferred type checking)

   1: class ClassBase   2: {   3: }

You can subsequently create a subclass of ClassBase named ClassExtender, which has one property named someString, as follows:

   1: class ClassExtender extends ClassBase   2: {   3:     var someString:String;   4: }

and finally:

   1: var myClass:ClassBase = new ClassExtender();   2: myClass.someString =    3: "hello";   4: // no error in ActionScript 3.0 standard mode