Задание было дизейблить кнопку если в комбике ничего не введено Swing конечно не jQuery но на нем тоже можно делать UI

package ua.kiev.mabp;


import javax.swing.JButton;
import javax.swing.JComboBox;
import javax.swing.JFrame;
import java.awt.Container;
import java.awt.Dimension;
import java.awt.GridBagLayout;
import java.awt.event.KeyEvent;
import java.awt.event.KeyListener;
import java.util.Vector;


/**
 * Created by IntelliJ IDEA.
 * User: CTAPbIu_MABP
 * Date: 30.11.2009
 * Time: 18:48:00
 */


public class ComboBoxEventDemo extends JFrame {


    public ComboBoxEventDemo(String name) {
        super(name);
    }


    public void addComponentsToPane(final Container pane) {


        String comboPrefix = "ComboBox Item #";
        int numItems = 15;
        Vector<String> vector = new Vector<String>(numItems);
        for (int i = 0; i < numItems; i++) {
            vector.addElement(comboPrefix + i);
        }


        final JComboBox searchCombo = new JComboBox(vector);
        searchCombo.setEditable(true);
        final JButton okButton = new JButton("OK");


        searchCombo.getEditor().getEditorComponent().addKeyListener(new KeyListener() {
            public void keyTyped(KeyEvent e) {
                System.out.print("keyTyped");
            }


            public void keyPressed(KeyEvent e) {
                System.out.print("keyPressed");
            }


            public void keyReleased(KeyEvent e) {
                System.out.print("keyReleased");
                try {
                    String s = (String) searchCombo.getSelectedItem();
                    okButton.setEnabled(s != null && !s.isEmpty());
                }
                catch (NullPointerException npe) {
                    okButton.setEnabled(false);
                }
            }
        });


        add(searchCombo);
        add(okButton);


        pane.setLayout(new GridBagLayout());
        setPreferredSize(new Dimension(450, 450));
    }


    public static void main(String[] args) {
        javax.swing.SwingUtilities.invokeLater(new Runnable() {
            public void run() {
                FocusEventDemo frame = new ComboBoxEventDemo("JComboBox Demo");
                frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                frame.addComponentsToPane(frame.getContentPane());
                frame.pack();
                frame.setVisible(true);
            }
        });
    }
}

Я прекрасно понимаю что это гавно никому не надо не мне ни вам, хотя кто знает может кому-то когда-то пригодится, а пишу я это для того чтоб вы не забывали что я еще есть и жив, зашли на мой сайт оставить камент типа "ну и дерьмо же ты постишь, чувак, совсем хуевый стал, отпишусь ка я от твоего RSS" и тем самым накрутили бы мне счетчик посещаймости :D

Ладно заспойлю вам кое-что, может не отпишитесь от моего RSS. В ближайшее время будет статья о векторной графике с красивым примером.

Для начала опишу изменения в БД, я ее полностью поменял. Теперь у нас вместо машинок будут города и страны, но смысл тот же.

DROP TABLE IF EXISTS `city`;
CREATE TABLE IF NOT EXISTS `city` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  `parent` int(10) unsigned NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=50 ;


INSERT INTO `city` (`id`, `name`, `parent`) VALUES
(1, 'Kiev', 1),
(2, 'Lviv', 1),
(3, 'Odesa', 1),
(4, 'Kharkov', 1),
(5, 'Lugansk', 1),
(6, 'Zaporizhzhia', 1),
(7, 'Mariupol', 1),
(8, 'Moskow', 2),
(9, 'Volgograd', 2),
(10, 'Samara', 2),
(11, 'Kazan', 2),
(12, 'Perm', 2),
(13, 'Eburg', 2),
(14, 'Chelyabinsk', 2),
(15, 'Minsk', 3),
(16, 'Homel', 3),
(17, 'Grodno', 3),
(18, 'Vitebsk', 3),
(19, 'Le Havre', 4),
(20, 'Rennes', 4),
(21, 'Nantes', 4),
(22, 'Berdeaux', 4),
(23, 'Toulouse', 4),
(24, 'Montpellier', 4),
(25, 'Marseille', 4),
(26, 'Lyon', 4),
(27, 'Paris', 4),
(28, 'Reims am Main', 5),
(29, 'Berlin', 5),
(30, 'Bremen', 5),
(31, 'Hannover', 5),
(32, 'Hamburg', 5),
(33, 'Frankfurt', 5),
(34, 'Munchen', 5),
(35, 'Strasbourg', 5),
(36, 'Milano', 6),
(37, 'Bologna', 6),
(38, 'Genova', 6),
(39, 'Roma', 6),
(40, 'Napoli', 6),
(41, 'Palermo', 6),
(42, 'London', 7),
(43, 'Bristol', 7),
(44, 'Birmingham', 7),
(45, 'Liverpool', 7),
(46, 'Manchester', 7),
(47, 'Edinburg', 7),
(48, 'Glasgow', 7),
(49, 'Belfast', 7);


DROP TABLE IF EXISTS `country`;
CREATE TABLE IF NOT EXISTS `country` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=8 ;


INSERT INTO `country` (`id`, `name`) VALUES
(1, 'Ukrain'),
(2, 'Russia'),
(3, 'Belarus'),
(4, 'France'),
(5, 'German'),
(6, 'Italia'),
(7, 'Uniited Kingdom');

И EntryPoint у нас на этот раз будет по проще. В нем не будет кучи виджетов, а только один.

package ua.kiev.mabp.client;


import com.extjs.gxt.ui.client.Events;
import com.extjs.gxt.ui.client.Style.Scroll;
import com.extjs.gxt.ui.client.event.BaseEvent;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.Viewport;
import com.extjs.gxt.ui.client.widget.form.FormPanel;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.layout.FlowLayout;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import ua.kiev.mabp.client.utility.CityToCountryUtility;
import ua.kiev.mabp.client.widget.CitySuggestBox;
import ua.kiev.mabp.client.widget.CountrySuggestBox;


public class HelloWorld implements EntryPoint {


    public void onModuleLoad() {


        // создаем рабочую область
        ContentPanel contentPanel = new ContentPanel();
        contentPanel.setLayout(new FitLayout());
        contentPanel.setHeading("Cascading combobox");


        // и новый комбобокс для стран
        CountrySuggestBox countrySuggestBox = new CountrySuggestBox();
        countrySuggestBox.setDisplayField("name");
        countrySuggestBox.setFieldLabel("Country");


        // вот тут вся магия
        CityToCountryUtility.getInstance().setCountryComboBox(countrySuggestBox);


        // ну и листенер конечно
        countrySuggestBox.addListener(Events.SelectionChange, new Listener<BaseEvent>(){
            public void handleEvent(BaseEvent be) {
                CityToCountryUtility.getInstance().eraseCity();
            }
        });


        // новый комбобокс для городов
        CitySuggestBox citySuggestBox = new CitySuggestBox();
        citySuggestBox.setDisplayField("name");
        citySuggestBox.setFieldLabel("City");
        citySuggestBox.setForceSelection(false);


        // еще немного магии
        CityToCountryUtility.getInstance().setCityComboBox(citySuggestBox);


        // дальше манипуляции с отображением 
        FormPanel formPanel = new FormPanel();
        formPanel.setHeaderVisible(false);
        formPanel.add(countrySuggestBox);
        formPanel.add(citySuggestBox);


        contentPanel.add(formPanel);


        Viewport viewport = new Viewport();
        viewport.setLayout(new FlowLayout());
        viewport.setScrollMode(Scroll.AUTO);
        viewport.add(contentPanel);
        RootPanel.get().add(viewport);
    }
}

Тут интересны два, точнее три объекта, CountrySuggestBox, CitySuggestBox и CityToCountryUtility, но два практически одинаковые, поэтому я буду рассказывать только про больший.

package ua.kiev.mabp.client.widget;


import com.extjs.gxt.ui.client.data.BasePagingLoadConfig;
import com.extjs.gxt.ui.client.data.BasePagingLoadResult;
import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.data.RpcProxy;
import ua.kiev.mabp.client.proxy.CitySuggestBoxRpcProxy;


/**
 * Created by IntelliJ IDEA.
 * User: CTAPbIu_MABP
 * Date: 16.04.2009
 * Time: 22:46:56
 */
public class CitySuggestBox<D extends ModelData> extends AbstractSuggestBox<D> {


    @Override
    protected RpcProxy<BasePagingLoadConfig, BasePagingLoadResult<D>> getRpcProxy() {
        return new CitySuggestBoxRpcProxy<BasePagingLoadConfig, BasePagingLoadResult<D>>();
    }
}

CitySuggestBox и CountrySuggestBox всеголишь обертки, поэтому показываю AbstractSuggestBox.

package ua.kiev.mabp.client.widget;


import com.extjs.gxt.ui.client.data.*;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.widget.form.ComboBox;
import com.google.gwt.user.client.Element;


/**
 * Created by IntelliJ IDEA.
 * User: CTAPbIu_MABP
 * Date: 16.04.2009
 * Time: 22:46:09
 */


public abstract class AbstractSuggestBox<D extends ModelData> extends ComboBox<D> {


    public AbstractSuggestBox() {
        RpcProxy<BasePagingLoadConfig, BasePagingLoadResult<D>> proxy = getRpcProxy();
        PagingLoader<BasePagingLoadConfig> bpl = new BasePagingLoader<BasePagingLoadConfig, BasePagingLoadResult<D>>(proxy);
        ListStore<D> store = new ListStore<D>(bpl);
        setStore(store);
        setTypeAhead(true);
        setForceSelection(true);
        setPageSize(5);
        setWidth("500px");
    }


    protected abstract RpcProxy<BasePagingLoadConfig, BasePagingLoadResult<D>> getRpcProxy();


    @Override
    protected void onRender(Element parent, int index) {
        setEditable(true);
        setTriggerAction(TriggerAction.QUERY);
        super.onRender(parent, index);
    }
}

Тут тоже практически ничего интересного - главное получить правильно параметризированый RpcProxy. Дальше дело техники. Прокси на самом деле тоже только обертка.

package ua.kiev.mabp.client.proxy;


import com.extjs.gxt.ui.client.data.BasePagingLoadConfig;
import com.extjs.gxt.ui.client.data.RpcProxy;
import com.extjs.gxt.ui.client.widget.Info;
import com.google.gwt.user.client.rpc.AsyncCallback;
import ua.kiev.mabp.client.HelloWorldService;
import ua.kiev.mabp.client.HelloWorldServiceAsync;
import ua.kiev.mabp.client.utility.CityToCountryUtility;


/**
 * Created by IntelliJ IDEA.
 * User: CTAPbIu_MABP
 * Date: 16.04.2009
 * Time: 22:51:48
 */
public class CitySuggestBoxRpcProxy<C extends BasePagingLoadConfig, D> extends RpcProxy<C, D> {


    final HelloWorldServiceAsync service = HelloWorldService.App.getInstance();


    @Override
    protected final void load(C loadConfig, final AsyncCallback<D> asyncCallback) {
        String parernt = CityToCountryUtility.getInstance().getParentForCity();
        loadConfig.getParams().put("parent", parernt);
        service.getCity(loadConfig, new AsyncCallback<D>() {
            public void onSuccess(D result) {
                Info.display("Success", "success");
                asyncCallback.onSuccess(result);
            }


            public void onFailure(Throwable caught) {
                Info.display("Failure", "fail");
                asyncCallback.onFailure(caught);
            }


        });
    }
}

Но только эта обертка для городов имеет две лишних строки (по сравнению с оберткой для стран) в которых происходит получение выбранной страны и подставления этого значения в параметры запроса. Для этого я использую класс CityToCountryUtility, который реализует паттерн Registry.

package ua.kiev.mabp.client.utility;


import com.extjs.gxt.ui.client.data.ModelData;
import ua.kiev.mabp.client.widget.CitySuggestBox;
import ua.kiev.mabp.client.widget.CountrySuggestBox;


/**
 * Created by IntelliJ IDEA.
 * User: CTAPbIu_MABP
 * Date: 28.04.2009
 * Time: 15:20:29
 */
public class CityToCountryUtility {


    private static CityToCountryUtility manager;
    private CountrySuggestBox country;
    private CitySuggestBox city;


    private CityToCountryUtility() {


    }


    public static CityToCountryUtility getInstance() {
        if (manager == null) {
            manager = new CityToCountryUtility();
        }
        return manager;
    }


    public void setCountryComboBox(CountrySuggestBox country) {
        this.country = country;
    }


    public void eraseCity() {
        //city.clearSelections();
        city.getStore().removeAll();
    }


    public void setCityComboBox(CitySuggestBox city) {
        this.city = city;
    }


    public String getParentForCity() {
        ModelData value = country.getValue();
        return value != null ? (String) value.get("abbr") : "";
    }
}

Пожалуй это все что надо для того, чтобы сделать каскадные комбобоксы. Повторюсь что как настроить мавен, какие либы подключать и как замапить комбобокс к базе данных описано в предыдущей статье. Осталось только прикрепить проект.

• Поправлена кнопка таб, теперь при ее нажатии происходит выбор текущего элемента и переход курсора в следующее поле ввода.
• Добавлена возможность использовать кастомный формат данных переданных с бэкенда. Например можно использовать вложенные массивы [{a:'a'},{b:'b'}]. Для этого надо использовать параметр dataHandler передавая в него функцию для обработки данных, пример функции смотрите в example 12
• Добавлена поддержка каскадных списков, для этого в параметр url теперь можно передавать функцию, которая будет возвращать новую ссылку, следите за тем чтобы функция очищала кеш.
• Для неполных списков, добавлен флаг partial который будет заставлять автокомплит делать запрос на сервер каждый раз как введена следующая буква слова.

Начну с описания того, что буду делать. Я попробую создать тонкий клиент используя GWT и GWT-Ext. Кто уже на этом месте начал кричать "GWT-Ext устарела надо использовать GXT" может смело закрывать вкладку браузера [x]. Остальные если не знают что такое и как установить IntelliJ IDEA и Maven отвлекаются от статьи на 20 минут на прочтение инструкций и установку софта. Инструкция об установке Google Web Toolkit тоже имеется, а вот по установке MySQL мне было лень писать.

Теперь собственно о тонком клиенте, он будет немного не доделан. Дело в том что в одну статью все не впихнуть и в этой будут продемонстрированы только некоторые части интерфейса, потому что основной темой будет взаимодействие с базой данных MySQL. Все известные мне мануалы рассказываю как передавать данные в GWT используя XML или JSON сгенерированные PHP, а я хочу чтобы GWT получал данные напрямую из базы и передавал на клиент в сериализированом виде.

Если вы хотите попробовать запустить пример вот ссылка для скачивания проекта и исходников ext-js 2.0.2

Теперь об используемых компанентах: помимо всего прочего я буду использовать Spring Framefork, Hibernate, Log4j, JUnit и базу данных MySQL. Для того чтобы не разруливать немыслимое количество зависимостей в этих компонентах я и предложил вам поставить Maven, а еще он удобен для сборки билда. Я написал конфигурационный файл в который включил все необходимые зависимости и плагины для сборки. Я, если честно, не очень силен в конфигурации Maven'а, поэтому большая часть настроек была скопирована из мануала по GWT. Конфиг очень большой и его нет смысла выкладывать здесь, поэтому чтоб его посмотреть придется скачать проект.

Когда загрузите проект откроете закладку Maven'а и нажмете на кнопку закачать все артефакты

Если у вас медленное соединение или еще какие-то проблемы Maven может закачать не все и отказаться скачивать повторно. В общем я советую сразу через командную строку зайти в папку с проектом и выполнить команду:

mvn eclipse:eclipse -Declipse.downloadSources=true -DdownloadJavadocs=true

Эта команда скачает плагин для Eclipse, который умеет качать исходники и доки, правда он попутно закачивает еще какие-то свои файлы, а после работы создает файлы проекта Eclipse которые можно смело удалять по завершению загрузки. В общей сложности Maven скачает примерно 120 метров кода и документации.

В начале статьи была ссылка на EXT-JS, нужно скачать именно версию 2.0.2 (или 2.0.5 но тогда вы нарушите лицензию) c более поздними GWT-EXT работать не хочет. EXT-JS нужно распаковать в D:ideaHelloWorldsrcmainjavauakievmabppublicjsext , позже я объясню почему именно сюда.

Теперь когда у вас есть все исходники, нужно настроить базу данных, откройте файл D:ideaHelloWorldsrcmainresourcesdb.properties и начинайте править настройки подключения.

jdbc.driverClassName=com.mysql.jdbc.Driver			<- не менять
jdbc.url=jdbc:mysql://localhost:3306/helloworld		<- helloworld это имя базы
jdbc.username=root						<- пользователь
jdbc.password=qwerty					<- пароль
hibernate.dialect=org.hibernate.dialect.MySQL5Dialect	<- диалект
hibernate.default_schema=helloworld			<- схема, можно не трогать

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";


CREATE TABLE IF NOT EXISTS `car` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `model` varchar(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=43 ;


INSERT INTO `car` (`id`, `model`) VALUES
(1, 'Audi'),
(2, 'BMW'),
(3, 'Lexus'),
(4, 'Ford'),
(5, 'Honda'),
(6, 'Chevrolet'),
(7, 'KIA'),
(8, 'Mercedes'),
(9, 'Mitsubishi'),
(10, 'Nissan'),
(11, 'Opel'),
(12, 'Rover'),
(13, 'Subaru'),
(14, 'Toyota'),
(15, 'Volkswagen'),
(16, 'Volvo'),
(17, 'Mazda'),
(18, 'Skoda'),
(19, 'Lincoln'),
(20, 'Infiniti'),
(21, 'Cadillac'),
(22, 'Renault'),
(23, 'Daevoo'),
(24, 'Jeep'),
(25, 'Pontiac'),
(26, 'Hummer'),
(27, 'Bentley'),
(28, 'Isuzu'),
(29, 'Seat'),
(30, 'Fiat'),
(31, 'GMC'),
(32, 'Land Rover'),
(33, 'Porsche'),
(34, 'Jaguar'),
(35, 'Hyundai'),
(36, 'Peugeot'),
(37, 'Aston Martin'),
(38, 'Alfa Romeo'),
(39, 'Dodge'),
(40, 'Ferrari'),
(41, 'Saab'),
(42, 'Chrysler');

Все с базой почти закончили. Теперь надо зайти в Tools->Data Source (в восьмой идеи это панелька сбоку а в седьмой новое окно) и добавить новый источник данных как показано на скриншоте:

И наконец надо закачать данные о структуре при помощи кнопки Refresh Tables. Вот теперь с базой все.

Предполагается что вы все делали как я описывал в статьях по установке и все находиться на диске D:Program Files , если нет заходите в Project Structure и настраивайте

В закладке GWT указываете путь к GWT, после этого нажимать на кнопку FIX не нужно, потому что у вас dll'ки лежат в одной директории (D:Program Filesgwt-windows-1.5.3), а jar'ники в другой (D:Program Filesapache-maven-2.1.0repocomgooglegwtgwt-user1.5.3).

В закладке Spring скорее всего ничего править не придется потому что все три конфига подтянутся сами, но проверьте на всякий случай.

В закладке JPA подключите только что созданный источник данных.

В закладке WEB тоже ничего делать не надо там все само подхватывается.

Возвращайтесь в корень настроек проекта, там три закладки, на первой (Sources) отметьте папки с исходниками (main/java), тестами (test/java)

На второй (Paths) кажется ничего делать не надо

А на закладке (Dependencies) проверьте чтоб не было пакета gwt-user (это значит вы все-таки нажали на кнопку FIX на закладке GWT) и был файл javaee.jar

Так все настройки закончили переходим к запуску программы.

Maven и GWT навязываю нам свою структуру проекта. От Maven нам достается разделение кода на исходники (main) и тесты (test), а от GWT три пакета: client - то что в последствии станет javascript кодом, public - статические ресурсы, сюда кладется ext-js, и server - классы которые работают на сервере, например для работы с БД.

Для минимального запуска нужно всего несколько файлов. Клаcc ua.kiev.mabp.client.HelloWorld расширяет точку входа в приложение, там задаются основные layuot'ы. HelloWorld.css и HelloWorld.html нужны для каркаса с которым будут работать все js функции. В HelloWorld.gwt.xml указываеться какие модули наследует сценарий. И наконец web.xml определяет точку входа (servlet) в приложение.

В примере есть несколько layaut'ов. Первый это выбор страны и города, демонстрирует функционал связанных выпадающих списков. Второй выбор даты, календари тоже должны были не пересекаться но к сожалению в ext-js 2.0.2 этого функционала еще не было (я опишу его в следующей статье где использую ext-js 2.2.1) поэтому использована валидация полей. Выбор марки автомобиля собственно тат самый виджет ради которого вся статья. И последний это выбор цвета, там совсем все просто.

package ua.kiev.mabp.client;


import com.google.gwt.core.client.EntryPoint;
import com.gwtext.client.widgets.Panel;
import com.gwtext.client.widgets.Viewport;
import com.gwtext.client.widgets.form.FieldSet;
import com.gwtext.client.widgets.layout.AnchorLayout;
import com.gwtext.client.widgets.layout.AnchorLayoutData;
import com.gwtext.client.widgets.layout.ColumnLayout;
import com.gwtext.client.widgets.layout.ColumnLayoutData;
import ua.kiev.mabp.client.widgets.CarPanel;
import ua.kiev.mabp.client.widgets.ColorPanel;
import ua.kiev.mabp.client.widgets.DatePanel;
import ua.kiev.mabp.client.widgets.LocationPanel;


/**
 * Created by IntelliJ IDEA.
 * User: CTAPbIu_MABP
 * Date: 10.04.2009
 * Time: 22:58:15
 */


public class HelloWorld implements EntryPoint {


	public void onModuleLoad() {
		Panel panel = new Panel();
		panel.setBorder(false);
		panel.setPaddings(15);
		panel.setLayout(new AnchorLayout());


		panel.add(new FieldSet(), new AnchorLayoutData("100%"));


		Panel wrapperPanel = new Panel();
		wrapperPanel.setBorder(false);


		Panel columnOnePanel = new Panel();
		columnOnePanel.setBorder(false);
		columnOnePanel.setLayout(new AnchorLayout());
		columnOnePanel.add(new LocationPanel(), new AnchorLayoutData("100%"));
		columnOnePanel.add(new DatePanel(), new AnchorLayoutData("100%"));
		columnOnePanel.add(new CarPanel(), new AnchorLayoutData("100%"));


		Panel columnTwoPanel = new Panel();
		columnTwoPanel.setBorder(false);
		columnTwoPanel.setLayout(new AnchorLayout());
		columnTwoPanel.add(new ColorPanel(), new AnchorLayoutData("100%"));


		wrapperPanel.setLayout(new ColumnLayout());
		wrapperPanel.add(columnOnePanel, new ColumnLayoutData(.5));
		wrapperPanel.add(columnTwoPanel, new ColumnLayoutData(.5));


		panel.add(wrapperPanel, new AnchorLayoutData("100%"));
		panel.add(new FieldSet(), new AnchorLayoutData("100%"));


		new Viewport(panel);
	}
}

Немного поигравшись с layaut'ами можно начать прикручивать БД, данные из которой получает выпадающий список.

package ua.kiev.mabp.client.widgets;


import com.gwtext.client.core.Template;
import com.gwtext.client.core.UrlParam;
import com.gwtext.client.data.*;
import com.gwtext.client.widgets.Panel;
import com.gwtext.client.widgets.form.ComboBox;
import com.gwtext.client.widgets.form.FieldSet;
import com.gwtext.client.widgets.form.event.ComboBoxListenerAdapter;
import ua.kiev.mabp.client.proxies.MyProxy;


/**
 * Created by IntelliJ IDEA.
 * User: CTAPbIu_MABP
 * Date: 10.04.2009
 * Time: 22:58:15
 */


public class CarPanel extends FieldSet {
	public CarPanel(){
	super("Select your car");


		// определяе вид записи
		FieldDef[] fieldDefs = new FieldDef[]{new StringFieldDef("id"), new StringFieldDef("model")};
		RecordDef recordDef = new RecordDef(fieldDefs);


		// создаем хранилище
		final Store store = new Store(new MyProxy(), new ArrayReader(recordDef), true);
		store.setBaseParams(new UrlParam[]{new UrlParam("paramName", "paramValue")});


		// создаем новую панель
		// сюда будет дублироваться выбраный результат
		final Panel instructionPanel = new Panel();
		instructionPanel.setBorder(false);
		instructionPanel.setHeight(24);
		instructionPanel.setHtml("Car model doesn't selected yet");


		// создаем новый шаблон
		final Template template = new Template("<div class="x-combo-list-item">" +
				"<table><tbody><tr>" +
				"<td style="width:50px;border-right:2px dotted #A3BAE9;">{id}</td>" +
				"<td style="width:200px;border-right:2px dotted #A3BAE9;">{model}</td>" +
				"</tr></tbody></table>" +
				"<div class="x-clear"></div></div>");


		// создаем новый выпадающий список 
		// и присваеваем ему хранилище и шаблон
		final ComboBox carComboBox = new ComboBox();
		carComboBox.setMinChars(1);
		carComboBox.setFieldLabel("Label");
		carComboBox.setStore(store);
		carComboBox.setDisplayField("model");
		carComboBox.setMode(ComboBox.LOCAL);
		carComboBox.setTriggerAction(ComboBox.ALL);
		carComboBox.setForceSelection(true);
		carComboBox.setEmptyText("Choose car model");
		carComboBox.setTypeAhead(true);
		carComboBox.setSelectOnFocus(true);
		carComboBox.setResizable(true);
		carComboBox.setTpl(template);
		carComboBox.setHideLabel(true);


		// устанавливаем листенер
		carComboBox.addListener(new ComboBoxListenerAdapter() {
			public void onSelect(ComboBox comboBox, Record record, int index) {
				instructionPanel.setHtml(record.getAsString("id") + " " + record.getAsString("model"));
			}
		});


		// добавляем все в текущий layout
		add(carComboBox);
		add(instructionPanel);


		// загружаем в список 5 первых элементов
		store.load(0, 5);
	}
}

Итак кроме того что виджет CarPanel создает ComboBox с листенером он использует для получения данных прокси MyProxy.

Итак кроме того что виджет CarPanel создает ComboBox с листенером он использует для получения данных прокси MyProxy.

package ua.kiev.mabp.client.proxies;


import com.google.gwt.core.client.JavaScriptObject;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.gwtext.client.core.UrlParam;
import ua.kiev.mabp.client.HelloWorldService;
import ua.kiev.mabp.client.beans.ArrayBean;


/**
 * Created by IntelliJ IDEA.
 * User: CTAPbIu_MABP
 * Date: 10.04.2009
 * Time: 22:58:15
 */


public class MyProxy extends GWTProxy {


	/**
	 * Загружает данные в объект
	 *
	 * @param start позиция первого элемента
	 * @param limit количество элемента
	 * @param sort сортировка
	 * @param dir направление сортировки
	 * @param javaScriptObject объект
	 */
	public void load(int start, int limit, String sort, String dir, JavaScriptObject javaScriptObject) {
		load(start, limit, sort, dir, javaScriptObject, null);
	}


	/**
	 * Загружает данные в объект
	 *
	 * @param start позиция первого элемента
	 * @param limit количество элемента
	 * @param sort сортировка
	 * @param dir направление сортировки
	 * @param o объект
	 * @param baseParams параметры запроса
	 */
	public void load(int start, int limit, String sort, String dir, final JavaScriptObject o, UrlParam[] baseParams) {
		String[][] params = new String[0][];
		HelloWorldService.App.getInstance().getCars(start, limit, sort, dir, params, new AsyncCallback() {
			public void onFailure(Throwable caught) {
				loadResponse(o, false, 0, (JavaScriptObject) null);
			}


			public void onSuccess(Object result) {
				ArrayBean response = (ArrayBean) result;
				loadResponse(o, true, response.totalPages, response.data);
			}
		});
	}
}

Класс MyProxy наследует класс GWTProxy который был выдран мной из проекта gwt-ext-ux (com.gwtextux.client.data.GWTProxy), который я счел не нужным подключать из-за одного класса. Самый большой интерес в классе MyProxy представляет вызов метода HelloWorldService.App.getInstance().getCars() .

package ua.kiev.mabp.client;


import com.google.gwt.core.client.GWT;
import com.google.gwt.user.client.rpc.RemoteService;
import com.google.gwt.user.client.rpc.ServiceDefTarget;
import ua.kiev.mabp.client.beans.ArrayBean;


/**
 * Created by IntelliJ IDEA.
 * User: CTAPbIu_MABP
 * Date: 10.04.2009
 * Time: 22:58:15
 */


public interface HelloWorldService extends RemoteService {


	public static class App {
		private static HelloWorldServiceAsync ourInstance = null;


		public static synchronized HelloWorldServiceAsync getInstance() {
			if (ourInstance == null) {
				ourInstance = (HelloWorldServiceAsync) GWT.create(HelloWorldService.class);
				((ServiceDefTarget) ourInstance).setServiceEntryPoint(GWT.getModuleBaseURL() + "ua.kiev.mabp.HelloWorld/HelloWorldService");
			}
			return ourInstance;
		}
	}


	public ArrayBean getCars(int start, int limit, String sort, String dir, String params[][]);
}

HelloWorldService это интерфейс описанный в пакете client и имеющий реализацию в пакете server. Внутренний класс App знает о бэкенде у которого можно получить данные. Этот бекэнд описывается в конфигах в HelloWorld.gwt.xml и web.xml .

package ua.kiev.mabp.server;


import com.google.gwt.user.server.rpc.RemoteServiceServlet;
import org.springframework.context.ApplicationContext;
import org.springframework.context.support.ClassPathXmlApplicationContext;
import ua.kiev.mabp.server.beans.DaoManager;
import ua.kiev.mabp.server.beans.ArrayHelper;
import ua.kiev.mabp.server.beans.entity.Car;
import ua.kiev.mabp.client.HelloWorldService;
import ua.kiev.mabp.client.beans.ArrayBean;
import java.util.Collection;


/**
 * Created by IntelliJ IDEA.
 * User: CTAPbIu_MABP
 * Date: 10.04.2009
 * Time: 22:58:15
 */


public class HelloWorldServiceImpl extends RemoteServiceServlet implements HelloWorldService {
	DaoManager daoManager = DaoManager.getInstance();


	public ArrayBean getCars(int start, int limit, String sort, String dir, String params[][]) {
		ApplicationContext ctx = new ClassPathXmlApplicationContext("classpath*:ApplicationConfig.xml");
		Collection<Car> col = daoManager.getCarDao().getCarByCriteria(start, limit, "ASC".equals(dir), sort);
		return new ArrayBean(ArrayHelper.collectionToArrayString(col), 30);
	}
}

Реализующий интерфейс HelloWorldService класс HelloWorldServiceImpl, знает о конфигах Spring. Этот конфиг знает о файле db.properties в котором описано как подключиться к базе. Я не буду опубликовывать тут весь конфиг, только самую интересную его часть.

<bean id="car" class="ua.kiev.mabp.server.beans.dao.CarDAO">
	<property name="sessionFactory" ref="sessionFactory"/>
</bean>
<bean id="daoManager" class="ua.kiev.mabp.server.beans.DaoManager" factory-method="getInstance">
	<property name="carDao" ref="car"/>
</bean>

Тут описывается что singleton класс DaoManager для своего создания использует метод getInstance и что ему нужно наполнить свойство carDao классом CarDAO

package ua.kiev.mabp.server.beans.dao;


import ua.kiev.mabp.server.beans.entity.Car;


import java.util.List;


/**
 * Created by IntelliJ IDEA.
 * User: CTAPbIu_MABP
 * Date: 10.04.2009
 * Time: 22:58:15
 */


public class CarDAO extends DAOBean  {


	/**
	 * Сохраняет элемент
	 *
	 * @param bean элемент
	 */
	public void save(Car bean) {
		getHibernateTemplate().save(Car.class.getName(), bean);
	}


	/**
	 * Удаляет элемент
	 *
	 * @param bean элемент
	 */
	public void delete(Car bean) {
		getHibernateTemplate().delete(bean);
	}


	/**
	 * Получает список объектов
	 *
	 * @param start позиция первого элемента
	 * @param limit количество элемента
	 * @param sort сортировка
	 * @param fieldName название поля
	 * @return список
	 */
	public List<Car> getCarByCriteria(int start, int limit, boolean sort, String fieldName) {
		return getObjectsByCriteria(start, limit, sort, fieldName, Car.class);
	}


	/**
	 * Получает весь список операций
	 *
	 * @return коллекция операций
	 */
	public List<Car> getAllCar() {
		return getHibernateTemplate().loadAll(Car.class);
	}


	/**
	 * Получает список операция по производству машины
	 *
	 * @param s где произведена
	 * @return коллекция операция
	 */
	public List<Car> getCarByModel(String s) {
		return getHibernateTemplate().findByNamedQueryAndNamedParam("findByModelFromCar", "model", s);
	}


	/**
	 * Получает операции по id
	 *
	 * @param id номер операции
	 * @return коллекция операций
	 */
	public Car getCarById(Integer id) {
		return (Car) getHibernateTemplate().get(Car.class, id);
	}
}

Класс CarDAO содержит метод getCarByCriteria который вызывается в классе HelloWorldServiceImpl. Метод возвращает список бинов Car. Немного отвлекусь и расскажу о дополнительных возможностях. Вместо вызова getCarByCriteria можно вызывать getCarByModel передавая модель машины, это будет полезно в каскадных списках, при этом findByModelFromCar описано в классе Car в виде аннотаций.

package ua.kiev.mabp.server.beans.entity;


import javax.persistence.*;
import java.io.Serializable;


/**
 * Created by IntelliJ IDEA.
 * User: CTAPbIu_MABP
 * Date: 10.04.2009
 * Time: 22:58:15
 */


@Entity
@Table(name = "car")
@NamedQueries({
	@NamedQuery(name = "findByModelFromCar", query = "select t from Car t where t.model=:model order by t.model"),
	@NamedQuery(name = "findByIdFromCar", query = "select t from Car t where t.id=:id")
})
public class Car implements Serializable {
	@Id
	@GeneratedValue(strategy = GenerationType.AUTO)
	@Column(name = "id", unique = true, nullable = false, length = 11)
	private Integer id;
	@Column(name = "model")
	private String model;
	private static final long serialVersionUID = 5664909385244426031L;


	/**
	 * Getter for property 'id'.
	 *
	 * @return Value for property 'id'.
	 */
	public Integer getId() {
		return id;
	}


	/**
	 * Setter for property 'id'.
	 *
	 * @param id Value to set for property 'id'.
	 */
	public void setId(Integer id) {
		this.id = id;
	}


	/**
	 * Getter for property 'model'.
	 *
	 * @return Value for property 'model'.
	 */
	public String getModel() {
		return model;
	}


	/**
	 * Setter for property 'model'.
	 *
	 * @param model Value to set for property 'model'.
	 */
	public void setModel(String model) {
		this.model = model;
	}
}

После того как класс HelloWorldServiceImpl получит коллекцию бинов Car он должен превратить ее в двухмерный массив строк, который после сериализации можно передать клиенту. Все стек распутан, а рассказ подошел к концу. И стоит показать как выглядит то ради чего вы все это читали.

Все кто дочитал до конца молодец, а я готовлю следующую статью, до скорых встреч.

Итак, автокомплит это технология, по которой данные взятые, например из аджакса (это совершенно не обязательно) предлагаются пользователю для быстрого заполнения полей формы. Например, пользователь пишет в поле "город" несколько букв - "Сан" ему будут предложены варианты "Санкт-Петербург", "Сан-Франциско" и "Сан Ремо" и пользователь быстро может выбрать мышкой или с клавиатуры то что ему нравится.

Проблема один - AJAX. Надо писать frontend (javascript) приложение, для клиента основанное на классе JsHttpRequest и backend (например, на php) приложение с запросом к БД

Проблема два нарисовать красивый выпадающий список с навигацией с клавиатуры. Проблема собственно у ослика (как обычно) потому что он не обрабатывает нажатие стрелочек в отличие от всех других браузеров.

Кстати, как и в прошлой статье, я отнюдь не говорю что это либа это панацея всех проблем! например, она очень тяжелая. Но раз я уже начал писать, а вы читать... продолжим

подключаем либу

<script type="text/javascript" src="lib/yahoo/yahoo/yahoo.js"></script>
<script type="text/javascript" src="lib/yahoo/dom/dom.js"></script>
<script type="text/javascript" src="lib/yahoo/event/event.js"></script>
<script type="text/javascript" src="lib/yahoo/connection/connection.js"></script>
<script type="text/javascript" src="lib/yahoo/animation/animation.js"></script>
<script type="text/javascript" src="lib/yahoo/autocomplete/autocomplete.js"></script>

и css

#ysearchmod {position:relative;padding:1em;}
#firstname_root {z-index:3000;} /* for IE z-index of absolute divs inside relative divs issue */
#secondname_root {z-index:2000;} /* for IE z-index of absolute divs inside relative divs issue */
#lastname_root {z-index:1000;} /* for IE z-index of absolute divs inside relative divs issue */
.yui-ac-content {position:absolute;width:100%;border:1px solid #404040;background:#fff;overflow:hidden;z-index:9050;}
.ysearchquery {position:absolute;right:10px;color:#808080;z-index:10;}
.yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
ul {padding:5px 0;width:100%;}
li {padding:0 5px;cursor:default;white-space:nowrap;}
li.yui-ac-highlight {background:#a0a0a0;}
li.yui-ac-prehighlight {background:pink;}

Для тех кто заметил что этот css сильно отличается от предлагаемого YAHOO объясняю - так как они описывают каждый элемент уже при трех полях на ajaxe css станет пухлым и дохлым поэтому я вынес его в JavaScript

И еще на заметку я буду предлагать заполнять ФИО

Последний штрих рисуем HTML

<div id="firstname_root"><input type="text" name="firstname" id="firstname" value=""><div id="firstname_conteiner"></div><div>
<div id="secondname_root"><input type="text" name="secondname" id="secondname" value=""><div id="secondname_conteiner"><div id="firstname_conteiner"></div><div>
<div id="lastname_root"><input type="text" name="lastname" id="lastname" value=""><div id="firstname_conteiner"><div id="lastname_conteiner"></div><div>

А теперь в тегах <_script>...<_/script> описываем загрузчик, он же frontend приложение

// определяем именное пространство
YAHOO.namespace("AutoComplete");
/*
Грубо говоря если вы определите YAHOO.namespace("XXX");
то следующая строчка будет выглядеть так
YAHOO.XXX = function(input){
*/


// конструктор
YAHOO.AutoComplete = function(input){
var oACDS;
var oAutoComp;
var oDiv = null;


	// CSS, вот сюда то я и вынес все излишнее свойства
	if (oDiv=document.getElementById(input))
	{
		var rDiv = document.getElementById(input+'_root');
		var cDiv = document.getElementById(input+'_conteiner');
		oDiv.style.position = "absolute";
		oDiv.style.width = "100%";
		rDiv.style.height = "2em";
		rDiv.style.position = "relative";
		rDiv.style.margin_bottom = "1.5em";
		rDiv.style.width = "100%";
		cDiv.style.position = "absolute";
		cDiv.style.top = "1.7em";
		cDiv.style.width = "100%";
	}




    // заполняем первый объект oACDS, он у нас отвечает за AJAX
    // адресс backend'a с параметрами
    oACDS = new YAHOO.widget.DS_XHR("/backend.php", ["n", "t"]);
    // вид ответа - простой текст - по одному варианту на строку
    oACDS.responseType = YAHOO.widget.DS_XHR.TYPE_FLAT;
    // кеширование
   oACDS.queryMatchSubset = true;
    // время кеширования 60 сек
    oACDS.maxCacheEntries = 60;


    // этот параметр отвечает за дополнительные параметры в url, который запрашивается
    //тоесть вместо /backend.php данные будут посланы на /backend.php?active=имя_поля
    oACDS.scriptQueryAppend = '&active=' + input;


    //заполняем второй объект отвечающий за autocomplete, ему по большому счету нужно только имя поля в
    //котором должен работать скрипт
    oAutoComp = new YAHOO.widget.AutoComplete(input,input+'_conteiner', oACDS);
    // разделитель (по умолчанию дописывает в конце выбранного варианта ';')
    oAutoComp.delimChar = "";
    // задержка в секундах до отправки запроса
    oAutoComp.queryDelay = 0;
    // минимальная длина строки перед поиском
    oAutoComp.minQueryLength=1;
    // имя класса для выделенного варианта ответа
    oAutoComp.prehighlightClassName = "yui-ac-prehighlight";
    // отключает автокомплит в браузере чтоб он не мешал
    oAutoComp.allowBrowserAutocomplete = false;
    // можно еще поизвращаться с анимацией, но это вы сделаете сами


};
//ну и собственно стартуем скрипт по разу на каждое поле
YAHOO.AutoComplete('firstname')

// я полностью писать не буду, просто объясню. Данные из аджакса приходят в кодировке UCS-2BE поэтому 
// ее надо перекодировать в win-1251


// таблица символов
$unicode_to_cp1251_tbl = array(
	0x0402 => "x80",	0x0403 => "x81",	0x201A => "x82",	0x0453 => "x83",
	0x201E => "x84",	0x2026 => "x85",	0x2020 => "x86",	0x2021 => "x87",
	0x20AC => "x88",	0x2030 => "x89",	0x0409 => "x8A",	0x2039 => "x8B",
	0x040A => "x8C",	0x040C => "x8D",	0x040B => "x8E",	0x040F => "x8F",
	0x0452 => "x90",	0x2018 => "x91",	0x2019 => "x92",	0x201C => "x93",
	0x201D => "x94",	0x2022 => "x95",	0x2013 => "x96",	0x2014 => "x97",
	0x2122 => "x99",	0x0459 => "x9A",	0x203A => "x9B",	0x045A => "x9C",
	0x045C => "x9D",	0x045B => "x9E",	0x045F => "x9F",	0x00A0 => "xA0",
	0x040E => "xA1",	0x045E => "xA2",	0x0408 => "xA3",	0x00A4 => "xA4",
	0x0490 => "xA5",	0x00A6 => "xA6",	0x00A7 => "xA7",	0x0401 => "xA8",
	0x00A9 => "xA9",	0x0404 => "xAA",	0x00AB => "xAB",	0x00AC => "xAC",
	0x00AD => "xAD",	0x00AE => "xAE",	0x0407 => "xAF",	0x00B0 => "xB0",
	0x00B1 => "xB1",	0x0406 => "xB2",	0x0456 => "xB3",	0x0491 => "xB4",
	0x00B5 => "xB5",	0x00B6 => "xB6",	0x00B7 => "xB7",	0x0451 => "xB8",
	0x2116 => "xB9",	0x0454 => "xBA",	0x00BB => "xBB",	0x0458 => "xBC",
	0x0405 => "xBD",	0x0455 => "xBE",	0x0457 => "xBF",	0x0410 => "xC0",
	0x0411 => "xC1",	0x0412 => "xC2",	0x0413 => "xC3",	0x0414 => "xC4",
	0x0415 => "xC5",	0x0416 => "xC6",	0x0417 => "xC7",	0x0418 => "xC8",
	0x0419 => "xC9",	0x041A => "xCA",	0x041B => "xCB",	0x041C => "xCC",
	0x041D => "xCD",	0x041E => "xCE",	0x041F => "xCF",	0x0420 => "xD0",
	0x0421 => "xD1",	0x0422 => "xD2",	0x0423 => "xD3",	0x0424 => "xD4",
	0x0425 => "xD5",	0x0426 => "xD6",	0x0427 => "xD7",	0x0428 => "xD8",
	0x0429 => "xD9",	0x042A => "xDA",	0x042B => "xDB",	0x042C => "xDC",
	0x042D => "xDD",	0x042E => "xDE",	0x042F => "xDF",	0x0430 => "xE0",
	0x0431 => "xE1",	0x0432 => "xE2",	0x0433 => "xE3",	0x0434 => "xE4",
	0x0435 => "xE5",	0x0436 => "xE6",	0x0437 => "xE7",	0x0438 => "xE8",
	0x0439 => "xE9",	0x043A => "xEA",	0x043B => "xEB",	0x043C => "xEC",
	0x043D => "xED",	0x043E => "xEE",	0x043F => "xEF",	0x0440 => "xF0",
	0x0441 => "xF1",	0x0442 => "xF2",	0x0443 => "xF3",	0x0444 => "xF4",
	0x0445 => "xF5",	0x0446 => "xF6",	0x0447 => "xF7",	0x0448 => "xF8",
	0x0449 => "xF9",	0x044A => "xFA",	0x044B => "xFB",	0x044C => "xFC",
	0x044D => "xFD",	0x044E => "xFE",	0x044F => "xFF",
);


// функция поиска по таблице
function utf8_to_cp1251($s) {
	$tbl = $GLOBALS['unicode_to_cp1251_tbl'];
	$uc = 0;
	$bits = 0;
	$r = "";
	for($i = 0, $l = strlen($s); $i < $l; $i++)
	{
		$c = $s{$i};
		$b = ord($c);
		if($b & 0x80) 
		{
			if($b & 0x40)
			{
				if($b & 0x20) 
				{
					$uc = ($b & 0x0F) << 12;
					$bits = 12;
				} else {
					$uc = ($b & 0x1F) << 6;
					$bits = 6;
				}
			} else {
				$bits -= 6;
				if($bits)
				{
					$uc |= ($b & 0x3F) << $bits;
				} else {
					$uc |= $b & 0x3F;
					if($cc = @$tbl[$uc]) 
					{
						$r .= $cc;
					} else {
						$r .= '?';
					}
				}
			}
		} else {
			$r .= $c;
		}
	}
	return $r;
}


// применяем функцию ко всем входящим данным
foreach ($_REQUEST as $key => $value){
    $_REQUEST[$key] = utf8_to_cp1251($value);
}


// из всех данный нужно только 2
$like = $_REQUEST['query'];
$field = $_REQUEST['active'];


// соединяемся с БД
mysql_connect('localhost','user','pass');
mysql_select_db('namedatabase');


//Ну и собственно спрашиваем есть ли похожие имена
$sql = mysql_query("SELECT ".$field." AS suggestion FROM table_name WHERE ".$field." LIKE '$like%' ORDER BY ".$field."LIMIT 50");


// выводим списком ответ
while($result = mysql_fetch_assoc($sql)){
    echo $result['suggestion']."n";
}

Вот, пожалуй, и все. Кстати очень тяжелая (много килобайт весит) либа. Subsys от Котерова намного легче и практичнее, но не имеет автокомплита. Попытки втиснуть его туда насильно увенчались успехом только для FF1.5 и Opera8.0 , IE ругался