TechieLog

Another Poor Decision, Another Company Succumbs!

2011-11-13T14:49:00.001-05:00

http://blogs.adobe.com/conversations/2011/11/flash-focus.html

Oh well...it is a sad day for Flash (on the mobile platform at least)!

I always see these Chevy ads on TV showing sentimental values of old Chevy's (in a bad economy, I might add), instead of flaunting technical advances in the new ones! And I always wonder, who is making these decisions, and, who is supporting them, who is GM appealing to?

I was dumbstruck, when HP bought Palm, even more so, when they came out with a WebOS tablet, and finally cringed when they discontinued it when they were selling like crazy at USD99.00!I always thought HP was a hardware company, they should've stuck to hardware. If they want to get into tablets (as a risky undertaking), they should have been into hardware for Android tablets. Let Palm, RIM and the likes, rise and/or sink on it's own merit.

Adobe, now they had a H.U.G.E. advantage in the RIA market. As far as I know they coined the term RIA (or had something to do with coining it at the very least)! The flash platform was everywhere. They were building a community, they had complimentary products like AIR, they were the answer to trendy interfaces. JavaScript ...eeeww!

If you ask me, it would've taken just a couple of eager engineers to figure out how to compile flash on a jail-broken iOS and leak a build out to the developer community. Moreover, they could have just given the specification to compile other languages to Flash runtime on ARM, something like a Common Language Specification. And by the by, nobody'd have asked Steve Jobs' opinion!

Yeah, yeah .....we all know, Mr. Jobs was worried about the battery life or the performance of Flash on the iPhone (they would've been more careful with iOS 5 release if that were truly the case) .... it was more out of the protection for iTunes market that the whole spat arose. Who at Adobe wanted to pander to the "i" and decided to engage in their stupid "We "HART" Apple Campaign"? Why then, after getting punched so hard, do you still want to showcase Apple computers in your How-To Flash videos? Why all this fashion for all the grief? Why not just tell Apple to go to hell [indirectly of course]?

And lastly if you believe that HTML5 is going to be a standard that will render and behave the same on all browsers, you have got to be deluded beyond repair! As long as there are browser providers, there will be differences, simply by virtue of competition. There will be quirks...no way out! But what do I know...

Nested AdvancedDataGrid

2010-11-21T15:22:00.001-05:00

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:

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

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.

   1: private var _BaseData:ArrayCollection =  new ArrayCollection([   2:     {region:'south', state:'FL', city:'Alachua', population:'6,098'},   3:     {region:'south', state:'FL', city:'Alford', population:'466'},   4:     {region:'south', state:'FL', city:'Altha', population:'506'},   5:     {region:'south', state:'FL', city:'Altamonte', population:'41,200'},   6:     {region:'south', state:'TX', city:'Addison', population:'14,166'},   7:     {region:'south', state:'TX', city:'Perezville', population:'5,444'},   8:     {region:'south', state:'TX', city:'Alamo', population:'14,760'},   9:     {region:'north', state:'NY', city:'Airmont', population:'7,799'},  10:     {region:'north', state:'NY', city:'Akron', population:'3,085'},  11:     {region:'north', state:'NY', city:'Alabama', population:'1,881'},  12:     {region:'north', state:'NY', city:'Albany', population:'95,658'}  13: ]);

The converted object should now look like:

   1: private var _HData:ArrayCollection =  new ArrayCollection([   2:     {region:'south', state:'FL', children:[{detail:[   3:             {city:'Alachua', population:'6,098'},   4:             {city:'Altamonte', population:'41,200'},   5:             {city:'Alford', population:'466'},   6:             {city:'Altha', population:'506'}   7:         ]}   8:     ]},   9:     {region:'south', state:'TX', children:[{detail:[  10:             {city:'Perezville', population:'5,444'},  11:             {city:'Addison', population:'14,166'},  12:             {city:'Alamo', population:'14,760'}  13:         ]}  14:     ]},  15:     {region:'north', state:'NY', children:[  16:         {detail:[  17:                 {city:'Airmont', population:'7,799'},  18:                 {city:'Akron', population:'3,085'},  19:                 {city:'Alabama', population:'1,881'},  20:                 {city:'Albany', population:'95,658'}  21:             ]  22:         }  23:     ]}  24: ]);

The following function uses a cursor to iterate over this ArrayCollection, read the city and population, creates a child object. Then it discards the repeated rows.

public function setHierarchy():void {// sort firstvar sort:Sort= new Sort();sort.fields = [new SortField('state',false)];_BaseData.sort = sort;_BaseData.refresh();var HData:ArrayCollection = new ArrayCollection();var csr:IViewCursor = _BaseData.createCursor();var previousState:String = "";var counter:int = 0;var children:Array = [];while(!csr.afterLast) {// flag to remove repeated rowsvar addToHierarchy:Boolean = false;var subGridObj:Object = {city:'',population:''};subGridObj.city = csr.current.city;subGridObj.population = csr.current.population;// find next/previous values and compare with current recordvar str:String = csr.current.state; if (previousState != str) {children = [];previousState = str;// flag to remove repeated rowsaddToHierarchy = true;}//create child objects and populate with child-datachildren.push(subGridObj);csr.current.children = [];csr.current.children[counter] = {detail:children};// copy to Hierarchy and neglect repeated rowsif (addToHierarchy) {HData.addItem(csr.current);}csr.moveNext();}// finally make assignment as HierarchicalDataadg1.dataProvider = new HierarchicalData(HData);}

The AdvancedDataGrid declaration should now take an ItemRenderer column

<mx:AdvancedDataGrid id="adg1" x="200" width="600" height="400" variableRowHeight="true"verticalCenter="0"><mx:columns><mx:AdvancedDataGridColumn headerText="Region" dataField="region" /><mx:AdvancedDataGridColumn headerText="State" dataField="state" /></mx:columns><mx:rendererProviders>            <mx:AdvancedDataGridRendererProviderdataField="detail" renderer="subGridRenderer" columnSpan="0" columnIndex="1"/>         </mx:rendererProviders>  </mx:AdvancedDataGrid>

and the itemrenderer would be composed of a grid:

<?xml version="1.0" encoding="utf-8"?><s:MXAdvancedDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" focusEnabled="true"><s:VGroup paddingBottom="10" paddingLeft="10" paddingTop="10"><mx:AdvancedDataGrid id="subAdg" dataProvider="{data.detail}"></mx:AdvancedDataGrid></s:VGroup></s:MXAdvancedDataGridItemRenderer>

…and take that too Times of India

2010-11-10T01:29:00.004-05:00

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.

You should see the tricolor icon in the list of apps, once you’ve installed it.

Click to open the app. The app fetches the story-categories from http://timesofindia.indiatimes.com/rss.cms

Select the one of categories to see the list of available stories. Tap on the one that interests you…and…

read in peace!
Regex was painful but in the end, it was worth it!

If you need flash builder source: http://www.box.net/shared/9qf0ria0jy
Download the apk for android device: http://www.box.net/shared/2ndxfyu34h

A note of caution: please don’t read while driving!

[edit]When compiling for emulator use "target apk-emulator" from command line[/edit]

Text Flow in Columns (CSS, HTML, JS)

2010-10-20T21:54:00.002-04:00

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>

In its most rudimentary form, the program assumes that number of columns and the width of the outtermost container (<div id=”container” />) are known.

With some jquery, to assist:

I stuck the whole text into 1st column with width = container_width/number_of columns_desired
Styled the column to
1. show no scrollbars
2. recalculated this columns and all its siblings to the same height (gives us the viewable area)

The problem that remains is to manipulate the scrollbar positions of the column_2,…, column_n. That is simple.

column_2’s scrollbar top = column_1’s height
column_3’s scrollbar top = column_1’s height + column_2’s height
… …
column_n’s scrollbar top = column_1’s height + column_2’s height + … + column_(n-1)’s height

   1: $(function (){   2:     var html_text = $('#text-container').html();   3:     $('#text-container').fadeOut('slow');   4:        5:     var NUM_COLUMNS = 3;   6:        7:     var available_width = $('#container').width();   8:     var available_height = $('#container').height();   9:    10:     var unit_width = parseInt(available_width/NUM_COLUMNS) -5;  11:     var unit_height = parseInt(available_width/NUM_COLUMNS);  12:       13:     var units = [];  14:       15:     for (var i = 0; i < NUM_COLUMNS; i++) {  16:         $('#flow-container').append("<div id='flow-container_unit_"+i+"' class='jq-unit'></div>");  17:         units.push("flow-container_unit_"+i);  18:     }  19:       20:       21:     $('div.jq-unit').width(unit_width);  22:     $('div.jq-unit').css({  23:         "overflow": "hidden",  24:         "float": "left",  25:         "text-align":"left", "margin":"2px",  26:         "padding-top":"2px"  27:     });  28:     $('div.jq-unit').html(html_text);  29:     $('div.jq-unit').height($('div.jq-unit')[0].scrollHeight/NUM_COLUMNS);  30:       31:     var length = units.length;  32:     var scrl_top_calc =  0;  33:       34:     for (var j=0;j<=length;j++) {  35:         $('#'+units[j]).scrollTop(scrl_top_calc);  36:         scrl_top_calc += $('#'+units[j]).height();  37:     }  38: });

That will yield a result like the following

The problem I’m running into is that the text displayed my get either cut from the bottoms or the tops. If I manipulate the heights of the display areas, then I get line repeats, which is a bad reading experience.

I thought of putting in a scrollbar (that’s why the jquery-ui imports), but then I thought that defeats the purpose if this excercise.

I might put a couple of buttons that will allow some 5-to-10 pixel scrolling to just read the line that got cut off. Perhaps a bad work around.

If anyone has better solutions, please post replies…

Javascript Singleton

2010-10-10T17:53:00.003-04:00

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.

Here’s the collection program (CollectionFactory.utils.js file):

   1: var CollectionFactory = function () {   2:     return {   3:         Collection:new Array(),   4:         add: function (collection_object) {   5:             this.Collection.push(collection_object);   6:             this.triggerEvent("add");   7:         },   8:         removeAt:function(index) {   9:             this.Collection.splice(index, 1);  10:             this.triggerEvent("remove");  11:         },  12:         empty:function() {  13:             this.Collection = null;  14:             this.Collection = new Array();  15:             this.triggerEvent("empty");  16:         },  17:         getAt:function (index) {  18:             return this.Collection[index];      19:         },  20:         replaceAt:function (index, collection_object) {  21:             this.Collection.splice(index, 1, collection_object);  22:             this.triggerEvent("replace");  23:         },  24:         replaceOrAdd:function (collection_object, compare_key) {  25:             var replaced = false;  26:             /* see if anything needs to be replaced first */  27:             for (var i=0;i<this.Collection.length;i++) {  28:                 if (this.Collection[i][compare_key] == collection_object[compare_key]) {  29:                     this.replaceAt(i, collection_object);  30:                     replaced = true;  31:                 }  32:             }  33:             /* if nothing was replaced, then the item needs to be added */  34:             if (!replaced) {          35:                 this.add(collection_object);  36:             }  37:             return;  38:         },  39:           40:         getType: function () {  41:             return (typeof this.Collection[0])   42:         },  43:         triggerEvent:function (method_name) {  44:             $(document).trigger('COLLECTION_CHANGED', [{methodName:method_name, type:this.getType()}]);  45:         }  46:     }  47: };

[updated with a jQuery event trigger method]

A System-User super class (SysUser.model.js file):

   1: SysUser = function () {}   2: SysUser.prototype.setConfig = function (config) {   3:     this.first_name = config.first_name;   4:     this.last_name = config.last_name;   5:     this.username = (config.username == null || config.username == "" || config.username == undefined)?"guest":config.username;   6:     this.password = (config.password == null || config.password == "" || config.password == undefined)?"guest":config.password;   7:     this.updated_date = (config.updated_date == null || config.updated_date == "" || config.updated_date == undefined)?new Date():config.updated_date;   8:     this.created_date = (config.created_date == null || config.created_date == "" || config.created_date == undefined)?new Date():config.created_date;   9: }

A Customer class derived from System-User (Customer.model.js file):

   1: var Customer = function () {}   2: Customer.prototype = new SysUser;   3: Customer.prototype.constructor = this;   4: Customer.prototype.parent = SysUser.prototype;   5: Customer.prototype.setConfig = function (config) {   6:     this.parent.prototype.setConfig(config); // call to super   7:     this.customer_id = config.customer_id;   8:     this.address = config.address;   9:     this.city = config.city;  10:     this.state = config.state;  11:     this.zip = config.zip;  12: }

And finally the CustomerCollectionFactory singleton implementation that will return new CollectionFactory object (CustomerCollectionFactory.utils.js file)

   1: var CustomerCollectionFactory = function () {   2:     return new CollectionFactory();   3: }();

Now to demonstrate the usage; suppose you are making an AJAX call and retreiving a bunch of “customer” objects (I’m assuming JSON return) displaying them in a master-grid and and making edits to them in a dependant form. You need a central store something like an ArrayCollection in Flex with bindings to the Grid and Form.

You’d use the collection as shown in the code below:

   1: // jquery...   2: $.ajax({   3:     url:SERVER_URL,   4:     type:"POST",   5:     dataType:"json",   6:     ...   7:     success:function (data) {   8:         if (data.result) {   9:             var config = (data.data[0]); // return from AJAX call is in DATA[0] and is incidentally same format as "config" object expected by Customer's setConfig method  10:               11:             var cust = new Customer()  12:                 cust.setConfig(config);  13:             // add or replace  14:             CustomerCollectionFactory.replaceAt(0, cust);      15:               16:             // for my example I am guranteed only 1 row,   17:             // index is always 0, so I just replace  18:             // but you could call the add(cust) method here  19:             ...  20:             ...  21:             // do other things   22:             ...  23:         }  24:         else {  25:             // do something   26:         }  27:     }  28: }

Now when you click the “delete” button on your grid all you have to do is:

   1: CustomerCollectionFactory.remove(index_from_grid);

To enable the binding, you can bubble the “collection_changed” event upto the document

   1: $(document).bind('COLLECTION_CHANGED', function (event, properties){   2:     // check the properties object to see if the event is "SysUserCollectionChanged"   3:     // do something like:   4:     $('#MyGrid').jqGrid('addRowData', rowid, SysUserCollectionChanged.Collection[i], position, srcrowid);       5:        6:     // or   7:     $('#MyTextBox').val(SysUserCollectionChanged.Collection[i]);   8:     9: });

Hope this helps someone….

Optimized vs Unoptimized JSON Return in CFML

2010-10-09T11:12:00.001-04:00

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.

SysUsers.tst.cfm file:

   1: <cfsetting enablecfoutputonly="true" showdebugoutput="false" />   2: <cfparam name="url.page" default="1" />   3: <cfparam name="url.optimized" default="false" />   4:     5: <cfparam name="form.username" default="" />   6: <cfparam name="form.password" default="" />   7:     8:     9: <!-- Fixtures Query --->  10: <cfset QryData = QueryNew("user_id, username, first_name, last_name, password, created_date, updated_date, is_active, role") />  11: <cfset QueryAddRow(QryData,5) />  12:    13: <cfset operator_list = "usr1, usr2, usr3, usr4, usr5" />  14: <cfset passwd_list = "usr1, usr2, usr3, usr4, usr5" />  15: <cfset role_list = "admin, normal, perm1, perm1, normal" />  16:    17: <cfloop from="1" to="5" index="i">  18:     <cfset QuerySetCell(QryData,"user_id",i*4,i)>  19:     <cfset QuerySetCell(QryData,"username",listGetAt(operator_list, i),i)>  20:     <cfset QuerySetCell(QryData,"first_name","Optr-#i#",i)>  21:     <cfset QuerySetCell(QryData,"last_name", "operator#i#",i)>  22:     <cfset QuerySetCell(QryData,"password",listGetAt(passwd_list, i),i)>  23:     <cfset QuerySetCell(QryData,"created_date",dateFormat(now(), 'mm/dd/yyyy'),i)>  24:     <cfset QuerySetCell(QryData,"updated_date",dateFormat('#randRange(1,12)#/#randRange(1,30)#/#randRange(2001,2010)#', 'mm/dd/yyyy'),i) />  25:     <cfset QuerySetCell(QryData,"is_active",randRange(0,1),i)>  26:     <cfset QuerySetCell(QryData,"role",listGetAt(role_list,i),i)>  27: </cfloop>  28:    29:    30: <!--- StructDef --->  31: <cfset DataStr = StructNew() />  32: <cfset DataStr["total"] = 1 /><!--- total pages --->  33: <cfset DataStr["page"] = url.page /><!--- current page --->  34: <cfset DataStr["records"] = QryData.recordCount /><!--- total records --->  35: <cfset DataStr["columns"] = deserializeJSON(serializeJSON(QryData))['columns'] />  36:    37: <cfif NOT url.optimized>  38:     <!--- Unoptimized return for small datasets for use in smaller structs to save JS programming --->  39:     <cfset DataStr["rows"] = arrayNew(1) />  40:     <cfset array_idx = 1 />  41:     <cfloop query="QryData">  42:         <cfloop from="1" to="#listLen(columnList)#" index="i">  43:             <cfset DataStr["rows"][array_idx][listgetAt(columnList,i)] = QryData[listgetAt(columnList,i)][array_idx] />  44:         </cfloop>  45:         <cfset array_idx = array_idx + 1 />  46:     </cfloop>  47: <cfelse>  48:     <!--- optimized return for large datasets for used in grids --->  49:     <cfset DataStr = StructNew() />  50:     <cfset DataStr["total"] = 1 /><!--- total pages --->  51:     <cfset DataStr["page"] = url.page /><!--- current page --->  52:     <cfset DataStr["records"] = QryData.recordCount /><!--- total records --->  53:     <cfset DataStr["rows"] = deserializeJSON(serializeJSON(QryData))['data'] />  54:     <cfset DataStr["columns"] = deserializeJSON(serializeJSON(QryData))['columns'] />  55: </cfif>  56:    57: <!--- Output JSON --->  58: <cfoutput>#serializeJSON(DataStr)#</cfoutput>

When calling this script just pass in the url parameter value for the variable “optimized” (Line 3 above).

Passing in a value of true will yield (array of arrays in “rows”):

   1: {   2:     "records": 5,   3:     "columns": [   4:         "USER_ID",   5:         "USERNAME",   6:         "FIRST_NAME",   7:         "LAST_NAME",   8:         "PASSWORD",   9:         "CREATED_DATE",  10:         "UPDATED_DATE",  11:         "IS_ACTIVE",  12:         "ROLE"  13:     ],  14:     "total": 1,  15:     "rows": [  16:         [  17:             4,  18:             "usr1",  19:             "Optr-1",  20:             "operator1",  21:             "usr1",  22:             "10\/12\/2010",  23:             "01\/05\/2005",  24:             1,  25:             "admin"  26:         ],  27:         [  28:             8,  29:             " usr2",  30:             "Optr-2",  31:             "operator2",  32:             " usr2",  33:             "10\/12\/2010",  34:             "04\/21\/2007",  35:             1,  36:             " normal"  37:         ],  38:         [  39:             12,  40:             " usr3",  41:             "Optr-3",  42:             "operator3",  43:             " usr3",  44:             "10\/12\/2010",  45:             "10\/18\/2009",  46:             1,  47:             " perm1"  48:         ],  49:         [  50:             16,  51:             " usr4",  52:             "Optr-4",  53:             "operator4",  54:             " usr4",  55:             "10\/12\/2010",  56:             "08\/06\/2001",  57:             1,  58:             " perm1"  59:         ],  60:         [  61:             20,  62:             " usr5",  63:             "Optr-5",  64:             "operator5",  65:             " usr5",  66:             "10\/12\/2010",  67:             "09\/18\/2005",  68:             0,  69:             " normal"  70:         ]  71:     ],  72:     "page": "1"  73: }

…while a value of false will yield (array of objects in “rows”):

Hope it will help someone (or me in the future…I tend to forget :) )

Take that Times-of-India

2010-10-02T19:20:00.006-04:00

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?

Almost everytime I am reading the news a thousand ads get loaded; I am already distracted by the dancing silhouettes trying to “refi” my mortgage at ridiculously low rates on the left, TATA tea herbs growing all over the page from the right, a carousal of eligible bachelors and bachelorettes’ faces streaming across my screen on the top and a huge Flash modal enticing me to swim with pretty women on some exotic cruises (or buy an HP computer). As if this weren’t enough, I get a thousand javascript errors and pop-up blocked alerts every two seconds.

Come on guys….I just woke up! Gimme a break!

Well, I am guessing “TOI” won’t, so I’ve taken matters in my own hand. I built an Adobe AIR application that leaves all this junk behind and gets to the meat of the matter.

I get the available RSS from http://timesofindia.indiatimes.com/rss.cms and I load it in the dropdown box

Selecting the channel will give you a list of news articles. I just get the appropriate RSS feed from TOI, parse it and show you the description and link.

Then clicking on the story will change the screen over to let you read the news.

If you’d like to get the source (maybe you have another newspaper in mind?) send me an email or post a comment here. I will gladly oblige.

You will be able to get the file from from http://www.box.net/shared/izb2q93r4x or select it from the widget below.

The Devil’s Fortune Cookies!

2010-08-26T09:16:00.003-04:00

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!

The S.T.A.R. Stack

2010-08-14T23:43:00.003-04:00

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!!

AIR on Android...Compiled and Deployed !!

2010-08-05T00:29:00.002-04:00

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.

The lessons learned:

<mx:Application ...>

and not

<mx:WindowedApplication...>

I banged my head against the wall figuring this one out.

Oh, and a few more things, checkboxes are real small, so you cannot check them on/off properly on the Nexus One. Buttons and text at their default sizes are obviously small, I would like to find out if I can make AIR apps use pinch-to-zoom in/out? and, if I can use FlexBuilder 3 to do the same thing (I suspect I can, just correct the {myAppName}-app.xml from bin-debug.

Enjoy the images

Installing the Emulator

Installing the Application

Running the app in the Emulator

Supporting Files and Source Code

I will post the source code, the APK and the AIR app itself here. Meanwhile if anyone needs the code....you know where to find me.
[Edit]
So as promised here's the stuff:

Get your own Box.net widget and share anywhere!
[Edit]

Adobe Flex 3 Certified (...at last)

2010-07-31T12:01:00.000-04:00

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.

Ugly web pages

2010-05-06T14:25:00.001-04:00

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]

Linux Stuff

2010-04-21T19:23:00.000-04:00

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

New Web Stack (STAR)

2010-03-30T16:33:00.001-04:00

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 !!

Simple things that we forget

2010-03-11T12:16:00.000-05:00

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

[Edit]

Few more: public static void main(String[] args) { int i = 10; Integer I = new Integer(10); System.out.println("I == i : "+ (I == i)); // true System.out.println("I.equals(i) : "+ I.equals(i)); // true long l = 10L; System.out.println("I == l : " + (I == l)); // true Long L = new Long((long)10); System.out.println("I == L : Compiler Error...Incompatible datatypes"); System.out.println("I.equals(L) : " + I.equals(L)); // false }

X Over SSH - Simple, Straightforwad way to access remote Ubuntu desktop from local Ubuntu machine

2009-12-12T15:46:00.000-05:00

I keep hunting for this command so I decided to document my process.

Ctrl+Alt+F2

Use {F2,F3,F4...F6}

Start x display
with a simple command in Ubuntu

xinit -- :1 vt8


Use {vt8,vt9,...,vt12}

then log in to far away machine

ssh user@ip_address -X -C

-X for X Forwarding
-C for compression (don't remember the case)

once logged in use command

gnome-session

this is my window manager of choice albeit heavy. You can use others from so many available!

An overly simple Model-Glue app

2008-12-25T12:32:00.002-05:00

So there is good documentation on Model-glue framework. I followed along with their “Pig Latin Translator” but decided I need something more realistic. Who uses a translator that translates to “Pig Latin”? So here is a more realistic Login –> Validate Login –> show view on correct login || show error and login screen on bad login info type application in Model Glue.
If you understand this and follow, you’d have known the most of model glue in its basic form.
model
So here is the directory structure. Simply copy the skeleton app that they give you, then change the application-name (I use it same as the dir name) in 3 places:
1. Application.cfc
2. {app}/config/Coldspring.xml (find & replace)
3. {app}/config/ModelGlue.cfm (find & replace)
This should set you up for a basic MG app… run this and see if you get “Model Glue is running” page without errors

The following files are of consequence:
ModelGlue.xml file:

   1: <?xml version="1.0" encoding="UTF-8"?>   2: <modelglue>   3:   <controllers>   4:     <controller name="MyController" type="bookstoremgcs.controller.Controller">   5:       <message-listener message="OnRequestStart" function="OnRequestStart" />   6:       <message-listener message="OnQueueComplete" function="OnQueueComplete" />   7:       <message-listener message="OnRequestEnd" function="OnRequestEnd" />   8:     </controller>   9:     <controller name="UserController" type="bookstoremgcs.controller.userController">  10:       <message-listener message="LoginInfoSubmitted" function="validateLoginInfo" />  11:     </controller>  12:   </controllers>  13:     14:   <event-types>  15:     <event-type name="extra-template">  16:         <after>  17:              <views><include name="main" template="templates/main.cfm" /></views>  18:         </after>  19:     </event-type>  20:   </event-types>  21:     22:   <event-handlers>  23:     <event-handler name="page.index">  24:       <broadcasts />  25:       <results>  26:         <result do="view.template" />  27:       </results>  28:       <views>  29:         <include name="body" template="dspIndex.cfm" />  30:       </views>  31:     </event-handler>  32:     <event-handler name="view.template">  33:       <broadcasts />  34:       <results />  35:       <views>  36:         <include name="template" template="dspTemplate.cfm" />  37:       </views>  38:     </event-handler>  39:     <event-handler name="exception">  40:       <broadcasts />  41:       <views>  42:         <include name="body" template="dspException.cfm" />  43:       </views>  44:     </event-handler>  45:     <event-handler name="showLogin" type="extra-template">  46:       <broadcasts />  47:       <views>  48:         <include name="loginForm" template="userLogin/frmLogin.cfm" append="false">  49:           <value name="tryLogin" value="handleLogin" />  50:         </include>  51:           52:         <include name="body" template="userLogin/frmLogin.cfm" append="false" />  53:       </views>  54:       <results />  55:     </event-handler>  56:     <event-handler name="handleLogin" type="extra-template">  57:       <broadcasts>  58:         <message name="LoginInfoSubmitted" />  59:       </broadcasts>  60:       <views>  61:         <include name="body" template="userLogin/dspLoginResult.cfm" append="false">  62:           <value name="BackToLogin" value="showLogin" />  63:         </include>  64:       </views>  65:       <results>  66:         <result name="validationError" do="showLogin" redirect="true" append="" preservestate="true" />  67:       </results>  68:     </event-handler>  69:   </event-handlers>  70: </modelglue>

I have a custom “UserController.cfc” which you see is referred in the Controller Section:

   1: <cfcomponent name="userController" extends="ModelGlue.unity.controller.Controller" output="false">   2:     <cffunction name="validateLoginInfo" access="remote" output="false" returntype="void">   3:         <cfargument name="event" type="any" />   4:         <cfset var result = "" />   5:         <!--cfset var user = createObject("component", "bookstoremgcs.model.Users").init() /-->   6:         <cfif arguments.event.getvalue("txt_username") eq "anang" and arguments.event.getvalue("txt_password") eq "abc123">   7:             <cfset result = true />   8:             <cfset arguments.event.addTraceStatement("User", "Login Information is valid", result) />   9:         <cfelse>  10:             <cfset result = false />  11:             <cfset arguments.event.addTraceStatement("User", "Login Information is valid", result) />  12:             <cfset arguments.event.setValue("loginError", "Error in Username or Password") />  13:             <cfset arguments.event.addResult("validationError") />  14:         </cfif>  15:           16:         <cfset arguments.event.setValue("LoginValidationResult", result) />  17:     </cffunction>  18: </cfcomponent>

The form page looks like this. The copyToScope() is worth mentioning as it will allow you to copy certain variabled from the “event” structure to a “variables” (or other) scope.

   1: <cfset event.copyToScope(variables, "tryLogin, username,loginError")>   2: <cfset onSubmitNavigate = event.linkTo(tryLogin) />   3:     4: <cfif event.exists("loginError")>   5: <h4><cfoutput>#loginError#</cfoutput></h4>   6: </cfif>   7:     8: <cfform action="#onSubmitNavigate#">   9: <table>  10: <tr>  11:     <td>Username:</td>  12:     <td><cfinput type="text" name="txt_username" value="#username#" /></td>  13: </tr>  14: <tr>  15:     <td>Password:</td>  16:     <td><cfinput type="password" name="txt_password" value="" /></td>  17: </tr>  18: <tr>  19:     <td></td>  20:     <td><cfinput type="submit" name="btn_submit" value="Login" /></td>  21: </tr>  22: </table>  23: </cfform>

The showLoginResult file:

   1: <cfset event.copyToScope(variables, 'BackToLogin,LoginValidationResult') />   2:     3: <cfoutput>   4:     Login Result: #LoginValidationResult#<br />   5:     <a href="#event.LinkTo(BackToLogin)#">back</a>   6: </cfoutput>

The workflow theory is simply this:

The user submits login info
The form submission is rcvd. by MG, MG consults the MG xml and decides that the event (based on the URL param event) is “handleLogin” and passes control
MG sees that the event-handler declares a broadcast “LoginInfoSubmitted” message.
MG consults the MG.XML to see who is listening, finds the UserController.cfc and invokes the listener method,
MG passes control to the controller method which (in this case) validates the login and puts the result in the “event” structure
At this point MG gets control, consults the MG.xml to see if there are any “results” expected.
If one is expected, MG consults the event structure to evaluate result (in our case this is “validationError” which is coded in the controller as <cfset arguments.event.addResult("validationError") />)
If no result variable is found the MG proceeds as per the instruction, in our case, to show a page that says “login success”

This is it. Simple, and pretty cool !
There are some other topics on how to wrap the generated content in templates using viewCollection which is shown in the xml under “event-type” tag.
That’s it… that’s Model-Glue in it’s most basic form.