Amazon.com Widgets

Agile Otaku

Editing the Table View Row With TextArea

If you came to this post through Google or through other means, it would be best to download the code as shown in my github account.

$ git clone git@github.com:HugeAim/titanium-list-app.git
$ git checkout part7

In Part 7, this tutorial got side tracked to be able to migrate to 2.0. In this post, you will learn how to edit a table view row with a text area in a separate window.

So far, here is the code in your app.js. Your next goal is to be able to edit a row in a separate sliding window. That separate window will edit the content using a text area then update the database from there. (This is the reason why you had to create a database api in the earlier tutorials.) After finishing the edit, it will slide back to the main window. After detecting a need to refresh, app.js updates its data.

To do this, you need a little bit of refactoring in app.js. First, create a getData function

var getData=function(){
  var data = db.lists.getAll();
  for(var i =0;i<data.length;i++){
    datum = data[i];
    datum.hasChild=true;
    datum.toUrl="window2.js";
    datum.title = datum.content;
    delete datum.content;
  }
  return data;
};

Then replace the other parts relating to it.

var data = getData();
//var data = db.lists.getAll();
//for(var i =0;i<data.length;i++){
//  datum = data[i];
//  datum.hasChild=true;
//  datum.toUrl="window2.js";
//  datum.title = datum.content;
//  delete datum.content;
//}

Now replace the Table View event listener with a one opening a window that passes a targetId of the selected row.

// create table view event listener
tableview.addEventListener('click', function(e)
{
    if (e.rowData.toUrl)
    {
        var win2= Titanium.UI.createWindow({
          url:e.rowData.toUrl,
          targetId:e.rowData.id
        });
        navGroup.open(win2);
    }
});

Now open the window2.js and replace its content with the following series of codes.

var win = Titanium.UI.currentWindow;
Ti.include("database.js");
var db = Ti.App.listDb;
var row = db.lists.get(win.targetId);

Those are just boilerplate codes to get a reference with the database, but take note of the "targetId" taken from the current window. Do you remember that before the window was created and opened app.js, you passed this variable right? This is how you can pass information between the two windows.

Because you were able to pick the row data using the targetId, you may now use it to create a text area then add it to the current window.

//create the text area with row.content as value
var ta = Ti.UI.createTextArea({
    editable: true,
    backgroundColor:'white',
    height:420,
    width:320,
    suppressReturn:false,
    value:row.content
});
//add to current window
win.add(ta);

Take note of the "suppressReturn" variable, it will enable the text area's multiline editing.

Now try to select a row from the main window. It should slide to an editor window.

Saving

Now that you have the editor working, the next challenge is how to save that information to the database. To be able to do this, you will utilize an custom application event. The approach will be to, listen to the "close" event of the editor window, then trigger a "listRefresh" even from there. Add the code below to window2.js to do that.

win.addEventListener('close', function(e)
{
  var result = {
    content:ta.getValue(),
    id:win.targetId
  };
  db.lists.update(result);
  Ti.App.fireEvent("listRefresh",result);
});

Finally, inside your app.js, add the following code to listen from "listRefresh" then refresh the database from there.

Ti.App.addEventListener('listRefresh',function(e){
    tableview.setData(getData());
});

Cleaning up

In the same file inside the "click" event listener, modify the creation of table row by adding a toUrl and hasChild attributes.

var row = Ti.UI.createTableViewRow({
    title:content,
    hasChild:true,
    toUrl:"window2.js",
    id:count
});

Those extra attributes allows for editing of the newly appended row in a separate window.

Get the finished code here

$ git clone git@github.com:HugeAim/titanium-list-app.git
$ git checkout part8

Comments