Milestone 1

[marco9446]

Milestone 1

1) Design decisions of Polymer Designer 0.5

• [x] 1) uses iframe for drawing elements
• [x] 2) uses metadata.html files to load properties of elements
• [x] 3) uses metadata.html files to load example template of element
• [x] 4) how it manages drag and drop
• [x] 5) does that when editing properties etc.

  2) Design decisions of Polymer Designer 1.0

• [x] 1) Updated to Polymer 1.0 why? what changes?
• [x] 2) (maybe) uses hydrolysis to extract information about the properties

  3) Design decisions of Google Forms

• [x] 1) What are the best features of this editor? (GUI)

[marco9446]

1 Polymer Designer 0.5 structure

1.1

Pros of using iframe

Using iframe you have less difficulties in merging different stylesheet since the files used in the iframe are isolated from the others.

Ability to prevent errors in the editor that could block the entire web-app

Cons of using iframe

It is heavier that non iframe approach and in a huge application could cause some performance problems.

Since an iframe is an external page embedded in an other web-site, it is more difficult to modify or access to an component via javascript from the main web-page.

1.2 & 1.3

In order to fetch all the custom components, users has to insert manually the path of metadata.html, a file necessary to specify the default style and behaviour of the elements dragged in the canvas. Inside the metadata.html, we can find 3 main tag types:

• < x-meta > <x-meta id="core-ajax" label="Ajax" group="Core">...<x-meta> The x-meta tag specifies basic properties of the component, such as its name and the group of appurtenance and act as a container for the other more specific properties
• < template > <template>...<\template> or <template id="imports">...<\template> The template tag specify the appearance(markup) of the component after it has been dragged in the canvas. Templates with id "imports", are used to specify all the dependencies of the current component
• property <property name="method" kind="select" options="GET,POST,PUT,DELETE"></property> The property tag is used to show all the specific properties related to that component inside the editor's property section

1.4

Whenever an element is dragged from the editor palette, a function, paletteDrag in designer-element.html is called. This function has the role to identify the object that is being dragged and check if the target is suitable for drop. When the drag action reach a suitable target (over iframe), is been called a function paletteDrag in design-frame.html passing the information contained in the metadata file of the dragged element and the coordinates. The paletteDrag function has the role to draw the element in correct position inside the iframe

1.5

Whenever an user clicks on an item dropped in the iframe, this idem is being selected and all its properties and attributes are analysed by the function calcAttributeValues in dom-serializer.html. This function utilizes binding Reflection, a tool in the platform file of polymer 0.5 able to scan a custom element, return its attributes and bind to them. calcAttributeValues finally returns a json containing the attributes used to render the property editor in the sidenav.

[marco9446]

2 Polymer Designer 1.0

2.1

Polymer designer 1.0 is the upgrade of version 0.5. It introduces more features and better management of the created components (even if is still very buggy). Google has decided to upgrade the editor since it wanted to have an enterprice ready app capable of creating, from scratch, entire web-sites. in order to do so, Google has introduced these features:

• Ability to manage different files located in different folders
• Better management of the elements's style with the possibility to graphically modify their height and wight
• Ability to run the editor as a standalone app, thanks to the implementation of electron api

2.2

differently from 0.5, Designer 1.0 uses hydrolysis to extract and modify the attributes of the elements.

[marco9446]

3 Google Forms

3.1

With Google form, Google utilized a different form factor for the creation of questions.

First of all the user has the ability to choose between different types of templates ( some pre-built questionnaires for the most common situations ) saving time and problem for the inexperts users.

The second key feature is the simplicity whereby the user can customize and create new questions. The questions can only be positioned one at the top/bottom of the others surely limiting the freedom of the users but improving the building process and the readability of the final survey.

The last useful feature of Google Forms is the fact that each question, when the user clicks on it, is highlighted and some buttons are added in order to customize the position and structure of the question, as shown in the figure below. This behavior, in my opinion, is easier to implement, but still very functional and intuitive, than the system used in Polymer Designer.

[triglian]

What's the format provided by hydrolysis?

[marco9446]

More detailed explanation of hydrolisis and the process of changing properties in designer 1.0

When a user clicks on an element, this action fires a function "_selectionChanged" in designer-property-inspector.html. This function finds all the element's properties by calling the "_getAnalysisInfo(tagName)" in designer-documents.html, a function that calls the hydrolisis function analyzer.elementsByTagName[tagName] that according to the specifics should return Object.<string, ElementDescriptor>.

Finally, when someone change a property value, in order to be propagate in the DOM, the function "setAttribute" in DomCommandApplier.js is called