DevDocComponents

Information for Developers

The appmaker project consists of three parts:

1. ceci, an implementation of Custom Elements, based on Polymer, defined in the ./public/ceci directory.
2. A collection of predefined elements (called "bricks" or "components" in most technical discussions relating to appmaker) located in the ./public/bundles/components directory
3. An app-making single-page designer webapp, with front-end code located in the ./public/designer directory, and backend code located in the usual places for an express app.

---

Components and their build-up

Appmaker components, or bricks, are HTML5 Custom Elements defined using the Polymer framework, and enriched with some of Appmaker's ceci framework functions.

Appmaker components all live in the ./public/bundles/components directory, and each component lives in its own directory, named component-...; the button component lives in "component-button", the header component lives in "component-header", etc.

Each component has to have at least a ./component.html file, for its definition, and a ./locale/en-US.json file for defining all the component's localizable strings.

component.html

<polymer-element name="ceci-..." attributes="..." extends="ceci-element">
  <ceci-definition>
    {
      "tags": ["...", ...],
      "thumbnail": "./thumbnail.png",
      "description": "...",
      "name": "...",
      "broadcasts": {
        ...
      },
      "listeners": {
        ...
      },
      "attributes": {
        ...
      }
    }
  </ceci-definition>
  <template>
    <link rel="stylesheet" href="component.css"></link>
    <!-- actual HTML code that defines the internal skeleton -->
    <shadow></shadow>
  </template>
  <script>
    Polymer('ceci-...', {
      ready: function () {
        this.super();
        // your code goes here
      },
      attached: function () {
        this.super();
        // your code goes here
      },
      ...more yourelement.prototype functions go here...
    });
  </script>
</polymer-element>

broadcasts

structure:

{
  
}

listeners

structure:

{
  
}

attributes

structure:

{
  
}

locale/en-US.json