Skip to content

Latest commit

 

History

History
133 lines (115 loc) · 5.24 KB

user-story-1.md

File metadata and controls

133 lines (115 loc) · 5.24 KB
Raw

1. Show the content of a game

Goal: As a user, I want to see the content of a game

Keywords: custom element, template, binding, filter function

  1. Create a new Polymer application named game_store_codelab and explore it

  • Fill the Application name and select Web application (using the polymer library)
    Project creation

  • Open pubspec.yaml. It includes a new dependency:

    dependencies:
  polymer: any

  • build.dart is launched after a file is saved, and displays Polymer warnings from the linter

  • clickcounter.html and clickcounter.dart is a custom element named click-counter
    We're not going to work with them, you can remove them or keep them as examples

    <link rel="import" href="packages/polymer/polymer.html">
<polymer-element name="click-counter" attributes="count">
  <template>
    <!-- Custom element body -->
  </template>
  <script type="application/dart" src="clickcounter.dart"></script>
</polymer-element>
    import 'package:polymer/polymer.dart';

/**
 * A Polymer click counter element.
 */
@CustomTag('click-counter')
class ClickCounter extends PolymerElement {
  ClickCounter.created() : super.created();
  // ...
}

  • game_store_codelab.html imports click-counter element to use it and initializes Dart and Polymer
    We're not going to work with it, you can remove it or keep it as example

    <head>
  <script src="packages/web_components/platform.js"></script>
  <script src="packages/web_components/dart_support.js"></script>
  <!-- import the click-counter -->
  <link rel="import" href="clickcounter.html">
  <script type="application/dart">export 'package:polymer/init.dart';</script>
  <script src="packages/browser/dart.js"></script>
</head>

<body>   
  <click-counter count="5"></click-counter>
</body>

  • Run game_store_codelab.html in Dartium and test it

  1. Copy all files from the template folder into the web directory of your project
  2. Create a new custom element x-game

  • Create game.html and game.dart file taking click-counter element as an example

  • Copy the GAME_TEMPLATE HTML blocks from the templates into the body of your custom element

  • Import and use it in your index.html file

    <section class="container">
  <x-game></x-game>
</section>

  • Open pubspec.yaml. Change the entry point to :

    

    • 



transformers:


    

  • polymer:
entry_points: web/index.html

    - Run `index.html` in Dartium and you should see something like this ([Hints](#user-story-1-hints)):  
![x-game first import](docs/img/x-game-first-import-style.png)

    

    • 



    

  1. Congrats! You created your first custom element! But it's all static, let's do some data bindings :)
    2. 



    

  • 

    Create a file models.dart with the class Game:
    

    library game_store.model;

class Game {
  int id;
  String name;
  String genre;
  String description;
  String image;
  int rating;
  
  // Constructors
  Game(this.id, this.name, this.genre, this.description, this.image, this.rating);
  Game.sample() : this(null, "Game name", "Game genre", "Game description", "chess.jpg", 4);
}
    

    • 

  • 

    Add a game attribute in the x-game class:
    

    import 'package:polymer/polymer.dart';
import 'models.dart';

@CustomTag('x-game')
class XGame extends PolymerElement {
  Game game = new Game.sample();
  // ...
}
    

    • 

  • 

    Bind game fields into the x-game template (Hints):
    

      

    • Game name should be uppercased
      • 

    • Rating should be transformed into ★ characters ("\u2605")
      • 

    

    x-game binding
    

    • 







Hints:


    

  • 

    Don't forget to add needed tags in index.html header (See Using custom elements)
    

    • 

  • 

    You need special CSS selectors (/deep/) for the styles to apply inside our webcomponents just like in our app.css file. Current CSS libs like bootstrap don't actually use them. For the styles to apply, import the style in each of your templates with:
    

    <link rel="stylesheet" href="css/bootstrap.min.css">
    

    • 

  • 

    Implement a filter function to uppercase the game name, defined in the custom element class (See Polymer expressions)
    

    • 

  • 

    Implement also a filter function to transform the rating integer to ★ characters (List.generate and List.join may help)
    

    • 





Next >