ITCamp 2013 - Melania Danciu - HTML5 apps with LightSwitch

itcampro@ itcamp13# Premium conference on Microsoft technologies

HTML5 apps with LightSwitch

Melania Danciu, Solution Architect,

http://mela.ro

LightSwitch


Development &

MobileHuge thanks to our sponsors!


Development &

MobileMela

Engineer - Polytechnic University of Timisora

Software developer

Solution Architect at Haufe-Lexware

Speaker

@melaniadanciu

http://mela.ro


Development &

Mobilehttp://mela.ro


Development &

Mobile

“The easiest way to create modern line of business applications for the enterprise.”

Jay Schmelzer

LightSwitch


Development &

MobileAgenda Today

1. Business

Application

• Desktop, Web

and Mobile

2. Tools we

need

• LightSwitch

3. Build

• Server

• Desktop/Web

• Mobile

4. Deployment

• Azure/IIS


No code at all and have access from every were

commons.wikimedia.org

http://commons.wikimedia.org/wiki/File:Minnesota_Twins_42.png


MOBILE APPS FACTS

Global and Europe


Development &

MobileICT Facts and Figures

http://www.itu.int/en/ITU-D/Statistics/Documents/facts/ICTFactsFigures2013.pdf

http://www.itu.int/en/ITU-D/Statistics/Documents/facts/ICTFactsFigures2013.pdf


Development &

MobilecomScore - EU SmartPhones

http://www.comscoredatamine.com/2013/03/smartphones-reach-majority-in-all-eu5-countries/

http://www.comscoredatamine.com/2013/03/smartphones-reach-majority-in-all-eu5-countries/


Development &

MobileBusiness App on Mobile

Data base

• Tables, Queries

Server

• Define contracts

• Has custom logic

Administration

• User Interface

• Validations

• Data binding

• Export to other

platforms

Mobile App

• User interface

• Validation

• Data binding

• Roles and rights

Deployments -

Azure

• Data Base

• Server

• Administration

• Mobile App


LIGHTSWITCH

Tools we need…


Development &

MobileLightSwitch

Has

important

tools

Does the

common

tasks for us

Makes us use

modern

technologies

Uses the

most used

architecture

patterns

Creates

Business

Applications


WITH NO CODE…

And all of this


Development &

MobileA little bit of wizardry…


Development &

MobileLets Install it…

Visual Studio 2012 update 2


Development &

MobileLight Switch

Desktop app

Office integration

Not so touch friendly

Get the data in

Mobile App

Made to be use on the go

Touch friendly

Consuming the date


Development &

MobileWith LightSwitch HTML Client

http://msdn.microsoft.com/en-us/vstudio/htmlclient.aspx

http://msdn.microsoft.com/en-us/vstudio/htmlclient.aspx


DECIDE WHAT YOU WANT TO BUILD

After you have the tools…


Development &

MobileConference App

Data Base

• Speakers

• Presentations

• Attendees

• User Management

Server

• Protect the app by having roles and rights and custom filters based on them

Desktop App

• Administer easy, make reports, have an overview

HTML Client

• Access every ware, give access to speakers and attendees

Publish it to Azure

• Make it available


A LITTLE BIT MORE ABOUT IT


Development &

MobileLightSwitch

“LightSwitch applications use the modern .NET stack of technologies, and

wrap them in an abstraction layer optimized for data management and

maintenance. LightSwitch makes it possible to build data-centric applications

quickly, through visual means.”

“With LightSwitch, you won’t be writing the same code repeatedly to provide data

access functionality or the user interface needed around it. You can write no code,

a little code, or a significant amount – and you can rest assured that it will

be high-value code, rather than mere ‘plumbing’. “


Development &

MobileLanguages and tools

Languages

• C#

• VB

What we can use…

• Linq

• RIA Services

• Entity Framework

• Web API

• XAML

• HTML & Java Script


What about HTML Client

A companion to Silverlight application


Development &

MobileHTML Client - msdn


Development &

MobileContoso Moving in C#


Development &

Mobile

• Touch oriented

• Complementary to Silverlight App

• Consistent design experience

• Standards Based

• Predefined screens

• Custom UI with Js and CSS

• Debug with DOM Explorer

• Share Point Integration

• Have it in Office 365

• Running on Smart Phones and Tablets

• Have a Light and a Dark theme

HTML Client - Summary


Development &

Mobile

• Simple self-service applications

– Paper on a clipboard

• Field operations

– Contoso apps – Moving Apps

• Interactive Content Catalog & Sales

– Exploratory UI

3 different types


ARCHITECTURE


Development &

MobileOver All Architecture - msdn

http://msdn.microsoft.com/en-us/vstudio/gg491708



Development &

MobileOdata - http://www.odata.org/

OData is a a REST protocol based on existing internet standards including HTTP,

AtomPub, JSON, and hyper-media design patterns.

A main feature of REST APIs is the use of existing HTTP verbs against addressable

resources identified in the URI.

Conceptually, OData is a way of performing database-style CRUD using HTTP verbs

Create : POST

Read: GET

Update: PUT

Delete: DELETE

http://<your application url>/<Service name>.svc/<resource>


Development &

MobileLightSwitch as a Data Source

http://msdn.microsoft.com/en-us/library/vstudio/hh973174.aspx



Development &

MobileOdata - msdn


Development &

MobileDeployment - msdn




LETS BUILD THE APP

We know what we want and we know with what tools

http://www.careerattraction.com

http://www.careerattraction.com/


Development &

MobileCreate a new Project

Having 2 choices


Development &

MobileUpgrade your Project – If needed


Development &

MobileA new structure


Development &

MobileCreate Data Base


Development &

MobileCreate Custom DB


Development &

MobileCreate Custom DB


In the old style way

CREATE ADMINISTRATION SCREENS

http://www.careerattraction.com

http://www.careerattraction.com/


Development &

MobileAdministration


CREATE HTML CLIENT


Development &

MobileAdd a new client


Development &

MobileSet Client As Default

0 – 1 Silverlight Client&

0 – 1 Mobile Client


Development &

MobileAdd Screens

http://msdn.microsoft.com/library/jj674623.aspx

http://msdn.microsoft.com/library/jj674623.aspx


Development &

MobileAccess it every were


Development &

MobileAccess it from every device

about-google-android.blogspot.com

http://about-google-android.blogspot.com/2013/01/rumors-on-new-coming-expected-android.html


Development &

MobileAccess it every were

www.forbes.com

http://www.forbes.com/sites/robertwood/2013/05/22/apple-think-different-tax-different/


Development &

MobileCustomize screens

Data which will be bound Screen Designer

DB

Screens


Development &

MobileBuild navigation

Different modes to display a list

Already created a detail view of the presentation

Handle the tap event on a item


LETS SEE HOW IT WORKS

The Admin and the Client


Development &

Mobile

• The Client App/Admin App with the list and

the details

• Set starting page

• Computed properties

• Custom Controls

• Local Property to HTML Client

• The possibility to view, edit and delete data

out of the box

• Give roles and rights

What we’ve seen


Development &

MobileRender new UI

myapp.BrowsePresentations.RowTemplate_render = function (element, contentItem) {// Write code here.var itemTemplate = $('<div></div>');var title = $('<h3>' + contentItem.value.Title + '<h3>');var day = $('<h3>' + contentItem.value.Day.toFormat('W') + '</h3>');

var Time = $('<span>' + contentItem.value.StartTime.toFormat('H') + ':'+ contentItem.value.StartTime.toFormat('I') + "-" ++ contentItem.value.EndTime.toFormat('H') + ':'+ contentItem.value.EndTime.toFormat('I') + '</span>');

title.appendTo($(itemTemplate));day.appendTo($(itemTemplate));Time.appendTo($(itemTemplate));itemTemplate.appendTo($(element));

};

http://livingmachines.net/2009/04/even-more-javascript-extensions-dates/

http://livingmachines.net/2009/04/even-more-javascript-extensions-dates/


Development &

MobileGive access


Development &

MobileAccess Control Methods


CUSTOMIZE UI

Theme Roller


Development &

MobileThemeRoller – jQuery Mobile


Development &

Mobile

• Add Global.asax

Web API

protected void Application_Start(object sender, EventArgs e){

RouteTable.Routes.MapHttpRoute(name: "DefaultApi",routeTemplate:

"api/presentations/{controller}/{id}",defaults: new{

id = System.Web.Http.RouteParameter.Optional}

);}


Development &

MobileWEB API

// GET api/<controller>public IEnumerable<Presentation> Get(){

using (ServerApplicationContext context = ServerApplicationContext.CreateContext())

{var reportResult =

context.DataWorkspace.ApplicationData.Presentations.GetQuery();

return reportResult.Execute();}

}

• Add an WEB API Controller


AZURE DEPLOYMENT

DEMO - Windows Azure Portal


Development &

MobileCreate new website


Development &

MobileConfigure Data Base


Development &

MobileManage DB


Development &

MobileAdd IP


Development &

MobilePublish


Development &

MobileComplete Application


Development &

MobileChoose your subscription


Development &

MobileService type


Development &

MobileApplication URL


Development &

MobileAuth


Development &

MobileHTTPS


Development &

MobileData connections


Development &

MobilePublish


Development &

MobileSilverlight


Development &

MobileHTML


Development &

Mobile

• Business Apps with all components with LightSwitch

• Service endpoints/OData/WEB API

• HTML Client in LightSwitch/Native Client

• Azure deployment

• A custom App made with other technology which gets the

data from LightSwitch

• Many faces for your app

Options and possibilities


MAKE THE PERFECT CHOICE FOR YOUR APPLICATION


Development &

Mobile

“The easiest way to create modern line of business applications for the enterprise.”

Jay Schmelzer

LightSwitch


Q & A

What’s your opinion about it?


Development &

MobileResources

http://channel9.msdn.com/Events/TechEd/NorthAmerica/2012/DEV347 Jay Schmelzer

http://blogs.msdn.com/b/lightswitch/archive/2012/06/12/early-look-at-the-visual-studio-lightswitch-html-client-joe-binder-beth-massi.aspx

Beth Massi & Joe Binder

http://msdn.microsoft.com/en-US/library/jj733571.aspx Local Property

http://msdn.microsoft.com/en-US/library/jj733569.aspx Custom Control

http://msdn.microsoft.com/en-US/library/jj733570.aspx Control navigation

http://blogs.msdn.com/b/lightswitch/archive/2012/06/21/the-lightswitch-html-client-an-architectural-overview.aspx

HTML Client Architecture

http://msdn.microsoft.com/en-us/library/vstudio/hh973174.aspx Data Source

http://blogs.msdn.com/b/lightswitch/archive/2012/03/22/lightswitch-architecture-odata.aspx

OData

http://channel9.msdn.com/Events/TechEd/NorthAmerica/2012/DEV347

http://blogs.msdn.com/b/lightswitch/archive/2012/06/12/early-look-at-the-visual-studio-lightswitch-html-client-joe-binder-beth-massi.aspx

http://msdn.microsoft.com/en-US/library/jj733571.aspx



http://blogs.msdn.com/b/lightswitch/archive/2012/06/21/the-lightswitch-html-client-an-architectural-overview.aspx


http://blogs.msdn.com/b/lightswitch/archive/2012/03/22/lightswitch-architecture-odata.aspx

Technology

ITCamp 2013 - Melania Danciu - HTML5 apps with LightSwitch