因爲抽籤HT For Web ComboBox下拉框組件

傳統HTML5的下拉框select僅僅能實現簡單的文字下拉列表，而HT for Web通用組件中ComboBox不只能夠實現傳統HTML5下拉框效果，而且能夠在文本框和下拉列表中加入本身定義的小圖標，讓整個組件看起來更直觀。今天我就怎樣制定ComboBox本身定義下拉框作一番探討。

首先咱們先來目擊下效果：

 

看起來跟普通的ComboBox好像也沒什麼特殊的，是的，依照規範的ComboBox設計，全然可以實現相同的效果，但是今天的主要任務並不是討論有多少實現方案，今天的首要任務是介紹HT for Web的ComboBox本身定義下拉列表的使用方法。

那麼接下來就開始詳細的方案介紹，廢話很少說，上代碼：

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;
}

這是背景漸變效果列表的詳細構建代碼，我來描寫敘述下詳細的設計思路：

1. 將HT for Web支持的漸變效果組合起來放在一個叫gradient的數組變量中。
2. 經過遍歷gradient數組來動態建立gradient相應的矢量圖。並將矢量圖存放在gradientImages的數組變量中。
3. 將gradient文本值做爲ComboBox的value，並設置ComboBox的相關參數；
4. 經過重載ComboBox的drawValue方法來實現本身定義下拉列表；
5. 在drawValue方法中需要傳入的參數有：g（畫筆），value（相應comboBox中values），selected（是否被選中），x，y（畫筆的事實上繪製座標x，y），w，h（畫筆繪製的寬高w。h）；
6. 經過ht.Default.drawCenterImage()方法將數量圖元繪製到指定位置。
7. 經過ht.Default.drawText()方法將要顯示的的值繪製到指定的位置；
8. 最後重載ComboBox的onValueChanged()方法來監聽ComboBox的屬性變化，並依照要求作相應的業務處理。

整體思路就是這樣子的。對應的圖形ComboBox組件也是如此的設計思路，接下來咱們來了解下ComboBox和HT for Web網絡拓撲圖組件GraphView的聯動效果實現吧。

經過兩張圖的對照，我相信你們均可以感覺到變化吧。

前一張是GraphView的初始狀態，後一張是經過選中圖元后改動gradient漸變選擇框後的效果，咱們來看看詳細的代碼實現，GraphView和Node的建立我就不在這多說了。直接上事件處理的詳細實現代碼：

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);
    }
}

代碼很是easy，作的事情也很是easy。接下來咱們就來分析下代碼的詳細實現：

1. 方法的入參：dataModel（數據容器）,oldValue（comboBox老值）, newValue（comboBox新值）, style（要改變的樣式名稱）, scope（方法調用者）。
2. 從dataModel中獲取對應的selectionModel sm。
3. 依據sm.size()來推斷在GraphView中選取了多少個data，假設一個都沒選中，則改動dataModel中的所有data的屬性；假設有選中的data。則僅僅改動所選中data的屬性。

到此自繪製HT for Web ComboBox下拉框組件的介紹就結束了。HT for Web通用組件的靈活性和易用性還不止如此，在本文中涉及到矢量、ComboBox、幾個關鍵知識點的拓撲結構部件等。在可能的文章會作詳細，歡迎你們關注。