Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

added a tutorial on table_view

  • Loading branch information...
commit 2f8bfae0780518fd9ba446b4c33e3e97fbaf0cfe 1 parent 09cde16
Sophie Zhou authored
Showing with 94 additions and 0 deletions.
  1. +1 −0  _layouts/default.html
  2. +93 −0 table_view.md
View
1  _layouts/default.html
@@ -24,6 +24,7 @@
<li><a href="view_delegateproperties.html">Delegate Properties</a></li>
<li><a href="view_layouts.html">Layout Views</a></li>
<li><a href="view_table.html">Table</a></li>
+ <li><a href="table_view.html">Table</a></li>
</ul>
</li>
{% endif %}
View
93 table_view.md
@@ -0,0 +1,93 @@
+---
+title: Table View
+layout: default
+section: view
+---
+
+<h1>Table View</h1>
+
+The Table view is possibly the most complex view in Bolt. It is a highly performant infinite scrolling widget which utilises progressive rendering and CSS transforms to scroll quickly through any amount of data.
+To create a table view, create a js file with these contents:
+
+{% highlight javascript %}
+var ExampleTable = require('javelin/core').createClass({
+ extend: View,
+ declare: function(options) {
+ return {
+ childViews: [
+ view: TableView,
+ ref:'table'
+ ]
+ }
+ },
+
+ //REQUIRED: total number of sections in a table
+ numberOfSections: function() {
+ return 0;
+ },
+
+ //REQUIRED: number of rows in a section
+ numberOfRowsInSection: function(section) {
+ return 0;
+ },
+
+ //REQUIRED: return a cell given the row and section
+ cellForRowInSection: function(row, section) {
+ return {};
+ },
+
+ // view for a given section
+ sectionHeaderAtIndex : function(row) {
+ return {};
+ }
+
+ // height for the requested section
+ heightForSectionHeader: function(section) {
+ return 0;
+ },
+
+ // REQUIRED: height of a requested row
+ heightForRowInSection: function(row, section) {
+ return 0;
+ },
+});
+{% endhighlight %}
+
+After filling in the above required functions, you can then create an instance of it:
+{% highlight javascript %}
+var exampleTable = new ExampleTable();
+{% endhighlight %}
+
+or use it as a view inside of another view:
+
+{% highlight javascript %}
+var AnotherView = require('javelin/core').createClass({
+ extend: View,
+
+ declare: function(options) {
+ return {
+ childViews: [
+ view: ExampleTable,
+ ]
+ }
+ }
+});
+{% endhighlight %}
+
+Optimizations
+If your TableView is not performing well, there are a few thing that you can do optimize / enhance the performance:
+1. Disable refreshing while scrolling. To do this, you can include two more methods *didScrollStart* and *didScrollEnd* after all the other required functions. For example, you can have a *ready* boolean that gets toggled on and off. Before refreshing, always perform a check to make sure it is *ready*.
+2. If the TableView is constantly refreshing, try putting a timer on it such that it only refreshes (in batches) once every second or so.
+3. If all of your cells are the same height, pass in a *fixedRowHeight* and leave out the heightForRowInSection method:
+
+{% highlight javascript %}
+ declare: function(options) {
+ return {
+ childViews: [
+ view: TableView,
+ fixedRowHeight: 40, /* this is in pixels */
+ ref:'table'
+ ]
+ }
+ }
+{% endhighlight %}

0 comments on commit 2f8bfae

Please sign in to comment.
Something went wrong with that request. Please try again.