HTML, CSS, and JavaScript

The ContentCreator gadget classes provide HTML and CSS which define and style the input component's structure and look in form views.

HTML

The server-side web gadget class provides HTML code. This HTML defines the structure of the input component's ContentCreator gadget which will be visible in form views.

The input component's HTML must only contain the gadget's top-level element and its child elements:

<div class="example_input_component">
    <input id="textbox_a" class="example_textbox" type="text" />
    <input id="textbox_b" class="example_textbox" type="text" />
</div>

In order to support multiple use of the same input component type in a single form view, FirstSpirit alters the ID attributes of elements provided in the gadget's HTML code so that each gadget based on the same HTML code has elements with unique IDs. This leads to the limitations which affect styling and interaction with the input component's HTML elements via CSS and JavaScript (see below).

CSS and JavaScript

The web gadget factory class provides references to CSS and JavaScript files in the form of URLs which may be either absolute or relative to the project-specific ContentCreator web application's base URL (following the format /fs5webedit_[project_id]).

Due to FirstSpirit's efforts to make IDs of HTML elements in gadgets unique (see above), the following limitations affect styling and interaction with the input component's HTML elements via CSS and JavaScript:

• CSS styling via ID selectors (#) is not possible; use class selectors (.) instead.
• The JavaScript function document.getElementById(id) cannot be used to select DOM elements which were defined by a gadget's HTML code. Instead, use the web host object provided to the JavaScript controller object - that web host object provides its own function getElementById(id) which is able to provide a single gadget's correct element based on the ID it was given in the original HTML.