Self-drawing HT for WEB ComboBox drop-down box component

The traditional HTML5 drop -down box Select only implements a simple text drop-down list, while the combobox in the HT for W EB General Assembly enables the traditional HTML5 the dropdown box effect, and you can add custom small icons to the text box and drop-down list to make the whole component look more intuitive, today I'll discuss how to develop a ComboBox custom dropdown box.

First, let's see the effect:

It looks like the normal ComboBox is nothing special, yes, according to the standard combobox design, can achieve the same effect, but today's main task is not to discuss how many implementation plans, today's first task is to introduce HT The use of the for Web ComboBox Custom drop-down list.

So the next step is to start a specific introduction, nonsense not much to say, on the code:

function Creategradientcombobox (datamodel) {var sm = Datamodel.sm (), Gradientcombobox = new Ht.widget.ComboBox () , gradients = [' linear.southwest ', ' linear.southeast ', ' linear.northwest ', ' linear.northeast ', ' Linear.nort ' H ', ' Linear.south ', ' linear.west ', ' linear.east ', ' radial.center ', ' radial.southwest ', ' radial.southeast ', ' radial.no Rthwest ', ' radial.northeast ', ' Radial.north ', ' Radial.south ', ' radial.west ', ' radial.east ', ' Spread.hori ' Zontal ', ' spread.vertical ', ' spread.diagonal ', ' spread.antidiagonal ', ' Spread.north ', ' Spread.south ', ' spread.west ', ' Spread.east '], gradientimages = [], indent = gradientcombobox.getindent (), height =, paddi    ng = 2; Gradients.foreach (function (gradient) {Gradientimages[gradient] = {width:indent, height:h Eight, comps: [{type: ' rect ', rect: [Padding, padding, I Ndent-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 = this, indent = self.ge        Tindent (), 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, Newvalu E, ' Shape.gradiEnt ', this);    }; return gradientcombobox;}

This is the concrete construction code of the background gradient effect list, let me describe the specific design idea:

2. combine the HT for Web- supported gradient effect in an array variable called gradient;
4. The vector graph of gradient is created dynamically by traversing the gradient array , and the vector graph is stored in the gradientimages array variable;
6. The gradient text value is used as the value of the ComboBox and the relevant parameters of the ComboBox are set;
8. combobox drawvalue
10. drawvalue The parameters that need to be passed into the method are: gvaluecomboboxvaluesselected (whether selected), x,y (the drawing coordinates of the brush are actually plotted x< Span lang= "ZH-CN" >,ywh (Brush-drawn wide-height w,h< Span lang= "ZH-CN");
12. Through ht. The Default.drawcenterimage () method plots the quantity entity to the specified position;
14. Through ht. The Default.drawtext () method draws the value to be displayed to the specified position;
16. Finally , the onvaluechanged () method of the ComboBox is overloaded to monitor the attribute changes of the ComboBox and to do the corresponding business processing as required.

The whole idea is like this, the corresponding graphics COmbobox component is also such a design idea, next we understand the ComboBox and HT for Web network topology diagram components Graphview the linkage effect to achieve it.

Through the comparison between the two graphs, I believe that everyone can feel the change. The previous one is the initial state of the Graphview, and the latter is the effect of modifying the gradient gradient selection box after the entity is selected, so let's take a look at the specific code implementation,Graphview and Node Created I'm not here to say more, directly on the implementation code for event handling:

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, the things to do is very simple, then we will analyze the implementation of the Code:

2. Method entry:datamodel(Data container),oldValue(combobox old value), NewValue(combobox new value) , Style(the name of the style to change), scope(method caller);
4. Obtain the corresponding selectionmodel sm from the Datamodel;
6. According to Sm.size () to determine How many data are selected in the Graphview, if none is selected, modify the properties of all data in the Datamodel If there is a selected data, only the properties of the selected data are modified .

The introduction to this self-drawing ht for Web ComboBox component is over, and the flexibility and ease-of-use ofthe HT for Web component are more than just the case, in this article the vector,ComboBox , topology diagram components and other key knowledge points, in the following article will do a concrete exposition, welcome to the attention of all.

Self-drawing HT for WEB ComboBox drop-down box component