TableView objects are used to present hierarchical lists of information.
init(x, y, width, height, style)
initializes table view object with initial frame, where it will be displayed. Parameter style can be "grouped" or "plain"
show()
shows control (not creating).
hide()
hides control (not destroying).
setEditing(isEditing)
switches tableview to editing mode, where user can manipulate table rows, reorder and remove any rows. Parameter isEditing can be either "yes" or "no".
setUserCanEditRows(canEdit)
enables/disables ability to delete rows using swipe gestures, be default this is disabled.
insertCategoryNamed(name)
inserts new category/section in table view with specified name.
insertRecord(title, subtitle, image, sectionNumber, rightImage, callback)
inserts new row to the table.
Parameters:
title - row's main title.
subtitle - row's subtitle, usually it is a description for the title
image - NKImage instance, which represents the image to be displayed in the left part of the row. Images larger then row height will be down scaled to row height. Images smaller then row height will appear at their original size.
sectionNumber - number of the section where the row must be inserted (starting from 0).
rightImage - small image to be displayed in the right part of the row, usually showing that the item is clickable, if empty then default OS's action image will be used.
callback - is a real javascript code to be executed when the item is clicked.
bindToDataBase(dbName, tableName, optionalQuery)
binds tableview to the given database using it's table as datasource, binding the database will destroy all the content in table view which was added earlier. optionalQuery is an optional parameter used to specify raw sql query to select table's content from database, for example: "SELECT * FROM products WHERE category='Fruits'". Of course you can use the query to load data sorted and to do other things which are allowed by SQL SELECT queries. To let NimbleKit know how data in a table view must be presented you need to have 6 columns in the database table, which are named exactly like following:
category - name of the category to which the row is related (for example "Fruits")
title - Row's main title (for example "Apple")
subtitle - Row's subtitle/description (for example "Nice green fruit")
image - the name of the image file which will be used in the left part of the row, can be the name from application bundle, documents folder or even an url to the image in the internet.
right_image - the image name if the small image to be displayed in the right part of the row, usually showing that the item is clickable, if empty then default OSʼs action image will be used. Can be the name from application bundle, documents folder or even an url to the image in the internet.
js - javascript code to be executed when the row is clicked. This is very useful as it will be loaded much faster then the code on the page, making application more responsive and page to load faster improving user experience.
If you want to apply filter or resort data in table view you can call bindToDatabase multiple times with different "optionalQuery"s.
commitDatabaseChanges()
flushes changes made to the table view (using setEditing) into the database. This method isn't must have, on application quit changes will be flushed anyway, however different situations may occur. This function works only if database has been bound to the table view.
Warning: if you quit iPhone simulator using CMD+Q then changes aren't written into the database, make sure you'r either using commitDatabaseChanges or quit simulator app using home button, this warning is only applies for iPhone/iPad simulator.
setRowHeight(height)
sets the row height for all rows in table.
height - row's height in pixels
insertRecords(records)
inserts array of records to the table.
records - array of records
Initialization of the tableview.
var tableView = new NKTableView();
tableView.init(0, 0, 320, 300, 'plain');
Fill the tableView with data and then show it.
tableView.insertCategoryNamed('Category 1');
tableView.insertCategoryNamed('Category 2');
tableView.show();
Insert two rows into "Category 1" without any left image and with default right arrow.
tableView.insertRecord('First row', 'With a subtitle', '', 0, '', "onRowClick()");
tableView.insertRecord('Second row (no subtitle)', '', '', 0, '', "onRowClick()");
Insert one row into "Category 2" with left image and default right arrow.
var image = new NKImage();
image.loadFromBundle('myImage.png');
tableView.insertRecord('Third row', 'nice image huh?!', image.id, 1, '', "onRowClick()");
See the example or main page source code for a more detailed implementation.