如何构建具有多个视图的复杂Web UI应用程序？ [英] How to build a complex Web UI application with multiple views?

问题描述

我将构建具有许多不同视图的复杂应用程序。想象一下例如eshop解决方案。可能有很多不同的视图：

• 联系页面包含一些静态信息


• 注册表


• 查看您的订单


• 产品列表


• li>
  
• ...

现在我有点困惑，如何构建这样一个复杂的应用程序使用Web UI。我想让视图的HTML模板分成多个文件，并有一些逻辑来确定，哪一个应该渲染。

假设我想有一个主模板包含基本的东西，例如页眉和页脚，那么我有很多内容模板，这些应该被注入到主模板中的正确位置。

到目前为止，我一直只看到使用Dart Web UI的小型单模板示例，因此我不知道如何实现这一点。

解决方案

p>我汇集了一个我目前如何做的一个例子（希望我们很快会看到更大的最佳实践示例应用程序）：

有关此示例的完整源代码，请参阅 gist：如何在Dart中构建具有多个视图的Web UI应用程序

主申请

• app.html - 包含主应用程序布局，实例化标题和 组件，并为视图创建一个容器。


• app.dart - 处理导航事件并替换视图容器内的视图（见下文）


• app.css

Web Components

Footer

• header.html - 标头的网页组件


• footer.html - 页脚的Web组件

视图

• contact.html - 联系人视图的Web组件


• contact.dart 包含ContactsView类的文件


• products.html - 产品视图的Web组件


• products.dart - 包含ProductsView类的Dart文件

在视图之间切换

< 实例化网络组件的标准方法是使用<在 HTML 中显示x-foo>< / x-foo> 。
由于我们有不同的意见，我们必须在 Dart 代码中实例化Web组件。这样做，我们必须手动调用Web Components生命周期方法。这不是直接的，可能会在将来得到改进（请参阅 Issue 93 ，其中还包含一些

以下是如何切换视图（ app.dart 的源代码）：

  import'dart：html'; 
 import'package：web_ui / web_ui.dart'; 
 
 import'contact.dart'; 
 import'products.dart'; 
 
 void main（）{
 //添加视图导航事件处理程序
 query（'＃show-contact-button'）。onClick.listen（showContactView）; 
 query（'＃show-products-button'）。onClick.listen（showProductView）; 
} 
 
 //用于在当前视图上调用生命周期方法
 ComponentItem lifecycleCaller; 
 
 ///切换到联系人视图
 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（）; 
} 
 
 ///切换到产品视图
 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）{
 //调用生命周期方法，以防组件需要清理
 lifecycleCaller.remove（）; 
} 
} 
  

这里是 app.html ：

 <！DOCTYPE html& 
 
< html> 
< head> 
< meta charset =utf-8> 
< title>复杂的Web UI应用程序< / title> 
< link rel =stylesheethref =app.css> 
 
<！ - 导入页眉和页脚组件 - > 
< link rel =componentshref =header.html> 
< link rel =componentshref =footer.html> 
 
<！ - 导入视图组件 - > 
< link rel =componentshref =contact.html> 
< link rel =componentshref =products.html> 
< / head> 
< body> 
< header-component>< / header-component> 
 
< div id =view-container>< / div> 
 
< button id =show-contact-button>显示联系人视图< / button> 
< button id =show-products-button>显示产品视图< / button> 
 
< footer-component>< / footer-component> 
 
< script type =application / dartsrc =app.dart>< / script> 
< script src =packages / browser / dart.js>< / script> 
< / body> 
< / html> 
  

注意：我必须通过< link rel =componentshref =contact.html> ，即使我没有直接在HTML文件中引用它。

I am going to build complex application having many different views. Imagine for example eshop solution. There can be a lot of different views:

• Contact page with some static information
• Registration form for new customers
• View of your order
• List of the products
• Details about a product
• ...

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.

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):

For the complete source code of this example see gist: How to build a Web UI application with multiple views in Dart

Main Application

• 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

Web Components

Header and Footer

• header.html - Web Component for header
• footer.html - Web Component for footer

Views

• 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

Switching Between Views

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).

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();
  }
}

And here is the source for 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: 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屋！