CODEWITHSUNDEEP
oopdartcode-reusedart-polymer
will
will

Reputation: 5061

Element reuse with Dart Polymer

Proposition:

G'day, I have a question for the collective wisdom-trust. I made an observation while trying to resolve a mysterious error with Dart and Dart-Polymer (see: related).

The thing I came across relates to (and ) Element ; during my investigation of the aforementioned bug, I created two cloned elements:

  1. <x-fred> and
  2. <z-fred>

Both are clones of the Stopwatch element in the example.

The only change from the original is element name(s).

What occurs to me, is that to be able to a nice 'stock element' such as a stopwatch I minimally need a distinct fred.html for each Element I .

That presupposes that I can organise my project such that this is convenient and simple to maintain.

Question(s):

The real question is about how-can a developer do the following things ... ?

  1. an Element layout definition without needing to make a clone (or copy).
  2. Is there a pattern to (at least) allow a project to the base code for cloned elements?
  3. Is there a way to an Element definition, using a declarative or "what-not-how" pattern so that I can say:
    • <z-fred> is-a stopwatch-element (for example).
  4. Are there patterns or recipes to let you be-a stopwatch-element and configure and/or customise an instance to certain styling, parameters, or behaviours.

If not, then these things need to be set-down for discussion. Where does that happen for and [dart:polymer]? Is there an comp.lang.dart? :-)

Example:

Assume I have a Polymer element called <z-fred>. And I want to subclass the z-fred element to produce a new (daughter) element definition: <x-fred>

How can I do this?

I'd expect to be able to do something like ...

  <!DOCTYPE html>
  <polymer-element name="x-fred">

    <link rel="import"     href="elements/zfred/fred.html">

    <template>
      <style>
        :host {  /* override zfred defiitions */
            background-color: blue;
            text-align: center;
            display: inline-block;
            border: solid 1px;
            padding: 10px 10px 10px 10px;
        }
      </style>
      <div>
        <x-fred> 
          <h1>X-Fred: {{counter}} </h1>
          <p>Fred X is a count-down timer.  Fred Z is a normal stopwatch (count-up).</p>
          <override>
            <button on-click="{{stop}}"  id="stopXFredButton">Stop</button>
          </override>
        </x-fred>
        <div>
           <p>this is a count-down timer.  Remaining time at end: {{ counter }} </p>
        </div>
      </div>
    </template>

    <script type="application/dart" src="xfred.dart">  </script>

  </polymer-element>

See? My example won't work because what's required here is that XFred.polymer inherits from ZFred.polymer.

That said, there is nothing I've seen to bind .html plus .dart into a 'element module' of some ilk. In my small way I wanted to do that by putting each widget in its own folder. For this to work (and there will be better mechanics), the daughter needs to be able to override parent Public and Protected attributes (not private).

I was thinking that xfred.dart would implicitly inherit zfred.dart (since lexically) both Dart files are unrelated to the Polymer element. At this juncture there are product design questions to be explored. Options like:

  1. HTML files have independent inheritance tree to the .Dart files.
    • That means that zfred and xfred might use (share) the same underlying implementation, per various examples.
    • Alternately, one could 'invoke' a suitable .Dart implementation of a defined interface.
  2. A blended 'widget' element made up of .html and .dart code specifications.

In a real user interface, I may want to combine a variety of base UI elements into different kinds of sub-elements to make-up a page, form or layout. I think life remains less messy following concept #1. That satisfies another requirement for me, to do with being able to manage alternate code-behind behaviour for the same element.

At the end of the day. The main question I'm asking is how much is part of the framework and how much is manual hack work to ensure things stay happy? :-)

Upvotes: 0

Views: 328

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657308

You can inherit from existing polymer elements.

For discussions the best place are the Dart Google groups

Upvotes: 1

Related Questions