Dart 如何构建具有多个视图的复杂 Web UI 应用程序

发布于04月24日

我将构建具有许多不同视图的复杂应用程序.例如，想象一下eShop解决方案.可能有很多不同的观点:

带有一些静态信息的联系人页面
新客户登记表
查看您的订单
产品 list
有关产品的详细信息
...

现在我有点困惑，如何使用Web UI构建如此复杂的应用程序.我希望将视图的HTML模板分离到多个文件中，并有一些逻辑来确定应该呈现哪一个.

假设我想要一个包含页眉和页脚等基本内容的主模板，那么我有很多内容模板，它们应该被注入主模板的正确位置.

到目前为止，我总是只看到使用DART Web UI的小的单模板示例，所以我不知道如何实现这一点.

主要应用

app.html-包含主应用程序布局，实例化header和footer组件，并为视图创建容器.
app.dart-处理导航事件并替换视图容器内的视图(见下文)
app.css个

Web组件

页眉和页脚

header.html-标题的Web组件
footer.html-页脚的Web组件

视图

contact.html-联系人视图的Web组件
contact.dart-包含ContactsView类的DART文件
products.html-产品视图的Web组件
products.dart-包含ProductsView类的DART文件

在视图之间切换

达到instantiate Web组件的标准方法是在HTML中使用<x-foo></x-foo>. 因为我们有不同的视图，所以我们必须实例化Dart代码中的Web组件.要做到这一点，我们必须手动调用Web组件生命周期方法.这不是直截了当的，将来可能会改进(参见Issue 93，其中也包含一些示例).

以下是如何切换视图(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>

Note:我必须通过<link rel="components" href="contact.html">导入视图组件，尽管我没有在HTML文件中直接引用它.