Разработка графического интерфейса в GWT - PullRequest
Новая
       47

Разработка графического интерфейса в GWT

1 голос
/ 01 февраля 2012

Я учусь проектировать графический интерфейс в GWT. У меня есть RootPanel, куда я поместил все виджеты.

В одну панель я поместил виджет дерева, куда добавляются treeItems при успешном вызове RPC наselectionHandler

Что я хочу сделать: При нажатии на treemItem, все другие treeItem и виджеты на той же и другой панели не должны быть выбраны.Как будто идет обработка, так что другие действия запрещены.

Пожалуйста, предложите какую-нибудь идею, пример кода или пример.

Ответы [ 2 ]

4 голосов
/ 01 февраля 2012

Если я правильно вас понимаю, вы хотите отключить пользовательский щелчок по некоторым виджетам, пока не завершится конкретный обратный вызов. Для этого у вас должна быть пользовательская панель с большими z-index и opacity. Например, что-то вроде DialogBox setGlassEnabled(true) метода и попробуйте использовать эту технику в ваших обратных вызовах. Когда асинхронный запрос запускается, покажите эту панель в onSuccess и onFailure, вы должны скрыть ее. Кстати, у my-gwt есть класс LoadingPanel , который реализует такую ​​функцию. А также еще одна маска живая демонстрация в GWT-Ext.

1 голос
/ 02 февраля 2012

Это утверждение является избыточным и ненужным:

"При нажатии на treemItem, все остальные treeItem и виджеты на не следует выбирать одну и ту же и другую панель. "

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

И я действительно не знаю, о чем это утверждение:

"Как будто идет обработка, так что никакие другие вещи не могут сделать ".

Ваш вопрос должен быть просто:

Как добавить дочерние узлы в виджет дерева, куда добавляются дочерние узлы только когда я нажимаю на узел? Когда я нажимаю на узел, если он не имеет дочерние узлы, RPC будет запущен для извлечения узлов. Как должен мои результаты RPC обновить узел? После того, как я нажму на узел, он должен быть подсвечен. На всем дереве должен быть только один выделенный / выделенный узел.

Расширьте горизонтальную панель, чтобы она содержала значок и заголовок. Это должно реализовать IsTreeItem. Он должен реализовывать ClickHandler, чтобы его можно было добавлять в качестве обработчиков кликов к значку и метке заголовка. 

public class Node
extends HorizontalPanel
implements ClickHandler, IsTreeItem{
  Image img;
  Label label;
  MyData data;
  TreeItem nodeWrapper;

Конструктор питается в записи MyData, создает экземпляр изображения значка и метки заголовка и ассоциирует себя как обработчик нажатия для значка и метки: 

  public Node(MyData data){
    this.nodeWrapper = new TreeItem(this);
    this.img = new Image(data.getIconUrl());
    this.label = new Label(data.getTitle());
    this.data = data;
    this.add(img);
    this.add(this.label);

    // ensure onclick is triggered either by clicking img or label.
    this.img.addClickHandler(this);
    this.label.addClickHandler(this);
  }

Реализация IsTreeItem требует, чтобы узел был в состоянии обосновать себя с помощью TreeItem: 

  public TreeItem asTreeItem(){
    return this.nodeWrapper;
  }

Обработка кликов извлечет список дочерних записей, итеративно создаст новые узлы из дочерних записей и присоединит их к текущему узлу. Здесь происходит действие обратного вызова RPC. 

  public void onClick(ClickEvent e){
    this.displayRightPanel(this.data);

    if(this.nodeWrapper.getChildCount()==0)
      fetchNodeData(
        this.nodeWrapper,
        this.data.getId(),
        new AsyncCallBack<List<MyData>>(){
          public void onSuccess(List<MyData> nodeDataList){
            for(MyData nodeData : nodeDataList){
              Node.this.nodeWrapper.addItem(new Node(nodeData));
            }
          }
          public void onFailure(Throwable sorry){
            doWhatever();
          }
        }
      );
  }

определить другие соответствующие методы перед закрытием определения класса: 

  //blah ... blah ... blah...
}

Поскольку это не учебник по RPC, вы должны узнать, как написать часть RPC. Вам нужно определить MyData, который является общим POJO между клиентом GWT и сервлетом RPC. RPC-сервлет должен возвращать список MyData. Чтобы понять, почему вам нужен метод getId (), вы должны быть знакомы хотя бы со 2-й нормальной формой нормализации базы данных. 

public Interface MyData{
  String getIconURL();
  String getTitle();
  String getId();
  // among others ...
}

Предполагается, что у вас есть сплитпанель. Левая сторона - это виджет дерева, а правая панель - своего рода дисплей. Так что onclick, помимо запуска RPC-выборки, также вызовет displayRightPanel (data), и вам остается только указать, как вы хотите отобразить эти данные.

Вы должны создать первый корневой узел и связать его как корень дерева, а остальная часть дерева будет заполнена щелчком пользователя. Таким образом, корневой узел потребует от вас создания записи MyData, которая будет содержать iconUrl, заголовок и некоторые корневые данные.

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

...