RikuloRikulo

Build with DOM Elements

View and DOM

A View is made up of one or multiple DOM elements. In other words, a view utilizes HTML 5 and CSS 3 to display the content to meet the requirement. In additions, the view interacts with the user by listening the DOM event sent by the DOM elements.

Though rarely, you can draw the content in the fully customized way with CanvasElement too.

The structure of the associated DOM elements are usually simple, such View, TextView and ScrollView, while some can be complex, such as Switch.

It all depends on the requirement and whether HTML + CSS matches what you need. In additions, the top element can be found by use of View.node.

Here is an example.

Scroll view and associated DOM

As shown, ScrollView is made of two DIV elements, and the DOM elements of the child views are placed in the inner DIV element. On the other hand, TextBox is made of one INPUT element, and Button made of one BUTTON element.

To interact with the user, ScrollView will listen the touch and mouse event for handling the scrolling.

ScrollView doesn't listen the DOM event directly. Rather, it leverages the gesture called Scroller for easy implementation.

The view is a thin layer on top of View.node. Many of View API is a proxy of the underlying View.node, such as View.id and View.style. Here is a list of differences.

  • Two CSS classes are always assigned: v- and v-clsnm (where clsnm is the view's class name View.className).
    • The v- CSS class has two important CSS rules that you shall not change: box-sizing: border-box; and position: absolute;
    • The v-clsnm is used to customize the look of a given type of views.
  • The position and dimension of a view (i.e., left, top, with and height) can only be measured in pixels. It doesn't support em and other units of measurement.

Build a View with DOM Elements

  1. Extend from View or Its Subclasses
  2. Render DOM Elements
  3. Handle DOM Events
  4. An Example
  5. Advanced Topics