CODEWITHSUNDEEP
dartdart-polymer
Felipe
Felipe

Reputation: 416

Dart Language: Polymer - Working with views

I'm developing my first "complex" application on Dart and I'm finding some trouble on how to work with more than one view (I want to develop the application to run within a single page).

First of all, I'm assuming that this (using Polymer) is the right approach to work with various views (or "app screens") of the application. However, if it's not, I would like to know (of course). And by "app screens", I'm saying something like creating various forms in Java.

So, for instance, I have two buttons at the top of the page. When you click the first one, it shows a view with an user registration area. When you click the second button, it shows a view with an editable grid.

Could you give me some code example of this simple app?

Upvotes: 1

Views: 340

Answers (2)

Günter Zöchbauer
Günter Zöchbauer

Reputation: 657058

You could use the template if functionality.
This way views that are currently not active are automatically removed from the DOM and automatically inserted again when the model attribut changes.

<polymer-element name='app-element'>
  <template>
    <template if='{{appModel.view == 'view1'}}'>
      <view1></view1>
    </template>

    <template if='{{appModel.view == 'view2'}}'>
      <view2></view2>
    </template>
  </template>
  <script ...>
</polymer-element>

Upvotes: 1

Robert
Robert

Reputation: 5662

You can use CSS style properties for a polymer element like you do for any native element.

You can query like this:

Element e = querySelector('my-form');

and then hide/display it:

e.style.display = 'none';
e.style.display = 'block';

After(!) you initialized polymer, you can use the element's class (if existent):

@CustomTag(...)
class MyForm ... {
   ...
}

MyForm e = querySelector('my-form') as MyForm;

Then you can go ahead and set attributes of your class (if you need it) or use the style property because the class inherits from HtmlElement.

You could also use classes for this. Dart comes with some "toggle" functionality:

element.classes.toggle('hidden');
element.classes.toggle('shown');

Regards, Robert

Upvotes: 2

Related Questions