GWT Виджет из HTML

Question

У меня есть блок HTML, который я хотел бы использовать в качестве основы для GWT-виджета, но не совсем уверен, что это лучший способ сделать это. Например, мой HTML-блок выглядит примерно так:

<div class="my-widget">
    <div class="header">
        <span class="title">Title Text</span>
    </div>
    <div class="body">
        <span class="content">Content Text</span>
    </div>
</div>

Теперь я, конечно, могу вставить это как статическую строку в виджет HTML, но в этом случае мне нужна возможность задавать текст элементов «title» и «content» на лету. Это убивает (или, по крайней мере, значительно усложняет) параметр статического текста.

Первое, что приходит на ум в этом случае, - это создать элементы в GWT вручную и хранить ссылки на те, которые мне нужно изменить, например:

DivElement container = document.createDivElement();
setStyleName(container, "my-widget");
setElement(container);

DivElement header = document.createDivElement();
setStyleName(header, "header");
container.appendChild(header);

// Hold onto this element for later manipulation
DivElement title = document.createDivElement();
setStyleName(title, "title");
header.appendChild(title);

Но это быстро становится неуправляемым для всех, кроме простейших макетов (которые у меня нет.)

Что мне нужно, так это возможность отправлять HTML-код в виде статического текста, а затем делать какой-то селектор, например jQuery, для запроса элементов, которыми я хочу манипулировать. Мне известно о GWT-Query , но я не смог запустить его без ошибок, и мне кажется, что он слишком рано для меня, чтобы его было удобно интегрировать. в профессиональный продукт только сейчас.

Мне также известно о UiBinder от Google, который звучит точно так же, как я хочу. Насколько я могу судить, проблема в том, что функциональность доступна только в GWT 2.0, который все еще находится в состоянии кандидата на выпуск и поэтому для меня непригоден.

Итак, учитывая все это (извините за длинный вопрос!), Есть ли у вас какие-либо предложения о том, как лучше всего достичь чего-то подобного?

Answer 1

GWT 2.0 выйдет до конца года. Поэтому, если вам не понадобится доставить в течение нескольких дней, я бы начал работать с RC2 и попробовал новый подход UIBinder.

Answer 2

Как насчет использования HTML.wrap (). Например, если вы добавили идентификатор «my-widget» в ваш самый внешний div, вы можете сделать что-то вроде:

HTML myWidget = HTML.wrap(RootPanel.get("my-widget").getElement());

Answer 3

Вы можете использовать виджет InlineHTML для создания диапазона и управления его содержимым.

Answer 4

Для меня подходит следующий код:

HorizontalPanel divContainer = new HorizontalPanel ();
Element div = DOM.createDiv();
div.appendChild(...); // whatever element it could fit inside
divContainer.getElement().appendChild(div);

Редактировать

Идея этого заключается в манипулировании DOM с другими виджетами, которые вы уже запрограммировали.

PS: я использую GWT 2.4

Answer 5

То же, что и выше, но получение панели GWT (возможность добавлять детей). Это также полезно, когда вам нужно обернуть сторонний объект GUI инструментария как виджет GWT:

Панель gwtPanel = HTMLPanel.wrap (anElement);

Answer 6

Как вы, вероятно, знаете, GWT не предоставляет встроенный виджет, который отображается непосредственно на элемент span. Если вы можете использовать div для заголовка и содержимого, то этот фрагмент кода должен (без GWT на этом компьютере, немного по памяти) генерировать имеющуюся у вас структуру DOM.

FlowPanel myWidget = new FlowPanel();
myWidget.setStyleName("my-widget");

SimplePanel header = new SimplePanel();
header.setStyleName("header");

Label title = new Label(titleText);
title.setStyleName("title");
header.add(title);
myWidget.add(header);

SimplePanel body = new SimplePanel();
body.setStyleName("body");

Label content = new Label(contentText);
content.setStyleName("content");
body.add(content);
myWidget.add(body);

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

title.setText(newTitle);
content.setText(newContent);