GWT дизайн панели лучшие практики

Question

Я новичок в GWT, а также в стиле интерфейса Swing / SWT. Я долгое время работал с HTML и знаю, как в этом построить свой пользовательский интерфейс. Однако у меня возникли проблемы с переводом этого в GWT. В настоящее время я пытаюсь создать простой пользовательский интерфейс с таблицей слева с четырьмя столбцами, заголовком и заголовком и панелью справа с вводом и некоторыми раскрывающимися списками (фильтры для списка слева). Я сделал это как макет в HTML, но у меня возникли проблемы с переводом этого в GWT. В каждой строке таблицы также должна быть ссылка для выбора элемента в таблице.

Я знаю о UiBinder , но, учитывая, что для него существует страница с декабря, и она до сих пор не вышла, это не выглядит приемлемым вариантом. Мне бы понравилось, если бы я мог преобразовать свой HTML в некоторый код GWT, но кажется, что материал, который существует в GWT, находится на немного более высоком уровне абстракции. Также кажется трудным использовать материал DOM.createElement в сочетании с виджетами, т.е. Создание моей собственной пользовательской панели.

Answer 1

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

Я предлагаю вам взглянуть на витрину GWT и посмотреть источник, чтобы увидеть, как это делается.

---

Образец панели док-станции

DockPanel dock = new DockPanel();
dock.setStyleName("cw-DockPanel");
dock.setSpacing(4);
dock.setHorizontalAlignment(DockPanel.ALIGN_CENTER);

// Add text all around
dock.add(new HTML(constants.cwDockPanelNorth1()), DockPanel.NORTH);
dock.add(new HTML(constants.cwDockPanelSouth1()), DockPanel.SOUTH);
dock.add(new HTML(constants.cwDockPanelEast()), DockPanel.EAST);
dock.add(new HTML(constants.cwDockPanelWest()), DockPanel.WEST);
dock.add(new HTML(constants.cwDockPanelNorth2()), DockPanel.NORTH);
dock.add(new HTML(constants.cwDockPanelSouth2()), DockPanel.SOUTH);

// Add scrollable text in the center
HTML contents = new HTML(constants.cwDockPanelCenter());
ScrollPanel scroller = new ScrollPanel(contents);
scroller.setSize("400px", "100px");
dock.add(scroller, DockPanel.CENTER);

Answer 2

Хитрость с GWT или Swing GUI состоит в том, чтобы визуализировать ваш намеченный макет как комбинацию виджетов макета инструментария, вложенных друг в друга.

Основываясь на вашем описании, вы можете посмотреть, как вы можете составить графический интерфейс:

Начните с HorizontalSplitPanel для самого высокого уровня.

Для левой стороны (таблица:)

Создайте VerticalPanel и добавьте к нему 3 виджета - изображение или литерал html для заголовка, затем сетку с 4 столбцами для самой таблицы, затем другое изображение или литерал для заголовка. Добавьте эту вертикальную панель к левой стороне разделенной панели

(В качестве альтернативы вы можете получить одну большую FlexTable для всей левой стороны. Особенно, если вы хотите эмулировать таблицы HTML с помощью colspans и тому подобное)

Для правой стороны:

Создайте VerticalPanel и просто добавьте заголовки, выпадающие списки и текстовые вводы по мере необходимости. Кроме того, вы можете создать сетку, если вы хотите, чтобы надписи на каждой стороне выпадающего меню или ввода текста Добавьте эту правую боковую панель к правой стороне HorizontalSplitPanel

Answer 3

Я думаю, что вы можете использовать ваш опыт HTML в вашем проекте GWT. И вам также не нужно идти на связыватель пользовательского интерфейса Вы можете играть между ними.

Создай свой макет в HTML. Даже там, где вам нужен статический контент, используйте HTML. в своем HTML Поместите туда, где вы хотите разместить свой интерактивный виджет. С этого момента начинается GWT. Создайте свои красивые виджеты в GWT. Сделайте это с помощью HTML-макета RootPanle.get ("ваш div ID"). Add (ваш виджет);

Эта методика также используется в примере проекта, поставляемого с SDK. Даже в Google IO 2010 они продвигают ИСПОЛЬЗОВАНИЕ большего количества HTML, где вы можете (Мое личное мнение ..)

Answer 4

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