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.

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

Inserting data records

Business Rule Validation

Data record Updates

Select data Record, click on Keyboard to delete button

Click on the column header to sort the data

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

Wijmo 5 Control set

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:

LightSwitch Business Layer

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

Create a Todo table

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

Partial voidtodoes_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)            {                intIntcountofincomplete = This. DataWorkspace.ApplicationData.ToDoes. Where (x= = X.iscomplete = =false)                    . Where (x= = X.id! =entity. ID).                Count (); if(Intcountofincomplete >0) {results. Addentityerror ("cannot has more than 1 incomplete Task"                        ); }            }        }

Wijmo 5 Code

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

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.

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

Angularjs Code

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

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

Create the Controllers folder under the Scripts folder and create the Appctrl.js, and enter the following code.

' Use strict ';varApp = Angular.module (' app '); App.controller (' Apptodoctrl ',functionApptodoctrl ($scope) {//Define data Service URL and data types for specific columns    varOdataservice = '/applicationdata.svc ', datatypes = []; //Load ToDos Table$scope. Cvtodo =NewWijmo.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    functionloaded () {$scope. $apply (); }});

Creating HTML pages

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

<! DOCTYPE html>type= "Text/javascript" ></script> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/ Angular.min.js "type= "Text/javascript" ></script> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/ Angular-route.min.js "type= "Text/javascript" ></script> <script src= "https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/ Bootstrap.min.js "type= "Text/javascript" ></script> <link rel= "stylesheet" href= "https://netdna.bootstrapcdn.com/bootstrap/ 3.1.1/css/bootstrap.min.css "type= "Text/css"/> <!--Wijmo and <script src= "Scripts/vendor/wijmo.min.js" type= "Text/javascript" ></s cript> <script src= "scripts/vendor/wijmo.input.min.js" type= "Text/javascript" ></script> <script S Rc= "Scripts/vendor/wijmo.grid.min.js" type= "Text/javascript" ></script> <link href= "styles/vendor/ Wijmo.min.css "rel=" stylesheet "/> <!--app Scripts--<script src=" Scripts/wijmo.data/odatacollectionv Iew.js "type=" Text/javascript "></script> <script src=" scripts/app.js "type=" Text/javascript "></ script> <script src= "scripts/controllers/appctrl.js" type= "Text/javascript" ></script> <!--wijmo- Angular Interop--<script src= "Scripts/vendor/wijmo.angular.min.js" type= "Text/javascript" ></script > <!--app styles--<link href= "Styles/app.css" rel= "stylesheet" type= "Text/css"/>To do Example
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= "300"Header= "Task Name" > </wj-flex-grid-column> <wj-flex-grid-Column Binding= "Iscomplete"datatype= "Boolean"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
 
  
 
 
Illustrations Angularjs Wijmo5 and LightSwitch