Illustrations Angularjs Wijmo5 and LightSwitch

LightSwitch in Visual Studio 2013 has new features, including better team development support and improvements in building HTML client desktops and Office 365 applications. This document is illustrated with the ANGULARJS provided by the newly released Wijmo 5.

650) this.width=650; "width=" 420 "height=" 268 "title=" image "style=" border:0px;padding-top:0px;padding-right:0px; Padding-left:0px;background-image:none; "alt=" image "src=" http://images.cnitblog.com/blog/139239/201410/ 291516005033835.png "border=" 0 "/>

Based on Visual Studio LightSwitch as a data source, we use WIJMO 5 controls to quickly create ANGULARJS applications.

650) this.width=650; "Width=" 442 "height=" 227 "title=" image "style=" border:0px;padding-top:0px;padding-right:0px; Padding-left:0px;background-image:none; "alt=" image "src=" http://images.cnitblog.com/blog/139239/201410/ 291516018628320.png "border=" 0 "/>

Inserting data records

650) this.width=650; "width=" 446 "height=" 247 "title=" image "style=" border:0px;padding-top:0px;padding-right:0px; Padding-left:0px;background-image:none; "alt=" image "src=" http://images.cnitblog.com/blog/139239/201410/ 291516029722648.png "border=" 0 "/>

Business Rule Validation

650) this.width=650; "Width=" 449 "height=" "title=" image "style=" border:0px;padding-top:0px;padding-right:0px; Padding-left:0px;background-image:none; "alt=" image "src=" http://images.cnitblog.com/blog/139239/201410/ 291516037532776.png "border=" 0 "/>

Data record Updates

650) this.width=650; "Width=" 453 "height=" 127 "title=" image "style=" border:0px;padding-top:0px;padding-right:0px; Padding-left:0px;background-image:none; "alt=" image "src=" http://images.cnitblog.com/blog/139239/201410/ 291516050508046.png "border=" 0 "/>

Select data Record, click on Keyboard to delete button

650) this.width=650; "Width=" 465 "height=" 206 "title=" image "style=" border:0px;padding-top:0px;padding-right:0px; Padding-left:0px;background-image:none; "alt=" image "src=" http://images.cnitblog.com/blog/139239/201410/ 291516060814631.png "border=" 0 "/>

Click on the column header to sort the data

650) this.width=650; "Width=" 468 "height=" 228 "title=" image "style=" border:0px;padding-top:0px;padding-right:0px; Padding-left:0px;background-image:none; "alt=" image "src=" http://images.cnitblog.com/blog/139239/201410/ 291516071903660.png "border=" 0 "/>

Concurrency check (provided by the backend of the LightSwitch).

Wijmo 5 Control set

650) this.width=650; "width=" 524 "height=" 415 "title=" image "style=" border:0px;padding-top:0px;padding-right:0px; Padding-left:0px;background-image:none; "alt=" image "src=" http://images.cnitblog.com/blog/139239/201410/ 291516099093228.png "border=" 0 "/>

October 7, 2014---Grape City announced the official release of Wijmo 5. Wijmo 5 is no longer compatible with the traditional browser (<= IE9), the pure HTML5 control set. Also, angular JS will be fully supported in the release and Wijmo of all 5 controls.

Why use Wijmo 5 and LightSwitch?

• for the 100% control UI: The LightSwitch HTML client is based on jquery Mobile, which results in a significant amount of time spent in order to control the UI.

• to achieve security : Security policies are typically implemented on the server side. cannot be achieved through ANGULARJS front-end technology. LightSwitch makes security very easy to implement.

• in order to handle concurrency : When multiple people update the DB at the same time results in concurrency, fortunately, LightSwitch has implemented this feature automatically.

• in order to use LightSwitch to manage the interface code : Based on LightSwitch, we do not need to use ANGULARJS to implement the management interface code, LightSwitch has been implemented, So combining LightSwitch and Angularjs makes programming very easy.

• to speed up development : The current use of LightSwitch can greatly reduce code writing, which means that the development process accelerates and bugs are reduced.

The examples are as follows:

650) this.width=650; "Width=" 510 "height=" 419 "title=" image "style=" border:0px;padding-top:0px;padding-right:0px; Padding-left:0px;background-image:none; "alt=" image "src=" http://images.cnitblog.com/blog/139239/201410/ 291516131443641.png "border=" 0 "/>

LightSwitch Business Layer

650) this.width=650; "Width=" 278 "height=" 327 "title=" image "style=" border:0px;padding-top:0px;padding-right:0px; Padding-left:0px;background-image:none; "alt=" image "src=" http://images.cnitblog.com/blog/139239/201410/ 291516148158096.png "border=" 0 "/>

In the solution view, in the data source datasources right-click, select Add Table

650) this.width=650; "width=" 470 "height=" 173 "title=" image "style=" border:0px;padding-top:0px;padding-right:0px; Padding-left:0px;background-image:none; "alt=" image "src=" http://images.cnitblog.com/blog/139239/201410/ 291516165032081.png "border=" 0 "/>

Create a Todo table

650) this.width=650; "Width=" 208 "height=" 244 "title=" image "style=" border:0px;padding-top:0px;padding-right:0px; Padding-left:0px;background-image:none; "alt=" image "src=" http://images.cnitblog.com/blog/139239/201410/ 291516266441317.png "border=" 0 "/>

Click the Write Code button, select the Validate method, and in the generated template, insert the validation code.

Partial void todoes_validate (Todo entity, entitysetvalidationresultsbuilder results)         {             // do not allow a task to be called {new task]             if  (entity. taskname ==  "[New task]")              {                results . Addentityerror (                      "Task cannot be named [new task"                      );             }            // do not  allow more than 1 incomplete Task             if  (entity. Iscomplete == false)             {                 int  intcountofincomplete =                     this. dataworkspace.applicationdata.todoes                     . Where (X => x.iscomplete == false)                      . Where (x => x.id != enTity. ID). Count ();                 if   (intcountofincomplete > 0)                  {                     results. Addentityerror (                          "cannot have more than 1  Incomplete task "                         );                 }             }        }

Wijmo 5 Code

Wijmo 5: Enter your email address to get the download URL

650) this.width=650; "Width=" 398 "height=" 194 "title=" image "style=" border-width:0px;padding-top:0px;padding-right : 0px;padding-left:0px;background-image:none; "alt=" image "src=" http://images.cnitblog.com/blog/139239/201410/ 291516283621759.png "border=" 0 "/>

650) this.width=650; "Width=" 502 "height=" 314 "title=" image "style=" border:0px;padding-top:0px;padding-right:0px; Padding-left:0px;background-image:none; "alt=" image "src=" http://images.cnitblog.com/blog/139239/201410/ 291516295502828.png "border=" 0 "/>

Unzip the Wijmo sample and navigate to the ".. \samples\js\angular\odata"directory, copy the vendor and styles folders to the Scripts folder of the LightSwitch Server project.

650) this.width=650; "Width=" 280 "height=" 289 "title=" image "style=" border:0px;padding-top:0px;padding-right:0px; Padding-left:0px;background-image:none; "alt=" image "src=" http://images.cnitblog.com/blog/139239/201410/ 291516304253927.png "border=" 0 "/>

Create the Wijmo.data folder, download the odatacollectionview.js, and copy it under the Wijmo.data folder.

Angularjs Code

650) this.width=650; "Width=" 202 "height=" 241 "title=" image "style=" border:0px;padding-top:0px;padding-right:0px; Padding-left:0px;background-image:none; "alt=" image "src=" http://images.cnitblog.com/blog/139239/201410/ 291516312841798.png "border=" 0 "/>

Create the App.js script file under the Scripts folder and enter the following code.

The Angularjs declaration relies on Wijmo "WJ" Module:var app = Angular.module (' app ', [' WJ ']);

650) this.width=650; "Width=" 198 "height=" 254 "title=" image "style=" border:0px;padding-top:0px;padding-right:0px; Padding-left:0px;background-image:none; "alt=" image "src=" http://images.cnitblog.com/blog/139239/201410/ 291516323786597.png "border=" 0 "/>Create the Controllers folder under the Scripts folder and create the Appctrl.js, and enter the following code.

' Use strict '; Var app = angular.module (' app '); App.controller (' Apptodoctrl ',  function  apptodoctrl ($scope)  {    // define data service URL  And data types for specific columns    var odataservice  =  '/applicationdata.svc ', datatypes = [];    // load  todos table     $scope. Cvtodo = new wijmo.data.odatacollectionview (         { serviceUrl: oDataService, entityName:  ' Todoes '  },        [' Id '],         {            serversettings: {                 selects:  [' Id ',  ' RowVersion ',  'TaskName ',                      ' iscomplete ',  ' Created ',  ' Modified ']             }        },         datatypes, loaded, true);    // display  any errors     $scope. CvToDo.error.addHandler (function  (Sender, args)  {         alert (sender.errormsg);     });     // tell scope when tables finish loading     function loaded ()  {         $scope. $apply ();     }});

Creating HTML pages

650) this.width=650; "Width=" 263 "height=" 467 "title=" image "style=" border:0px;padding-top:0px;padding-right:0px; Padding-left:0px;background-image:none; "alt=" image "src=" http://images.cnitblog.com/blog/139239/201410/ 291516333622898.png "border=" 0 "/>

Create the Todo.htm page and enter the following code:

<! Doctype html> 
Add Wijmo Grid code within <body>:
<div class= "Container" >        <wj-flex-grid class= "Grid"                         allow-add-new= "true"                         allow-delete= "true"                          items-source= "Cvtodo" >             <wj-flex-grid-column                                    binding= "TaskName"                                     width= "               "                     header= "Task name" >            </ wj-flex-grid-column>            < wj-flex-grid-column                                    binding= "Iscomplete"                                     datatype= "Boolean" &Nbsp;                                  width= "200"                                    header= " Iscomplete ">            </ wj-flex-grid-column>        </wj-flex-grid>     </div>
Reference article:
 
 

  
  
 
   
Microsoft Visual Studio LightSwitch Introduction
 
   
LightSwitch Developer Center
 
   
LightSwitch Team Blog
 
   
Wijmo5 Chinese Blog
 
  
 
 

This article is from the "Grape City Control Technology Team Blog" blog, be sure to keep this source http://powertoolsteam.blog.51cto.com/2369428/1600085
Illustrations Angularjs Wijmo5 and LightSwitch