HT for Web PropertyView Manual

Index

Overview

The HT for Web provides the property component class ht.widget.PropertyView, which displays the currently selected Data type object properties in the DataModel data container, which supports grouping, sorting, and filtering, etc, way to display properties. Additionally HT provides the PropertyPane Plugin, which provides a visual component encapsulation of grouping, sorting, and filtering.

Initialize building a property component object by propertyView = new ht.widget.PropertyView(dataModel); , dataModel parameter is a data model bound to a property component, the internal of model will create a new data model for binding the property component constructor when the model is empty.

The getPropertyModel() function of the property component returns the property model object, which is essentially a DataModel type object, except that the object is only used to add ht.Property type object, ht.Property type parent class is ht.Data, adds a function interface associated with the property definition.

So what the user needs to do is build the ht.Property object based on the property information to be displayed, and then added to the properties model returned by the propertyView.getPropertyModel() function, so that when the data model of propertyView.getDataModel() selects a change in the data, the relevant property information for the currently selected data Data will displayed by the ht.Property object stored on the propertyView.getPropertyModel() configuration.

Property

ht.Property attribute class inherits from ht.Data, you cannot set up a parent-child relationship and it has the following property functions:

Enumeration is a common property-editing selection application, rendering the drop-down list while editing, so ht takes a lot of scenarios for enumerated type attributes, setEnum(params) function to set a single json parameter, or to set parameter information setEnum(enumValues, enumLabels, enumIcons, enumEditable, enumStrict) separately, the following are common cases:

HT automatically detects whether the user has introduced Form Plugins, if the ht.widget.ComboBox component of the form plug-in then use it as an editor, otherwise use the select component of the native html, because of the original html select drop-down component is text-only, so many of the parameters above work only for the ht.widget.ComboBox component.

Form Plugin ht.widget.Slider slider is also a common and easy-to-use editing component, and this ht also increases the set of corresponding properties for that type, through getSlider() and setSlider(parmas) can specify the slider information that this property renders in edit state.

PropertyView

Attribute component class ht.widget.PropertyView main configurable properties and functions are as follows:

PropertyView provides a function of addProperties and setProperties, which can be easily added property by the json format in bulk, and the above example used the following code: 

propertyView.addProperties([
    {
        name: 'name',
        displayName: 'Name'
    },
    {
        displayName: 'CPU',
        drawPropertyValue: function(g, property, value, rowIndex, x, y, w, h, data, view) {
            drawFunc(g, data.a('cpu'), x, y, w, h);
        },
        getToolTip: function(data, isValue, propertyView){
            return isValue ? data.a('cpu') + '%' : 'CPU usage percentage';
        }
    },
    {
        displayName: 'MEM',
        drawPropertyValue: function(g, property, value, rowIndex, x, y, w, h, data, view) {
            drawFunc(g, data.a('mem'), x, y, w, h);
        },
        getToolTip: function(data, isValue, propertyView){
            return isValue ? data.a('mem') + '%' : 'Memory usage percentage';
        }        
    }
]);

The above example case in the definition of CPU and MEM Property, did not specify any name and accessType information, because they all define the drawPropertyValue function, so HT does not need to get the value of the configuration information, but this also brings up another problem, after propertyView.enableToolTip(), HT is not able to get the value information to tooltip, so in this example, when defining the Property of CPU and MEM, defines the getToolTip function for customization.

In the example when the indicator is presented green when the percent value in the 0~40, yellow when 40~70, red when 70~100, so the definition of getColor unified color conversion function, while drawPropertyValue custom functions also call the uniform percent drawing function of drawFunc.

getColor = function(value) {
    if (value < 40)
        return '#00A406';
    if (value < 70)
        return '#FFCC00';
    return '#A60000';
};

drawFunc = function(g, value, x, y, w, h){
    g.fillStyle = '#A1A1A3';
    g.beginPath();
    g.rect(x, y, w, h);
    g.fill();                    
    g.fillStyle = getColor(value);
    g.beginPath();
    g.rect(x, y, w * value / 100, h);
    g.fill();
    ht.Default.drawText(g, value + '%', '12px Arial', 'white', x, y, w, h, 'center');                
};
Welcome to contact us service@hightopo.com