下一代的B/S開發框架--Echo 教程(5) (轉)[@more@]

下一代的B/S開發--Echo 教程(5)

可編輯的下拉選單

我們知道HTML頁面上的下拉選單是不可編輯的. Echo可以讓我們輕鬆的變相實現. 先看看這個ComboBox怎麼用:

//下拉選單資料
String[] member = new String[]{"steeven","stella"};
FieldModel model = new DefaultSelectFieldModel(member);
//可勁重用吧:
ComboBox combo = new ComboBox("default text",selectFieldModel);

簡單嗎? 再來看看具體實現:

/************ComboBox.************ * 可編輯的下拉選單 */ import nextapp.echo.*; import nextapp.echo.event.*; public class ComboBox extends Panel implements ActionListener { private TextField input = new TextField(); //輸入框 private SelectField select = new SelectField(); //下拉框 private CheckBox check = new CheckBox(); //切換按鈕 public ComboBox(String text, SelectFieldModel model) { select.setModel(model); //設定下拉選單的內容 setText(text); //設定預設文字 select.setVisible(false); //預設不可見 add(input); add(select); add(check); check.addActionListener(this); //切換動作 } public void setText(String text) { this.input.setText(text); //設定文字框文字 //設定下拉框選定值 this.select.getModel().setSelectedItem(text); } public String getText() { return check.isSelected()?select.getSelectedItem().toString():input.getText(); } public void actionPerformed(ActionEvent e) { input.setVisible(!check.isSelected()); select.setVisible(check.isSelected()); //同步資料 if (check.isSelected()) select.getModel().setSelectedItem(input.getText()); else input.setText(select.getSelectedItem().toString()); } }

原理很簡單:

1. 同時構造輸入框和下拉框, 根據旁邊核取方塊的狀態交替出現.
2. 在切換時同步資料, 根據輸入框的值選中下拉框中的對應值, 或者把下拉框中的選定值複製到輸入框.
3. 提供類似TextField的getText()和getText()方法.

是不是完全桌面的風格? 沒有寫任何HTML和指令碼.

這樣實現的ComboBox需要同互動, 在速度上稍顯不足. 這樣的互動完全可以用指令碼在上高效完成. 別擔心, Echo允許編寫自己的來實現特殊需求, 後面的章節會有介紹.