Now assume that you want to have more then one web page in your application. We’ll refer such a set of pages as project.
Wamer allows a number of common operations with your pages and projects: create, copy, delete etc. Let’s look at the menu.
Project/Page menu options
online tool for developing high-performance Web Applications
New, Open, …, Delete commands allow common operations with your projects.
Assemble command assembles your project (the same as online tool for developing high-performance Web Applications button does).
Settings command opens current project’s settings in the editor.
Project settings are discussed below.
online tool for developing high-performance Web Applications
New, Open, Rename, Delete commands allow common operations with your pages.
Copy to Clip Box, Paste from Clip Box allow to duplicate currently opened page or to copy it into another project.
Clip Box operations are discussed below.
Naming convention
At some point, the projects and pages are converted into folders and files. So we require that their names should be the correct names in the file systems. There are the following requirements common for Windows and Linux:
the following symbols are not allowed in the names:
‘\’, ‘/’, ‘:’, ‘*’, ‘?’, ‘”‘, ‘<‘, ‘>’, ‘|’;
the names are case-sensitive. I.e. if something is named “abc” then one cannot refer it as “ABC” (as it’s in Linux);
at the same time, names should not differ only in the letter case. I.e. if you have page named “Page 1” in the project you cannot create page named “page 1” in the same project (as it’s in Windows);
Clip-box functions
Clip Box tool opens here
online tool for developing high-performance Web Applications
All copied pages (and also copied stencils as described below) fall into this magic box.
Then you can paste objects from here to another place.
So you can copy pages and stencils from one project to another.
Let’s look into Clip Box with some objects already in it.
online tool for developing high-performance Web Applications
Each object is shown by its type ([page] or [stencil]) and name.
You can remove object from Clip Box by online tool for developing high-performance Web Applications button.
There are two zones: inactive (colored in black) and active (colored in blue).
Only objects from the active zone take place in paste operation.
When you copy an object (or group of objects) to Clip Box, all objects from the active zone are moved to inactive zone, and newly copied object is plased into the active zone.
You can move objects between zones by online tool for developing high-performance Web Applications and online tool for developing high-performance Web Applications buttons.
You can remove all objects from inactive zone by online tool for developing high-performance Web Applications button.
Q. What if i paste the page from Clip Box but there is the page with the same name in my project?
A. A numerical index will be added to the name of pasted page, something like MyPage(2), MyPage(3) etc.
Advanced coding
Here we discuss a few more sophisticated options.
Some of them will become more apparent in conjunction with the “Decomposition” below.
Markup: templates and options
Let’s return to our example from “Basics” section.
Open tab. There are some JSON object.
Its meaning will be discussed later in this section. Now we are interested only an “options” variable.
Let’s change it so way: “options”: {“easy”: “optional”}
Click button.
online tool for developing high-performance Web Applications
Click online tool for developing high-performance Web Applications tab.
Change the markup to
It’s <%= easy %>
Click online tool for developing high-performance Web Applications button.
online tool for developing high-performance Web Applications
Click online tool for developing high-performance Web Applications tab to see the result.
online tool for developing high-performance Web Applications
This occurs because Wamer preprocessed the markup with Underscore.js template.
Template functions may
<%= … %> – interpolate variable;
<%- … %> – interpolate variable and HTML-escape the result;
<% … %> – execute arbitrary JavaScript code.
A template function uses our settings.options object as a set of the free variables.
Note that this mechanism works on assembly stage, and has no relation to run-time processing on client-side of your application.
How one can use it?
1) Make the markup more maintainable. For example, we may have dozens of references to resources on the page like this:
What if we’ll decide to change the path?
The form
looks more convenient, isn’t it?
2) Make conditional sections in the markup. It may be useful to have two different (debug and deployment) versions of the markup, something like this:
<% if (debug) { %>
Debug output
<% } %>
and control it via debug variable in settings.options.
3) Get rid of copy-paste in the markup. For example:
<% for (var i = 0; i < N; i++) { %>
some tedious markup, differences are in <%= my_var[i] %>
<% } %>
Note: Wamer also adds some variables to options and they can be used in template functions. We’ll discuss them later in this and next sections. Names of such variables start with ‘_’ symbol, so we recommend to not use ‘_’ as starting symbol in user variable names.