HTML5 Everywhere : Part 2 Wijmo in LightSwitch CTP

Script 2: Implementing The Wijmo Radial Gauge In The LightSwitch HTML Client Original complete post is Written by ComponentOne Influencer: MVP Michael WashingtonGuess, What? LightSwitch now has a HTML client!Prerequisite: LightSwitch HTML Client CTP (now included in Visual Studio 2012 Update 2 CTP) Not sure? Check your about box in Visual Studio 2012 and it should look something like this: SNAGHTML6dacc4

Starter Solution Download

Download this starter solution above or follow Michaels’ blog to build the project to this point.If you download the starter solution, before unzipping, right click on the zip file in Windows Explorer, select Properties, press the Unblock button and press OK and then unzip. SNAGHTML243ccc9f The starter solution already has a LightSwitch app completed and we will modify it to use the Wijmo Gauge control. If you would like to see how this app was built using the LightSwitch CTP, then see Michael’s blog.

1) Rebuild the solution in VS 2012 and Press F5 to run the application.


2) You will be able to Add students.


3) You will be able to Edit existing records.


4) Install Wijmo


Wijmo comes in two versions. A commercial version of 40+ widgets, and a free version that contains the following widgets:

§ Accordion

§ Calendar

§ Dialog

§ Expander

§ Form Decorator

· Radio Button

· TextBox

· DropDown

· CheckBox

§ List

§ Menu

§ Popup

§ ProgressBar

§ Slider

§ Splitter

§ SuperPanel

§ Tabs

§ Tooltip

§ Video Player

In this demo we will implement a control from Wijmo Complete (it is free to try and then when you are ready you purchase a license)

In the Solution Explorer, switch to File View.


5) Right-click on the Client project and select Manage NuGet Packages (ensure you have the latest NuGet Manager installed because a bug that caused crashes was fixed).


6) Search for Wijmo and install Wijmo Complete.


7) Select Show All Files in the Solution Explorer to see all the files.


8) Select the JavaScript files that were added, right-click on them and select Include in Project if not already included.


9) Open the Default.htm page.

Note: you can turn on line numbers in the editor Tools | Options | Text Editor | All Languages


10) Insert the following to the .css section:

<!-- added Wijmo Widgets CSS-->

11) Add the following to the JavaScript section

(after : <script type="text/javascript" src="Scripts/Generated/generatedAssets.js">></script>)

<!-- Added Wijmo Widgets and guagecontrol JavaScript--> <script src="Scripts/jquery.wijmo-open.all.2.3.5.min.js" type="text/javascript">></script> <script src="Scripts/jquery.wijmo-complete.all.2.3.5.min.js" type="text/javascript">></script>

12)Insert the following to the JavaScript section

(after: <script type="text/javascript" src="Scripts/jquery-1.8.3.min.js"></script>. Also note, my code had 1.8.2 generated by VS 2012 and I needed to change this to 1.8.3)

<script src="" type="text/javascript">></script>

13) Implement the Wijmo Radial Gauge


When we go to this link, we can find documentation on the Wijmo Radial Gauge. You can get the full documentation at this link.

Using that documentation, this reusable JavaScript class can be created (right-click on the link and select Save Target As and save it as GaugeControl.js (rename from GuageControl.js) and put it in the Scripts folder of the Client project).

Here is the code for GaugeControl.js

function sector(cx, cy, r, startAngle, endAngle, params) { var x1 = cx + r Math.cos(-startAngle rad), x2 = cx + r Math.cos(-endAngle rad), y1 = cy + r Math.sin(-startAngle rad), y2 = cy + r Math.sin(-endAngle rad); return paper.path(["M", cx, cy, "L", x1, y1, "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, "z"]).attr(params); } function UpdateRadialContrl(radialContrl, intRadialValue) { // This only updates the value radialContrl.wijradialgauge({ value: intRadialValue, // The value for the Radial Control }) }; function CreateRadialContrl(radialContrl, intRadialValue) { // This creates the control and sets all values radialContrl.wijradialgauge({ value: intRadialValue, // The value for the Radial Control max: 100, min: 0, startAngle: 10, sweepAngle: 160, radius: 190, islogarithmic: false, origin: { x: 0.5, y: 0.5 }, labels: { offset: 27, style: { fill: "#1E395B", "font-size": 12, "font-weight": "800" } }, tickMinor: { position: "inside", offset: 30, style: { "height": 3, "width": 10, fill: "#1E395B", stroke: "#E7EFF8" }, interval: 5, visible: true }, tickMajor: { position: "inside", offset: 27, style: { fill: "#1E395B", "height": 4, "width": 20, stroke: "#E7EFF8", "stroke-width": 1.5 }, interval: 25, visible: true }, ranges: [{ startWidth: 2, endWidth: 5, startValue: 0, endValue: 10, startDistance: 0.6, endDistance: 0.58, style: { fill: "#7BA0CC", stroke: "#7BA0CC", "stroke-width": 0 } }, { startWidth: 5, endWidth: 20, startValue: 10, endValue: 125, startDistance: 0.58, endDistance: 0.54, style: { fill: "0-#B4D5F0-#B4D5F0", stroke: "#FFFFFF", "stroke-width": 0 } }, { startWidth: 20, endWidth: 25, startValue: 125, endValue: 150, startDistance: 0.54, endDistance: 0.5, style: { fill: "#7BA0CC", stroke: "#7BA0CC", "stroke-width": 0 } }], face: { template: function (ui) { var a = ui.canvas.path($.wijraphael.sector( ui.origin.x, ui.origin.y, ui.r, 0, 180)), b = ui.canvas.path($.wijraphael.sector( ui.origin.x, ui.origin.y, ui.r / 6, 180, 0)), style = { fill: "#E0E8EF", stroke: "#E0E8EF" }; a.attr(style); b.attr(style); } }, pointer: { length: 0.8, offset: 0, width: 6, style: { fill: "#1E395B", stroke: "#1E395B" } }, cap: { radius: 10, style: { fill: "#1E395B", stroke: "#1E395B" } } }); };

14) Add GaugeControl.js to Client/Scripts folder


15) Insert the following to the JavaScript section in default.htm page right below the Wijmo references.

<script src="Scripts/GaugeControl.js" type="text/javascript">></script>

    16) **Default.htm** should now look like this:


<script type="text/javascript"> // Work around viewport sizing issue in IE 10 on Windows Phone 8 if (navigator.userAgent.match(/IEMobile\/10\.0/)) { document.writeln(""); } ></script> <!-- Change light-theme.css and msls-light.css to dark-theme.css and msls-dark.css respectively to use the dark theme. Alternatively, you may replace light-theme.css with a custom jQuery Mobile theme. --> <!-- added Wijmo Widgets CSS--> <!-- Default font, header, and icon styles can be overriden in user-customization.css -->


<script type="text/javascript" src="//">></script> <script type="text/javascript" src="Scripts/winjs-1.0.min.js">></script> <script type="text/javascript" src="Scripts/jquery-1.8.3.min.js">></script>

<script src="" type="text/javascript">></script> <script type="text/javascript" src="Scripts/">></script> <script type="text/javascript" src="Scripts/datajs-1.1.0.min.js">></script> <script type="text/javascript" src="Scripts/Generated/resources.js">></script> <script type="text/javascript" src="Scripts/msls-1.0.0.min.js">></script> <script type="text/javascript" src="Scripts/Generated/generatedAssets.js">></script> <!-- Added Wijmo Widgets and gaugecontrol JavaScript--> <script src="Scripts/jquery.wijmo-open.all.2.3.5.min.js" type="text/javascript">></script> <script src="Scripts/jquery.wijmo-complete.all.2.3.5.min.js" type="text/javascript">></script> <script src="Scripts/GaugeControl.js" type="text/javascript">></script> <script type="text/javascript"> $(document).ready(function () { msls._run() .then(null, function failure(error) { alert(error); }); }); ></script>

16) Switch back to Logical View.


17) Open the Add/Edit Detail Screen by double clicking WijmoStudentDetail.


18) We want to bind the control to the value of the Test Score and Add a second instance of Test Score.


19) Select drop down arrow and change the second instance of Test Score to a Custom Control.


20) Drag custom control Test Score down and the left, so it is under Rows layout – Details (Tab).


21) In the Properties of the control:

§ Set Label Position to Hidden

§ Set Height to Fixed Size

§ Set Pixels to 240


22) In the Properties for the control, select Edit Render Code.

A method will be created for you to enter custom JavaScript code.


23) Add code to look as follows:

/// myapp.WijmoStudentDetail.TestScore1_render = function (element, contentItem) { // Write code here. var radialContrl = $('


radialContrl.appendTo($(element)); // Create the control CreateRadialContrl(radialContrl, contentItem.value);


24) When you run the application, the Gauge will display and match the value entered for Test Score.


However, when you change the Test Score, you have to save the record and return to it to see the Gauge change.

25) If we close the web browser and return to the JavaScript method and add the following code to the method, the Gauge will automatically update when enter is pressed or the text box for the test score has lost focus, without having to save it first:

contentItem.dataBind("value", function (newValue) {

    UpdateRadialContrl(radialContrl, newValue)


Completed Soultion Download


GrapeCity Developer Tools
comments powered by Disqus