Syntax Highlighter for Dynamic Views

After few hours of googling, I finally came to conclusion that you can't use Syntax Highlighter in your post if you are using Dynamic Views as your template in Blogger. There is no way to do it as you have no access to 'Edit HTML'. The button is disabled in the template section.

If you have exactly the same problem with me, please stop wasting time to find out a solution to add syntax highlighter to your post. Hopefully this post is useful to others that looking for the same thing.

Perhaps I need to change the template or stick with this template and think of an alternative.

Web application in service oriented architecture

I was reading the stuff on Service Oriented Architecture (SOA) the other day as I thinking to have my application to run on that architecture so that I could provide an interface and able to "embed" my application to whatever platform.

The scenario that trigger my thought to develop my application in SOA is that many bloggers has already running their own blogs, isn't good that they have not move to my website but still able to interact with my application via the service embedded in their website?

I may not clear about the application I'm talking here, it is a information sharing application. Instead of having only one place (my website) to serve all users, why not allow all users consume my services at their own blogs and their able to share their information with others via my services. They are physically distributed but linked altogether. Of course, the website still serves as a platform to access all services. Users still have their own detail maintained in website. Again, the website also consumes the services, it just another interface.

I search in the Internet and find most of the articles discuss the history, design and benefit of using SOA. Most of them are pure text, I have problem with pure text; it is too much of information to read and digest, why not put it in a simpler way, like a diagram or something like that?

As far as I understand, SOA is simply a collection of interconnected web services. That's all. The benefit of SOA is that, the application could be port to any platform and to be consumed different way.

I'm look forward to develop my next web application in SOA.

DataGrid Part 2 - DataTable for DataGrid

If you have not read the previous posts, you might want to start from the first post.

Before we going deeper in each component of DataGrid, we have to explore data table before others. In previous post, we have following code

DataGrid.setNoDataText("No data available");
DataGrid.addColumnStyle(new cls_datagrid.column("Header 1", "header_5", 50));
DataGrid.addColumnStyle(new cls_datagrid.column("Header 2", "header_4", 80));
DataGrid.addColumnStyle(new cls_datagrid.column("Header 3", "header_3", 130));
DataGrid.addColumnStyle(new cls_datagrid.column("Header 4", "header_2", 120));
DataGrid.addColumnStyle(new cls_datagrid.column("Header 5", "header_1", 80));
DataGrid.addColumnStyle(new cls_datagrid.column("Header 6", "header_0", 140));
DataGrid.setDataSource(DataSource);
DataGrid.refresh();

DataSource is data table we use. Firstly, we define the column for DataTable.

DataSource = new cor_db.cls_datatable(); 
DataSource.addAllColumns(new String[]{"header_0","header_1","header_2","header_3","header_4","header_5","header_6"});

Note that the columns name above (i.e. header_0, header_1...) match with the one in column style above. Next, we populate the data as from cursor which data comes from database.

cor_db.cls_datatable.cls_datarow dr;
DataSource.clear(); 
if(csr.moveToFirst()){ 
 do{ 
  dr = DataSource.newRow();
  dr.set("header_0", csr.getString(csr.getColumnIndex("field_1")));
  dr.set("header_1", csr.getString(csr.getColumnIndex("field_2")));
  dr.set("header_2", csr.getString(csr.getColumnIndex("field_3")));
  dr.set("header_3", csr.getString(csr.getColumnIndex("field_4")));
  dr.set("header_4", csr.getString(csr.getColumnIndex("field_5")));
  dr.set("header_5", csr.getString(csr.getColumnIndex("field_6")));
  dr.set("header_6", csr.getString(csr.getColumnIndex("field_7")));
  DataSource.add(dr);
 } while(csr.moveToNext());
 csr.close();
} 

In snippet code above, we have DataRow dr, if you familiar with DataTable object in .Net, this DataRow should be not a new thing to you. I borrowed the concept from .Net. set() takes 2 parameters, first one is column name and second one is the value. So, we have the DataSource ready for the DataGrid. DataGrid currently only take type DataTable as data source for the grid.

Now, take a closer look at DataTable class. Basically, DataTable has array list of Sting for column and DataRow for row. DataRow is resides in DataTable. In DataRow, an ArrayList of String is used to store the value of each column value.

public class cls_datatable{

 private ArrayList<String> column = new ArrayList<String>();
 private ArrayList<cls_datarow> row = new ArrayList<cls_datarow>();
 private int indexCounter = 0;

 public class cls_datarow{
  
  private ArrayList<String> columnValues;
  private int id;
  
  public cls_datarow(int id)
  {
   this.id = id;
   columnValues = new ArrayList<String>();
   for(int i = 0; i < column.size() ; i++ ) columnValues.add(null);
  }
 
  public cls_datarow()
  {
   columnValues = new ArrayList<String>();
   for(int i = 0; i < column.size() ; i++ ) columnValues.add(null);
  }
  
  public int getID()
  {
   return id;
  }
  
  public String get(String columnName)
  {
   return columnValues.get(column.indexOf(columnName));
  }
  
  public String get(int columnIndex)
  {
   return columnValues.get(columnIndex);
  }
  
  public void set(String columnName, String value)
  {
   columnValues.set(column.indexOf(columnName), value);
  }
  
  public void set(int columnIndex, String value)
  {
   columnValues.set(columnIndex, value);
  }
  
  public int getColumnSize()
  {
   return column.size();
  }
 }
 
 public void addColumns(String[] columns)
 {
     for (String col : columns) {
      column.add(col);
     }
 }
 
 public int getColumnSize()
 {
  return column.size();
 }
 
 public int getColumnIndex(String columnName)
 {
  return column.indexOf(columnName);
 }
 
 public String getColumnName(int intIndex)
 {
  return column.get(intIndex);
 }
 
 public int getRowSize()
 {
  return row.size();
 }
 
 public cls_datarow getRow(int rowIndex)
 {
  return row.get(rowIndex); 
 }
 
 public void remove(int rowIndex)
 {
  row.remove(rowIndex); 
  refreshIDnIndex();
 }
 
 public cls_datarow newRow()
 {
  cls_datarow dr = new cls_datarow(indexCounter);
  indexCounter++;
  return dr;
 }
 
 public void clear()
 {
  row.clear();
 }
}

As for now, we have following code in Activity.

//get data from database
Cursor csr = getDataFromDB(); 

//create DataTable object
cor_db.cls_datatable DataSource = new cor_db.cls_datatable(); 

//define column
DataSource.addColumn(new String[]{"header_0","header_1","header_2","header_3","header_4","header_5"}); 

//create DataRow
cor_db.cls_datatable.cls_datarow dr;

//populate data from cursor into DataSource
if(csr.moveToFirst()){ 
 do{ 
         dr = dtCust.newRow();
  dr.set("header_0", csr.getString(csr.getColumnIndex("field_1")));
  dr.set("header_1", csr.getString(csr.getColumnIndex("field_2")));
  dr.set("header_2", csr.getString(csr.getColumnIndex("field_3")));
  dr.set("header_3", csr.getString(csr.getColumnIndex("field_4")));
  dr.set("header_4", csr.getString(csr.getColumnIndex("field_5")));
  dr.set("header_5", csr.getString(csr.getColumnIndex("field_6")));
  DataSource.add(dr);
 } while(csr.moveToNext());
 csr.close();
}

//initialize DataGrid
DataGrid = (cls_datagrid) findViewById(R.id.grid);

//define column style, bond each DataGrid column by DataTable column
DataGrid.addColumnStyle(new cls_datagrid.column("Header 1", "header_5", 50));
DataGrid.addColumnStyle(new cls_datagrid.column("Header 2", "header_4", 80));
DataGrid.addColumnStyle(new cls_datagrid.column("Header 3", "header_3", 130));
DataGrid.addColumnStyle(new cls_datagrid.column("Header 4", "header_2", 120));
DataGrid.addColumnStyle(new cls_datagrid.column("Header 5", "header_1", 80));
DataGrid.addColumnStyle(new cls_datagrid.column("Header 6", "header_0", 140));

//set the DataTable as source
DataGrid.setDataSource(DataSource);

//generate the DataGrid 
DataGrid.refresh();

Next, DataGrid Part 3 - DataGrid.column

DataGrid Part 1 - A glimpse on the usage

If you have not read the previous posts, you might want to start from the first post.

In the layout file, we have

cor_customctrl.data_grid.cls_datagrid is the custom datagrid we are using. We have to set the height and the width to the value we want.In the activity file, as usual, we need to initialize

DataGrid = (cls_datagrid) findViewById(R.id.grid);

We then have to construct the DataGrid as below.

DataGrid.setNoDataText("No data available");
DataGrid.addColumnStyle(new cls_datagrid.column("Header 1", "header_5", 50));
DataGrid.addColumnStyle(new cls_datagrid.column("Header 2", "header_4", 80));
DataGrid.addColumnStyle(new cls_datagrid.column("Header 3", "header_3", 130));
DataGrid.addColumnStyle(new cls_datagrid.column("Header 4", "header_2", 120));
DataGrid.addColumnStyle(new cls_datagrid.column("Header 5", "header_1", 80));
DataGrid.addColumnStyle(new cls_datagrid.column("Header 6", "header_0", 140));
DataGrid.setDataSource(DataSource);
DataGrid.refresh();

Done! That's all we need to do to set up a datagrid.

• setNoDataText() is to set the default text to display if there is empty data. 
• addColumnStyle() is to create the datagrid column. The first parameter is the column name to display, second parameter is the data source's field name which data to be bond to. The last parameter is the width of the column. 
• setDataSource() is to set the data source. Data source is refers to a table, cls_datatable which concept is similar to .Net's DataTable.
• refresh()is the final step to create and display the DataGrid.

In additional to features above, if you do need event for DataGrid, there are common events such as click and long click could be used.

DataGrid.setLvOnItemClickListener(new AdapterView.OnItemClickListener(){
  @Override
  public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) {
    //your code here.
  } 
});

DataGrid.setLvOnItemLongClickListener(new AdapterView.OnItemLongClickListener(){
  @Override
  public boolean onItemLongClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) {
    //your code here.
  }
});

That's how to set up DataGrid. The convention for naming class (i.e.cls_x perhaps isn't appropriate, the sample was written quite some time ago. I apologize if you find it uncomfortable. I couldn't find any similar control in the past and hence I write my own and now share it out here.

Next DataGrid Part 2 - DataTable for DataGrid

DataGrid Control for Android

I'll post a series of How-To of creating DataGrid Control in Android platform. The idea is learnt from .Net CF where data is populated in tabular form. It is similar to DataGrid .Net Framework which we are familiar with.

Feature of DataGrid includes:

• Column sorting
• Column resizing
• Vertical scrolling
• Horizontal scrolling
• Single click event on row
• Data Binding

This How-To will be split into couple of smaller sections, each sections will focus on one item at a time and upon complete the entire How-To, we have the functional DataGrid.

The complete DataGrid looks as below:

This is the my first time to post something about programming, sorry for some parts that are poorly presented. I will improve my writing skills over the time. Anyway, I hope this DataGrid helps you in your Andriod app development :)

NOTE: this control is built on Android 2.2.

Next: DataGrid Part 1 - A glimpse on usage

Program coding & software engineering sharing

I'm fortunate enough to listen to a talk by Vise President of Microsoft , Bob McDowell today. Couples of hours later, now, I created this blog. His talk is inspiring and enlightened me to do this.