Блог

Главная - Вопросы по программированию - Как структурировать минимальное приложение Dart Polymer с помощью main ()

Как структурировать минимальное приложение Dart Polymer с помощью main ()

#dart #main #dart-polymer

#dart #program-entry-point #dart-polymer

Вопрос:

Редактор Dart в настоящее время поддерживает только один параметр создания нового проекта dart polymer (/ file). И эта опция настраивает 4 файла во вложенном каталоге / web без main(), и для получения main требуются некоторые изменения в базовой панели, которые были для меня не совсем очевидны.

Мне помог на форуме Dart ответить на этот несколько «практический» вопрос Гюнтер Зукбауэр, поэтому я хочу поделиться результатами этих минимальных изменений в этом приятном минималистичном проекте, который предоставил мне именно ту отправную точку, на которой нужно заново основывать мой устаревший код и файловую структуру.

Мне кажется, это обеспечивает хорошую отправную точку для повторного создания приложений, которые устарели из-за всех быстрых и ВАЖНЫХ изменений, внесенных за последние несколько месяцев.

Ответ №1:

Вот 6 файлов, которые необходимо изменить (название приложения: app_with_main):

1 app_with_main.css БЕЗ ИЗМЕНЕНИЙ

2 clickcounter.dart БЕЗ ИЗМЕНЕНИЙ

3 clickcounter.html ИЗМЕНЕНИЙ НЕТ

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 . инициализация.dart (новая)

импортируйте «package:polymer/ полимер.dart»;

 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 Гюнтеру Зукчбауэру!

Ответ №2:

Для справки и сравнения, я думаю, полезно также рассмотреть приложение Skeleton Polymer Dart, которое генерируется редактором разработчиков Chrome. Оно включает в себя Dart main().

Ниже я опубликовал index.html и main.dart из веб-папки недавно созданного проекта Polymer Dart Paper elements (по состоянию на 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. стили.css
    опущено — не относится к делу

  2. компонент sample_app в библиотеке.