How to use code from Polymer Project Designer in another HTML doc

Question

So I built a little guy in Polymer Project Designer: http://www.polymer-project.org/tools/designer/preview.html#ca22c086297bb41ee6e0

And want to use it in another HTML file on my computer that is local. I have absolutely no idea how to do this, I have looked for tutorial videos and have tried integrating the code produced through github (https://gist.githubusercontent.com/Superraptor/ca22c086297bb41ee6e0/raw/8543946b7e21a8fd2f1a8022e155622306fc549f/designer.html), but to no avail. I could really use the help!

Thanks so much!

EDIT:

Here is my code:

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="bower_components/platform/platform.js"></script>
    <link rel="import" href="bower_components/polymer/polymer.html">

<!-- These are the links I added -->
    <link rel="import" href="../paper-tabs/paper-tab.html">
<link rel="import" href="../core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="../core-menu/core-submenu.html">
<link rel="import" href="../core-item/core-item.html">


</head>

<body>


<!-- This is the element I added -->
<polymer-element name="my-element">

  <template>
    <style>    
      :host {
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
      }
      #core_input {
        padding: 10px;
        display: none;
        background-color: rgb(255, 255, 255);
      }
      #core_drawer_panel {
        right: 0px;
        bottom: 0px;
        width: 100%;
        height: 100%;
      }
      #section1 {
        box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;
        background-color: rgb(250, 250, 250);
      }
      #section2 {
        height: 100%;
        box-sizing: border-box;
        background-color: rgb(221, 221, 221);
      }
      #core_menu {
        font-size: 16px;
      }
      #core_header_panel {
        width: 100%;
        height: 100%;
        left: 0px;
        top: 0px;
        position: absolute;
      }
      #core_toolbar {
        color: rgb(255, 255, 255);
        background-color: rgb(79, 125, 201);
      }
      #section {
        height: 100%;
        background: linear-gradient(rgb(214, 227, 231), rgb(173, 216, 230));
      }
      #core_header_panel1 {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
      }
      #section3 {
        width: 420px;
        height: 630px;
        border: 5px solid rgb(204, 204, 204);
        left: 1150px;
        top: 480px;
      }
      #paper_tabs {
        color: rgb(255, 255, 255);
        box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 2px;
        background-color: rgb(0, 188, 212);
      }
      #paper_fab {
        left: 1170px;
        top: 480px;
      }
      #div1 {
        left: 1210px;
        top: 480px;
      }
      #paper_icon_button {
        left: 1240px;
        top: 490px;
      }
      #core_field {
        left: 1090px;
        top: 510px;
      }
      #core_input1 {
        padding: 10px;
        width: 100px;
        display: none;
        background-color: rgb(255, 255, 255);
      }
      #core_input2 {
        padding: 10px;
        width: 100px;
        display: none;
        background-color: rgb(255, 255, 255);
      }
    </style>
    <core-header-panel mode="standard" id="core_header_panel">
      <core-toolbar id="core_toolbar" wrap>
        <core-icon-button icon="menu" id="core_icon_button"></core-icon-button>
        <div id="div">KATELYN</div>
        <core-icon-button icon="account-circle" id="core_icon_button1" on-tap="{{ showUsernamePasswordFields }}" theme="core-light-theme"></core-icon-button>
        <core-input placeholder="User Name" id="core_input1" hidden="true"></core-input>
        <core-input placeholder="Password" id="core_input2" hidden="true"></core-input>
        <core-icon-button icon="search" id="core_icon_button2" on-tap="{{ showSearchField }}" theme="core-light-theme"></core-icon-button>
        <core-input placeholder="Search" id="core_input" hidden="true"></core-input>
        <paper-tabs selected="0" selectedindex="0" id="paper_tabs" end end-justified four flex>
          <paper-tab id="paper_tab" active>Top</paper-tab>
          <paper-tab id="paper_tab1">New</paper-tab>
          <paper-tab id="paper_tab2">Popular</paper-tab>
          <paper-tab id="paper_tab3">Disputed</paper-tab>
          <paper-tab id="paper_tab4">Expert</paper-tab>
        </paper-tabs>
      </core-toolbar>
      <section id="section">
        <core-drawer-panel selected="main" narrow id="core_drawer_panel">
          <section id="section1" drawer>
            <core-menu selected="0" selectedindex="0" id="core_menu">
              <core-submenu active selected="0" label="Options" icon="sort" valueattr="name" id="core_submenu">
                <core-item label="Type" size="24" id="core_item1" horizontal center layout active></core-item>
                <core-item label="View" size="24" id="core_item" horizontal center layout active></core-item>
              </core-submenu>
              <core-submenu label="Settings" icon="settings" valueattr="name" id="core_submenu1">
                <core-item label="Language" size="24" id="core_item3" horizontal center layout></core-item>
                <core-item label="Privacy" size="24" id="core_item4" horizontal center layout></core-item>
                <core-item label="Region" size="24" id="core_item2" horizontal center layout></core-item>
              </core-submenu>
            </core-menu>
          </section>
          <section id="section2" main>
            <core-header-panel mode="standard" id="core_header_panel1">

      </core-header-panel>
          </section>
        </core-drawer-panel>
      </section>
    </core-header-panel>
  </template>

  <script>

    Polymer('my-element', {
      showUsernamePasswordFields: function () {
        if(this.$.core_input1.hidden == true && this.$.core_input2.hidden == true) {
            this.$.core_input1.style.display = 'block';
            this.$.core_input2.style.display = 'block';

          this.$.core_input1.hidden = false;
            this.$.core_input2.hidden = false;

          this.$.core_input.style.display = 'hidden';
          this.$.core_input.hidden = true;
        }
        else {
          this.$.core_input1.style.display = 'hidden';
            this.$.core_input2.style.display = 'hidden';

          this.$.core_input1.hidden = true;
            this.$.core_input2.hidden = true;
        }
      },
      showSearchField: function () {
        if(this.$.core_input.hidden == true) {
            this.$.core_input.style.display = 'block';

          this.$.core_input.hidden = false;

          this.$.core_input1.style.display = 'hidden';
          this.$.core_input2.style.display = 'hidden';
          this.$.core_input1.hidden = true;
          this.$.core_input2.hidden = true;
        }
        else {
          this.$.core_input.style.display = 'hidden';

          this.$.core_input.hidden = true;
        }
      }
    });

  </script>

</polymer-element>


<!-- This is where I declared my element -->
<my-element></my-element>

</body>

</html>

Here is what the Polymer Designer shows: https://i.stack.imgur.com/JyN4V.jpg

Here is what I'm getting: https://i.stack.imgur.com/sHXxW.jpg

I'm afraid you're not including enough files. For each polymer element you use you need a include. Eg I see you are using a `core-header-panel`, so include `correctDirectory/core-header-panel/core-header-panel.html`. Same goes for `core-toolbar`, `core-icon-button`, `core-input`, ... — jdepypere, Jul 21 '14 at 19:28
Yep that was the problem, I forgot to do the individual imports through bower. Thanks! — user3684314, Jul 22 '14 at 15:11

score 8 · Accepted Answer · answered Jul 21 '14 at 21:38

Right now there isn't a super great workflow to get from designer to your local machine. Designer is still in the prototype/experiment phase. Having said that, here's how I'd go about it:

Grab all of the code that designer produces and drop that into a local file.
Make sure you've got a script include for platform.js (I see you've got this)
Take a look at all the imports designer generated for you, and replace them so they read:

I see that you've almost done this part, but you've left the paths as "../some-component/some-component.html". You'll need to update those to point at your bower_components directory.

Lastly, you may need to bower install some things if they're missing. So check the console to make sure none of your imports 404. If they do, you'll want to bower install the missing dependency. To make this super easy, I would just run these two commands:

bower install --save Polymer/core-elements
bower install --save Polymer/paper-elements

That will get you most everything used by designer. If you're still missing something (like google-map) just install that one specifically: bower install --save PolymerLabs/google-map Note that google-map lives in the PolymerLabs org, not the Polymer org ;)

Thanks much for the hints on this post, as I'm having the exact same type of issues with the polymer designer tool and the dev-editor. (IMHO it too bad some of moderators deem anything they don't like as "unlikely to help future readers" as this post was greatly helpful). — woody, Nov 09 '14 at 04:46

How to use code from Polymer Project Designer in another HTML doc

1 Answers1