Создание пользовательского интерфейса

На данный момент мы решили, что StockWatcher собирается делать, и мы обсуждали, как пользоваться GWT компилятором и создавать собственные проекты GWT. Мы начнем создавать приложение с пользовательским интерфейсом.
GWT пользовательский интерфейс состоит из виджетев и панелей. Виджеты предоставляют общие пользовательские инструменты как кнопки, текстовые поля и деревья. Панели как DocPanel, HorizontalPanel, и RootPanel, содержат виджеты и определяют как они должны располагаться в окне браузера.

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

Главная панель (RootPanel)

На верхнем уровне иерархии любой GWT пользовательский интерфейс, всегда содержит главную панель (RootPanel). RootPanel всегда обертывания фактический элемент HTML хост страницы. По умолчанию RootPanel обертывает элемент <body> HTML хост страницы. Вы можете получить ссылку на эту RootPanel через вызов метода RootPanel.get(). Вы также можете указать RootPanel и для других HTML элементов страницы. Просто укажите ID атрибут интересующего HTML элемента в параметре метода RootPanel.get(String).

Таким образом, у вас есть два варианта построения интерфейса вашего GWT приложения. Вы можете построить частей интерфейса вашего приложения с использованием статического HTML и просто вставить GWT виджеты и панелей в именованные элементы (ID) HTML. Эта функция особенно полезна для встраивание GWT в имеющихся приложения. Кроме того, хост-страница может содержать пустые элементы <body>, и в этом случае вы получаете ссылку умолчанию на RootPanel, а затем создать весь интерфейс с GWT используя виджеты.

Переходим к StockWatcher, используем именованные (ID) элементы HTML. Переходим к файлу хост страницы и открываем ее (src/com/google/gwt/sample/stockwatcher/public/StockWatcher.html) и изменяем содержимое как указано ниже

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>StockWatcher</title>
        <script type="text/javascript" language="javascript" src="com.google.gwt.sample.stockwatcher.StockWatcher.nocache.js"></script>
    </head>
    <body>
        <h1>Stock Watcher</h1>
        <div id="stockList"></div>
    </body>
</html>


Этот код определяет статическое содержание страницы. Как и в обычном HTML, тег <title> - название нашей страницы, которая появляется на окне или вкладке. Тег <script> - ссылка на исходный код JavaScript, что GWT будет генерировать. Наконец, тег <div> будет содержать наши GWT виджеты. Мы уставили ему (тегу div) ID атрибут, чтобы он был нам доступен из GWT через RootPanel.

Кроме того, в начале файла указан тип HTML 4.01 — в данном случае это указывает использовать «стандартный режим» рендер-движка GWT, которая обеспечивает лучшую кросс-браузерную совместимость. Если вы удалите эту строку, то рендер — движок будет работать в режиме обратной совместимости, что означает, что все старые ошибки браузера будет по-прежнему присутствуют. В некоторых случаях, вы можете использовать режим обратной совместимости, если вы интегрируете с уже готовым приложением, которое использует конкретные ошибки браузера в настоящее время, но сейчас мы будем придерживаться стандартного режима.

Панели и Виджеты

Теперь нам нужно использовать GWT панели и виджеты для построения динамичной части пользовательского интерфейса. В начале данного руководства мы показали вам, как будет окончательно выглядеть приложение StockWatcher. Список акций отображается в виде таблицы, с текстовым полем названия акции и кнопки добавить, а так же дата последнего обновления списка. Поскольку элементы пользовательского интерфейса уложены вертикально, мы смотрим галерею виджетов и обнаруживаем, что VerticalPanel это именно то, что нам нужно. Мы будем использовать GWT VerticalPanel с тремя дочерними виджетами.

Он первым (вверху) дочерним виджетом это сам список акций. Поскольку это таблица, мы опять обратимся к галерее и найдем HTMLTable, которая выглядит многообещающе. Тем не менее, он помечен как абстрактный поэтому мы должны найти подходящий подкласс. Grid (Сетка) не будет работать, поскольку она не позволяет удалить строки из середины таблицы (нам это будет нужно - функция удаления акций из списка). FlexTable, с другой стороны, есть методом removeRow(INT). Он также имеет методы для определения содержания каких-либо клеток (определенных индексов строк и столбцов), автоматически расширяет таблицу, если это необходимо. Это должно пригодиться.

Второй дочерний виджет нашей вертикальной панели (VerticalPanel), должен будет содержать текстовое поле с названием акции и кнопку Добавить. Мы хотим что бы эти два дочерних элемента (текстовое поле и кнопка) отображались на одной линии, поэтому мы будем нуждаться в другой вложенной панели. Для этого мы будем использовать HorizontalPanel с дочерними элементами: текстовое поле (TextBox) и кнопка (Button).

Наконец, третий дочерний виджет нашей вертикальной панели (VerticalPanel) будет дата последнего обновления списка акций, мы будем показывать в простой ярлык. Виджет Label (метка) предназначен для отображения динамичного текста, не являющихся HTML текстом (обычный текст).


Теперь переходим к коду:

Откройте главный класс (EntryPoint — входная точка) приложения StockWatcher (src/com/google/gwt/sample/stockwatcher/client/StockWatcher.java) и замените содержимое следующим кодом

package com.google.gwt.sample.stockwatcher.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;

public class StockWatcher implements EntryPoint {
    private VerticalPanel mainPanel = new VerticalPanel();
    private FlexTable stocksFlexTable = new FlexTable();
    private HorizontalPanel addPanel = new HorizontalPanel();
    private TextBox newSymbolTextBox = new TextBox();
    private Button addButton = new Button("Add");
    private Label lastUpdatedLabel = new Label();

    public void onModuleLoad() {
        // Настраиваем заголовок таблицы цен
        stocksFlexTable.setText(0, 0, "Symbol");
        stocksFlexTable.setText(0, 1, "Price");
        stocksFlexTable.setText(0, 2, "Change");
        stocksFlexTable.setText(0, 3, "Remove");
      
        // Панель добавления новой акции
        addPanel.add(newSymbolTextBox);
        addPanel.add(addButton);
      
        // Главная панель
        mainPanel.add(stocksFlexTable);
        mainPanel.add(addPanel);
        mainPanel.add(lastUpdatedLabel);
      
        // Добавляем главную панель к HTML элементу с ID "stockList"
        RootPanel.get("stockList").add(mainPanel);
      
        // Переводим фокус на текстовое поле
        newSymbolTextBox.setFocus(true);
    }
}


Что мы делаем здесь, это просто строим интерфейс с GWT виджетами и панелями. Мы работаем снизу-вверх, сначала создаем каждый виджет / панель через поля класса. Затем в методе onModuleLoad () (который, как вы помните, это куда мы помещаем код запуска нашего приложения), мы устанавливаем заголовок виджета FlexTable, а затем добавляем в панели дочерние элементы. Последний шаг заключается в том, чтобы добавить нашу внешнюю вертикальную панель (VerticalPanel) к главной панели (RootPanel), которая должна содержаться в элементе <div> с именем stockList на нашей хост-странице.

Проверка интерфейса

Пришло время проверить наши изменения. Сохраните отредактированный файл и запустить StockWatcher в хост режиме (нажмите кнопку Выполнить в Eclipse, или запустить StockWatcher-shell скрипт, если вы используете другую IDE). Вы должны увидеть наши примитивные формы StockWatcher, они появляться в хост режиме браузера.



Как вы можете видеть, на текущем шаге StockWatcher наверняка не завоюет дизайнерские награды. Это нормально. Мы добавим некоторые стили позже с использованием CSS. Что в StockWatcher действительно хватает, так это интерактивность: интерфейс фактически не делает ничего ... все еще. Давайте исправить, добавив, что некоторые слушателей событий (event listeners).

Комментариев нет:

Отправить комментарий