If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.
You already know Dokkio is an AI-powered assistant to organize & manage your digital files & messages. Very soon, Dokkio will support Outlook as well as One Drive. Check it out today!

Basic TableView Tutorial

Page history last edited by Romain 13 years, 6 months ago

This tutorial assumes you have already installed and setup SproutCoure. If not, you can view the Hello World Tutorial.

Step 1: Create the base application

To begin we need to have a project with a model that will be represented in the TableView.

sc-init TableExample
cd table_example 
sc-gen model TableExample.User

We are going to be using the table framework bundled with SproutCore so we need to tell the Buildfile to include it. If we look at the sproutcore framework we see a frameworks directory that contains the table framework. In order to tell the build process that we require the sproutcore framework's table framework, we need to edit the Buildfile and change:

config :all, :required => :sproutcore

to:

config :all, :required => [:sproutcore, 'sproutcore/table']

All done with the initial setup.

Step 2: Create the content

The basic content will be provided from fixtures so edit apps/table_example/fixtures/user.js and uncomment all the commented out items.

Next, to drive the content to the TableView we will use an ArrayController.

sc-gen controller TableExample.UsersController SC.ArrayController

Now that we have an ArrayController we can load it with our fixture data. Change apps/table_example/main.js from:

TableExample.getPath('mainPage.mainPane').append() ;

  
TableExample.getPath('mainPage.mainPane').append();
TableExample.usersController.set('content', TableExample.store.find(TableExample.User));

You can start the server and run the javascript command below to ensure the content is loaded:

TableExample.usersController.get("content").length()

Step 3: Create the TableView

Edit apps/table_example/resources/main_page.js and replace the mainPane with the following:

mainPane: SC.MainPane.design({
  childViews: 'tableView'.w(),

  tableView: SC.TableView.design({
    layout: { left: 15, right: 15, top: 15, bottom: 15 },
    backgroundColor: "white", 
    columns: [ 
      SC.TableColumn.create({ 
        key:   'firstName', 
        label: 'Name', 
        width: 50 
      }), 
      SC.TableColumn.create({ 
        key:   'lastName', 
        label: 'Last Name', 
        width: 90 
      }) 
    ],

    contentBinding:   'TableExample.usersController.arrangedObjects', 
    selectionBinding: 'TableExample.usersController.selection',
    sortedColumnBinding: 'TableExample.usersController.sortedColumn',
    selectOnMouseDown: YES,
    exampleView: SC.TableRowView,
    recordType: TableExample.User
  })
})

Reload the page and you should now have a working TableView.

Now that we have a basic working table, go to Basic TableView Tutorial - Sorting

Comments (21)

Hi,
Thanks very much for this tutorial, works great.
If you can explain what the Buildfile changes actually do it will be great also I hope there will be more tutorials about the table view like sorting, change column size, etc.
Thanks,
Ido.

Hi,
Thanks a lot for the tutorial but I have a little problem :
Why I don't have the table framework in my directories ?
Did I miss something when I install Sproutcore ?

Other question, why SC.TableView is not in the Reference Documentation ?

Thanks for the answers.

Nicolas

Hi Nicolas,

You should be able to find the table framework in sproutcore/frameworks/table if you installed from the git at http://github.com/sproutit/sproutcore.git.

If you installed from gem I do not think TableView is included.

Thanks, it work now !

I just have a WARM : ~ Could not find entry 'views/list' required in sproutcore/table:source/views/table.js but all is working anyway.

Do you know if the table view can be Resizable (like in the finder in list view) and where to find documentation about it ?

Could you tell me how you got this to work? I have the sproutcore folder that I got from the git repos but where do I put this? Do I just put the one Table framework in the app (and if so where) or do I put the entire sproutcore folder someplace?

Thanks!

You would put the git version of sproutcore in a directory called frameworks inside your project directory. It may not exist, so create it if needed. I've updated the tutorial to include this step.

Hey thanks for the reply. I am still getting this error in terminal - WARN ~ Could not find target sproutcore/table that is required by /table_example. And nothing loads except for the loading HTML then goes blank. Any thoughts?

Safari console throughs this error in the main_page.js after the tableView: SC.TableView.design({

TypeError: Result of expression 'SC.TableView' [underfined] is not an object.

Doh, sorry for the typo!

Mhmm, I've got the same error. Any hints?

This solved the problem for me http://gist.github.com/449423

Buildfile tweak and add sort delegate. This is on the sproutcore dist/master branch.

You can safely ignore those warnings.

I haven't looked at the resize capabilities, but the table view does resize well with the window. The layout provided in the tutorial allows for the table to fill most of the screen and resize with the window.

I was thinking about resize the column.

I followed the instructions. I created a framework folder.
I set up the relative path in the Buildfile.

I am getting this error message:

WARN ~ Could not find target ../frameworks/sproutcore/table that is required by /table_example

What I am noticing is that the frameworks stuff is not in the right location.
I created a ../frameworks folder as per the first instruction using git.

There is no table folder under frameworks sproutcore...

Instead it is under the following dir....

../frameworks/sproutcore/frameworks/table

I got some help from Charles Jolley.
Here is what worked for me.
First, I am working with the git pull now the Ruby Gem.
Use the source and build it.
I am also running on a MacBook.

Copy
/abbot/frameworks/sproutcore/frameworks

to your local project folder

Modify your build script:

config :all, :required => [:sproutcore, :table]

It should work now.

I got some help from Charles Jolley.
Here is what worked for me.
First, I am working with the git pull not the Ruby Gem.
Use the source and build it.
I am also running on a MacBook.

Copy
/abbot/frameworks/sproutcore/frameworks

to your local project folder

Modify your build script in the project folder:

config :all, :required => [:sproutcore, :table]

It should work now.

Hi Richard,

I followed your step and put the frameworks which has table folder in my project. And changed the build file as you stated. But I still get SC.TableView not defined. Is there step still misssing?

Thanks for your help.

Watt P.

Watt P.,

Do you have the latest source? Make sure you are not using the Ruby gem. It is not up to date. Grab the source and build.

Richard,

I am using the code from Abbot Git. I put the frameworks folder into my project and not frameworks/sproutcore/frameworks. I see the table folder in there. When I compile by sc-build I get the warning as well -

WARN ~ Could not find target ../frameworks/sproutcore/table that is required by /table_example

But from the comments above, they seem not to matter. However, I still get the SC.TableView not defined. Any idea if anything missing? Thanks.

I have a Git version from September 4, 2010 and the Buildfile line that I found works for me is:

config :all, :required => [:sproutcore, 'sproutcore/table']

I am still getting these warnings in the terminal:

WARN ~ Could not find entry 'views/list' required in sproutcore/table:source/views/table.js
WARN ~ Could not find entry 'views/list' required in sproutcore/table:source/views/table_row.js

but they do not seem to matter, as the table is rendered properly in the browser.

I updated this page. Git version is not needed anymore to have table (sproutcore 1.4+). I also added the attribute "sortedColumnBinding" (see sorting tutorial)

You don't have permission to comment on this page.

To join this workspace, request access.

Already have an account? Log in!

Loading…

Frequently Asked Questions (FAQ)
Field Notes (from other developers)
Issue Tracker (report bugs here!)
Where to Get Help
Additional Frameworks <- more widgets here

PROGRAMMING GUIDES:

TUTORIALS:

HACKING SPROUTCORE:

Loading…

Basic TableView Tutorial

Step 1: Create the base application

Step 2: Create the content

Step 3: Create the TableView

Basic TableView Tutorial

Page Tools

Insert links

Comments (21)

Ido Ran said

Nicolas BADIA said

JD Morgan said

Nicolas BADIA said

Jacob said

JD Morgan said

Jacob said

Jacob said

JD Morgan said

Andreas said

Lucas said

JD Morgan said

Nicolas BADIA said

Richard Hightower said

Richard Hightower said

Richard Hightower said

Watt P. said

Richard Hightower said

Watt P. said

Mike Covill said

Romain said

Join this workspace

Navigator

SideBar

Recent Activity