Importación HTML: CustomTag no registrado
dart dart-polymer (1)
my_app.dart importar todas sus clases de Dart componentes personalizados en su my_app.dart . Por lo general, crearía un solo archivo Dart para importar, que exportaría cada entrada para que su my_app.dart permanezca limpio.
Estoy intentando crear un elemento personalizado a partir de un elemento de polymer-element , pero no puedo hacer que @CustomTag el @CustomTag . Mi archivo de dart ( my_element.dart ) se ve así:
@HtmlImport(''my_element.html'')
library projects.projectFolder.layout;
import ''package:polymer/polymer.dart'';
import ''dart:html'';
@CustomTag(''my-element'')
class MyElement extends PolymerElement {
@published String caption;
MyElement.created() : super.created();
}
Mi archivo html ( my_element.html ) tiene este aspecto:
<link rel="import" href="../../../../packages/polymer/polymer.html">
<polymer-element name="my-element">
<template>
<link rel="stylesheet" href="my_element.css">
<core-toolbar>
<h1>{{ caption }}</h1>
</core-toolbar>
</template>
<script type="application/dart" src="../my_element.dart"></script>
</polymer-element>
Lo que pasa es que la consola de Chrome sigue imprimiendo el siguiente error:
No elements registered in a while, but still waiting on 1 elements to be registered. Check that you have a class with an @CustomTag annotation for each of the following tags: ''my-element''.
Es curioso, porque he declarado la etiqueta personalizada como debería ser. Parece que no ha leído el archivo .dart cuando alcanza el .html .
El archivo .html se llama desde otro archivo .html principal. Creo que el orden en el que se llaman los archivos podría ser el problema, pero nuevamente, si Dart se compila antes de ejecutarse, no debería importarle.
He intentado varias soluciones pero ninguna de ellas ha funcionado. El único que funcionó es bastante sucio, que es importar el archivo my_element.dart directamente desde el archivo principal my_app.dart . Supongo que no debería hacerse de esa manera porque eso significaría importar todos los archivos my_element.dart en el mismo my_app.dart principal.
EDITAR (agregar index.html , pubspec.yml )
Mi archivo index.html parece a lo siguiente:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>My app</title>
</head>
<body unresolved fullbleed>
<my-app></my-app>
<script type="application/dart">
import ''package:polymer/polymer.dart'';
import ''package:project/my_app.dart'';
main() => initPolymer();
</script>
</body>
</html>
my_app es otro elemento personalizado, que es el elemento principal donde van todos los demás. En otras palabras, es como el controlador principal de la aplicación. Este elemento también tiene un archivo .dart y .html , que llamará a otros elementos como my-element .
Como puede ver, mi función main() es muy simple, ya que solo inicia el polímero (ver index.html ).
Mi pubspec.yml parece a lo siguiente:
name: project
version: 0.0.1
description: Some project.
author: Tomas
homepage: https://github.com/*******
environment:
sdk: ''>=1.10.0 <2.0.0''
dependencies:
polymer: ''^0.16.0''
core_elements: ''^0.7.1''
paper_elements: ''^0.7.1''
route_hierarchical: "^0.6.1"
transformers:
- polymer:
entry_points: web/index.html
- $dart2js:
$include: "**/*.polymer.bootstrap.dart"
Mi directorio se parece a esto (solo muestro una fracción de él, el importante que espero):
.
├── README.md
├── build
│ └── web
│ ├── index.html
│ ├── index.html.polymer.bootstrap.dart.js
│ └── packages
├── lib
│ ├── my_app.dart
│ └── src
│ ├── elements
│ ├── layout
│ │ ├── my_element.css
│ │ ├── my_element.dart
│ │ └── my_element.html
│ ├── my_app.css
│ ├── my_app.html
│ └── modules
│ └── module.dart
│ ├── my_app.css
├── pubspec.lock
├── pubspec.yaml
└── web
│ ├── index.html
│ └── packages -> ../packages
│ ├── my_app.html
│ └── modules
│ └── module.dart
Espero que esta edición no confunda más de lo que debería. Solo busco saber cuál es la estructura de carpetas correcta y la forma de importación de una aplicación de Dart.
En pocas palabras: ¿cómo debería ser el árbol cuando se programa una gran aplicación en un dardo, y dónde debo hacer las importaciones? He visto todos los documentos que pude, incluidos algunos tutoriales, pero todos hablan de ejemplos muy simples en los que la mayor parte del código está en la carpeta web , que no me gustaría.
EDITAR (resumir y reformular, agregar my_app.html y my_app.dart )
En pocas palabras:
Tengo un elemento personalizado definido por my_element.html y my_element.dart (definido anteriormente en esta respuesta) y quiero importarlo a otro elemento my_app usando solo el html. Es decir, no importando my_element.dart en my_app.dart , sino importando solo my_element.html utilizando una etiqueta de enlace en my_app.html :
<link rel="import" href="../../../packages/polymer/polymer.html">
<link rel="import" href="layout/my_element.html">
<polymer-element name="my-app">
<template>
<core-scaffold id="scaffold">
<my-element tool flex></my-element>
<main fit></main>
</core-scaffold>
</template>
<script type="application/dart" src="../my_app.dart"></script>
</polymer-element>
my_app.dart :
@HtmlImport(''src/my_app.html'')
import ''package:polymer/polymer.dart'';
import ''package:core_elements/core_scaffold.dart'';
@CustomTag(''my-app'')
class MyApp extends PolymerElement {
MyApp.created() : super.created();
}
¿No debería el <script type="application/dart" src="../my_element.dart"></script> ser suficiente para decirle al compilador que cargue ese archivo de dart para registrar la etiqueta del elemento siguiendo la dependencia transitiva definida? por la importación de html?