Self-drawn HT For Web ComboBox drop-down box component, htcombobox

Self-drawn HT For Web ComboBox drop-down box component, htcombobox

In traditional HTML5 drop-down box select, only simple text drop-down lists can be implemented, while ComboBox in HT for Web general components can not only achieve the traditional HTML5 drop-down box effect, in addition, you can add custom icons in the text box and drop-down list to make the entire component look more intuitive. Today I will discuss how to develop a ComboBox custom drop-down box.

First, let's see the effect:

 

It seems that there is nothing special with the common ComboBox. Yes, according to the standard ComboBox design, the same effect can be achieved, but today's main task is not to discuss how many implementation solutions are available, the primary task of today is to introduce the usage of the custom ComboBox drop-down list of HT for Web.

Next we will start to introduce the specific solution. If you don't talk much about it, go to the Code:

function createGradientComboBox(dataModel){    var sm = dataModel.sm(),        gradientComboBox = new ht.widget.ComboBox(),        gradients = ['linear.southwest','linear.southeast','linear.northwest','linear.northeast',            'linear.north','linear.south','linear.west','linear.east',            'radial.center','radial.southwest','radial.southeast','radial.northwest','radial.northeast',            'radial.north','radial.south','radial.west','radial.east',            'spread.horizontal','spread.vertical','spread.diagonal','spread.antidiagonal',            'spread.north','spread.south','spread.west','spread.east'],        gradientImages = [],        indent = gradientComboBox.getIndent(),        height = 18,        padding = 2;    gradients.forEach(function (gradient) {        gradientImages[gradient] = {            width: indent,            height: height,            comps: [                {                    type: 'rect',                    rect: [padding, padding, indent - 2 * padding, height - 2 * padding],                    background: 'red',                    gradient: gradient,                    gradientColor: 'white'                }            ]        };    });    gradientComboBox.setValues(gradients);    gradientComboBox.setValue('linear.southwest');    gradientComboBox.setWidth(90);    gradientComboBox.setDropDownWidth(140);    gradientComboBox.drawValue = function(g, value, selected, x, y, w, h){        var self = this,            indent = self.getIndent(),            label = self.toLabel(value),            icon = gradientImages[value];        if(icon){            ht.Default.drawCenterImage(g, icon, x+indent/2, y+h/2);            x += indent;        }        if(label){            ht.Default.drawText(g, label, self.getLabelFont(value, selected), self.getLabelColor(value, selected), x, y, 0, h);        }    };    gradientComboBox.onValueChanged = function(oldValue, newValue){        onComboBoxValueChanged(dataModel, oldValue, newValue, 'shape.gradient', this);    };    return gradientComboBox;}

This is the specific construction code of the background gradient effect list. I will describe the specific design ideas:

1. Combine the gradient effects supported by HTfor Web into an array variable named gradient;
2. You can traverse the gradient array to dynamically create the vector map corresponding to gradient, and store the vector map in the array variable of gradientImages;
3. Use the gradient text value as the value of ComboBox and set relevant parameters of ComboBox;
4. The drawValue method of ComboBox is reloaded to implement a custom drop-down list;
5. The following parameters need to be passed in the drawValue method: g (paint brush), value (corresponding to values in comboBox), selected (whether selected), x, y (the coordinates x, y of the paint brush), w, h (w, h of the width and height of the paint brush );
6. Use the ht. Default. drawCenterImage () method to draw a number of elements to a specified position;
7. Use the ht. Default. drawText () method to draw the value to be displayed to the specified position;
8. At last, the onValueChanged () method of ComboBox is reloaded to listen to the attribute changes of ComboBox and perform corresponding business processing as required.

The overall idea is like this, and the corresponding graphic ComboBox component is also like this design idea. Next let's take a look at the implementation of the association between the ComboBox and HT for Web network topology graph component GraphView.

By comparing the two images, I believe everyone can feel the changes. The first is the initial status of GraphView, and the last is the effect of modifying the gradient selection box after the selected elements. Let's take a look at the specific code implementation, I am not talking about creating GraphView and Node. The specific implementation code of event processing is as follows:

function onComboBoxValueChanged(dataModel, oldValue, newValue, style, scope){    var sm = dataModel.sm();    if(sm.size() === 0){        dataModel.each(function(data){            data.setStyle(style, newValue);        }, scope);    }else{        sm.each(function(data){            data.setStyle(style, newValue);        }, scope);    }}

The code is very simple and the work is very simple. Next we will analyze the specific implementation of the Code:

1. Input parameters of the method: dataModel (Data container), oldValue (old value of comboBox), newValue (New Value of comboBox), style (name of the style to be changed), and scope (method caller );
2. Obtain the selectionModel sm from dataModel;
3. According to sm. size () is used to determine the number of data items selected in GraphView. If none is selected, all data attributes in dataModel are modified, only the attributes of the selected data are modified.

Now, the introduction of the Self-drawn HTfor Web ComboBox drop-down box component is over. The flexibility and ease-of-use of the HT for Web universal components are not limited, this article involves several key knowledge points, such as vector, ComboBox, and Topology components. We will elaborate on them in subsequent articles.