Monday, December 16, 2013

Not-So Flex Polymer


To date, my exploration of Polymer for Patterns in Polymer has been decidedly UI-less. Now that the book has seen its initial Alpha release, it seems a good time to start exploring some of the UI features, starting with some of the built-in <polymer-*> elements.

I do not expect to include much <polymer-*> usage in the book. Still, exploring these element so far has been a bonanza of inspiration for me—both in exposure to solid Polymer coding styles and in generating other ideas. Tonight, I look at the Polymer flex layout. I start with the usual pubspec.yaml:
name: flex
dependencies:
  polymer: any
  polymer_elements: any
dev_dependencies:
  unittest: any
After a Dart Pub install
$ pub get
Resolving dependencies....................................
Downloading polymer_elements 0.1.1 from hosted...
Downloading polymer 0.9.3+1 from hosted...
Downloading unittest 0.9.2 from hosted...
Downloading polymer_ui_elements 0.1.1 from hosted...
Got dependencies!
But when I try to run pub serve things break down—the web server never responds to requests for any polymer elements:
$ curl http://localhost:8080/packages/polymer_elements/polymer_file/polymer_file.html
$ ls packages/polymer_elements/polymer_file/polymer_file.html
packages/polymer_elements/polymer_file/polymer_file.html
Stumped for now, but wanting to make some progress, I switch to JavaScript. I bower install the flex layout Polymer:
bower install Polymer/polymer-flex-layout
bower polymer-flex-layout#*     cached git://github.com/Polymer/polymer-flex-layout.git#0.1.1
bower polymer-flex-layout#*   validate 0.1.1 against git://github.com/Polymer/polymer-flex-layout.git#*
bower polymer#0.1.1         not-cached git://github.com/Polymer/polymer.git#0.1.1
bower polymer#0.1.1            resolve git://github.com/Polymer/polymer.git#0.1.1
bower polymer#0.1.1           download https://github.com/Polymer/polymer/archive/0.1.1.tar.gz
bower polymer#0.1.1            extract archive.tar.gz
bower polymer#0.1.1           resolved git://github.com/Polymer/polymer.git#0.1.1
bower platform#0.1.1        not-cached git://github.com/Polymer/platform.git#0.1.1
bower platform#0.1.1           resolve git://github.com/Polymer/platform.git#0.1.1
bower platform#0.1.1          download https://github.com/Polymer/platform/archive/0.1.1.tar.gz
bower platform#0.1.1           extract archive.tar.gz
bower platform#0.1.1          resolved git://github.com/Polymer/platform.git#0.1.1
bower polymer-flex-layout#~0.1.1          install polymer-flex-layout#0.1.1
bower polymer#0.1.1                       install polymer#0.1.1
bower platform#0.1.1                      install platform#0.1.1

polymer-flex-layout#0.1.1 bower_components/polymer-flex-layout
└── polymer#0.1.1

polymer#0.1.1 bower_components/polymer
└── platform#0.1.1

platform#0.1.1 bower_components/platform
Then make my page:
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Flex Test</title>
    <!-- 1. Load Polymer before any code that touches the DOM. -->
    <!-- <script src="scripts/polymer/polymer.js"></script> -->
    <script src="scripts/platform/platform.js"></script>
    <!-- 2. Load component(s) -->
    <link rel="import" href="scripts/polymer-flex-layout/polymer-flex-layout.html">
    <link rel="import" href="scripts/polymer-flex-layout/polymer-flex-panel.html">
  </head>
  <body>
     <polymer-flex-layout isContainer>
       <div>Left</div>
       <div align=center flex>Main</div>
       <div>Right</div>
     </polymer-flex-layout>
  </body>
</html>
Which does the trick:



Even the JavaScript version is not without its difficulties. I am unable to get the vertical layout working properly—a flexed body does not occupy the entire page. But compared to the Dart version, that is small potatoes. Tomorrow, it seems that I really need to dig into my pub serve problems. Thankfully I have a working JavaScript example in my pocket once I figure that out.



Day #967

2 comments:

  1. Hi Chris,

    I ported the polymer-flex-layout but had not time to play with it myself.

    There are several demo pages that use polymer_flex_layout (for example the toolbar in polymer_anchor_point example or polymer_ui_menu_button). They work fine so far in Dart.
    There is an issue though (visible with the third part of the polymer_flex_layout_example - at least after building to JS) where I was not able to make the parent set the flexbox class because in none of the available callbacks a parent was accessible and even an event was not cought by the parent.
    I will dig deeper when the announced upgrade order change is available.

    Looking forward to your next posts about your experiments with Polymer.

    ReplyDelete
    Replies
    1. Thanks for the tips. It never would have occurred to me to look in those other Polymer elements -- I'll check them out :)

      Delete