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">  
  Contact Us
  Project Open Business Solutions S.L.

Calle Aprestadora 19, 12o-2a

08902 Hospitalet de Llobregat (Barcelona)

Spain

 Tel Europe: +34 609 953 751
 Tel US: +1 415 200 2465
 Mail: info@project-open.com