Adding your menu item on UI

Aug,6 2004.
Yutaka Yasuda, Cobalt Users Group.
(yasuda@cobaltqube.org)
Thanks John for translation help, again!

Abstract

The administration UI will be shown as HTML which is generated by Sausalito automatically from XML data files. (Sausalito is the configuration engine software of Cobalt.) You can add new menu items just by adding XML data files under the Sausalito directory.

Let me show how to do that.


Step by step

Starting with the end result. Please look at the menu bar on the left side of the following image. You can see "HELLO" in the hierarchical menu. (Ref. 2.)

This is the result when I placed only 2 XML files (see below) under /usr/sausalito/ui/menu/ directory. You can place them under the directory, or you can make a subdirectory if this is more convenient. 
---- hello.xml
<item id="base_hello" 
   label="HELLO" 
   description="Hello menu is effective for your peace of mind."
   requiresChildren="1">
   <parent id="base_sysmanage" order="90"/>
</item>

---- hello_world.xml
<item id="base_helloWorld"
   label="Say Hello!"
   description="Say Hello to the bird."
   url="/hello/hello.html" >
   <parent id="base_hello" order="10"/>
</item>
hello.xml will makes "HELLO" item on the menu bar of the left side, hello_world.xml makes "Say Hello!" subitem inside "HELLO". By Clicking "Say Hello!" item, hello.html will be shown inside the main frame of the screen.

The top directory of HTML files is /usr/sausalito/ui/web/ so by includinging, url="/hello/hello.html" in the description means you have to make "hello" subdirectory under /usr/sausalito/ui/web/ and put hello.html in there.
For this menu adding excercise, I made very simple HTML file as below; 
---- hello.html
<HTML>
<BODY>
HO HO HO!<BR>
<IMG SRC="tori.jpg">
</BODY>
</HTML>
Using the hierarchy of item ids and parent ids which is described in XML files.In accordance with these parameters, the following process will be done automa ticaly.
  • A hierarchy of items will be displayed as a hirarchy structure of menus.
  • The value of the "label" parameter will be the name of that item.
  • The string of the "description" will be shown on the left-bottom area of the UI as a brief help message.
  • By clicking a menu item, a HTML file will be shown. The place of the file should be specified by "url" parameter.
Notice that the item id and parent id parameters have the same structure of the HTML frame structure. In this case, it is "base_sysmanage" >> "base_hello" >> "base_helloWorld".
"base_sysmanage" is the left side menu bar, "order" parameter means the position of the item.

In this example, the value is 90 causes it to appear on the bottom of the menu items. It will rise up when set to a smaller number such as 33.

You should not hard coding "label" and "description" parameters as shown in the example you should prefferably use "msgid" with .po style message files on the system. By doing so, your application will be internationalized automatically with single XML/HTML data file. Refer to Sauasalito Developers Guide (see reference below).

This example is very simple, it just shows hello.html. But of course you can replace it with the configuration menu HTML of your product.

Now add your own menus on your box!

The list of Reference documents

  1. Sausalito Developer's Guide
    ftp://ftp-eng.cobalt.com/pub/developer/TechNotes/SSDK.pdf
  2. Let us play with Sausalito, 2002, Masahiro Watanabe (In Japanese)
    http://bluequartz.org/docs/sausalito2.pdf
  3. Comming up "BlueQuartz", is the management system of Cobalt.
    Linux Magazine 2004.5 pp.74-79 (In Japanese)

[BACK]