Customizing the Interface

The OBO-Edit Layout Editor

OBO-Edit uses xml documents called screen layouts to determine how the main gui is set up. To edit the gui layout, open The Configuration Manager Plugin and click the "Display Layout" tab:

The text box in the center contains the XML code that controls the appearance of the main display. Enter your own XML code here to change the display layout.

The "Import XML File..." button allows an XML layout file to be loaded from the disk into this window. When the button is pressed, a file browser window will appear. Select a file from the browser to load it.

The "Export XML File..." button saves the current contents of the layout panel to an XML file on disk. When the button is pressed, a file browser window will appear. Select a location on the disk and type in a new filename to save the file.

Screen Layout XML Syntax

Screen layouts conform to the standard rules for well-formed xml documents: tags may be nested, tags must be closed, attribute values must be enclosed in quotes, etc.

A screen layout is simply a description of a single component (although that component may contain subcomponents, as we'll see below). So the following is a perfectly acceptable screen layout:

Layout code Resulting gui
<component id="DAG"/>

Of course, that's not very useful, because we haven't included a text editor panel, so there's no way to edit the term text or see term details. Paste this text to replace all the text currently in the Display layout window to see what happens. We'll need to add more tags:

The component tag

components

This is the tag used to specify a OBO-Edit component for the GUI. In the example above, it is the "DAG" in "<component id="DAG"/>". The value of this tag's ID attribute is used to determine which component to show. This tag has different attributes that can be set depending on which ID value you use. To try this out you can paste just the text "<component id="DAG"/>" into the display layout section of your configuration and then replace the text "DAG" with each of the ID values listed in the table below.
ID Value Attributes
DAG

Creates a ontology editor panel with scroll bars:

autoscroll - Can have the value "true" or "false". Determines whether a DAG component will automatically scroll to show the current selection. The default value is false.
showTypes - Can have the value "true" or "false". Determines whether the "Types" graph will appear in this component. The default value is true.
showTerms - Can have the value "true" or "false". Determines whether the ontology terms that are not relationship types will appear in this component. The default value is true.
showObsoletes - Can have the value "true" or "false". Determines whether obsolete terms will be shown in this component. The default value is true.
filter - May contain the name of a saved filter (see Filtering). If this tag is defined with a valid filter name, the filter will automatically be applied to this dag view.
renderer - May contain the name of a saved filter (see Rendering). If this tag is defined with a valid filter name, the renderer will automatically be added to this dag view.
title - Can have any value. If a title is specified, it will appear above the component.
FIND

Creates a find/filter control :

none
TEXTEDIT

Creates a text editor control:

Note that if multiple terms are selected, a list of currently selected terms will appear on the left side of the text editor. Therefore, it is a good idea to make this control a little wider than you need using the width attribute .

none
plugin:classname

Embeds the plugin classname in the gui. For example, plugin:org.bdgp.apps.dagedit.plugin.DAGView creates the following:

Any plugin may be embedded in the main gui. The classnames of the plugins that come with OBO-Edit are:

OBO-Edit Configuration Manager - org.bdgp.apps.dagedit.plugin.ConfigurationPlugin

Category Manager Plugin - org.bdgp.apps.dagedit.plugin.CategoryManagerPlugin

Extended Info Plugin - org.bdgp.apps.dagedit.plugin.ExtendedInfoPlugin

DAG Viewer - org.bdgp.apps.dagedit.plugin.DAGView

History Plugin - org.bdgp.apps.dagedit.plugin.HistoryPlugin

Term Change Tracker Plugin - org.bdgp.apps.dagedit.plugin.TermChangeTrackerPlugin

CVS Plugin - org.bdgp.apps.dagedit.plugin.CVSPlugin

Graph Viewer Plugin - org.bdgp.apps.dagedit.plugin.GraphPlugin

To determine the classnames for external plugins, please consult the documentation for the specific plugin collection.

none

Most component tags may be used only once in a layout. If you attempt to use a typical component multiple times, it will appear in one of the specified locations, and will appear in all other locations as a blank component of size 0x0.

The one exception is the "DAG" component. It can appear in the layout as many times as you'd like.

Common tag attributes

There are some attributes that can be specified for any tag...

Attributes:
width Specifies the "preferred width" of this component in pixels. OBO-Edit will do its best to create the component using this width, but the component may get another width depending on how the rest of the screen is laid out, and the containers in which this component is enclosed.
height Specifies the "preferred height" of this component in pixels. OBO-Edit will do its best to create the component using this height, but the component may get another height depending on how the rest of the screen is laid out, and the containers in which this component is enclosed.
font Sets the font of the component. Note that because of the complicated use of fonts in OBO-Edit, most OBO-Edit components ignore this tag.
background Sets the background color of the component, either as a color name or as an HTML color specification. Many OBO-Edit components ignore this tag.
foreground Sets the foreground color of the component, either as a color name or as an HTML color specification. Many OBO-Edit components ignore this tag.



Other screen layout tags

The remaining tags are used to arrange the components on the screen.

Divider

This tag creates a split pane; that is, a movable divider between two components. Both subtags must be specified.

Subtags:
first

     <first>
        your tag      </first>

Specifies the contents to the left of or above the divider, depending on the divider orientation (see below).
second

     <second>
        your tag      </second>

Specifies the contents to the right of or below the divider, depending on the divider orientation (see below).

Attributes:
orientation Specifies whether this is a horizontal divider (with components to the left and right), or a vertical divider (with components above and below). Allowable values are "HORZ" and "VERT". The default value is "HORZ".
dividerSize Specifies the size of the divider bar, in pixels. The default value is "5".



Example

Layout code Resulting gui
<divider orientation="HORZ" dividerSize="15" >
    <first>
        <component id="DAG"/>
    </first>
    <second>
        <component id="FIND"/>
    </second>
</divider>

Box

This tag creates a panel containing a stack of multiple components. At least one subcomponent must be specified.

Subtags:
components The box tag should simply contain a list of components in the order they will appear.

Attributes:
orientation Specifies whether this is a horizontal stack of components (with components laid out from left and right), or a vertical stack of components (with components laid out from top to bottom). Allowable values are "HORZ" and "VERT". The default value is "HORZ".


Example

Layout code Resulting gui
<box orientation="VERT" >
   <component id="DAG" showObsoletes="false" showTypes="false" />
   <component id="DAG" showObsoletes="false" showTerms="false" />
   <component id="DAG" showTerms="false" showTypes="false" />
</box>

Panel

This tag creates a panel containing components located at any of the following positions: north, south, east, west, and center. At least one position subtag must be specified.

Subtags:
north

     <north>
        your tag      </north>

Specifies a component at the north position (the top of the panel). The component will span the entire width of the panel, but will use its preferred height.
south

     <south>
        your tag      </south>

Specifies a component at the south position (the bottom of the panel). The component will span the entire width of the panel, but will use its preferred height.
east

     <east>
        your tag      </east>

Specifies a component at the east position (the right of the panel). The component will span the distance between the north component and the south component. If the north or south component is not specified, the component will span to the top or bottom of the panel, respectively. The component will use its preferred width.
west

     <west>
        your tag      </west>

Specifies a component at the west position (the left of the panel). The component will span the distance between the north component and the south component. If the north or south component is not specified, the component will span to the top or bottom of the panel, respectively. The component will use its preferred width.
center

     <west>
        your tag      </west>

Specifies a component at the center position. The component will ignore its preferred width and height to fill all the space in the panel that is not occupied by a north, south, east or west component.


Example

Layout code Resulting gui
<panel>
   <south>
      <component id="FIND" />
   </south>
   <east>
      <component id="TEXTEDIT" />
   </east>
   <center>
      <component id="DAG" />
   </center>
</panel>

Tabs

This tag creates a tabbed pane; a component that contains several other sub-components which are only visible one at a time. A list of buttons (ie tabs) at the top of the tabbed pane allow a user to decide which component is visible. A tabbed pane may contain any number of tabs.

Subtags:
tab

<tab name="tab name">
   your tag
</tab>

Creates a tab in this pane with the specified name, containing the specified component. Any number of tab tags may be specified.
Example

Layout code Resulting gui
<tabs>
   <tab name="Search and Filter">
      <component id="FIND" width="200" />
   </tab>
   <tab name="Parent Plugin">
      <component id="plugin:org.bdgp.apps.dagedit.plugin.ParentPlugin"/>
   </tab>
</tabs>

Scroller

This tag puts scrollbars around a component. Note that if a component already has scrollbars, this tag will add an additional set of scrollbars around those, which will make the gui very difficult to use. A single subcomponent must be specified.

Subtags:
component The scroller tag should contain a single component.

Attributes:
horz Specifies the behavior of the horizontal scrollbar. Allowable values are:

"NEVER" - Never show a horizontal scrollbar. The gui will try to squeeze in the component no matter how wide it is.
"AS_NEEDED" - Only show a horizontal scrollbar if the component is too wide to display comfortably.
"ALWAYS" - Always show a horizontal scrollbar, even if the component is narrow enough that it doesn't require one.

The default value is "AS_NEEDED".

vert Specifies the behavior of the vertical scrollbar. Allowable values are:

"NEVER" - Never show a vertical scrollbar. The gui will try to squeeze in the component no matter how tall it is.
"AS_NEEDED" - Only show a vertical scrollbar if the component is too tall to display comfortably.
"ALWAYS" - Always show a vertical scrollbar, even if the component is short enough that it doesn't require one.

The default value is "AS_NEEDED".



Example

Layout code Resulting gui
<scroller width="200">
   <component id="TEXTEDIT" />
</scroller>

GUI Creation Tips:

More Examples:

Jen Clark's Layout

Layout code Resulting gui
<divider orientation="HORZ">
    <first>
        <component id="DAG" width="300" />
    </first>
    <second>
        <panel>
            <center>
                <tabs>
                    <tab name="Search and Filter">
                        <component id="FIND" width="200" />
                    </tab>
                    <tab name="Edit">
                        <box orientation="HORZ">
                            <component id="TEXTEDIT" width="320" />
                            <component id="plugin:org.geneontology.oboedit.plugin.DbxrefPlugin" />
                        </box>
                    </tab>
                    <tab name="DAGView">
                        <component id="plugin:org.geneontology.oboedit.plugin.DAGView" />
                    </tab>
                    <tab name="GraphViewer">
                        <component id="plugin:org.geneontology.oboedit.plugin.GraphPlugin" />
                    </tab>              
                </tabs>
            </center>
        </panel>
    </second>
</divider>
Image 1
Image 2
Image 3
Image 4