Orion/How Tos/Client How Tos

Render file tree table inside an html DIV

This scenario describes how to render all the existing workspaces from server side as a tree table inside a given div in a html. It renders all the workspaces as the top level rows and corresponding actions on each row. When user toggles on the row , it expand/collapse the children contents on that row. A combination of Orion/Client API are used in the scenario.

• 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 commandOptions = new Object();
commandOptions.id = "favoriteCommand";
var favoriteCommand = new eclipse.Command(commandOptions);
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 TableTree.toggle.

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.