Saturday, December 1, 2012

IndexedDB.js updated


      IndexedDB.js is a JavaScript library file, which provides api to easily connect and do transactions for data storage and retrieval on in-browser database system (IndexedDB). Its older version is used in my previous post - PetStore, the file been updated to support many if not all features which IndexedDB supports. Its api offers the following operations:
  1. Opens DB connection (creates new if not exists)
  2. Add a data record 
  3. Bulk data insertion
  4. Updates a record
  5. Deletes a record
  6. Get single record (by key)
  7. Get all records
  8. Get records count
  9. Clear/delete all records
       A sample html page along with this file is provided for download, which showcases many of the above features (except, bulk insertion). This html uses Knockout.js, download it to check its working, and how to use this api (don't try it from filesystem, run it from web server).
sample html in action

       From screenshot, you can see grid supports inline edit, delete and insertion, and they can be performed simultaneously. The bottom portion shows the status or result of all operations.
For supporting browsers check my previous blog post.

Download
Download the Zip file or check the demo.


Tuesday, November 27, 2012

PetStore web App using Knockout and IndexedDB


         PetStore is a web application (SPA? you decide), which shows how we can store large amounts of data at clientside (browser) and also works in offline. Presently it doesn't relies on web server to process any logic or storage. It is self-sufficient and works pure clientside (except for first time serve, and when offline & web data are deleted).

Why IndexedDB?
         The older "Web Database api" (aka WebSQL) became obsolete and replaced by indexedDB.  IndexedDB stores large amounts of data in JSON format at clientside. For data storage limits check the site references below (it could be unlimited). You can also find my old post on - Web Database api.
         Browsers supporting IndexedDB provided Async api to communicate with it. Because of lack of support, Sync communication approach may be omitted in future from W3C specification.

Knockoutjs
       Knockoutjs is a javascript MV* framework, provides two-way data bindig using MVVM pattern. In this application, the temporary data and state is maintained by knockout until data gets flushed into DB, during that time you can do all CRUD operations.

Features of PetStore:

  • CRUD operations using knockout.
  • uses browser built-in validations.
  • stores data in IndexedDB.
  • works in offline.
      The PetStore contains only 3 screens: Add/Edit, Unsaved, Saved Records. Check the screenshots below for each screen. With this application we can do: 
  • Add or Edit Pet details.
  • Check the unsaved records to decide for edit or delete and 
  • Finally save all records into IndexedDB and show them (even after revisit and offline).

Initial screen - Add a Pet
Unsaved Records

Edit and update Pet details

Saved records from IndexedDB


         Download the Zip file (check link below) and try running the application for yourself. For web server i have used NodeJS (httpster), but you can use any of your preferred web server. This Zip file contains the code files, wherein the functionality specific code is segregated into different files (like IndexedDB.js, ko_VM.js), which makes easy to understand and debug code. Out of them, its worth mentioning IndexedDB.js file, it provides the api to communicate with browser's storage - IndexedDB. (following standards: it works with latest version of browsers. Check the supported versions below). To better make use of this js file, i also provided another html "IndexedDB_Test.html", so that you can understand its working. The limitations of this api is: Delete and Update operations are not implemented, but you can: OpenDB, Read and Write.


Supported browsers: 
Tested on Chrome 23 and Firefox 16.02. IE10 may also support.

References:
https://developer.mozilla.org/en-US/docs/IndexedDB/Using_IndexedDB
http://learn.knockoutjs.com/

Download Link:

Updates:
IndexedDB.js file has been updated, check the new post.

Sunday, May 13, 2012

HTML5 Server-sent-Events (using Asp.Net)

       This post may help Asp.Net developers to understand and use Server-sent-Events in their Web Applications. The sample code (provided as download below) demonstrates a simple communication between client(browser) and server, it follows these steps:
  • Client Initiates the process by opening a connection to server.
  • Server pings Client with current Time for every 2second interval for 5 times.
  • After 5 times, Client closes the connection with Server.
       Its useful in transmitting real-time updates as streams of data directly to connected web browsers. Check Server-sent-Events API (events, properties, methods) at MDN site, also check for versions of browsers supporting it. The sample code i provided is just an Asp.Net version of Server-sent-Events in PHP available at MDN.

Above is the screenshot for sample in action (from firefox browser).
   
      You may require to uncomment this line in code:
    //Response.Headers.Add("Content-Type", "text/event-stream\n\n");
    while working against IIS7 and higher versions of web-server.


Note: use other than IE browsers with HTML5 support.

References:
  1.     https://developer.mozilla.org/en/Server-sent_events/Using_server-sent_events
  2.     http://www.w3.org/TR/2011/WD-eventsource-20110208/
Download link:
          Download the code files from here.
   

Wednesday, February 29, 2012

File Uploading using AJAX on HTML5 browsers


        I did a sample on File upload operation using AJAX with the help of features provided by the latest HTML5 browsers. Prior to Html5, we used workarounds like, Hidden IFrame with target attribute on Form tag to simulate the Async file upload.
I started by refering some sites, firstly, Mozilla developer network. Did a basic sample, but when I tested it in Opera, it didn't work. When i checked the js error, it seems Opera doesn't support the  FormData() JavaScript object. I searched for a fix and got FormData.js library, when i tried with it, I got no success. I dug up into the code and found a way to allow this sample work in Opera. The FormData.js code has getAsBinary() object, which is deprecated as per MDN, so i have used FileReader() object to fix it. And because of this fix, progress bar control not works in Opera.
        As per MDN, FileReader() is less performant, since it is mainly used in file manipulation at client side.

Screenshot before file uploading
Screenshot after file selection

Screenshot after file upload success



       For this sample i have used Asp.Net at server side. Depending on the server settings, big files may not be accepted, try with small files. Find the code for download below.


Features: 
       Hidden Fileupload control, textbox with default text & clickable, selected file remove option,
 progressbar control, javascript code fix for Opera, serverside delay simulation.

       Tested with latest browsers: FireFox, Chrome, Opera.(not tested in Safari, may not work in IE9).

References:

  1. https://developer.mozilla.org/en/Using_files_from_web_applications
  2. http://hacks.mozilla.org/2010/05/formdata-interface-coming-to-firefox/
  3. https://github.com/francois2metz/html5-formdata 
  4. http://stackoverflow.com/questions/210643/in-javascript-can-i-make-a-click-event-fire-programmatically-for-a-file-input


Download link:
       Zip file hosted in Opera. download from here.