Как получить вложенный div в GWT

Question

Я хочу получить вложенный div в GWT и иметь возможность разместить там виджет. Примерно так:

<div id="container">
    <div id="content_left">
    </div>
    ...other divs
</div>

Я хочу иметь возможность получить content_left и поместить туда виджет. Пока что все, что получает RootPanel - это div внутри тега. Я также пытался использовать DOM.getElementById (...), но я не знаю, как разместить виджет, поскольку метод add указывает, что входные параметры должны иметь тип child.

Теперь я мало что знаю о CSS и позиционировании, и я не делал стили, описанные выше. Это то, что я получил от своего графического дизайнера. Я считаю, что это был его способ раскладывать вещи. Я уже думал о разметке без использования внешнего div, такого как div с id = container выше, поэтому у меня не возникло бы этой проблемы, но я хотел бы услышать, если это хорошая идея.

Answer 1

Конкретный пример предоставленного вами фрагмента HTML будет примерно таким. FlowPanels - это div, которые поддерживают добавление к ним произвольного количества вещей. Если вы знаете, что у данного div будет только один виджет, то SimplePanel, вероятно, будет лучшим выбором.

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

FlowPanel container = new FlowPanel();
container.setStyleName("container");

FlowPanel contentLeft = new FlowPanel();
contentLeft.setStyleName("content_left");
container.add(contentLeft);

container.add(otherDivs);


//elsewhere in your code:
contentLeft.add(oneWidget);
contentLeft.add(secondWidget);

Answer 2

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

Вы сказали

Теперь я мало что знаю о CSS и позиционировании, и я не делал стили, описанные выше.

Это именно то, о чем GWT говорит: вам не нужно. Вы объединяете свой графический интерфейс в коде и позволяете GWT беспокоиться о том, как перевести его на CSS. Подсказка: это намного лучше, чем большинство из нас когда-либо будет. Есть много обходных путей для многих известных браузеров, чтобы сделать его кросс-платформенным настолько, насколько это возможно.

Answer 3

Если у вас есть дизайнер, который создает качественный код макета, вы должны использовать его, но только если вы знаете обо всех рисках и проблемах совместимости и не заботитесь или не можете протестировать ваши макеты.

Принимая все это во внимание, я считаю этот подход чрезвычайно эффективным ..

Просто создайте свои виджеты из HTMLPanel и используйте div, если хотите, только переключаясь на объекты первого класса, чтобы представить ваш макет , когда вам нужно программное управление

    <g:HTMLPanel >

            <div class="normal style classes {obfuscated.style.class}">
                    <g:FlowPanel ui:field="programmaticPanel" stylePrimaryName="style">
                            <g:HTMLPanel>
                                    <p>CONTENT</p>
                            </g:HTMLPanel>
                    </g:FlowPanel>
            </div>

    </g:HTMLPanel >

Обратите внимание, что вы все еще можете использовать свои запутанные стили с ванильными divs / spans и т. Д. Или смешивать и сочетать!

Answer 4

Добро пожаловать в UIBinder http://www.gwtproject.org/doc/latest/DevGuideUiBinder.html

поддерживает пользовательские HTML + виджеты

«облегчает сотрудничество с дизайнерами пользовательского интерфейса, которым удобнее работать с XML, HTML и CSS, чем с исходным кодом Java»

Answer 5

Вы можете изменить (или попросить вашего дизайнера изменить) ваш html на

<div id="container">
    <div id="content_left">
        <span id="qq"/>
    </div>
    ...other divs
</div>

А в вашем коде используйте:

FlowPanel panel = new FlowPanel();
RootPanel.get("qq").add(panel);
panel.add(w1);
panel.add(w2);
...