A few weeks ago I was introduced to the jQuery Mobile framework at a UK Bing Maps User Group meeting. It looks like a cracking tool for cross browser mobile work and I’m looking forward to using in future projects.
Being a keen Visio man I thought I’d have a go at putting together some shapes for wireframing and mock ups. The following are the results…
jQuery Mobile release version
The following shapes are based on the beta 1.0b version that’s available at the time of writing. While there’s a beta 2 version coming any day now, I’ll probably wait until the final release before making any changes to the shapes. This being a beta, if you do spot any bugs in my work then please do add a comment to the bottom of this post and I’ll try and include the fix in the next version.
Visio compatibility
The shapes are designed to work in Visio 2003 through to 2010.
Download and install
To get started, download this jQuery Mobile zip file, which contains a stencil (.vss) and a template file (.vst). Unzip the package and copy and paste the resulting files to the following locations:
jQueryMobile.vss to your stencils folder, the path for which is described (or can be created) in
File / Options / Advanced / File Locations… / Stencils
jQueryMobile.vst to your templates folder, the path for which can also be found under
File / Options / Advanced / File Locations… / Templates
(Note – that the above is based on Visio 2010. If you’re using 2003 / 2007 then the same dialog can be found under Tools / Options / Advanced / File Paths.)
Once installed you should find a new option under Template categories for jQuery Mobile:
Generic shape interaction
Interaction with all of the shapes in the stencil are based on associated Shape Data (Custom Properties in 2003/7) and context menu options, available from right clicking the respective shape. This means the you need to ensure that the Shape Data window is visible by selecting Data / Shape Data Window (under the View menu for 2003/7).
Shape theming
A key part of the jQuery Mobile is the theming framework. This defines a class based CSS styling of elements and, aside from structural attributes such as size, corner rounding etc., also includes five default colour swatches (as per the title image above). Using the framework, an element’s theme is inherited from it parent container or can be applied locally.
If you were just targeting Visio 2010 then mimicking this behaviour would be made easier through the use of structured diagramming functionality. However, I wanted these shapes to be usable for 2003 and 2007 users and so I’ve modified the behaviour as follows:
- a (Visio) page has a theme property as part of its Shape Data and shapes on that page can either have a locally set theme, or inherit from the page in which they sit.
In general I would expect that you’d change the page level theme to see the changes reflected in the individual page shapes and so all shapes default to the ‘Inherit theme from page’ option.
To change the page theme, left click anywhere on the page so that no shapes are selected (or press Escape) and change the theme in the Shape Data window:
Multiple select
One feature that can help when trying to set Shape Data on multiple shapes is Visio’s Shape Data filtering, where by only common Shape Data fields remain visible when multiple shapes are selected. This comes in handy if you want to have multiple UI pages, with different themes, per Visio page. For example, in the image below, the right hand set of shapes inherits from the page (theme B), while the left all have a locally set theme (A).
Vertical or z-order
As I mentioned, the shapes do not have a concept of their containing objects (other than the page in which they sit) and so the z-order becomes an important factor in laying out the shapes.
The initial vertical order of shapes is therefore determined by the order in which they a dropped on the page. Visio enables you to change the vertical positioning using the Send to Back and Send to Front commands available via the ribbon (under the Arrange group), or Shape / Order menu for 2003/7. Two shortcuts are also available:
- Send to Front (Shift+Ctrl+F)
- Send to Back (Shift+Ctrl+B)
Text editing
You can edit the text of all shapes in one of two ways:
- direct editing via F2 key or double clicking the shapes
- via Shape Data
Direct editing is supported in the Toolbar, Button, Text Input, Search Input, Label Text and Checkbox Radio Button.
The Slider, Flip Toggle Switch and NavBar shapes can only have their text edited via the respective Shape Data fields as they are either calculated values (in the case of the Slider shape) or contain multiple text fields. For example, the NavBar can contain up to five items and the number and content of these are set via the Labels list Shape Data field (note the semi-colon delimiter).
Pixel sizing
While the CSS styling for jQuery Mobile defines sizes in pixels, this creates some difficulty for Visio (there’s a nice post by Chris Roth on pixel sizing if you’re interested). I’ve elected to use calculated values for shape sizing based on an average monitor resolution of 96 ppi, but if you happen to be using a 120 ppi monitor and want to open up the document ShapeSheet then there’s a User cell named ‘Screenppi’ that you can change from 96 to 120 and all of your shapes will resize accordingly.
Another point about sizing is that I’ve tried to give the pages a useful grid spacing which again is a calculated result but approximates to 12px wide by 10px high. While this grid sizing is a good average for the majority of the shapes, the page background has a set of default sizes and in order to get them to sit correctly in the grid I have coerced the actual size up or down a pixel or two. So if you’re using these shapes as an exact layout tool then that’s something to be aware of. I think in most cases this won’t be an issue, but in the next version I will probably include a property to ‘lock’ the shape to actual pixels.
So that’s some of the common shape behaviours – I’ll now move on to the features for each specific shape.
Toolbar
The Toolbar shape is a fairly simple. Aside from text editing (see above) the shape offers two yellow control handles to enable separate vertical and horizontal positioning of the text. Once moved, the text position can be reset via the right-click context menu.
Button
The Button shape supports four ‘button types’ (which effects corner rounding) to enable grouping of button sets to be built up or used individually. Text positioning and editing works as per the Toolbar shape.
Text input
The Text Input shape supports three types: the single line ‘Text input’, the multi-line ‘Text area’ and the masked ‘Password’. All three have an ‘Is selected’ property, which when set to True adds an outer glow to the shape.
Search input
The Search input shape is basically the same as the Text input shapes with the addition of a search icon.
Horizontal toggle / radio button
The Horizontal Toggle Radio button combines both multiple and single checked states for up to five items. The count and labels are defined in the ‘Labels list’ Shape Data field, which is delimited by a semi-colon character. For example, if you only want to display three items (A, B and C) then you would set the Labels list field to be “A;B;C”. The checked state of each item can be set via the Shape Data window or the right-click context menu. The context menu also contains to actions to ‘Select all’ and ‘Deselect all’. Finally, the vertical position of the labels can be adjusted using the yellow control handle.
Label text
Aside from the normal text editing behaviour, the Label text shape has eight font size options available via the Shape Data window:
- Custom
- H1 to H6
- Normal
Custom allows you to control the font size using the standard Visio UI, while H1 to H6 and Normal define respective pre-sets. Normal equates to 16px as per jQuery Mobile styling.
A hyperlink style can also be applied to the shape by checking Visio’s Underline command (Ctrl+U). The effect of the underline also changes the font colour inline with the jQuery Mobile styling.
Slider
The Slider shape contains value, minimum and maximum properties, all available via the Shape Data window. The value can be changed by either the respective Shape Data field or dragging the yellow control handle on the slider itself. The value will always be coerced to sit within its min. max. range. A further Shape Data field (‘Rounding’) allows you to set the decimal rounding figure to anywhere between zero and three places. The default rounding is zero places.
Checkbox / radio button
Behaviour of the Checkbox Radio Button shape is similar to the ‘Button’ shape in terms of its ability to be used on its own or as part of a group. Additional Shape Data and right-click context menu options enable you to set the shape’s type as Checkbox or Radio button, both with Checked or Unchecked states.
Icon
The Icon shape contains an Icon type Shape Data field to select from one of the 22 icons above (18 plus the Checkbox and Radio button ones). The names correspond to those found in the documentation. Although their main use is within Button controls, I’ve chosen to leave them as separate shapes as they can also be used elsewhere (in a NavBar for example) and also allows for greater flexibility in terms of positioning. (Note - The Icon is the only shape in the stencil that is not effected by the chosen theme and the ‘Theme’ Shape Data field is only displayed in order to allow the Multiple Select, mentioned above, to work effectively.)
Flip toggle switch
The flip toggle switch has two states and can be swapped via the ‘Boolean state’ Shape Data field, the right-click context menu and by double-clicking the shape. The true and false text labels are set by their respective fields.
Navbar
The Navigation bar takes up five items of which only one may be ‘Selected’ at any one time. The items labels can be set via the ‘Labels list’ Shape Data field, (again, note the semi-colon delimiter) as per the Horizontal Toggle Radio button. The vertical position of the labels can also be set using the yellow control handle.
Layout grid
The Layout grid represents a single row from which a layout grid can be visualised. The shape allows for up to five columns which can be in a locked or variable state. The default is for uniform column spacing, but this can be adjusted using the yellow control handles.
Page background
The page background shape can be used as a canvas on which to layout your other page controls. As per the other shapes the page background respects the selected theme (inherited or local). While the shape can be stretched to any size desired, I’ve included some default sizes for convenience.
So, I hope that you find these shapes useful and if you want to extend them in any way you’re of course free to open up the ShapeSheet and explore how the fit together. I’ll be looking at some of the interesting problems that designing these shapes has thrown up over the next few posts.