Wamer Sketch Quick Ref



Tools  (buttonbar on the left)

  Draw box / component / component part   (details...)

  Select box / component / component part.   Feat: click - select an object; Ctrl/Cmd-click - select containing object; Shift-click - toggle selection.   Note: If the only object is selected then you can move/resize/furnish it. If multiple objects are selected then you can only copy/cut/delete them

  Edit box rich-text / label / component schema   (details...)

  Navigate through elements / classes

  Remove tools layer and show the page "as is"   (details...)


Actions  (buttonbar on the top)

  Common Undo/Redo actions

  Common Copy/Cut/Paste actions

  Delete selected element / group of elements.   Note: Some objects are marked as "undeletable", eg. parts of layouts

  Refresh the page (i.e. reassemble and reopen in initial state)

  Apply layout / component stencil to the selected box   (details...)

  Application settings   (details...)


Element styling tools  (buttonbar near the selected element)

  Edit element's style

  Bind the box   (details...)

  Edit component's properties (if any)

  Add and tune runtime features, such as "tooltip", "draggable", "resizable" etc.

  Add runtime features and behaviors "manually"   (details...)


Stencil Edit  (buttonbar on the right)

  Edit custom stencil

  Add custom stencil

  Delete custom stencil


Page Menu  (topmost menu)

Clear erase all objects from the page. (Attention!! operation is irreversible!!)

Test Page show the resulting page in separate window

Publish Page assemble the page and save the result under a persistent link (so you can show it to your friends)

Download Page pack (ZIP) the page and send it to you

About WS version and other info




"Default empty box" is the very base unit drawn by the Pencil tool. You can move, resize, edit it's style etc.
You can fill it with rich-text content (by Text tool) and/or draw another boxes inside it.
Or you can "fill" an empty box by some component selected from the right.

In certain cases, the box is already filled after drawing:
(a) some component/layout (but not "Default") is selected on the right; we draw the component in this case;
(b) we draw over context of one of "compound" components (such as "accordion" or "tabs"); the corresponding part (usually pane with a label) will be drawn in this case

Box binding gives us an ability to control box position and/or size depending on browser window size. Eg. you can bind box to the right edge of the page, or stretch it, or center. Box is binded to the edge of it's container, ie. to the box where it was drawn, or to the page.

By default, box has thin gray frame and white background, but only on design-time! It's done to make box surely visible during design, and these frame and background are not included in "final versions" of the page (ie. in Publish page and Download page).
If you want to preserve these box features you can do it through Application settings.

Text tool may be used in 3 different modes depending on context:
(a) "Default box" and other "normal" panes (eg. "accordion"/"tabs" panes) - rich-text editor is used to fill the box/pane. (Currently we use TinyMCE with most common features);
(b) Various text labels (eg. "accordion"/"tabs" pane labels) - one-line ordinary text input control is used;
(c) Some compound controls (like menus, option lists etc.) which not include other boxes/panes - multi-line text input is used to edit an "object schema". The "schema" depends on the particular component

Apply stencil tool is used to create a component in the place of an empty box. We call them "stencils" because they usually have tunable properties or "schema". Set of properties and/or schema depends on the used "stencil". Try and feel;)

The working area (ie. the "canvas" where we draw our page) is normally covered by some "glass layer". It's for preventing interference of the page controls (like buttons, menu entries etc.) with design tools.
Use App Window tool to remove this "glass" and try native page controls (eg. to scroll the page).

Element fx (handmade)       dialog box allows to add features to the element through HTML attributes and/or JS script(s). Script are called in the context of the element as jQuery function; i.e. $(~the element selector~).~your script code goes here~ will be added to the page's scripts. How to use it (examples) ~~~ (1) task: add bs Popover to the element solution: Add Attributes: data-toggle popover data-placement left data-content Vivamus sagittis lacus vel augue laoreet rutrum faucibus. title Popover example Add Script: popover() ~~~ (2) task: add onclick behavior solution: Add Script: click (function () {alert ("Hrrr!!!");}) ~~~ (3) task: add multiple features to the element: (1) size/position/background (2) draggable (3) resizable solution: Add 3 Scripts: (1)-------------------------------------- css({ 'background-color': 'red', position: 'absolute', left: '100px', top: '100px', width: '400px', height: '200px' }) (2)-------------------------------------- draggable() (3)-------------------------------------- resizable()