Index

• Overview
• Basic
• Native Component
• Form Component

Overview

The HT for Web provides a toolbar component class ht.widget.Toolbar, the elements on the toolbar can be native html elements, as well as the components in the ht-form.js form plug-ins provided by the HT, and built-in buttons, radio buttons, check box, and so on.

The toolbar supports horizontal pan hand-grab panning, when the user clicks on the original or form plug-in components when the toolbar no longer interactive control, when the user clicks on the built-in components, if the subsequent horizontal moving toolbar will be translated hand grab effect operation, if you do not pan before you let go the toolbar will be a built-in component of the click operation, so if the toolbar elements need more translation capabilities, it is recommended to try to use the toolbar built-in components, on the one hand to help more space can be translated, on the other hand built-in components take up less memory resources to help system performance

Basic

Through toolbar = new ht.widget.Toolbar(items); initialize build a toolbar object, items argument is an array type, each object in the array generates a toolbar element (button, separator, native html, or form plug-in component ).

The main configurable properties and functions of the toolbar are as follows:

• getItems() and setItems(items) Gets and sets the array of toolbar elements
• itemGap Gets and sets the gap between elements by getItemGap and setItemGap
• separatorColor Gets and sets the separator bar color by getSeparatorColor and setSeparatorColor
• stickToRight Gets and sets whether the toolbar is aligned to the right by isStickToRight and setStickToRight, the default is false
• Through addItem(item, index) can insert the new element in the specified index position, inserts to the last while index is empty
• Through removeItem(item) to delete the specified element
• Through removeItemById(id) can delete the element of the specified number id, id value is defined by id attribute on the item element
• Through getItemById(id) can get the element of the specified number id, id value is defined by id attribute on item element
• By overloading drawItem(g, item, x, height) to customize the drawing of elements, the function returns the width value of the element
• By overloading getLabelFont(item) to customize the label fonts
• By overloading getLabelColor(item) to customize the label color
• By overloading getSelectBackground(item) to customize the background color
• redraw() function can be used to refresh drawing when the item element changes
• enableToolTip() and disableToolTip() Enable and disable the tooltip
• isDisabled() and setDisabled(true/false, iconURL) Gets and sets the entire component in an unusable state
• getValue(id) Gets the corresponding item element value according to id, and the shorthand function is v(id)

• setValue(id, value) According to the id setting corresponds to the item element value, the shorthand function is v(id, value)

• The item element format description in the array:

  • separator String that represents the separator bar
  • Object type
    • id The uniquely labeled of toolbar element, if the setting can be got by getItemById
    • label Label text of the toolbar element
    • icon Icon of the toolbar element
    • toolTip Tooltip of the toolbar element, notice that it need to combine Toolbar#enableToolTip()
    • type Type of the toolbar element, check represents the check box, toggle represents the switch button, radio represents the click button
    • selected Whether the toolbar element has been selected, optional value true or false, is valide in check box, switch button and click button
    • visible Whether the toolbar element visiable, the default is true, if false then hidden the element
    • unfocusable Whether the toolbar element is not able to get focus, while mouse slide will display a rectangular border in default, set to true to close this effect
    • disabled Whether the toolbar element is disabled and the default is false
    • groupId Grouping for toolbar element and the selection of elements within the same grouping automatically results in mutually exclusive effects
    • element Sets elements html or form component elements on this property
    • width Toolbar element width, often combined with element, toolbar built-in components do not need to set this value
    • action Function type, toolbar element is called when clicked

Native Component

The built-in components and the form components described in the following section can meet most of the application requirements. However, the sidebar still allows users to place native html components, such as the select pull-down component, or the html component that the user has encapsulated, and for all component toolbars will set the css position to absolute, set box-sizing to border-box absolute positioning.

Using the native element components in the configuration, only to set the item configuration attribute element on the HTML elements of the object, but also note that item action propertie will not work, if you want to listen to the event changes in the component, the user needs to add native listen events in html element.

Form Component

For Form Plug-in provides components that can also be set on the element attribute of item, and the toolbar also supports the mechanism of using json to describe the automatic building of element.

The following code builds the ht.widget.Slider组 component automatically by the keyword property slider, and automatically stores the component on the element attribute of item, and the HT interior constructs the component object with a non-parameter constructor, and then check is there have corresponding set function by json configuration information, and if a corresponding set function is assigned to the object, if no corresponding function is found, the property name and value are set onto the object.

var toolbar = new ht.widget.Toolbar([
    {
        id: 'step',
        label: 'Step',
        unfocusable: true,
        slider: {
            width: 120,
            step: 5,
            min: 100,
            max: 200,
            value: 125,
            thickness: 1,
            onValueChanged: function(){
                toolbar.getItemById('step').label = this.getValue();
                toolbar.redraw();
            },
            onEndValueChanged: function(){
                toolbar.getItemById('step').label = 'Step';
                toolbar.redraw();
            }        
        }
    }
]);

The following code constructs the slider object:

slider = new ht.widget.Slider();
item.element = slider;
slider.setWidth(120);
slider.setStep(5);
slider.setMin(100);
slider.setMax(200);
slider.setValue(125);
slider.setThickness(1);
slider.onValueChanged = function(){
    toolbar.getItemById('step').label = this.getValue();
    toolbar.redraw();
};
slider.onEndValueChanged: function(){
    toolbar.getItemById('step').label = 'Step';
    toolbar.redraw();
};    

The following are several component keyword mapping relationships that HT supports:

• textField -> ht.widget.TextField
• textArea -> ht.widget.TextArea
• button -> ht.widget.Button
• checkBox -> ht.widget.CheckBox
• image -> ht.widget.Image
• comboBox -> ht.widget.ComboBox
• slider -> ht.widget.Slider

function createToolbar(){
    var toolbar = new ht.widget.Toolbar([
        {
            id: 'step',
            label: 'Step',
            unfocusable: true,
            slider: {
                width: 120,
                step: 5,
                min: 100,
                max: 200,
                value: 125,
                thickness: 1,
                onValueChanged: function(){
                    toolbar.getItemById('step').label = this.getValue();
                    toolbar.redraw();
                },
                onEndValueChanged: function(){
                    toolbar.getItemById('step').label = 'Step';
                    toolbar.redraw();
                }        
            }
        },
        {        
            id: 'nation',
            label: 'Nation',                        
            unfocusable: true,
            comboBox: {
                width: 120,
                value: 'Sweden',
                values: ['Spain', 'Sweden', 'Switzerland'],
                icons: ['images/spain.png', 'images/sweden.png', 'images/switzerland.png']
            }
        },
        {
            id: 'text',
            unfocusable: true,
            textField: {
                width: 120,
                color: 'red'        
            }
        },
        'separator', 
        {
            label: 'Get Information',
            action: function(){                            
                alert('Slider:' + toolbar.v('step') + '\n' +
                    'Nation:' + toolbar.v('nation') + '\n' +
                    'Name:' + toolbar.v('text')
                );
            }
        }
    ]);
    toolbar.v('text', 'Eric Lin');
    return toolbar;                
}