1

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?

Felipe
  • 376
  • 2
  • 5
  • 15

2 Answers2

2

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

Robert
  • 5,484
  • 1
  • 22
  • 35
  • There are different approaches. For example it depends if you want the element to use its space even when it is not visible or not. I think setting the `hidden` attribute should hide it (without any further CSS), the `visibility` style (`hidden`, `visible`) or the `display` style attribute as shown above. You could also use the `opacity` style to make it transparant (this way it still uses its space on the page but is not visible) – Günter Zöchbauer Jul 10 '14 at 08:44
  • That's right but in the end it's just changing attributes / styles :) – Robert Jul 10 '14 at 08:47
  • I think your answer is right, I just thought it would hurt to point out that there are different approaches to achieve this. Your are right, just setting attributes, styles and/or classes :D – Günter Zöchbauer Jul 10 '14 at 08:57
  • Robert and Günter, I can't understand why this approach is so different than others. The question is, this has the same effect as other approaches like http://stackoverflow.com/questions/16188370/how-to-build-a-complex-web-ui-application-with-multiple-views ? In fact, I asked this question because Web UI seems to be replaced by Polymer. – Felipe Jul 10 '14 at 15:20
  • I've edited the question to make it more clear about what I'm looking for with Polymer. – Felipe Jul 11 '14 at 12:56
1

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>
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • Thanks, Günter. So my application page will import all Polymer elements and run the check. But does this affect performance in any way or just the active Polymer is actually loaded into the users browser and taking resources? – Felipe Jul 11 '14 at 13:16
  • This was the point. Currently all source code of a Dart browser app is loaded at once anyway when you enter the URL, but only the elements inside templates where the if-expression evaluates to true are added to the DOM (and removed when it later evaluates to false). I don't know exactly what the status of deferred loading is. Several parts have already landed but I don't know if it already really works in practice. But when it does, only the parts of your app actually necessary will be loaded and the other parts are only fetched from the server when they are invoked. – Günter Zöchbauer Jul 11 '14 at 13:25