Hello, Colors and more

Leading LightSwitch – Hello, Colors

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:
OrderMgmt_AddEditProduct
Picture 1: Sample form with colour picker
o
OrderMgmt_AddEditProductCategory3
Picture 2: Sample popup dialog with colour picker
o
OrderMgmt_BrowseProducts
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:
OrderMgmt_AddEditProductCategory1
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:
OrderMgmt_AddEditProductCategory2
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?
OrderMgmt_ScreenDesign1
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
About these ads

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s