Visio shapes for jQuery Mobile

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.

Comments

[Alex Lauderdale]

Nice work. Here's a stencil I just put together. Between the two we may have nailed most of the ui elements

http://eternalcontr.tempwebpage.com/jquery-mobile-gmnigraffle-stencil/

[Rik Lammers]

Looks great!

I have a problem using these shapes in Visio, whenever I drag a shape onto the page it turns black. But the shape does look alright while dragging. Changing the theme etc. doesn't make a difference.

Can you help me?

[John Goldsmith]

Hello Alex,

Nice work yourself. There must be some people who don't use Visio I suppose :) Thanks for the link.

John

[John Goldsmith]

Hello Rik,

Sorry to hear you're having problems. Can you confirm what version of Visio you're using and that you've managed to copy both stencil (.vss) and template (.vst) files to the correct place described above?

Also, are you creating these shapes in a new document (based on the template), or are you trying to add them to an existing document?

John

[Rik Lammers]

Hello John,

I'm using Visio 2010. And have indeed copied the files to the correct places. And I was using them in a new document based on your template.

But I've found the problem. I'm from the Netherlands and we have the number group separator and decimal point switched in our number format. When I set the format to English (Control Panel/Region and Language/Format) everything is alright.

I guess if you change your settings (separator and decimalpoint) you would get the same result as I did.

Rik

[John Goldsmith]

Hi Rik,

Thanks for your response and highlighting this bug. I suspect this might also be an issue for German and French users as well. It's something I'll try and fix for the next release.

Perhaps I could use you as a Dutch tester when it's ready?

Thanks again for flagging this up.

Best regards

John

[Rik Lammers]

Hi John,

There are indeed a lot of country's in Europe that use this numberformat. A fix would be great! And I'll be happy to test it for you when it's ready.

I'm using the English settings for now, and everything works great! It's a really nice template.

I was wondering if it is possible for me to create and/or edit a theme (just the colors)? Can you point out to me where the themes are defined?

Best regards,
Rik

[Toine Pothuizen]

John,

I like this, thanks for sharing it. I would like to have also a 'list' element. Like the button, also with top/middle/bottom. Even better to use a 'inset' attribute (inset not active = full width, no rounded corners; inset active = list has extra space from left/right border, rounded corners.

Toine

[indie]

i would love to use those stencils but unfortunately they are not correctly working on my system: win7 + visio 2010.

1. Installed as described.

2. Got an JQueryMobile Template when i restart visio.

3. When i choose it i can also see the stencils, but when i use them they lack of the data-graphic, they are all black!

Any ideas how i can fix this?

First i thought it might be something with security permission, but i'm running visio in admin-mode - without a change.

[John Goldsmith]

Hello Indie,

What language are you using? There's an issue with some European languages due to incorrect string delimiters. I am planning to fix this but for the time being if you temporarily set your Windows language to English it should work ok - not a great workaround, I know.

Best regards

John

[indie]

Hi John,

thanks for your quick answer.
i'll try the fix (if my win7 is capable of switching the language)
FYI: language i'm running is german.

so long,
indie

[indie]

1. switched the system language to english (usa) - no improvement.
2. further switched office default language to english ... once again no improvement ;-(
3. any other ideas? someone else experienced missing graphics?

bye, indie

[John Goldsmith]

Hi Indie,

Thanks for the feedback and sorry to hear the language change didn't help. I'm hoping to get new versions up soon.

Best regards

John

[James zhang]

Great work!

But I find there is an error in your article:

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

while after I put the file in corresponding folders, I can not find this template, then I put VST to folder Stencils, and put VSS to folder Templates, it works!

My vision version is 2007 professional.

[John Goldsmith]

Hello James,

Thanks for your comment. That sounds a little unusual. Normally you would expect to put the template under the template path and the stencil under it's respective path, but I'm glad you've got it working.

Best regards

John

[Bill]

John,
Very nice. Have had the same issue with the language formats in some of my own work, needed to wire in a SUBSTITUTE() using LISTSEP() to get it to work.

Question though, I cannot figure out how you create the theme property on thepage when one of the shapes is dropped. What am I missing?

[uranic]

In other language set registry:

[HKEY_CURRENT_USER\Control Panel\International]
"sDecimal"="."

[Arry Harmawan]

There is JQuery Mobile update to version 1.1.0. Will there be any updates for this stencil?

[FrankS]

Just want to inform you that the problem others here have had, (only black squares when not English language), also is the case if you use Norwegian language.

The indicated registry setting above is also a really bad hack as it breaks the national standard for displaying decimal numbers. Potentially breaking the function of critical software such as economic reporting, accounting, invoicing, time management, and so on.

[Влодко Шремета]

Hello!
I haven't much experiance in jQuery Mobile, MS Visio and my English level could be better so excuse me for the question.
Can I use my Visio JQuery mobile shape for creating real mobile web site? If I can it, please, tell how.

[John Goldsmith]

Hello Влодко,

Thanks for your comment. The short answer is no. These shapes are designed as a quick method for creating wireframe UI's to get a feel for site functionality. There are may other more suitable tools for generating the actual markup.

Best regards

John Goldsmith

[John Goldsmith]

Thanks for you comment Frank. I am intending to provide an update in the future but I'm not committing to a date just yet.
I agree with you, that I wouldn't advocate altering the registry as a workaround.

Best regards

John Goldsmith

[John Goldsmith]

Hello Bill,

Thanks for the comment. The page theme cells are created in the masters' pages and referenced from the masters. This means that they are added the first time a shape is dropped. I've written a quick post about for you here:

http://visualsignals.typepad.co.uk/vislog/2012/06/using-page-shape-data-in-visio-master-shapes.html

Best regards

John

[Takashi Hayashida]

Great Stencils!

Thanks (^_^)

[D Whittaker]

Is there a way to apply a jquery mobile theme, created in jquery mobile themeroller, to your visio shapes?

[John Goldsmith]

Not easily I'm afraid. The (Visio shapes) theme colors come from user cells in the document stencil and are made up of a string array of RGB values. You can see more detail in this post:

http://visualsignals.typepad.co.uk/vislog/2011/09/using-excel-to-build-visio-shapesheet-formulae.html

I went through the original css file manually to create the five palettes as an array, so you'd have to do the same for the ThemeRoller generated css as well.

Best regards

John

[Atuldarne]

how do i add it to MS Word or Excel ? for design

[John Goldsmith]

@Atuldarne you can export the shapes as images, but if you mean can you edit in Word or Excel then you'd need to embed the Visio document - there's no real parity between Visio shapes and general Office shapes I'm afraid.

Best regards

John Goldsmith

[Peter Bulloch]

Really nice work! Was looking for something better than my imagination but less than Codiqa. This looks like it.

[John Goldsmith]

Thanks Peter. Glad you like it.

Best regards

John

[elizabeth]

hi, John

Good tools :) .jQuery mobile is 1.2 release now. Any update for this tool ?

[Brian]

Thanks so much, John! This is exactly what I was looking for.

[John Goldsmith]

Hello Elizabeth,

I don't have any immediate plans I'm afraid. What are the elements you're missing?

Best regards

John

[Marcello]

Hi John, thanks for sharing your work!

I've been trying to use the shapes for a project and i've noticed the dropdown menu widget is missing. Is it because it wasn't available in earlier versions of the library (now it's 1.3) or there's something i'm missing?

Do you plan a new release of the shapes?

Thanks again.
Marcello

[John Goldsmith]

Hello Marcello,

Still no immediate plans I'm afraid. Are you describing the Select menu widget? If so you could create your own from a button and then just add the overlay dropdown as required.

Best regards

John