Cloud Software Group, Inc. EBX®
Documentation > Developer Guide > User interface
Navigation mode Documentation > 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

- `UICSSUtils`

### 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:

- Improper functioning of the software, both aesthetically and functionally: risk of losing the display of some of the data and some input components may stop working.

- Improper functioning of your CSS rules and properties, since the native CSS rules will impact the CSS implementation.

#### 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:

- Improper functioning of the software: if functions or global variables of the software were to be erased, some input or display components (including the whole screen) may stop working.

- Improper functioning of your JavaScript instructions, since global variables or function names could be erased.

#### 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