while(thoughts){ "i am writing"}

Just about anything… and everything :)

Angular 2 : Baby Steps

leave a comment »

Let’s start with simple Todo project. We will not use any fancy tools here to generate any code auto-magically. I am working on a Windows machine, if that matters. A few things, if you do not already have them, it’s time to collect all our tools.

Although you can work with standard windows Cmd prompt, but I prefer to use Gitbash.

Let’s create our first Todo app. Steps to follow:

  • Create todo folder.
  • Create a folder src inside todo. And then create another subfolder app inside src.
  • Open todo folder in Webstorm as new project.
  • Right click todo folder in your File Browser and select ‘Git Bash Here’
  • Execute below commands in Gitbash:
    • npm init -y
    • npm install angular2 systemjs rxjs –save –save-exact
    • npm install typescript live-server –save-dev

After executing above commands, you will see a file called package.json created in todo folder with below contents:

  "name": "todo",
  "version": "1.0.0",
  "description": "Todo App",
  "main": "index.js",
  "scripts": {
    "tsc": "tsc -p src -w",
    "start": "live-server --open=src",
    "test": "echo \"Error: no test specified\" && exit 1"
  "author": "",
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.0",
    "rxjs": "5.0.0-beta.0",
    "systemjs": "0.19.9"
  "devDependencies": {
    "live-server": "^0.9.0",
    "typescript": "^1.7.5"

Just edit the scripts block as above to make our job easy.

Now, we need to put in place two very important files in src folder as below:


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>Todo App</title>
            packages: {'app': {defaultExtension: 'js'}}

tsconfig.json (For now just create it with below content and forget it.)

  "compilerOptions": {
    "target": "ES5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  "exclude": [

Now, create a new file named app.ts in src/app folder. Open it and write the below code:

import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {NgFor} from 'angular2/common';
    selector: 'todo-app',
    template: '<h1>My First Angular 2 App - {{title}}</h1>' +
    '<p>Todos:</p>' +
    '<ul>' +
    '<li *ngFor ="#todo of todos">' +
    '{{todo}}' +
    '</li>' +

    directives: [NgFor]

class AppComponent {
    title : string = "Todo App";
    todos : Array<string> = ['Task1', 'Task2', 'Task3', 'Task4'];


Now let’s explain the scripts block in package.json before using them.

"scripts": {
  "tsc": "tsc -p src -w",
  "start": "live-server --open=src"

Above, we have defined short names to execute following commands.

tsc will watch our src folder and generate corresponding code accordingly.

start is short for a tiny live-server to run our app.

Open a gitbash in todo folder by right clicking ‘Git Bash Here’ on todo folder and execute below command:

$ npm run tsc

Open another gitbash in todo folder by right clicking ‘Git Bash Here’ on todo folder and execute below command:

$ npm start

And it should have launched your first angular 2 app. Congratulations!!!


Written by MD

December 25, 2015 at 1:42 AM

Flex Spark DataGrid CheckBox Multiselect ItemRenderer

leave a comment »

I am sure many have came across this problem of CheckBox ItemRenderer not working properly in Spark DataGrid.

So, I am not writing a story and put GridItemRenderer code straight up down here.


<?xml version=”1.0″ encoding=”utf-8″?>
<s:GridItemRenderer xmlns:fx=”http://ns.adobe.com/mxml/2009&#8243;

override public function prepare(hasBeenRecycled:Boolean):void
//lblData.text = data[column.dataField]

override public function set selected(value:Boolean):void
super.selected = check.selected = value;

protected function mouseUpHandler(event:MouseEvent):void
event.ctrlKey = true;

protected function mouseDownHandler(event:MouseEvent):void
event.ctrlKey = true;

<s:State name=”normal”/>
<s:State name=”selected”/>



Hope it works for everyone.

Written by MD

January 30, 2013 at 11:23 AM

Flex 4 TextFlow styling (the simple way)

with one comment

Recently, I was looking for a solution myself for the Text layout framework styling issues. It sounds so complicated to apply CSS styles to textFlow.

I am not sure if you guys would like it or not, I moved all my text styles to an XML file as below:


<?xml version=”1.0″ encoding=”utf-8″?>
<theme themeId=”2″ themeName=”bubbles”>
<component styleId=”heading1″ colour=”0x548AC6″ fontFamily=”MarkerFeltWidePlain” fontSize=”26″ textAlign=”right”/>
<component styleId=”body” colour=”0x000000″ fontFamily=”Sansation” fontSize=”11.5″ textAlign=”left”/>
<component styleId=”caption” colour=”0xFFFFFF” fontFamily=”Sansation” fontSize=”11″ textAlign=”center”/>
<component styleId=”question” colour=”0xFFFFFF” fontFamily=”MarkerFeltWidePlain” fontSize=”12″ textAlign=”left”/>
<component styleId=”wall” colour=”0x000000″ fontFamily=”Sansation” fontSize=”10″ textAlign=”left”/>

Now during app initialization, I read all my styles in a stylesColl (collection) after converting above to VO’s as below:


public class StyleVO
public var styleId:String;
public var colour:String;
public var fontFamily:String;
public var fontSize:int;
public var textAlign:String;

And here is the final bit, applying the style to textFlow:

private function applyStyles(tf:TextFlow):void
var ts:StyleVO = AppUtil.getObjectByPropertyValue(GlobalModel.stylesColl, ‘styleId’, someStyleName) as StyleVO;
var textLayoutFormat:TextLayoutFormat = new TextLayoutFormat();
textLayoutFormat.fontLookup = FontLookup.EMBEDDED_CFF;
textLayoutFormat.renderingMode = RenderingMode.CFF;

textLayoutFormat.color = ts.colour;//0x336633;
textLayoutFormat.fontFamily = ts.fontFamily;//”Arial, Helvetica, _sans”;//
textLayoutFormat.fontSize = ts.fontSize;//14;
//textLayoutFormat.textAlign = ts.textAlign;//14;
//textLayoutFormat.paragraphSpaceBefore = 15;
//textLayoutFormat.paragraphSpaceAfter = 15;
//textLayoutFormat.typographicCase = TLFTypographicCase.LOWERCASE_TO_SMALL_CAPS;

tf.hostFormat = textLayoutFormat;

//IEditManager(tf.interactionManager).app .applyFormatToElement(tf, textLayoutFormat);
var prevManager:ISelectionManager = tf.interactionManager;
var editManager:EditManager = new EditManager();
var sel:SelectionState = new SelectionState(tf, 0, ste.text.length);
tf.interactionManager = editManager;
editManager.applyLeafFormat(textLayoutFormat, sel);
tf.interactionManager = prevManager;


And it all works very well.

Now, I can load that styles xml from anywhere, update it anytime and keep it simple.

Not sure how it limits me yet, if you know.. let me know about it.


Written by MD

January 15, 2013 at 10:43 AM

Array, Dictionary, Collections – Performance, Functionality, Reliability

leave a comment »

A great read about available Flex data structures. It explains them really well. Follow the below link:

Array, Dictionary, Collections – Performance, Functionality, Reliability

Written by MD

November 6, 2012 at 11:36 AM

Posted in Uncategorized

Flex: RichTextEditor adds extra line before and after my text

with one comment

Recently, while I was working on a Flex application(more particularly, on TextFlow), I came across this weird behaviour of text layout out of my persisted textflow object.

This is the textFlow object that need to be rendered:

<TextFlow whiteSpaceCollapse=\"preserve\" version=\"2.0.0\" xmlns=\"http://ns.adobe.com/textLayout/2008\">\n        <p>\n          <span>Some School Name</span>\n        </p>\n      </TextFlow>

See below images for a reference:

Below is the image of problematic view with one extra blank line and some blank space before the text.


And this is how I want it to be rendered:



Ok. After some experiments, I got the answer OR at least the reason why it was happening.

If a textflow has been saved(serialized), And if you try to import it from a saved TextFlow string, then it adds this one extra line before your text. If you cast that string to XML and import it, it doesn’t cause that blank line issue.

Below line has problem of one extra line before text:

ste.textFlow = TextConverter.importToFlow(textStr, TextConverter.TEXT_LAYOUT_FORMAT);

This line does not cause the blank line addition before text:

ste.textFlow = TextConverter.importToFlow(XML(textStr), TextConverter.TEXT_LAYOUT_


Written by MD

November 6, 2012 at 11:18 AM

Android Video Tutorials (links)

with one comment

As I spent a lot of time searching for android video tutorials, here are the links to the best I could find out. All these are free and good for learning from scratch (for someone with programming background)

Free Android Video Tutorials:

Android Bootcamp Screencast Series:

Oreilly – Developing Android Applications:

A very good series of free video tutorials:

Creating Android Themes(Video Tutorial Series):

I appreciate if anyone has more links, please post it in comments and I ‘ll try to add them to this link series with due credits.

Enjoy Learning Android..

Parsley: Flex 4 Modular Application

with 3 comments

Its quite some time that I had posted anything on my blog. You know personal life keeps you busy all the time. But never mind, I never stopped experimenting around with Flex OR in that case, anything surrounding flex. And these days, more I hear about Flex, more I felt the presence of Parsley framework in the talks. So lets begin..

As most of you already knowing, Parsley is another framework for Flex/Flash application based on DI and IOC patterns. A couple of other frameworks that follow the same approach are Spring Actionscript, Robotlegs and may be a few more.

Here I am not discussing the code but just posting the source of my modular application that I generally use to play around. I had used Flex 4 with Parsley 2.4.M1 library.

Here is the sample modular application code.

Written by MD

February 6, 2011 at 12:01 PM


Get every new post delivered to your Inbox.