Hello, Colors and more

MSDN Magazine > Issues and Downloads > 2013 > May 2013 Issue

Leading LightSwitch – Hello, Colors

Jan Van der Haegen

o

If you have not taken the time to read through and try the above sample written by Jan in his MSDN Magazine column then you should do so. As Jan says, if you are new to VisualStudio LightSwitch then visit the LightSwitch development center. LightSwitch has shallow learning curve, so you should be following through the ‘Hello, Colors’ article in no time.

o

For some reason MSDN Magazine web site refuses to let me post feedback so I decided to publish this blog post. Well done Jan, great article!

Following on, here are my attempts to implement colour-coding inside a sample LightSwitch HTML Client:

Picture 1: Sample form with colour picker

o

Picture 2: Sample popup dialog with colour picker

o

Picture 3: Colour-coded tiles

o

I think that is not too bad at all, however it was not all straightforward. I arrived at this point expecting success provided there were no typo’s:

Picture 4: Colour picker style at odds with the theme

o

So that did not work as expected. The input textbox gets focus and nothing shows. Jan’s examples usually work so I figured I must be missing some tweaks to the UI elements. Firstly, lets style the input textbox to match my JQuery Mobile ThemeRoller theme:

Picture 6: HTML element does not expand

o

To fix the problem I had to adjust the minimum width and height settings in the LightSwitch designer for the colorpicker custom control. I wonder if Jan did that or is there a problem with changes with the latest release of the software?

Picture 7: Setting minimum width and height

o

For those wishing to alter the style of the input textbox, here is the JavaScript code:

myapp.AddEditProduct.Color_render = function (element, contentItem) { setTimeout(function () { var colorPicker = $("<input class="id-element ui-input-text ui-body-a ui-corner-all ui-shadow-inset ui-mini"" + " id="cpFocus" type="text" maxlength="255"" + " value="" + contentItem.value + "" data-mini="true" />"); colorPicker.appendTo($(element)); colorPicker.colorpicker({ showOn: 'focus' }) .on('change.color', function (evt, color) { contentItem.value = color; }); contentItem.dataBind("value", function () { colorPicker.colorpicker("val", contentItem.value); }); }, 0); };

Code 1: The class tag for picking up the JQuery mobile styling

o
That is all for now! Many thanks to Jan Van der Haegen and the Visual Studio LightSwitch team.

o

Theme rolled courtesy of and at JQuery Mobile ThemeRoller – get rolling!

o

Advertisement