TIBCO EBX®
Documentation > Developer Guide > User interface
Navigation modeDocumentation > Developer Guide > User interface

Development recommendations

HTML

It is recommended to minimize the inclusion of specific HTML styles and tags to allow the default styles of TIBCO EBX® to apply to custom interfaces. The approach of the API is to automatically apply a standardized style to all elements on HTML pages, while simplifying the implementation process for the developer.

XHTML

EBX® is a Rich Internet Application developed in XHTML 1.0 Transitional. It means that the structure of the HTML is strict XML file and that all tags must be closed, including "br" tags. This structure allows for greater control over CSS rules, with fewer differences in browser rendering.

iFrames

Using iFrame is allowed in EBX®, especially in collaboration with a URL of a UIHttpManagerComponent. For technical reasons, it is advised to set the src attribute of an iFrame using JavaScript only. In this way, the iFrame will be loaded once the page is fully rendered and when all the built-in HTML components are ready.

Example

The following example, developed from any UIComponentWriter, uses a UIHttpManagerComponent to build the URL of an iFrame, and set it in the right way:

// using iFrame in the current page requires a sub session component
UIHttpManagerComponent managerComponent = writer.createWebComponentForSubSession();

// [...] managerComponent configuration

String iFrameURL = managerComponent.getURIWithParameters();

String iFrameId = "mySweetIFrame";

// place the iFrame in the page, with an empty src attribute
writer.add("<iframe id=\"").add(iFrameId).add("\" src=\"\" >").add("</iframe>");

// launch the iFrame from JavaScript
writer.addJS("document.getElementById(\"").addJS(iFrameId).addJS("\").src = \"").addJS(iFrameURL).addJS("\";");

CSS

Public CSS classes

The constant catalog UICSSClasses offers the main CSS classes used in the software to style the components. These CSS classes ensure a proper long-term integration into the software, because they follow the background colors, borders, customizable text in the administration; the floating margins and paddings fluctuate according to the variable density; to the style of the icons, etc.

See also

Advanced CSS

EBX® allows to integrate to all its pages one or more external Cascading Style Sheet. These external CSS, considered as resources, need to be declared in the Module registration.

In order to ensure the proper functioning of your CSS rules and properties without altering the software, the following recommendations should be respected. Failure to respect these rules could lead to:

Reserved prefixes for CSS identifiers and class names

The following prefixes should not be used to create CSS #ids and .classes.

ebx_

Internal built-in

yui

Yahoo User Interface global

ygtv

Yahoo User Interface tree view

layout-doc

Yahoo User Interface layout

cke_

CK editor (used by HTML editor widget)

fa

Font Awesome (icons used by perspectives and toolbars)

CSS classes used internally by EBX®

The following CSS classes should never be included in a ruleset that has no contextual selector.

If you do not prefix your CSS selector using one of the CSS classes below, it will cause conflicts and corrupt the UI of EBX®.

selected

YUI selected tree node

hd

YUI floating pane header

bd

YUI floating pane body

ft

YUI floating pane footer

container-close

YUI inner popup close button

underlay

YUI inner popup shadow

hastitle

YUI menu group with title

topscrollbar

YUI menu top scroll zone

bottomscrollbar

YUI menu bottom scroll zone

withtitle

YUI calendar

link-close

YUI calendar close button

collapse

YUI layout closed pane indicator

pull-right

Font Awesome parameter

pull-left

Font Awesome parameter

Examples to avoid conflicts

Don't

.selected {
	background-color: red;
}

Do

#myCustomComponent li.selected {
	background-color: red;
}

JavaScript

Public JS functions

The catalog of JavaScript functions JavaScriptCatalog offers a list of functions to use directly (through copy-paste) in the JS files.

JavaScript call during page generation in Java

When generating the HTML of a Java component, it is possible to add specific JavaScript code with the API UIJavaScriptWriter.

This JavaScript is executed once the whole page is loaded. It is possible to instantly manage the HTML elements written with UIBodyWriter.add. Setting on-load functions (such as window.onload = myFunctionToCallOnload;) is not supported because the execution context comes after the on-load event.

Advanced JavaScript

EBX® allows to include one or more external JavaScript files. These external JavaScript files, considered as resources, need to be declared in the Module registration. For performance reasons, it is recommended to include the JavaScript resource only when necessary (in a User service or a specific form, for example). The API UIDependencyRegisterer allows a developer to specify the conditions for which the JavaScript resources will be integrated into a given page according to its context.

In order to ensure the proper functioning of your JavaScript resources without altering the software, the following recommendations should be respected. Failure to respect them could lead to:

Reserved JS prefixes

The following prefixes are reserved and should not be used to create variables, functions, methods, classes, etc.

ebx_

Internal built-in API

EBX_

Internal built-in API

YAHOO

Yahoo User Interface API

Documentation > Developer Guide > User interface