Pieter-Jan Drouillon Developing a HTML5 Client with LightSwitch
Developing a HTML5 Client With Lightswitch
Jan 24, 2015
Link to video recording on youtube.com: http://www.youtube.com/watch?v=cwsEXt9gb1w
Writing a HTML5 Client from scratch is a tedious job. Anything that can lighten the burden is more than welcome.
After seeing a presentation of Lightswitch, a Visual Studio plug-in, I was surprised how easy it was to create and customize a HTML5 Client. The next logical question that popped in my mind was: 'Can I use this for my drupal sites?'
This presentation describes how I got started using Lightswitch for creating a HTML5 Client for my personal blog. As it turns out, there are a few options to connect to your drupal data, each with their advantages and disadvantages.
Next I cover how to customize the User Interface. As the Client is HTML5 and includes jQuery Mobile, a wide range of mobile widgets is available.
During the presentation, there will be demos showing how helpful Lightswitch is when creating an HTML5 Client.
A basic understanding of Javascript and jQuery is convenient to follow along, but not required.
Writing a HTML5 Client from scratch is a tedious job. Anything that can lighten the burden is more than welcome.
After seeing a presentation of Lightswitch, a Visual Studio plug-in, I was surprised how easy it was to create and customize a HTML5 Client. The next logical question that popped in my mind was: 'Can I use this for my drupal sites?'
This presentation describes how I got started using Lightswitch for creating a HTML5 Client for my personal blog. As it turns out, there are a few options to connect to your drupal data, each with their advantages and disadvantages.
Next I cover how to customize the User Interface. As the Client is HTML5 and includes jQuery Mobile, a wide range of mobile widgets is available.
During the presentation, there will be demos showing how helpful Lightswitch is when creating an HTML5 Client.
A basic understanding of Javascript and jQuery is convenient to follow along, but not required.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Pieter-Jan Drouillon
Developing a HTML5 Client with LightSwitch
Overview
Introduction
Visual Studio & LightSwitch
What about Drupal?
Conclusion
Introduction
Saw a LightSwitch presentation
Fast development of HTML5 Client
Search & Filter
Cool controls out of the box
VS & LightSwitch
VS: Microsoft IDE
LightSwitch
VS Extension
Silverlight, HTML5 or Sharepoint App
DataSource: SQL, Azure, OData
jQuery
What is this talk about?
Is lightswitch suitable for building a HTML5 Client for Drupal website?
Story of my quest
What data can LightSwitch consume?
Once upon a time...
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
OData Server module
Based on OData Producer Library for PHP
Exposes entities, properties and fields
Downside: sandbox project
read-only
DEMO - Settings
OData settings
Exposing entities
Properties
Foreign keys
What does it look like?
Blog Client
Add datasource
Define relationships if necessary
Generate Screens
Customize if necessary
DEMO - Basic Screen
Add Datasource
Add Overview Screen
Add Detail Screen
What’s up with that body ?
See the HTML code of body
Defined as text
VS suggests text controls
Custom controls to the rescue!
element
surrounding component
contentItem
the current item with all properties and values
DEMO - Custom Control
DEMO - Search
Add search for title
DEMO - Edit Data
Add Edit screen
OData: conclusion
Pro
Quite easy
Relationships already defined
Con
Limited to read operations
No filter/sort
Alternative: MySQL connector
OData limited (for now)
What if you need insert/edit?
MySQL Connector
Get access to MySQL database
DEMO - Basic Screens
Add MySQL Datasource
Define relationship - if possible :(
Add Overview Screen
Add Detail Screen
DEMO - Editing Content
Add/Edit screen
Command button
Edit some content
DEMO - Search
Search for title
“clean filter” button
MySQL: Conclusion
Pro
Not completely from scratch
Con
Define relationships
Inconsistent datatypes
Wrong datatypes
Indepth knowledge of tables required
Conclusion
LightSwitch & Drupal
It’s not impossible
OData Server
Direct DB access no-go
Resources
OData website
Visual Studio LightSwitch
Building a HTML Client in 5 minutes
LightSwitch “How do I” videos
Related Documents
