Development recommendations
Related information
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:
-
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
|