O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
Developing a HTML5
Client with LightSwitch
Pieter-Jan Drouillon
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, O...
What is this talk about?
Is lightswitch suitable for building a
HTML5 Client for Drupal website?
Story of my quest
Once upon a time...
What data can LightSwitch consume?
Alternative 1: OData
Vendor independent - cool!
“OData is a standardized protocol for
creating and consuming data APIs”
“p...
OData Server module
Based on OData Producer Library for
PHP
Exposes entities, properties and fields
Downside: sandbox proje...
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 dat...
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 k...
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
Próximos SlideShares
Carregando em…5
×

Developing a HTML5 Client With Lightswitch

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.

  • Entre para ver os comentários

  • Seja a primeira pessoa a gostar disto

Developing a HTML5 Client With Lightswitch

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

×