gwt - это - vaadin




Учебное пособие по нескольким страницам в Google Web Toolkit(GWT) (6)

Вы можете использовать MVP patern. Вот небольшая библиотека https://code.google.com/p/gwt-simple-mvp/wiki/GettingStarted .

И вы можете разделить код на более js-файлы. https://code.google.com/p/gwt-spliting/

Я только начал изучать Google Web Toolkit (GWT). Как сделать разные HTML-страницы в моем приложении GWT?

Например, я хочу создать приложение для книжного магазина. В этом приложении у меня будет три страницы:

  1. Домашние страницы, на которых я буду приветствовать пользователя и предлагаю книги пользователя
  2. Страница для просмотра книг по категориям и просмотра деталей (используйте виджеты GWT)
  3. Посмотрите книги онлайн.

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


Добавьте модуль для каждой страницы, для которой требуется функция GWT. Повторно используйте компоненты.


Потрясающие! Я объединил ответ Криса Р. с Крисом Босингом, чтобы придумать это:

Это начальная страница индекса

public class Index implements EntryPoint, ValueChangeHandler<String> {
    public void onModuleLoad() {
        History.addValueChangeHandler(this);
        if (History.getToken().isEmpty()) History.newItem("index");
        Composite c = new Login(); 
        FlowControl.go(c);
    }

    public void onValueChange(ValueChangeEvent<String> e) {
        FlowControl.go(History.getToken());
    }
}

Это контроллер или ContentContainer в соответствии с Крисом Р.

public class FlowControl {
private static FlowControl instance;
private FlowControl() {}
public static void go(Composite c) {
    if (instance == null) instance = new FlowControl(); // not sure why we need this yet since everything is static.
    RootPanel.get("application").clear();
    RootPanel.get("application").getElement().getStyle().setPosition(Position.RELATIVE); // not sure why, but GWT throws an exception without this. Adding to CSS doesn't work.
    // add, determine height/width, center, then move. height/width are unknown until added to document. Catch-22!
    RootPanel.get("application").add(c);
    int left = Window.getClientWidth() / 2 - c.getOffsetWidth() / 2; // find center
    int top = Window.getClientHeight() / 2 - c.getOffsetHeight() / 2;
    RootPanel.get("application").setWidgetPosition(c, left, top);
    History.newItem(c.getTitle()); // TODO: need to change and implement (or override) this method on each screen
}

public static void go(String token) {
    if (token == null) go(new Login());
    if (token.equals("cart")) go(new Cart());
    if (token.equals("login")) go(new Login());
    // Can probably make these constants in this class
}

Затем вы можете перенести гиперссылки и кнопки в любом месте вашего кода. (Еще не пробовал Гиперссылки.)

    Button submit = new Button("Submit");
    submit.addClickHandler(new ClickHandler() {
        public void onClick(ClickEvent event) {
            FlowControl.go(new MyScreen());             
        }           
    });

Я добавил div в свой HTML

<!-- This is where the application will reside within. It is controlled by FlowControl class. -->
<div id="application"></div>

И теперь все экраны должны вызывать initWidget () в конструкторе вместо добавления в RootPanel, так как теперь это класс Composite, например

    initWidget(myPanel); // all composites must call this in constructor

Я бы использовал класс HyperLink и History. Хорошая вещь о классе Hyperlink заключается в том, что он устанавливает этот токен (например, # foobar), и все, что вам нужно сделать, - это захватить событие, которое вызывается при изменении значения токена (ValueChangeEvent). В случае с Handler вы затем замените страницы.

Пример: адрес приветствуемой страницы: www.yourpage.com/#home на этой странице будет ссылкой на страницу «browse book», когда будет нажата ссылка, новый адрес будет выглядеть примерно так: www.yourpage.com /#просматривать

И вот код:


public class MainEntryPoint implements EntryPoint, ValueChangeHandler {
    VerticalPanel panel = new VerticalPanel();
    Label label=new Label();
    public void onModuleLoad() {
        Hyperlink link1 = new Hyperlink("books", "browse");
        Hyperlink link2 = new Hyperlink("user details", "details");
        panel.add(link1);
        panel.add(link2);
        panel.add(label);
        RootPanel.get().add(panel);
        History.addValueChangeHandler(this);
        //when there is no token, the "home" token is set else changePage() is called.
        //this is useful if a user has bookmarked a site other than the homepage.
        if(History.getToken().isEmpty()){
            History.newItem("home");
        } else {
            changePage(History.getToken());
        }
    }

public void onValueChange(ValueChangeEvent event) {
    changePage(History.getToken());
}
public void changePage(String token) {
    if(History.getToken().equals("browse")) {
        label.setText("Here would be some books");
    } else if (History.getToken().equals("details")) {
        label.setText("Here would be the user details");
    } else {
        label.setText("Welcome page");
    }
}

}


GWT Multipage - простая структура для многостраничных GWT-приложений.


То, что я обычно делаю в таких ситуациях, это сначала создать структуру веб-страницы. У меня будет div для заголовка, бокового меню и нижнего колонтитула. У меня также будет div в моем HTML для основного контента.

Пример:

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta name='gwt:module' content='org.project.package.Core=org.project.package.Core'>
    </head>
    <body>
        <!-- Load the JavaScript code for GWT -->
        <script language="javascript" src="ui/org.project.package.ui.Core.nocache.js"></script>

        <!-- For some unknown reason in Internet Explorer you have to have cellpadding/spacing ON THE ELEMENT and not on the STYLE if it is in the body tag like this -->
        <table id="wrapper" cellpadding="0" cellspacing="0" style="width: 100%;height: 100%;">

             <!-- Header row -->
             <tr style="height: 25%;">
                 <td colspan="2" id="header"></td>
             </tr>

             <!-- Body row and left nav row -->
             <tr style="height: 65%;">
                 <td id="leftnav"></td>
                 <td id="content"></td>
             </tr>

             <!-- Footer row -->
             <tr style="height: 10%;">
                <td colspan="2" id="footer"></td>
             </tr>

        </table>

        <!-- This iframe handles history -->
        <iframe id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>
    </body>
</html>

(Если вам нравятся макеты на основе <div>, не стесняйтесь использовать их.)

Затем вы создаете свою точку входа (в моем случае Core.java ), как обычно, устанавливая каждый из элементов по мере необходимости.

RootPanel.get("header").add(new Header());
RootPanel.get("leftnav").add(new NavigationMenu());
RootPanel.get("footer").add(new Footer());

Конечно, возможно иметь статический нижний колонтитул и заголовок, но это ни здесь, ни там.

У меня также есть абстрактный класс под названием «Контент». Объекты контента расширяют «Композитный» и будут иметь различные методы для упрощения создания и компоновки новой страницы. Каждая страница, которую я создаю для этого приложения, будь то экран справки, экран поиска, корзина для покупок или что-то еще, имеет тип Content .

Теперь я создаю класс под названием «ContentContainer». Это singleton, который отвечает за управление элементом «content». Он имеет один метод «setContent», который принимает объекты типа «Содержимое». Затем он в основном удаляет что-либо внутри «content» <td> и заменяет его любым виджетами (Composite), которые вы назначаете с помощью метода setContent. Метод setContent также обрабатывает управление заголовками и заголовками. В основном ContentContainer служит для объединения всех различных точек привязки, которые могут возникнуть, если каждый контент страницы должен «знать» обо всех функциях, которые он должен выполнять.

Наконец, вам нужен способ добраться до этой страницы, не так ли? Это просто:

ContentContainer.getInstance().setContent(new Search());

Поместите вышеприведенное в случайное событие где-то, и вы золотой.

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

Недостатки, которые я вижу в подходе ChrisBo, заключаются в том, что у вас есть список, который должен поддерживаться в токенах -> страницах. Другой недостаток, который я вижу, - это то, что я не вижу, как вы можете иметь реальную систему истории с помощью этого метода.

Одна вещь, которую он предлагает по моему подходу, состоит в том, что все варианты страниц довольно централизованы. Я бы использовал какой-то Enum или, по крайней мере, статический класс со значениями String, чтобы не допустить перекрещивания ссылок.

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