如何使用main()构建最小的Dart Polymer应用程序

时间:2014-07-03 04:02:12

标签: dart main dart-polymer

Dart编辑器目前仅支持一种dart聚合物(/ file)新项目生成选项。这个选项在没有main()的/ web子目录中设置4个文件,到达main需要一些对我来说不太明显的样板更改。

我在飞镖论坛上得到了一些帮助,这有点" howto" Guenter Zoeckbauer的问题,所以我想分享这个最小的项目的最小变化的结果,这为我提供了重新建立我过时的代码和文件结构的起点。

在我看来,它提供了良好的起点参考,可以重新构建过去几个月内所做的所有快速和重要变更已过时的应用。

2 个答案:

答案 0 :(得分:2)

以下是必须修改的6个文件(应用名称为:app_with_main):

1 app_with_main.css NO CHANGE

2 clickcounter.dart NO CHANGE

3 clickcounter.html NO CHANGE

4 index.html:

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample app</title>
    <!-- <script src="packages/web_components/platform.js"></script>
         not necessary anymore with Polymer >= 0.14.0 -->
    <script src="packages/web_components/dart_support.js"></script>

    <link rel="import" href="clickcounter.html">

    <!-- ORIGINAL SCRIPT
    <script type="application/dart">export 'package:polymer/init.dart';</script>
    <script src="packages/browser/dart.js"></script>
    -->

    <link rel="stylesheet" href="app_with_main.css">
  </head>
  <body>
    <h1>App with main</h1>

    <p>Hello world from Dart!</p>

    <div id="sample_container_id">
      <click-counter count="5"></click-counter>
    </div>

    <script type="application/dart">export 'init.dart';</script>   

  </body>
</html>

#5。 init.dart(新)

import&#34; package:polymer / polymer.dart&#34 ;;

main() {

  print("always before polymer initialization is complete");  

  initPolymer().run(() {

     print('''Code here will be called almost immediately and cannot rely 
              on the polymer elements being instantiated.''');

    Polymer.onReady.then((_) { 

      print('''at this point the onReady callback has been returned and thus the polymer 
      initialization process will be complete''');

    });
  });

6必须修改​​项目yaml文件以将entry_point设置为index.html:

name: app_with_main
description: A sample Polymer application
dependencies:
    polymer: ">=0.11.0-dev.2 <0.12.0"
transformers:
- polymer:
    entry_points: web/index.html

应该这样做,你应该关闭并运行一个代码结构,可以随着你的项目长期发展....

再次感谢Dart Super Hero Guenter Zoecchbauer!

答案 1 :(得分:1)

为了参考和比较,我认为考虑由Chrome Dev Editor生成的骨架Polymer Dart应用程序也很有用。它包括一个Dart main()。

我已经在新生成的Polymer Dart Paper元素项目的Web文件夹中发布了index.html和main.dart(截至2014-10-10)。

请注意,这些引用了一个sample_app自定义元素,该元素会生成到lib文件夹中,但是粘贴到下面也会太长。

<强> 1。的index.html

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>HelloDartWebPaper</title>
    <link rel="stylesheet" href="styles.css">

    <script src="packages/web_components/platform.js"></script>
    <script src="packages/web_components/dart_support.js"></script>

    <link rel="import" href="packages/HelloDartWebPaper/sample_app.html">
  </head>

  <body unresolved>
    <sample-app></sample-app>

    <script src="main.dart" type="application/dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

<强> 2。 main.dart

import 'package:polymer/polymer.dart';
import 'package:paper_elements/paper_toast.dart';
import 'package:HelloDartWebPaper/sample_app.dart';

void main() {
  // Init polymer.
  initPolymer();

  // Register Polymer components (ones that are actually used in the app).
  registerWidgetsWithPolymer();
}

@initMethod
void postPolymerBoot() {
  print('Polymer init complete.');
}

void registerWidgetsWithPolymer() {
  upgradePaperToast();
  Polymer.register('sample-app', SampleApp);
}
  1. styles.css的 省略 - 不相关

  2. lib中的sample_app组件。