如何向 Vaadin 项目添加新的 UI?
How can I add new UI to a Vaadin project?
我真的不知道如何向 Vaadin 项目添加新页面。作为实验,我重命名了一页:
我重命名为:
@WebServlet(value = "/*", asyncSupported = true)
收件人:
@WebServlet(value = "/blabla1", asyncSupported = true)
但是,我想要一个新页面:
@WebServlet(value = "/blabla2", asyncSupported = true)
不幸的是,当我重命名第一个时,我在 Chrome 中收到此消息:
failed to load bootstrap javascript vaadin
如果上面的示例重命名似乎失败了,我该如何添加第二个网页?
André 的回答并不完全正确。虽然简单的 Vaadin 应用程序可以像单页应用程序一样运行,您只修改 UI 的内容而不更改 url,但应用程序通常比这更复杂,需要不同的方法。
具有单个 url 的单页应用程序有几个缺点。应用程序通常由许多部分和状态组成,通常它们有自己的 urls。用户可以直接导航到所需的组件或状态,将其加入书签以便以后直接访问它,可以使用后退和前进按钮等。
在 Vaadin 中,这是通过 Navigator 实现的。每个 UI 包含多个视图。然后使用导航器在视图之间导航。每个视图都有其独特的 url,由 URL 片段表示,因此用户可以在那里导航、收藏它等。
您可以阅读有关导航的详细教程here in book of vaadin。
Plain Vaadin applications do not have normal web page navigation as
they usually run on a single page, as all Ajax applications do. Quite
commonly, however, applications have different views between which the
user should be able to navigate. The Navigator in Vaadin can be used
for most cases of navigation. Views managed by the navigator
automatically get a distinct URI fragment, which can be used to be
able to bookmark the views and their states and to go back and forward
in the browser history.
这是在 Vaadin 中使用 "Navigator" 的简单 class 示例。首先创建一个简单的导航器对象,并在布局中使用它来显示视图。
public class NavigationtestUI extends UI {
@Override
public void init(VaadinRequest request) {
// Create Navigator, use the UI content layout to display the views
Navigator navigator = new Navigator(this, getContent());
// Add some Views
navigator.addView(MainView.NAME, new MainView()); // no fragment
// #count will be a new instance each time we navigate to it, counts:
navigator.addView(CountView.NAME, CountView.class);
// Navigate to view
navigator.navigate();
}
}
基于片段的 URL 确实应该受到青睐。您还可以通过提供 custom UI provider.
将不同的 Vaadin UI 提供给不同的 URL(没有片段)
如果您使用 Vaadin CDI or Vaadin Spring(您真的应该使用其中任何一个),您也可以通过提供 [=17] 的最后一部分将 UI 映射到不同的 URLS =] 作为注释的参数。
我真的不知道如何向 Vaadin 项目添加新页面。作为实验,我重命名了一页:
我重命名为:
@WebServlet(value = "/*", asyncSupported = true)
收件人:
@WebServlet(value = "/blabla1", asyncSupported = true)
但是,我想要一个新页面:
@WebServlet(value = "/blabla2", asyncSupported = true)
不幸的是,当我重命名第一个时,我在 Chrome 中收到此消息:
failed to load bootstrap javascript vaadin
如果上面的示例重命名似乎失败了,我该如何添加第二个网页?
André 的回答并不完全正确。虽然简单的 Vaadin 应用程序可以像单页应用程序一样运行,您只修改 UI 的内容而不更改 url,但应用程序通常比这更复杂,需要不同的方法。
具有单个 url 的单页应用程序有几个缺点。应用程序通常由许多部分和状态组成,通常它们有自己的 urls。用户可以直接导航到所需的组件或状态,将其加入书签以便以后直接访问它,可以使用后退和前进按钮等。
在 Vaadin 中,这是通过 Navigator 实现的。每个 UI 包含多个视图。然后使用导航器在视图之间导航。每个视图都有其独特的 url,由 URL 片段表示,因此用户可以在那里导航、收藏它等。
您可以阅读有关导航的详细教程here in book of vaadin。
Plain Vaadin applications do not have normal web page navigation as they usually run on a single page, as all Ajax applications do. Quite commonly, however, applications have different views between which the user should be able to navigate. The Navigator in Vaadin can be used for most cases of navigation. Views managed by the navigator automatically get a distinct URI fragment, which can be used to be able to bookmark the views and their states and to go back and forward in the browser history.
这是在 Vaadin 中使用 "Navigator" 的简单 class 示例。首先创建一个简单的导航器对象,并在布局中使用它来显示视图。
public class NavigationtestUI extends UI {
@Override
public void init(VaadinRequest request) {
// Create Navigator, use the UI content layout to display the views
Navigator navigator = new Navigator(this, getContent());
// Add some Views
navigator.addView(MainView.NAME, new MainView()); // no fragment
// #count will be a new instance each time we navigate to it, counts:
navigator.addView(CountView.NAME, CountView.class);
// Navigate to view
navigator.navigate();
}
}
基于片段的 URL 确实应该受到青睐。您还可以通过提供 custom UI provider.
将不同的 Vaadin UI 提供给不同的 URL(没有片段)如果您使用 Vaadin CDI or Vaadin Spring(您真的应该使用其中任何一个),您也可以通过提供 [=17] 的最后一部分将 UI 映射到不同的 URLS =] 作为注释的参数。