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

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 -
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

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

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
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/

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 &
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

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

ITCamp 2013 - Melania Danciu - HTML5 apps with LightSwitch

More Related Content

What's hot (20)

Similar to ITCamp 2013 - Melania Danciu - HTML5 apps with LightSwitch (20)

More from ITCamp (20)

Recently uploaded (20)

ITCamp 2013 - Melania Danciu - HTML5 apps with LightSwitch