Design Studio SDK - A Tab Strip, Toolbar, Segmented Button, a List Box or a Tile Group?

[mike_howles4]

UPDATE (8/11/14):

Utility Pack is now updated with source code for this example: Design Studio 1.2/1.3 SDK - Design Studio Utility Pack - The deployable .ZIP file is also linked from there.

I blogged a while back about a toolbar component and thought about basically what it really was.  It's a list of items that you need to arrange in a horizontal form.  Key word there was list...  I thought about other forms we see selectors that come in list form and thought it would be interesting to see if we could create all these forms in one component for dealing with the list content and let CSS do its job for controlling the form.

I wanted to do this without a framework this time like SAPUI5.  I ended up using jQuery solely for convenience sake but all HTML can be seen in the source code and could be done in it's most raw form.  So with that in mind, my first consideration was the actual HTML structure I'd need to use.

Most web designers take the approach of using the <ul> HTML element (a list element for the non-HTMLers reading).  With some CSS, these list elements can take a variety of creative forms, which means our actual JavaScript should be quite lean.

I did want to include a few convenience options while I was at it, so while this component *IS* a list builder, it also will accept an optional Sprite Sheet parameter to allow for rendering an icon per-item, if you prefer.  If a sprite sheet is chosen, you do need to tell the component how wide and tall the icon is, and how many show per-row.  It will then take care of the math for you.  I took it one step further and added an ability to set the index of each sprite, in case you want to skip or repeat a certain icon.  I also wanted to allow for skipping an entire item with a visibility flag.  And finally, I added a few basic styling options for text alignment and item widths.  This stuff could have been pushed down to CSS but sometimes it's nice to have it in the property window.

So with those functional options mentioned, here's an overview of all of them from a contribution.xml perspective:

<property id="titles" type="String" title="Titles"/>

    <property id="spriteIDs" type="String" title="Sprite IDs (Optional)"/>

    <property id="visibilities" type="String" title="Visibilities (Optional)"/>

    <property id="fixedWidth" type="String" title="Fixed Width (-1 for auto)"/>

    <property id="spriteSheet" type="Url" title="Icon Sprite Sheet (Optional)"/>

    <property id="labelClicked" type="String" title="Selected Label"/>

    <property id="onclick" type="ScriptText" title="On Click..." group="Events"/>

    <property id="labelPlacement" type="String" title="Label Placement (Relative to Icon)">

    <possibleValue>After</possibleValue>

    <possibleValue>Before</possibleValue>

    </property>

    <property id="labelOrientation" type="String" title="Label Orientation">

    <possibleValue>horizontal</possibleValue>

    <possibleValue>vertical</possibleValue>

    </property>

    <property id="textAlign" type="String" title="Text Alignment">

    <possibleValue>left</possibleValue>

    <possibleValue>center</possibleValue>

    <possibleValue>right</possibleValue>

    </property>

    <property id="verticalAlign" type="String" title="Vertical Alignment">

    <possibleValue>top</possibleValue>

    <possibleValue>middle</possibleValue>

    <possibleValue>bottom</possibleValue>

    </property>

    <property id="spriteSheetPerRow" type="int" title="Icons Sprites Per Row"/>

    <property id="spriteSheetHoverOffsetX" type="int" title="Hover Offset X (-1 for no offset)" />

    <property id="spriteSheetHoverOffsetY" type="int" title="Hover Offset Y (-1 for no offset)" />

    <property id="iconWidth" type="int" title="Icon Width (px)"/>

    <property id="iconHeight" type="int" title="Icon Height (px)"/>

    <initialization>

    <defaultValue property="titles">Facebook,YouTube,Reddit,SAP</defaultValue>

    <defaultValue property="labelPlacement">After</defaultValue>

    <defaultValue property="labelOrientation">vertical</defaultValue>

    <defaultValue property="verticalAlign">top</defaultValue>

    <defaultValue property="textAlign">center</defaultValue>

    <defaultValue property="fixedWidth">-1</defaultValue>

    </initialization>

Nothing too complex going on there.  But a few things to call out...  The 'titles', 'visibilities' and 'spriteIDs' properties are all String, however are meant to be used as arrays/CSV notation.  So if you look at the default value for 'titles', you see a few website titles mentioned there for the sake of illustration.  'visibilities' and 'spriteIDs' are optional CSV strings meant for the visibility and sprite index offsets mentioned earlier.

So a quick overview of what a Sprite Sheet looks like for those who haven't seen one:

Sprite Sheets are meant to allow one image to be used across multiple components.  Kind of like a sticker sheet.  (Kind of.)  So by using this same sprite sheet above, let's make a button bar/tab-strip looking thing component.  We'll use the same sprite sheet mentioned above (URL: https://raw2.github.com/lukasmartinelli/android-actionbar-icons/master/dist/mdpi/img/actionbar-icons...).  I also set the icon width/height to 32 and set the sprites per row to 12 so that the component can do its math.  I also need to set my Sprite/Icon IDs to certain numbers so I can select the icons that I want.  This is optional and will just count in order otherwise.  As you can see, you can also select a default selected label, and a few alignment properties.

By default, this looks a OK, but a little dull:

This is where the CSS fun kicks in.  I've made a few canned styles available to demonstrate the power that CSS can provide on top of this basic functionality.  Below is an example with the component shown above styled, with 3 additional components with different styles applied (click to enlarge):

So as you can see in the Outline, this was done with just 4 components, however it can do a lot of work for you if you find yourself in the business of making toolbars by hand or tiles etc.  It can even work as a listbox.  You may also notice that it of course has an on click even which you then write your interactive scripting off of.  When you click an item, it updates a selected label which can then be used in the onclick BIAL code:

UPDATE (8/11/14):

Utility Pack is now updated with source code for this example: Design Studio 1.2/1.3 SDK - Design Studio Utility Pack - The deployable .ZIP file is also linked from there.

Enjoy!