touch draggable for iPad/iPhone

Some time ago I had to implement a good draggable plugin for mobile devices (iPad and iPhone), the current app was using the jquery ui draggable and it was good (very good) in the browser. But sadly it was not that good on mobile, it was choppy and not really nice.

We had layer to simulate the mouse events on the devices that does not support it, and that made the jquery ui plugin to work properly. Well at least as good as it could be on mobile devices.
But somehow (maybe because in my interior I had a designer/UX soul) I feel it was not good enough, the performance was not that great and that was very sad. jquery ui draggable uses top/left properties to move the elements around, and since those properties are not hardware accelerated, it does not look good on the iOS devices.

But css transforms are hardware accelerated so I took the decision (about one year ago) to make this very tiny widget implementing the same interface of the jquery ui one (well only the one I needed at least) and the result is this widget, which seems to perform better than the current version of the draggable one from jquery ui. I'm pretty sure the next version is going to fix this for mobile/tablet devices, but just in case you feel adventurous, like to take risks or just like to play with new code, you can use this one and implement the rest of the interface that is missing here.

Source code:
https://github.com/royriojas/touch-draggable

Demo: (make sure you visit it on an iPad/Android)
In the case of android it seems the experiment at the bottom is not working not sure why yet
http://dl.dropbox.com/u/16252882/royws/td/demo/touchdraggable.html



Bye!

Yet Another Validation Plugin… Again!

Well this is the first widget wrote by me from scratch that will include in my End of studies project Astrea. This is a simply widget but a really useful one. 
Validate forms is a very common task, and is usually performed either writing custom functions for each field like is suggested in this page http://www.w3schools.com/js/js_form_validation.asp., which could be considered "the old school way". Another approach is to use a plugin that involves the writing of few lines of javascript to perform the validation, wiring each field with the type of validation that will perform and with the error message that is going to be used. Like in the case of this jQuery Validation Plugin http://jquery.bassistance.de/validate/demo/marketo/. and Another plugins try to improve the way validation is done, like this one http://www.devx.com/webdev/Article/31695
While they do a great job validating the fields, which is what you expect from a validation library in the first place :), it is not always customizable enough. There are situations when you may want the validators look differently or be in a completely different position in the form layout. Other times, you don't want to use the form to send the data directly maybe you just want to extract the value fields as a JSON Object and send that object to the server using Ajax, etc.
Well This is Yet Another Validation Plugin. It is not perfect but include a bunch of features that I found useful in all the time I'm doing web development.

 

Features

1. It is completely customizable with CSS, and since is manually located in the form layout, it could appears in any position. And the error messages can contain whatever you need from plain text to html.
   
2. It is unobstructive, and somehow aspect oriented. The behavior of the validators is set using data-* properties
   
3. It is possible to add new validators and they will work fine (In the case of dynamic forms)
   
4. It is simply to use, and I tend to believe that can be easily extended to add support to new type of validators.
   
5. It is not restricted to validate one single field. Several fields can be validated at once.
   
6. It is possible to validate just a subset of the validators, or even just validate one. I plan to support validate outside the main container
   
7. It is not only restricted to validate actual forms, any container (a div i.e.) can be used as the container for the validation.
   
8. It support asynchronous validation, so actually it is easy to perform Ajax validation with this approach
   
9. Each field is also validated on blur, change, while the user is interacting with the field.
   
10. can validate any type of fields, radios, checkboxes, etc.
    
11. Out of the box this plugin supports the following validation types: required, compare, range, regex and custom. Using the regex and custom validators it is possible to perform almost any kind of validation.

Example of Validator Widget

Go ahead to the result tab to see in action and use the html tab to see the required html, javascript and css
You can find the code here in the Astrea repo. under the examples folder.
To know how to use it take a look to the source code in the example above, I will include a brief documentation later.
The widget is implemented using the widget factory from jQuery UI. So I guess this is actually good news if you're already including this library.
The widget is still work in progress, so there are probably bugs and other stuff. But for a first release I guess it is good enough.
If you have developed in ASP.NET you can find this validator plugin somehow similar to the ASP.NET validator component. That is intentional. I had to work on a PHP project after 4 years of been developing with ASP.NET and missed the validators, and like a lot of us, well I just like to reinvent the wheel and still this can be used for my End of Studies Project. (Yes I know that I ended the University 4 years ago, But I guess it is better late than never)

 

know Issues.

• To support async validation, the custom validators receive a callback function as part of the arguments. It's up to the programmer to call it with the right validation value. An example of async validation will be included later.
  
• If more than one validator is assigned to the same field, if the first fail and the second succeed the failed class gets removed so the visual hint to denote that a field has failed the validation is lost. This will be fixed soon.

 

Short FAQ

Licensing?

While this validator widget has been made for my own consumption, I guess that everybody can use it freely and improve it if is required. The source code is on Github under the Astrea project (Astrea is the name of the Library that I'm looking to finish as my End Of Studies Project). The Project will be released under the LGPL and MIT licenses. So Feel free to use it.

Can't find the documentation?

That's my fault, I haven't enough time to write a proper documentation for this widget yet. I promise I will include one soon. For now you can see how it works live in the code example above.

Can't find the unit tests?

My fault again, this project is just starting and I will love to include unit tests for all the widgets that I will include as part of this Library. So Unit testing using QUnit will be added in the future.

Why not use the HTML5 validators?

Well actually I believe is a good idea to use HTML5 Validators, but the problem with this, is that is not supported by all browsers at this point. I will keep a close eye to how the HTML5 validators evolve and will update this library accordingly.

Validators seems to not been working on Browser XX.XX?

This first release has only been tested in later versions of Mozilla Firefox and Chrome by now. I haven't had time to test it thoroughly in all browsers. So it is possible some issues could appear.

Yahoo Developer Network – All APIs page

Today while was trying to make a custom control to convert currencies, I faced an ugly problem: The free soap web service that I was planning to use was simply down. A big problem considering the time I had to made that control.

After some goggling I found some sites that perform this kind of job. Some of them were using originally the same web service I was trying to use and because they were facing the same problem as me they decide to change it. They were using somehow the YAHOO finance quotes service to retrieve the exchange rate between two currencies, but they were making the calls directly at the server side (trying to do it using Ajax raises the Cross Site Scripting problem).

Then I was curious about to know if somehow the YAHOO finance service could had some kind of REST API that could help me to obtain this value directly. But I was not lucky and couldn’t find that…

But I found something even better the Yahoo Developer Network - All APIs page and there I found a lot of interesting things… really a lot. But the most impressive think I found was the YQL.

The YQL stands for Yahoo! Query Language. This is a really impressive concept. It basically allows to make calls to almost any web resource (html pages, dynamic pages and any other resource) and query this result using css or xpath to retrieve the parts of the content that are relevant for us in JSON or XML formats. And it supports make Cross Site Scripting calls too!

The potential that I found in this tool is really amazing you can retrieve almost any relevant information from many sites and use it in the way you want.

YAHOO has some good resources. Really good resources!

Testing Windows 7

I just finished the installation of all the programs that I usually use every day on my computer with the RC1 of the Windows 7. And I must admit it was relatively easy to get it working fine. I had some troubles but they were quickly solved.

Some of the aspects about this new Windows version are really nice.

1. The installation itself was easy. I remember I tried to install Vista RC1 a long time ago, It was just terrible, a lot of components of my computer just won’t work ever on that because the drivers for them simply didn’t exist. This time instead almost of my hardware components were ready to use, just after the installation. The Wireless USB receiver, the USB web cam and my two audio cards were the exception, but I didn’t have any trouble trying to install the vista version of the driver that came with the USB receiver, or with the driver version of Vista for my two audio Cards (Soundblaster Audigy 2 Platinum, and the default integrated audio that came with my Intel DP35DP Motherboard). I found the Driver version for the Intel Integrated Audio on the Intel website, and even when they claim that the driver was beta also it is doing really good right now.
2. The Aspect of the Desktop. I don’t know if Microsoft copy the new desktop style from others Operative Systems, I will only say that it looks good, I seems a lot like Vista, but with less invasive warning windows (yes they’re still there). Well I must admit I have not used Vista too much, I really didn’t use Vista on a regular basis like to make a fair comparison. But comparing Windows 7 with the well loved Windows XP you really see some good changes in the UI. I’m tempted to believe that this instance of Windows 7 is running faster than my old good XP.

I will post more comments about Windows 7 later… for today it is time to stop!

Bye.

Export to CSV in Unicode format so Excel can read Japanese characters in the right way

To make this history short, here is the problem I had. The Client wants to export the data from a report (basically a table) in csv format. This data could contain Unicode characters (basically Japanese characters). This file was intended to be used to move the data to other programs like excel or others.

Well to solve that requirement i made this method, that basically receive the data ready to be put in the csv format and save it to the response.

protected void ExportToCSV(object sender, EventArgs e)
 {
    if (String.IsNullOrEmpty(CSVData.Value)) return;

    var strFileNameexport = FileNameHidden.Value.Replace(" ", "_");
    Response.Clear();
    Response.ClearContent();
    Response.Buffer = true;
    Response.ContentType = "text/comma-separated-values";

    Response.ContentEncoding = Encoding.UTF8;
    Response.Charset = Encoding.UTF8.HeaderName;
    var data = CSVData.Value;    

    Response.AddHeader("Content-Disposition", string.Format("attachment;Filename={0}.csv", strFileNameexport));

    Response.Write(data);
    Response.End();
}

As you can see as far to this point everything seemed to be working fine. But suddenly when we try to open a exported file that contains Japanese characters, Excel was not able to display those characters. It replace those characters with garbage

So to Solve the Problem we...

• found that excel expects the csv file to be in "utf-16le" (UCS-2 Little Endian) (weird, really weird).
• when you put the data in this format, the "," character is not longer a valid column separator (even more weird, weird!!!!) so you need to use other character like "\t" (I know, I know... if you use \t as a separator the mime type should tab separated value files, but Excel seems to don't complain about it.
• It is also recomendable that you enclose the data for each cell using quotes, this way the values inside won't be interpreted wrong if a separator character is present there.
• then realize that we were receiving the data in utf-8 format so we first need to convert the bytes from utf-8 to utf-16
• And the most important note: YOU NEED TO PUT THE MARKER BYTES SO THE PROGRAMS COULD RECOGNIZE THE ORDER OF THE BYTES IN THE FILE TO KNOW IF THEY ARE IN LITTLE ENDIAN OR IN BIG ENDIAN you can found a lot of information about it in the internet. but no one really tells you that this is necessary to make the file recognizeable by Excel as a csv file.

private static byte[] GetUCSStringFromData(string value)
{
    if (String.IsNullOrEmpty(value)) return new byte[] { };

    value = value.Replace("\",\"", "\"\t\"");

    var utf8Encoding = Encoding.UTF8;
    var utfBytes = utf8Encoding.GetBytes(value);

    var ucs2Encoding = Encoding.GetEncoding("utf-16le");
    var ucs2Bytes = Encoding.Convert(utf8Encoding, ucs2Encoding, utfBytes);

    var bytesFinal = new List {0xff, 0xfe};
    foreach (var b in ucs2Bytes)
    {
        bytesFinal.Add(b);
    }

    return bytesFinal.ToArray(); // ucs2Encoding.GetString(ucs2Bytes);

}

protected void ExportToCSVForExcel(object sender, EventArgs e)
{
    if (String.IsNullOrEmpty(CSVData.Value)) return;

    var strFileNameexport = FileNameHidden.Value.Replace(" ", "_");
    Response.Clear();
    Response.ClearContent();
    Response.Buffer = true;
    Response.ContentType = "text/comma-separated-values";

    //Those lines makes it possible to work with UCS2
    Response.ContentEncoding = Encoding.GetEncoding("utf-16le");
    Response.Charset = Response.ContentEncoding.HeaderName;

    var data = GetUCSStringFromData(CSVData.Value);

    Response.AddHeader("Content-Disposition", string.Format("attachment;Filename={0}.csv", strFileNameexport));
    
    Response.BinaryWrite(data);
    Response.End();
} 

So never forget it!

Intellisense in NHibernate Mappings in Visual Studio 2008

I found this good post in StackOverflow, I put it here simply to have it always present.

To enable it, try copying the following files into: C:\Program Files\Microsoft Visual Studio 9.0\Common7\Packages\schemas\xml, or into C:\Program Files\Microsoft Visual Studio 9.0\Xml\Schemas.

I'm not sure which is the right place and I put them into both of mine but it works for me.

1. nhibernate-configuration.xsd
2. nhibernate-generic.xsd (I could not find this file in the last version of the code of NHibernate
3. nhibernate-mapping.xsd

You can get the files from the source of nHibernate

Taken from here

TableTypeString property of Dialect Class is never used in NHibernate

I was wondering why TableTypeString property of Dialect Class is never used inside the NHibernate library, the property is there, but when I try to find usages of this property, no usages were found.

I needed to use this property because I was writing a special Dialect for MySql to be able to generate InnoDb Tables and to make their charset UTF-8 by default in despite of the default charset of the Database.

I found an example of this in this post (Teamwork, MySQL and UTF-8), the code there is for Hibernate in Java, so instead of use the getTableTypeString getter in NHibernate there is a TableTypeString property.

So, I subclass the MySqlDialect to make my own Mysql5InnoDbUtf8Dialect, but it didn’t works. Looking at the code I found that the Table class in Hibernate differs from the NHibernate Class in the SqlCreateString method. At the end of that method we found in the Java class

if ( comment != null ) { 
	buf.append( dialect.getTableComment( comment ) ); 
}  
return buf.append( dialect.getTableTypeString() ).toString(); 

And at the end of the same method in the NHibernate class we found

if(string.IsNullOrEmpty(comment)==false)
{
	buf.Append(dialect.GetTableComment(comment));
}

return buf.ToString();

So as you can see if the TableTypeString property have to be used somewhere, this is the place, and currently is not used(If anyone knows why please, please let me know!)

so I make the change in the code, in the Table Class at the end of the SqlCreateString method (see code below)

if (string.IsNullOrEmpty(comment) == false)
{
	buf.Append(dialect.GetTableComment(comment));
}
			
return buf.Append(dialect.TableTypeString).ToString();
//return buf.ToString();

and recompile again Nhibernate. After that my new Dialect was working very Nice!

I'm not so sure if that is the best way to acomplish what I was needing to do (create tables with UTF-8 charset by default). Sure, if you have control of the database you can create the database with UTF-8 charset by deafult, but I really want to found a way to do it by code and not in the MySql Administrator.

Well let's work again...