japh(r) by Chris Strom: Not-So Flex Polymer

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

‹prev | My Chain | next›

3 comments:

Günter ZöchbauerDecember 17, 2013 at 2:55 AM
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
adminJune 8, 2021 at 7:11 PM
google 3344
google 3345
google 3346
google 3347
google 3348
ReplyDelete
Replies

Add comment