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

• LightSwitch

3. Build

• Server

• Desktop/Web

• Mobile

4. Deployment

• Azure/IIS

No code at all and have access from every were

commons.wikimedia.org

MOBILE APPS FACTS

Global and Europe

Development &

MobileICT Facts and Figures

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/

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 -

• Data Base

• Server

• Administration

• Mobile App

LIGHTSWITCH

Tools we need…

Development &

MobileLightSwitch

important

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

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

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

LETS BUILD THE APP

We know what we want and we know with what tools

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

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

Development &

MobileAccess it every were

Development &

MobileAccess it from every device

about-google-android.blogspot.com

Development &

MobileAccess it every were

www.forbes.com

Development &

MobileCustomize screens

Data which will be bound Screen Designer

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/

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

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

ITCamp 2013 - Melania Danciu - HTML5 apps with LightSwitch

Technology

Atentia informatic danciu amalia

ITCamp - Novidades do windows server 2012

ITCamp 2012 - Dan Nicola - Scrum v2

Microsoft Visual Studio LightSwitch Business Application ...data.lib.hutech.edu.vn/mucluc/61e114ec74150a666145... · especially Visual Studio LightSwitch and Extensibility forums

Danciu Numismatic, integrala 2015

DevDays 2011- Lightswitch basics: Building your first Lightswitch Application

ITCamp 2016 Keynote

ITCamp Exchange Online - Guia Laboratorio

ITCamp 2012 - Tim Huckaby - Keynote

Lightswitch Media Pitch Deck

Introducing Visual Studio LightSwitch

Junindar - Will Code With LightSwitch

Switch on the LightSwitch

Visual Studio LightSwitch 2015 - link.springer.com978-1-4842-0766-6/1.pdf · Visual Studio LightSwitch 2015 Second Edition Tim Leung. Visual Studio LightSwitch 2015 ... Chapter 1:

ITCAMP Lync Online-Onpremise Comunidad Office 365

LightSwitch で OData

LightSwitch™ Luciferase Assay Reagent

Building Visual Studio LightSwitch Application

XBB Lightswitch, ver 4. Manual - shop.textalk.se€¦ · XBB Lightswitch, ver 4. Manual För att få en korrekt funktion behöver XBB Lightswitch detektera en konstant ström på

ITCamp 2012 - Alex Gyoshev - Kendo-UI