Difference between revisions of "WebProtegeLayoutConfig"

From Protege Wiki

Jump to: navigation, search
Line 73: Line 73:
  
 
A tab is split into ''columns''. The ''Classes Tab'' is split into two columns: the class tree column spans 33% of the layout, and the other column spans 66%.
 
A tab is split into ''columns''. The ''Classes Tab'' is split into two columns: the class tree column spans 33% of the layout, and the other column spans 66%.
 +
 +
Each tab should have a '''controlling portlet'''. The controlling portlet sets the selection for the rest of the portlets in a tab. For example, in the ''Classes Tab'', the controlling portlet is the class tree portlet. This means that whenever the user selects a class in the class tree, that selection is transmitted to the other portlets in the tab to update their display.
 +
 +
The template of a project configuration XML file is:
 +
 +
<pre>
 +
<project>
 +
<tabs>
 +
  <tab>
 +
    <name>my.tab.class.name</name>
 +
    <label>My tab label</label>
 +
    <columns>
 +
      <column>
 +
        <portlets>
 +
          <portlet>
 +
            <name>my.portlet.class.name</name>
 +
            ... (other portlet properties)
 +
          </portlet>
 +
            .... (other portlets)       
 +
        </portlets>
 +
      </column>
 +
      ... (other columns)
 +
    </columns>
 +
    <controllingPortlet reference="../columns/column/portlets/portlet"/>
 +
  </tab>
 +
  ... (other tabs)
 +
  </tabs> 
 +
</project>
 +
</pre>
 +
 +
If you want to create a custom configuration.xml file, it is a good idea to start from existing one (e.g. the default configuration in the WebProtege distribution) and adapt it.

Revision as of 15:27, June 15, 2010

WebProtege - Layout configuration


Page still under construction!


Contents


The WebProtege layout

The layout of WebProtege is configurable, and it can be easily adapted to different project requirements. The user interface layout is specified declaratively in a XML file. The layout can also be made specific for a project, or specific to a project and user.

The WebProtege user interface layout is composed of tabs, e.g. Classes Tab, Individuals Tab, Change History Tab, Notes and Discussions tab, etc.

Each tab can contain several portlets that are grouped in a column layout and make up the tab layout. For example, the Classes Tab shows on the first column a Class Tree portlet, and in the second column shows a properties portlet, a restriction portlet and a notes portlet.


Webprotege layout.png


Adding new tabs and portlets from the user interface

To add a predefined tab in the user interface, use the Add tab menu in the ontology toolbar (top right corner). To add portlets to a tab, use the menu Add content to this tab menu in the toolbar.

Note. It is possible to store the configuration by clicking on a Save Layout button, but in the current WebProtege release it is disabled. We will restore the functionality in one of the next WebProtege releases.


Pre-configuring the WebProtege layout

The configuration of the WebProtege layout is controlled in a XML file. The default configuration xml file is located in war/projectConfigurations/configuration.xml. The XML file contains spells out the layout of a project in terms of tabs and portlets. The example for the layout of the configuration of the Classes Tab is shown below:

<tab>
    <name>edu.stanford.bmir.protege.web.client.ui.ontology.classes.ClassesTab</name>
    <label>Classes</label>
    <columns>
      <column>      
        <width>0.33</width>
        <portlets>
          <portlet>
            <name>edu.stanford.bmir.protege.web.client.ui.ontology.classes.ClassTreePortlet</name>
            <height>600</height>
            <width>200</width>
          </portlet>
        </portlets>
      </column>
      <column>
        <width>0.66</width>
        <portlets>
          <portlet>
            <name>edu.stanford.bmir.protege.web.client.ui.ontology.notes.NotesPortlet</name>
            <height>0</height>
            <width>0</width>
          </portlet>
          <portlet>
            <name>edu.stanford.bmir.protege.web.client.ui.ontology.restrictions.RestrictionsPortlet</name>
            <height>0</height>
            <width>0</width>
          </portlet>
          <portlet>
            <name>edu.stanford.bmir.protege.web.client.ui.ontology.classes.AllPropertiesPortlet</name>
            <height>200</height>
            <width>0</width>
          </portlet>
        </portlets>
      </column>
    </columns>
    <controllingPortlet reference="../columns/column/portlets/portlet"/>
  </tab>


A tab is split into columns. The Classes Tab is split into two columns: the class tree column spans 33% of the layout, and the other column spans 66%.

Each tab should have a controlling portlet. The controlling portlet sets the selection for the rest of the portlets in a tab. For example, in the Classes Tab, the controlling portlet is the class tree portlet. This means that whenever the user selects a class in the class tree, that selection is transmitted to the other portlets in the tab to update their display.

The template of a project configuration XML file is:

<project>
<tabs>
  <tab>
    <name>my.tab.class.name</name>
    <label>My tab label</label>
    <columns>
      <column>
        <portlets>
          <portlet>
            <name>my.portlet.class.name</name>
             ... (other portlet properties)
          </portlet>
            .... (other portlets)        
        </portlets>
      </column>
       ... (other columns)
    </columns>
    <controllingPortlet reference="../columns/column/portlets/portlet"/>
  </tab>
   ... (other tabs)
  </tabs>  
</project>

If you want to create a custom configuration.xml file, it is a good idea to start from existing one (e.g. the default configuration in the WebProtege distribution) and adapt it.

Personal tools