Developing a HTML5 Client With Lightswitch
-
Upload
pieter-jan-drouillon -
Category
Technology
-
view
536 -
download
2
description
Transcript of Developing a HTML5 Client With Lightswitch
![Page 1: Developing a HTML5 Client With Lightswitch](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c2df744a795997108b4680/html5/thumbnails/1.jpg)
Pieter-Jan Drouillon
Developing a HTML5 Client with LightSwitch
![Page 2: Developing a HTML5 Client With Lightswitch](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c2df744a795997108b4680/html5/thumbnails/2.jpg)
Overview
Introduction
Visual Studio & LightSwitch
What about Drupal?
Conclusion
![Page 3: Developing a HTML5 Client With Lightswitch](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c2df744a795997108b4680/html5/thumbnails/3.jpg)
Introduction
Saw a LightSwitch presentation
Fast development of HTML5 Client
Search & Filter
Cool controls out of the box
![Page 4: Developing a HTML5 Client With Lightswitch](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c2df744a795997108b4680/html5/thumbnails/4.jpg)
VS & LightSwitch
VS: Microsoft IDE
LightSwitch
VS Extension
Silverlight, HTML5 or Sharepoint App
DataSource: SQL, Azure, OData
jQuery
![Page 5: Developing a HTML5 Client With Lightswitch](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c2df744a795997108b4680/html5/thumbnails/5.jpg)
What is this talk about?
Is lightswitch suitable for building a HTML5 Client for Drupal website?
Story of my quest
![Page 6: Developing a HTML5 Client With Lightswitch](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c2df744a795997108b4680/html5/thumbnails/6.jpg)
What data can LightSwitch consume?
Once upon a time...
![Page 7: Developing a HTML5 Client With Lightswitch](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c2df744a795997108b4680/html5/thumbnails/7.jpg)
Alternative 1: OData
Vendor independent - cool!
“OData is a standardized protocol for creating and consuming data APIs”
“providing a uniform way to expose, structure, query and manipulate data”
http://www.odata.org
![Page 8: Developing a HTML5 Client With Lightswitch](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c2df744a795997108b4680/html5/thumbnails/8.jpg)
OData Server module
Based on OData Producer Library for PHP
Exposes entities, properties and fields
Downside: sandbox project
read-only
![Page 9: Developing a HTML5 Client With Lightswitch](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c2df744a795997108b4680/html5/thumbnails/9.jpg)
DEMO - Settings
OData settings
Exposing entities
Properties
Foreign keys
What does it look like?
![Page 10: Developing a HTML5 Client With Lightswitch](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c2df744a795997108b4680/html5/thumbnails/10.jpg)
Blog Client
Add datasource
Define relationships if necessary
Generate Screens
Customize if necessary
![Page 11: Developing a HTML5 Client With Lightswitch](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c2df744a795997108b4680/html5/thumbnails/11.jpg)
DEMO - Basic Screen
Add Datasource
Add Overview Screen
Add Detail Screen
![Page 12: Developing a HTML5 Client With Lightswitch](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c2df744a795997108b4680/html5/thumbnails/12.jpg)
What’s up with that body ?
See the HTML code of body
Defined as text
VS suggests text controls
![Page 13: Developing a HTML5 Client With Lightswitch](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c2df744a795997108b4680/html5/thumbnails/13.jpg)
Custom controls to the rescue!
element
surrounding component
contentItem
the current item with all properties and values
![Page 14: Developing a HTML5 Client With Lightswitch](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c2df744a795997108b4680/html5/thumbnails/14.jpg)
DEMO - Custom Control
![Page 15: Developing a HTML5 Client With Lightswitch](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c2df744a795997108b4680/html5/thumbnails/15.jpg)
DEMO - Search
Add search for title
![Page 16: Developing a HTML5 Client With Lightswitch](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c2df744a795997108b4680/html5/thumbnails/16.jpg)
DEMO - Edit Data
Add Edit screen
![Page 17: Developing a HTML5 Client With Lightswitch](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c2df744a795997108b4680/html5/thumbnails/17.jpg)
OData: conclusion
Pro
Quite easy
Relationships already defined
Con
Limited to read operations
No filter/sort
![Page 18: Developing a HTML5 Client With Lightswitch](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c2df744a795997108b4680/html5/thumbnails/18.jpg)
Alternative: MySQL connector
OData limited (for now)
What if you need insert/edit?
MySQL Connector
Get access to MySQL database
![Page 19: Developing a HTML5 Client With Lightswitch](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c2df744a795997108b4680/html5/thumbnails/19.jpg)
DEMO - Basic Screens
Add MySQL Datasource
Define relationship - if possible :(
Add Overview Screen
Add Detail Screen
![Page 20: Developing a HTML5 Client With Lightswitch](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c2df744a795997108b4680/html5/thumbnails/20.jpg)
DEMO - Editing Content
Add/Edit screen
Command button
Edit some content
![Page 21: Developing a HTML5 Client With Lightswitch](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c2df744a795997108b4680/html5/thumbnails/21.jpg)
DEMO - Search
Search for title
“clean filter” button
![Page 22: Developing a HTML5 Client With Lightswitch](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c2df744a795997108b4680/html5/thumbnails/22.jpg)
MySQL: Conclusion
Pro
Not completely from scratch
Con
Define relationships
Inconsistent datatypes
Wrong datatypes
Indepth knowledge of tables required
![Page 23: Developing a HTML5 Client With Lightswitch](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c2df744a795997108b4680/html5/thumbnails/23.jpg)
Conclusion
LightSwitch & Drupal
It’s not impossible
OData Server
Direct DB access no-go
![Page 24: Developing a HTML5 Client With Lightswitch](https://reader034.fdocuments.us/reader034/viewer/2022042714/54c2df744a795997108b4680/html5/thumbnails/24.jpg)
Resources
OData website
Visual Studio LightSwitch
Building a HTML Client in 5 minutes
LightSwitch “How do I” videos