Tuesday, April 1, 2014

Saving handsontable data

What prompted me to use handsontable

I was working on replacing an old Excel web control with a more user friendly and needed a JavaScript library that provided the functionality that I needed. After investigating several libraries I decided that handsontable provided me the best solution.

I thank Marcin Warpechowski, for creating this wonderful library. The community around this is very helpful and this library is rapidly evolving into an even better library!

What my solution involved

My project that I was implementing handsontable was a classic example of Web Forms with PostBack and code behind access of form elements directly.

How to save the data

I did not try to create a Web Form custom element, instead I just took advantage of what was already implemented. I started out with creating everything I needed to render a blank handsontable to my page where I was replacing this old control. You can get that from the handsontable demo pages.
I then added the JSON2 library, from Douglas Crockford's Github repository, to my project and included it in the page that the table is on.

Lastly, I used jQuery to bind an event on the form submission that ran a simple verification that there were no invalid cells in my table. If my table was completely valid, then the event would harvest the data from handsontable and with JSON2 serialize that data into a valid JSON string and save it into a hidden field that my code-behind would pick up. Once it is on the server you can do what you need to do to this.

How to retrieve the data

With Web Forms and the page I was working with, I needed to be able to repopulate the table with data that had traveled across my PostBack event. So just as I did with my form submission event, I wrote a specialized page load event that populated an object for my handsontable to use during it's creation.

My event just listens for the ready event of the page and then looks for that hidden field I created to save the data. It pulls the data out of the hidden field and uses JSON2 to deserialize the object out of the string and that result is passed to my handsontable create table method.


var hst = (function () {
  var $container = $("#hst");

  $container.handsontable({
    startRows: 8,
    startCols: 6,
    rowHeaders: true,
    colHeaders: true,
    minSpareRows: 1,
    contextMenu: true
  });

  hst = $container.data('handsontable');

  var $dataLocker = $("#dataLocker").val();

  if ($dataLocker.length > 0) {
    var data = JSON.parse($dataLocker);

    hst.loadData(data);
  }
  return hst;
})();

// Enable a click handler for the button to save data and submit the form
$("#saveContent").click(function (e) {
  // Save the table data before sending the form
  $("#dataLocker").val(JSON.stringify(hst.getData()));
  $("body > form").submit();

});




using System;
using System.Collections.Generic;
using System.Web.UI.HtmlControls;
using Newtonsoft.Json;

namespace HandsonDemo
{
    public partial class _Default : System.Web.UI.Page
    {
        protected HtmlInputHidden dataLocker;
        private List<List<int?>> Data = new List<List<int?>>
        {
            new List<int?> { 1, 2, 3, 4, 5, 6 },
            new List<int?> { 7, 8, 9, 10, 11, 12 },
            new List<int?> { 13, 14, 15, 16, 17, 18 },
            new List<int?> { 19, 20, 21, 22, 23, 24 },
        };

        protected void Page_Load(object sender, EventArgs e)
        {
            if (IsPostBack)
            {
                // if we are posting data to the server deserialize it so that we can manipulate it
                Data = JsonConvert.DeserializeObject<List<List<int?>>>(dataLocker.Value);
            }

            // store the data object to be rendered to the handsontable
            dataLocker.Value = JsonConvert.SerializeObject(Data);
        }
    }

}

Monday, March 31, 2014

CSS Score

(Original Article at http://sgdev-blog.blogspot.sg/2014/01/css-score.html

We all know that when many conflict css properties can be applied for one web element, it is by specification that the more specific properties will be applied. However, specific is an abstract word. Hence, it is better that we know about css score, or how browser choose which properties to override. 

Browser categorize css to 4 categories with the specificity from high to low as: 

1/ Style Attribute:
  •  


  • 2/ ID: #some_id{ color: red;} 

    3/ Class, pseudo class, attribute: .some_class {color:green;} 

    4/ Elements: li {color:black;} 

    From W3C recommendation, the result of this calculation takes the form of four comma-separated values, a,b,c,d,1 where the values in column “a” are the most important and those in column “d” are least important. A selector’s specificity is calculated as follows: 

    To calculate a, count 1 if the declaration is from a style attribute rather than a rule with a selector (an inline style), 0 otherwise. 
    To calculate b, count the number of ID attributes in the selector. 
    To calculate c, count the number of other attributes and pseudo-classes in the selector. 
    To calculate d, count the number of element names and pseudo-elements in the selector. 
    Here is one example using this rule: 

    body#home div#warning p.message --> 0, 2, 1, 3 

    Please notice the comma ',' in the css score, it is there to remind us that the score b, c, d can be equal or bigger than 10. Still, the rule to compare is left to right.

    Checking Javascript errors remotely

    Think of a scenario where your website has gone LIVE. Now there occurs a JavaScript error and because of that the record cannot be saved in database and this happens only with internet explorer 7. The client is now complaining.  You checked this at your end to analyse but it seems to be working at your end.

    For scenarios like above, i found a great tool which can help us to monitor JavaScript errors. Yes, but for this you need to add a script in the page where you want to monitor. Check below link

    https://qbaka.com

    Tuesday, January 28, 2014

    Real-Time Distributed Software Development Using Eclipse

    Hi,

    I recently came across a cool plugin that enables  Real-Time Distributed Software Development Using Eclipse.

    http://www.saros-project.org

    What is Saros? What is it not?

    Saros is an Open Source Eclipse plugin for distributed collaborative software development.

    • Currently, it works only with and within Eclipse. Saros users can use all Eclipse functionality as usual.

    Saros is a real-time collaborative editor for eclipse projects.

    • All collaborators have an identical copy of Eclipse projects.
    • Two or more users can jointly edit files in the project.
    • Each user has and modifies his or her own copy of the file locally.
    • Saros keeps these copies in sync by transmitting each change to all of the other collaborators.

    Saros supports up to 5 participants at once.

    • Saros is designed to at least work with two participants in a session - as inherent for pair programming.
    • But it supports up to 5 distributed parties in a session.
    • The initiator of a session, the host, has a privileged role.

      Saros is not screen sharing, desktop sharing, or application sharing.

      • That means for instance that it does not support joint interactive testing.

      Saros can be used in various scenarios:

      Joint review
       
      One participant ("driver") reviews the contents of one or more files together with other participants ("observers"). Saros is set to always show the observers the same region of text (program code or whatever else) that the driver sees ("follow mode"). At any time, any participant (driver as well as observers) can highlight text with the mouse for all the others to see. Also, any participant can become driver at any time.
       
      Introducing beginners
       
      Much like before, except that explaining rather than reviewing is the goal. Each of the beginners (staying in the observer role) can individually peek at other regions of the file or even other files without influencing the flow of the session for the others. To do that, s/he will temporarily leave follow mode.
       
      Distributed Party Programming
       
      Two or more participants work together in a loosely coupled fashion. They work independently much of the time, but can call one of the others to help whenever the need arises, for possibly only a very short time or for a longer episode. In this mode, distributed work can even be more powerful than working in the same room, as nobody needs to leave a seat to help multiple others in the course of an hour. Just think how this can speed up the coordination work just before release time after a code freeze!
       
      Distributed Pair Programming 
       
      Is a particular form of Distributed Party Programming in which two people develop code or text in continuous close collaboration, discussing the approach and combining the best of their ideas.

    Tuesday, January 14, 2014

    Friday, November 1, 2013

    Upgraded to OSX Mavericks on my Mac

    Hi,

    I upgraded my Mac with OSX Mavericks.  Apple claims that they have made improvements on speed, multiple windows and yeah, they seem to have succeeded in that.

    Upgradation process went smooth and it was quick and steady.

    Cheers,

    Ujjwal Soni
    Share |