DevDocDesigner

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.

---

The Appmaker Designer

The Appmaker designer (./public/designer) is a collection of custom elements and scripts that allow people to build their own ceci-app web apps using a "designer" view.

The designer comes with its own implementations of the ceci-element and ceci-card Custom Elements, which allows it to let you use any ceci element from the Appmaker component list with all the functions necessary to do designer building of an app, without having all that designer-specific code living in the base ceci framework.

basic overview

The designer consists of several logical "blocks" for the UI, and several invisible blocks for datahandling. Each block is explained on its own, below.

The designer main view is a rendered view defined in ./views/designer.ejs, which includes the general purpose layout ./views/layout.ejs and the designer specific layout ./views/designerHTML.ejs. The latter of these two defines most of the HTML skeleton that the designer relies on.

User state

The top section of the designer houses the "user state", as ./public/designer/components/user-state.html, and controls all the menu actions the user can take, as well as wrapping the language picker and the authentication click-throughs.

It's a single file that is part HTML, part JS, and probably the most complex file in the entire designer. It ties all the front-end user actions to an "invisible" client-side middleware ./public/designer/js/application.js library.

Actions in user-state.html translate to operations in application.js, so for instance an application rename goes through user-state for the user-input side of the rename, and then falls through to application.js for the server-interfacing that is required to effect a full rename.

Component tray

The component tray is a listing of all custom elements in the ./public/bundles/components directory, and is a combination of the tray left-column div in the designer's basic HTML skeleton, and the ./public/designer/js/component-tray.js code, which knows how to load components into the tray as "clickable buttons" along with their category.

Editables

The editables section of the designer is a combination of the editable-section div in the designer HTML skeleton, and several js files.

• ./public/designer/js/editable.js allows loading of a component's editable attributes as a form pane.
• ./public/designer/components/project-settings.html can be used to control the project level settings like project title, description, and tags.

The app container

The app container is the meat of the designer, and is actually simply a <ceci-app> element with additional CSS to make it look like a phone for the purposes of app designing.

Bricks

The designer has its own implementation of the <ceci-element> custom element in the ./public/designer/components/ceci-element-designer.html file, allowing it to do far more visualisation and control than a typical ceci-element. The designer version of the ceci-element comes with extra components that let you see and control the various data flow aspects of an app:

• The ./public/designer/components/ceci-broadcast-vis.html and ./public/designer/components/ceci-broadcast-vis.html components show the inputs and outputs for a brick in colored lines with alphabetic labels.
• The ./public/designer/components/ceci-channel-menu.html component allows you to see which listener/broadcast functions exist, and which channels they're bound to.
• The ./public/designer/components/ceci-channel-map.html is used when a channel is to be selected for listening/broadcasting.

The card list

As apps can consist of many different screens, called "cards" in Appmaker, there is a dedicated row for card administration, allowing card creation and deletion as well as reordering. This is controlled by having a custom implementation of the <ceci-card> element in ./public/designer/components/ceci-card-designer.html.