Erlantz Oniga's Blog: Using loops and conditionals in Web Components

Following with the icon web component example, we are going to create a simple panel that automatically spawns as many icons as objects we have in a list. First of all we are going to create the icon_panel.dart file with the following code:

import 'package:polymer/polymer.dart';

@CustomTag('x-icon-panel')
class IconPanelElement extends PolymerElement {
  List iconNames = new List();

  IconPanelElement.created() : super.created() {
    for (int i = 0; i < 10; i++) {
      iconNames.add("Icon $i");
    }
  }
}

As we can see it's a pretty basic object that only has a List of strings which we populate in its constructor. We use a List of strings to make it easier but we could use a Icon object and have each icon with its own image and name, but we will see that in a future post. Now let's write our html template:

<link rel="import" href="icon.html">
<polymer-element name="x-icon-panel">
  <template>
    <style>
      div {
        font-size: 10pt;
        margin: 10px;
        width: 500px;
        height: auto;
        border: 1px solid black;
      }
    </style>
    <div>
      <template repeat="{{name in iconNames}}">
        <template if="{{name == 'Icon 9'}}">
          <x-icon imageurl="https://lh5.googleusercontent.com/-6LE2zGf0peU/AAAAAAAAAAI/AAAAAAAAAe0/3lMdEfAJGCw/photo.jpg" filename="I'm the last one"></x-icon>
        </template>
        <template if="{{name != 'Icon 9'}}">
          <x-icon filename="{{name}}"></x-icon>
        </template>
      </template>
    </div>
  </template>
  <script type="application/dart" src="icon_panel.dart"></script>
</polymer-element>

This is a bit different from the last time, but it's not very difficult to understand. In the first line we import the icon web component from our first example and then in our template we create a div (we are creating a panel after all) and this is where it gets trickier. We use a template tag with the attribute repeat to create a loop (it's basically like a for each loop) that tells the web component to create the inside part as many times as elements has the iconNames list. And for each iteration of the loop we get the item of the list that corresponds to that iteration on the variable names 'name'. In the inside of this template tag we have another 2 template tags with the 'if' attribute, this is for applying conditionals in web components, in this case we can see that if the name is 'Icon 9' it will create a x-icon element with an specific image and name, while if the name is different from 'Icon 9' it will create a x-icon element with the value of name variable as the filename and the default image.

Now let's modify our test.html file to use our new web component:

<html>
  <head>
    
    <title>Sample web component</title>
    <!-- import the icon panel component -->
    <link href="icon_panel.html" rel="import"></link>
    <script type="application/dart">export 'package:polymer/init.dart';</script>
    <script src="packages/browser/dart.js"></script>
  </head>
  <body>
    <h1>Icon panel component example</h1>
    <x-icon-panel></x-icon-panel>
  </body>
</html>

There is nothing new here except that with the last version of the SDK instead of importing package:polymer/init.dart we have to export it. Now let's see the result of our work:

domingo, 10 de noviembre de 2013

Using loops and conditionals in Web Components