如何构建具有多个视图的复杂 Web UI 应用程序? [英] How to build a complex Web UI application with multiple views?
问题描述
我将构建具有许多不同视图的复杂应用程序.想象一下，例如 eshop 解决方案.可以有很多不同的观点:
I am going to build complex application having many different views. Imagine for example eshop solution. There can be a lot of different views:
- 包含一些静态信息的联系页面
- 新客户注册表
- 查看您的订单
- 产品列表
- 有关产品的详细信息
- ...
现在我有点困惑，如何使用 Web UI 构建如此复杂的应用程序.我希望将视图的 HTML 模板分隔在多个文件中，并有一些逻辑来确定应该呈现哪个.
Now I am little bit confused, how to build such a complex application using Web UI. I would like to have the HTML templates for the views separated in multiple files and having some logic to determine, which one should be rendered.
假设我想要一个包含页眉和页脚等基本内容的主模板，那么我有很多内容模板，这些应该被注入到主模板内的正确位置.
Assume I want to have a single master template containing basic things like header and footer, then I have a lot of content templates, these should get injected into the right place inside the master template.
直到现在，我一直只看到使用 Dart Web UI 的小型单模板示例，所以我不知道如何实现这一点.
Until now, I have always seen only small single-template examples of using Dart Web UI, so I have no idea, how to achieve this.
推荐答案
我已经整理了一个我目前如何做的小例子(希望我们很快会看到一个更大的最佳实践示例应用程序为此):
I've put together a little example of how I currently do it (hope we will soon see a larger best practice example application for this):
有关此示例的完整源代码，请参阅要点:如何在 Dart 中构建具有多个视图的 Web UI 应用程序
- app.html - 包含主应用程序布局，实例化 header 和 footer 组件并为视图创建容器.
- app.dart - 处理导航事件并替换视图容器内的视图(见下文)
- app.css
- app.html - Contains the main application layout, instantiates the header and footer component and creates a container for the views.
- app.dart - Handles navigation events and replaces the view inside the view container (see below)
- app.css
- header.html - 标题的 Web 组件
- footer.html - 页脚的 Web 组件
- header.html - Web Component for header
- footer.html - Web Component for footer
- contact.html - 联系人视图的 Web 组件
- contact.dart - 包含 ContactsView 类的 Dart 文件
- products.html - 产品视图的 Web 组件
- products.dart - 包含 ProductsView 类的 Dart 文件
- contact.html - Web Component for the Contacts View
- contact.dart - Dart file containing ContactsView class
- products.html - Web Component for the Products View
- products.dart - Dart file containing ProductsView class
实例化 Web 组件的标准方法是使用 <HTML 中的 x-foo>.由于我们有不同的视图，我们必须在 Dart 代码中实例化 Web 组件.为此，我们必须手动调用 Web 组件生命周期方法.这不是直截了当的，将来可能会得到改进(请参阅 问题 93，其中还包含一些例子).
The standard way to instantiate Web Components is by using <x-foo></x-foo> in HTML.
As we have different views, we will have to instantiate the Web Components inside our Dart code. Doing this we have to manually call the Web Components lifecycle methods. This is not straight forward and might be improved in the future (see Issue 93 which also contains some exmples).
以下是切换视图的方法(app.dart 的来源):
Here is how you can switch views (source of app.dart):
import 'dart:html';
import 'package:web_ui/web_ui.dart';
import 'contact.dart';
import 'products.dart';
void main() {
// Add view navigation event handlers
query('#show-contact-button').onClick.listen(showContactView);
query('#show-products-button').onClick.listen(showProductView);
}
// Used to call lifecycle methods on the current view
ComponentItem lifecycleCaller;
/// Switches to contacts view
void showContactView(Event e) {
removeCurrentView();
ContactView contactView = new ContactView()
..host = new Element.html('<contact-view></contact-view>');
lifecycleCaller = new ComponentItem(contactView)..create();
query('#view-container').children.add(contactView.host);
lifecycleCaller.insert();
}
/// Switches to products view
void showProductView(Event e) {
removeCurrentView();
ProductsView productsView = new ProductsView()
..host = new Element.html('<products-view></products-view>');
lifecycleCaller = new ComponentItem(productsView);
lifecycleCaller.create();
query('#view-container').children.add(productsView.host);
lifecycleCaller.insert();
}
void removeCurrentView() {
query('#view-container').children.clear();
if (lifecycleCaller != null) {
// Call the lifecycle method in case the component needs to do some clean up
lifecycleCaller.remove();
}
}
这里是 app.html 的源代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A Complex Web UI Application</title>
<link rel="stylesheet" href="app.css">
<!-- import the header and footer components -->
<link rel="components" href="header.html">
<link rel="components" href="footer.html">
<!-- import the view components -->
<link rel="components" href="contact.html">
<link rel="components" href="products.html">
</head>
<body>
<header-component></header-component>
<div id="view-container"></div>
<button id="show-contact-button">show contact view</button>
<button id="show-products-button">show products view</button>
<footer-component></footer-component>
<script type="application/dart" src="app.dart"></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
注意:我必须通过 <link rel="components" href="contact.html"> 导入视图组件，即使我没有直接导入在 HTML 文件中引用它.
Note: I had to import the view components via <link rel="components" href="contact.html"> even though I do not directly reference it in the HTML file.
这篇关于如何构建具有多个视图的复杂 Web UI 应用程序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
