Drupalcamp Leuven 2013

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.

Transcript

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