Revision as of 13:09, 14 January 2011

Render file tree table inside an html DIV

Steps to render a file tree table inside a given div in a html shown as below. A combination of Orion/Client API are used in the section.

• Services are used to interact with the server to load the workspaces , get children contents , etc.
• A tree model is used to provide in-memory model in the browser to support tree rendering.
• The renderer is to render all the table row elements
• The Table tree is the controller of user actions.

Register services

1. Define a DIV with id in the html where the tree table wil be rendered.
2. In the html loading js file , create the Service Registry.
3. Register the FileService in the registry. This service loads all the workspaces as the initial top level nodes in the table tree. It also provides children content on any node of the tree.
4. Register the CommandService in the registry. This service manages all the commands used for user actions.
5. Create Command and add commands to CommandService.

var registry = new eclipse.Registry(); 
registry.registerLocalService("IFileService", "FileService", new eclipse.FileService());
var commandService = new eclipse.CommandService(registry);
registry.registerLocalService("ICommandService", "CommandService", commandService);
var favoriteCommand = new eclipse.Command();
commandService.addCommand(favoriteCommand, "object");

Model Creation

1. Create an instance of the model class to provide the tree model , the model has to implement the following functions required by TableTree.
   • getRoot(onItem).
   • getChildren(parentItem, onComplete) . It uses the FileService.getChildren to provide childen items.
   • getId(item)

Renderer Creation

1. Create an instance of the renderer class to render table rows (refer to Table Tree)
   • Implement check box rendering
   • Implement table-row based actions
   • Implement folder toggles by calling Table Tree's other API(TODO: Define other APIs)

TableTree Creation

1. Create an instance of Table Tree
2. In the onLoad of the html , use a wrapper class instance to wrap the Table Tree and initialize the table.

Render a file selection and auto expand

Describes how to render a file selection from persisted preference.