Thoughts About HTML5

by jmorris 24. August 2010 14:15

A colleague sent me a link to an HTML5 slide show and I must say that if and when the standard is completed it will offer an amazing cornucopia of web technologies in a single package.  It’s interesting that it’s even called “HTML” at all; it’s really the combination of markup (HTML), presentation and formatting (CSS) and behavior (Javascript API’s) that comprise HTML5. It also strikes me that HTML 4.01 (notice the space between the “L” and the “4”? HTML5 interestingly enough, has no space) was Recommended  by W3C in 1999 and HTML5 specification was started in 2004 and still has not been completed! That aside, with the recent exclusion of flash from Apple IPhone and IPad, interest and demand have taken off for HTML5.

Javascript API’s

HMTL5 offers several new JavaScript API’s that allow developers to do things that were not easily possible on  the browser before: Web Sockets for client server interaction via TCP, Web Storage for storing data on the client browser, a Web SQL Database (yes a local database that is accessed via Javascript directly, so much for SOC!), an Application Cache, Web Workers to provide asynchrony with a language (JS) that does not support multithreading,  a Notification API for broadcasting messages to the client, and a GeoLocation API so that your location can always be known! Additionally there is a new Selectors API and JS Drag and Drop API.

From the offerings above, I can see HTML5 being the killer app for a number of existing web technologies: javascript libraries such as JQuery and Scriptaculus, FLASH/FLEX/AIR/Silverlight as well as methodologies such as Ajax and even proprietary offerings such as LightStreamer.

HTML

HTML5 also extends the extends the existing HTML 4.01 tags with new tags for the semantic web, link relations, Microdata, ARIA attributes (for disability accessibility),  form field types (range, input validation, etc), audio and video (Apple’s big beef), and Canvas for 2D and 3D SVG/WebGL graphics.

CSS

The new CSS extensions include typography enhancements, visuals (columns, textwrapping, rounded corners, etc.) and transitions, animations and transformations (dynamically manipulating DOM elements kinda like some of the JQuery UI features).

Summary

All in all this is an amazing and revolutionary toolkit for developing Web applications and will likely lead the way in what and how we develop in the future. A couple of the features (namely Web SQL and Web Sockets) make ne cringe slightly, in that we know that they will be abused, however the potential here is enormous. it’s also interesting to note, that none of the new features are truly revolutionary by themselves, it’s the standardization which is revolutionary. 

References

Tags: , , , ,

HTML5

Using Datatables.net JQuery Plug-in with WCF Services

by jmorris 17. May 2010 13:42

There are several JQuery plug-ins that provide the basic functionality of an html grid: paging, sorting, etc. In essence these plug-ins provide a consolidated display of the data and typically means of which to interact with the data (update, insert, delete, etc). I recently had the opportunity to work with the DataTables.net grid and have been very impressed.

The following post describes the steps I used to make the DataTables grid work in an ASP.NET Webforms environment using a WCF Service as an endpoint. I’ll also go over some of the pitfalls I ran into which required a bit of ‘tweaking’ to get things working smoothly. One cool thing was that for every roadblock, a workaround was quickly discovered. This is huge when investing any time or resources on any third party plug-in or control.

First up, if you are not aware of what the DataTables is, it’s a JQuery Plug-in that written by Allan Jardine. According to the DataTables website:

“DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table. “

It offers a plethora of features including pagination, filtering, sorting, auto loading of data via Ajax, Fully theme-able by CSS, etc. The documentation on the DataTables website is thorough and the quality excellent. There are also forums…good stuff. Additionally DataTables is licensed dually under the GPL v2 License and the BSD license for those who inquire…

Here is an example of Datatables with built in JQuery UI theme support:

 
The WCF Service
Datatables allows you to either have client-side paging, sorting and searching, which is the default, or you can do it on the server. Doing it on the client is the simplest and easiest way to get up and running with Datatables, however you will quickly find that it leads to larger page sizes and longer initial load times as all of the data must be piped from the server before Datatables is ready.  Performing the actions on the server makes for much a much snappier and scalable UI, but it adds complexity.

In order to use a WCF service with DataTables, you have to both honor the signature that DataTables expects and the data must be returned in a format that DataTables expects. Fortunately this is relatively easy to do; you simple need to a) map the HTTP variables from the GET request and b) generate a JSON string matches a specific format.

The HTTP variables that DataTables will post are as follows:



Note that the websiteId and categoryId are custom variables and that for each column specified, additional variables will be posted for the following fields with a consecutive numerical postfix: bSearchable_0, bSearchable_1, bSearchable_2, etc.

For my example the following WCF service method was used:



Note that I only specified a subset of the parameters in the WCF method that Datatables posts with its GET request:
 

Too be honest, I do not know why Datatables sends so many (looks like one variable per option per column for most), but from the WCF service method perspective they are optional. Also, note that Datatables uses some form of Hungarian notation to qualify the variables type. While a bit confusing at first, it did help a bit when debugging. The variables that we did specify in the WCF service method signature will be used for sorting, filtering, paging, etc.

Datatables expects to receive a JSON object with a two dimensional array called “aData” from this service. Here is an example of the server output that Datatables will receive:
 


Where “d” is the wrapper type appended by WCF and from the Datatables website:

 

Basically, note that the service must correctly compute and return the “iTotalRecords”, “iTotalDisplayRecords” and the data in “aaData”. Also, the length of each data returned must match the DataTables jQuery definition provided on the web page where the data will be displayed.

Here is the complete code listing for the internals of the WCF service method:


 

Note that depending your architecture, this code may look considerable different. However the steps are same:

  1. Query the datastore based upon the passed in parameters
    1. Calculated paging values
    2. Column to search by
    3. Column to sort by
  2. Create a JSON return result matching the JSON structure defined above.

Another thing to note here is that Datatables does not send column names; it sends the ordinal of the column with respect to the table. In order to sort by a column or filter by a column, you need to resolve the ordinal to a column name of your datastore:

 

The GetSortFieldFormOrder(int order) returns a string column name based upon the ordinal of the column so that the datastore (in this case via a sproc call) can sort the data by the correct column.

The Convert(object record) method makes an array from the values of properties of an object: each becomes an “aaData” record that is returned and used by Datatables on the client.

Just an architecture note here: in my opinion there is too much “busy” work going on here at the service level. Ideally this will be refactored into your entities so that the behavior is encapsulated outside of your data “delivery”.

The Client Code
The client JQuery code for Datatables can be very simple or rather complex depending upon the formatting and features your situation requires. Below you will see the code that I used and I will explain the major initialization required for using Datatables with a WCF service.

 

Lines 4-6 I get a reference to the DOM element I will load into using a typical JQuery selector. Let me explain the relevant settings:

A.    I am using the Datatables built in support for JQuery UI Themes
B.    I am setting the “bServerSide” flag to true so that Datatables will use AJAX to get the data source
C.    The URL of the AJAX method to call for loading data
D.    Since I want to set some custom variables to post to my service method and I want to override the default HTTP POST method that Datatables uses for invoking the AJAX method, I am overriding the “fnServerData” callback with a custom implementation.
E.    Datatables uses POST be default, I overridden the AJAX method to use a GET
F.    The results from the server are then passed into the fnCallBack callback and Datatables can now render the results.

The target for the selector is a div element on an ASP.NET UserControl:

 

   kick it on DotNetKicks.com

Tags: , , ,

Rendering Views using ASP.NET Webforms and Model View Presenter (MVP) Pattern and AJAX

by jmorris 1. May 2009 21:49

ASP.NET MVC introduces the notion of partial views, which either allow specific Actions to be called on a Controller and the resulting view outputted as HTML or allow Model Data to be passed from the current view to another, child view.

Calling Actions on a Controller and returning “sub” Views is incredible useful in situations were Ajax type behavior is required, since the resulting output is simply raw HTML. The HTML can then be appended to a DOM element via JQuery, some other JavaScript library or simply with straight JavaScript.

Unfortunately if you are still working on Web Forms projects or you have no need or desire to drink the kool-aid of MVC, you are pretty much out of luck for similar functionality built into Web Forms. However, it is fairly easy to implement this sort of behavior within the context of a Web Forms environment and then use a Ajax to render pure HTML from these “partial views.”

The code for doing this is surprising simple and was adapted from a Scott Guthrie posts a few years back:


In this case I allow a Dictionary containing the name value pairs of the properties on the View that will be loaded to be passed in as well. The key must match the name of a Property on the View and if it does the Property is set with the value of the key. This is useful in cases were you would like a parent View to pass data to a child View for initialization situations, etc.

I also have a static collection of Views defined which map a View’s name to a path in my applications root directory. RenderView looks up its path and loads the control before setting the Views data. In my case I load this from a table via a Data Access Object (DAO) in the Global.asax on Application_Start:



The PageUserControlDAO loads the View definitions from the database once when the application is started or the App Pool is restarted/refreshed.

Rendering the View involves calling the RenderView method and passing in the appropriate View name and a Dictionary containing the data to into the view:



In this case I used Page_Load to render the View into a panel (div) which isn’t too exciting. The really useful aspect however is when you combine JQuery and Web Services to render the View on demand from the client.

Rendering Views from the Client Using JQuery and Web Services

The Web Service:



The JQuery code to load the view and attach it to the DOM:


In the JavaScript above, renderView takes three parameters: the name of the View to render, the data to pass to the View, and the DOM container to load the view into. The $.ajax(..) method is a JQuery method that specifies the WebService to use, the method to call (RenderView) and the content type to specify in the request header.

When the method is called like so from the client:

 

renderView('ImageView', { 'CurrentPageElementId': 100 }, $view);


The WebService method is invoked, which renders the view and returns pure HTML that is then appended to the DOM element $view (a simple div or span).

Tags: , , , , , ,

Jeff Morris

Tag cloud

Month List

Page List