Animatr – GUI & Structure: Nesting Polymer Elements

The first step of rebuilding animatr was to remove all code and totally rebuild the GUI using a single custom element: <animatr-gui> using polymer. The GUI itself has three nested custom elements:

<animatr-titlebar> - Containins the windows’ title, close button, …
<animatr-toolbars> – Wrapper for the toolbars
<animatr-panels> – A wrapper to create a GUI using pannels that can be dragged.

The HTML code of the root element looks like this:

<head>
  <link href="packages/animatr_gui/elements/animatr-ui.html" rel="import" />
</head>
<body>
  <animatr-ui></animatr-ui>
</body>

The corresponding element HTML code is:

<polymer-element name="animatr-ui">
  <meta charset="utf-8"/>
  <link rel="import" href="animatr-titlebar.html">
  <link rel="import" href="animatr-toolbars.html">
  <link rel="import" href="animatr-panels.html">
  <link rel="import" href="animatr-panel-....html">
  <template>
      <animatr-titlebar id="animatr-titlebar"></animatr-titlebar>
      <animatr-toolbars id="animatr-toolbars"></animatr-toolbars>
      <animatr-panels id="animatr-panels"></animatr-panels>
  </template>
  <script type="application/dart" src="animatr-ui.dart"></script>
</polymer-element>
 

The Dart code for the custom element is:


import 'package:polymer/polymer.dart';

import 'dart:html';

import 'package:animatr_gui/elements/animatr-titlebar.dart';
import 'package:animatr_gui/elements/animatr-toolbars.dart';
import 'package:animatr_gui/elements/animatr-panels.dart';

import 'animatr-panel-....dart';

@CustomTag('animatr-ui')
class AnimatrUiElement extends PolymerElement {
  bool get applyAuthorStyles =&gt; true;

  ...PanelElement panel_...;

  AnimatrUiElement.created() : super.created() {
    panel_... = document.createElement('animatr-panel-...');
  }

  AnimatrTitlebarElement titlebar;

  AnimatrToolbarsElement toolbars;

  AnimatrPanelsElement panels;

  @observable Project currentProject;

  @override
  void enteredView() {
    super.enteredView();

    titlebar = $['animatr-titlebar'];
    toolbars = $['animatr-toolbars'];
    panels = $['animatr-panels'];

    titlebar.ui = this;
    panels.ui = this;

    panels.addPanel(panel_..., 'north/east/south/west/center');
   }
}

Nesting elements was complicated first. Assuming you have your project’s root file (mine is called animatr.html), you could import all elements in this file, at a central place. But this had some strange behaviour to me:
The outer elements get created first and thus, before all nested elements. Thus I wasn’t able to correctly query for the nested elements. Because the custom element wasn’t registered Google Dart had some type errors.

The solution was to import other elements within the custom element itself, right before the <template> tag.

I had another problem using special characters. It turned out that the charset settings (e.g. by using <meta charset=”utf-8″/>) is not propagated to custom elements. Thus make sure to include a <meta>-tag in your custom elements if you want to use custom elements.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *


fünf + 1 =

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>