Developers Guide: GUI

When developing ­­­new features please follow the standards as listed below:

Tables

Tables Types

• List Tables
• Component Tables
  

­

List Tables

­Usage

List tables typically showing a list of records.

Classes used & Sample Code

­a) table_list_page

The "table_list_page" should be the default table type used to show records of principal business objects such as USERS, COMPANIES, PROJECTS, HELPDESK-ITEMS, etc.

<table class="table_list_page">
	<thead>
		<tr><td></td></tr>
	</thead>
	<tbody>
		<tr class="rowtitle"> <td>content</td> </tr>
	­        <tr class="rowodd">   <td>content</td> </tr>
		<tr class="roweven">  ­<td>content</td> </tr>
	</tbody>
	<tfoot>
		<tr><td></td></tr>
	</tfoot>
</table>
­­

b) table_component

Table "table_component" is used in ]po[ portlet components. These tables should be less "heavy weight" then the business object list_page tables.

<table class="table_component">
<tbody>
    <tr>
        <td class="rowtitle">content</td>
        <td class="rowtitle">content</td>
    </tr>
    <tr class="roweven">
          <td valign="top">content</td>
          <td valign="top">content</td>
      </tr>
    <tr class="rowodd">
          <td valign="top">content</td>
          <td valign="top">content</td>
      </tr>
</tbody>
</table>

c) table_list

In tables of type 'table_list' no hover effects are desired. Last row <tfoot> usually contains a button and ha no particular background. 

<table class="table_list">
	<thead>
		<tr><td></td></tr>
	</thead>
	<tbody>
		<tr class="roweven"> <td>content</td> </tr>
		<tr class="rowodd">  <td>content</td> </tr>
	</tbody>
	<tfoot>
		<tr><td></td></tr>
	</tfoot>
</table>

Component Tables

­Usage

Component Tables define the layout of ]po[ portlets 

Deprecated Tables

table_component_clean

Table "table_component_clean" is still used in some components where <tr> are generated with various classes.     

<table class="table_component_clean">
<tbody>
    <tr>
        <td class="rowtitle">content</td>
    </tr>
    <tr class="roweven">
          <td valign="top">content</td>
      </tr>
    <tr class="rowodd">
          <td>content</td>
    </tr>
    <tr class="form-element">
          <td>content</td>
    </tr>
</tbody>
</table>

General rules using tables

•  ­Titels should never be part of a table, the first row is always a table header containing the columns

  ­

­­Deprecated Elements

• <tr class="rowwhite"> ­
• <tr class="rowplain">