Hello, Colors and more

Leading LightSwitch – Hello, Colors

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.
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
Picture 2: Sample popup dialog with colour picker
Picture 3: Colour-coded tiles
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
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
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
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.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
That is all for now! Many thanks to Jan Van der Haegen and the Visual Studio LightSwitch team.
Theme rolled courtesy of and at JQuery Mobile ThemeRoller – get rolling!

2 responses to “Hello, Colors and more

  1. Pingback: LightSwitch Community & Content Rollup– May 2013 (+more) - Beth Massi - Sharing the goodness - Site Home - MSDN Blogs

  2. Pingback: LightSwitch社区和内容汇总 – 2013年5月(更多) - Beth Massi的中文博客 - Site Home - MSDN Blogs

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s