HT for Web Form Manual

Index

Overview

The HT for Web provides form plug-ins that contain components such as drop-down menus, sliders and buttons, and form panels with component layout features. html also provides part of a similar component, however, there are many differences between the rendering of different browser platforms and even interactive effects, and some component styles cannot be customized, and the components provided by HT provide consistent style and interaction and support rich custom extensibility capabilities.

Using the form plug-in requires the introduction of the ht.js core library and the introduction of a ht-form.js form plug-in library.

FormPane

The HT for Web provides a form panel component that features layout components that can be added to the table single-sided component for normal html elements or any view component built into HT. The form panel component is designed to add a row, each line adds any defined component, and by specifying the width information for each component, and the row height information for each row, to achieve the overall layout of all components, for a more complex interface can be implemented through nested form panels.

Attribute Function

ht.widget.FormPane is a form panel component class whose main configurable properties and functions are as follows:

Lay outing Parameter

Absolute and relative values:

For example, [80, 0.1, 60, 0.2, '20+0.3'] represents:

Component Element

There are three types of component elements:

Native objects can be added in reference to the www.hightopo.com hyperlink at the bottom of the control panel in Easing Instance

var href = document.createElement('a');
href.setAttribute('href', 'http://www.hightopo.com');     
href.innerHTML = 'http://www.hightopo.com';            
href.style.font = formPane.getLabelFont();            
href.style.lineHeight = formPane.getRowHeight() + 'px';
href.style.textAlign = 'right';
formPane.addRow([href], [0.1]);

For added elements, if a string string is displayed as a label text, and if you need to define additional parameters for the text, you can use the json format

{
    element: 'Hightopo', // Text content
    color: 'red' // Text color
    font: 'bold 24px arial', // Text font
    align: 'left', // Text align, optional value: left|center|right
    vAlign: 'top', // Text vertical align, optional value: top|middle|bottom
}

The json format of the element supports the following predefined properties:

The following predefined properties will automatically build the view component according to json information and be stored on the element's element attribute while the element attribute is undefined, which is also true of defining ht.widget.Toolbar element by using json information automatically build the element view component:

Example: 

{
    id: '679',
    button: {
        label: 'Hightopo Company',
        icon: 'ht_logo',
        toolTip: 'eric@hightopo.com',            
        onClicked: function(){
            console.log('button is clicked.');
        }
    }
}

The example json format defines an element of id for 679, and HT automatically constructs a button object for the ht.widget.Button and passes button.setLabel('Hightopo Company'), button.setIcon('Ht_logo'), button.setToolTip('Eric@hightopo.com') and button.onClicked = function () {console.log('button is clicked');} these steps set to initialize the button object, and then add an element attribute to the json format, whose value is the button object.

Button

The ht.widget.Button is the buttons class whose main configurable properties and functions are as follows:

Click Button

ht.widget.RadioButton is a radio button class whose main configurable properties and functions are as follows:

Check Box

ht.widget.CheckBox is a check box class whose main configurable properties and functions are as follows:

Text Field

ht.widget.TextField is a text field class whose main configurable properties and functions are as follows:

Text Area

ht.widget.TextArea is a text area class whose main configurable properties and functions are as follows:

Image

ht.widget.Image is a image class whose main configurable properties and functions are as follows:

Slider

ht.widget.Slider is a slider class whose main configurable properties and functions are as follows:

Combo Box

ht.widget.ComboBox is a combo box class whose main configurable properties and functions are as follows:

Multi-Combo Box

ht.widget.MultiComboBox is a multi-combo box class whose main configurable properties and functions are as follows:

Template combo box and normal combo box are similar, however, it is a developer customization, so the drop-down box can be placed in any component (HT component or normal DOM element), to customize the content of the drop-down box, you need to customize a class inheritance ht.widget.BaseDropDownTemplate and overloads several methods:

Color Picker

ht.widget.ColorPicker is the color selection box, inherited from MultiComboBox, which adds two additional attributes, except for the property and function inherited from MultiComboBox:

Welcome to contact us service@hightopo.com