Input Mask

Dec 21, 2008 at 1:49 PM
Edited Dec 21, 2008 at 1:51 PM
I've been experimenting with the code, I like the fluent interface.

I've been using jQuery on much of my applications.  One plugin I use alot of is the input mask (from Bush).

I'd like to see something like

<%= form.Input(c => c.DOB).Mask("99/99/9999")%>

I also have a custom jQuery plugin to do money masks

I can attach these on my own, ie.:

$(function(){
   $("#DOB").mask("99/99/9999");
   $("#Amount").moneyMask();
});

I do see you reference javascript functions, but in this case, I would need this attached on the jquery ready to make it work

but what wonder is that I'd like to be able to extend the xforms using perhaps, extension methods to create my own actions without effecting your core library?
Or would it be better to just build this into the core xform library ?

What do you think about this?

Great library - I'm intriqued, and really trying to wrap my head around how you built this with the Action/Expressions, etc... any chance you could also point me to a good place to learn more about how you did this?

I'd like to see a uml diagram of your classes and how they are all related  :)

again, great stuff - thanks for sharing it


Dec 21, 2008 at 2:10 PM
I see why my mask fails on reload:

It's returning, ie. 1/19/1970 on the date time, whereas I'm expecting the date format of .ToString("MM/dd/yyyy")

That being said.... another item is perhaps a 'formatter' ?
Coordinator
Dec 23, 2008 at 9:48 AM
Hi Steve, glad you like it :)

If you override the DefaultFormatter, you can change the way a datetime renders by overriding the InputDate(IInput input) method. Date rendering is something that needs to be looked at, as there's lots of ways to output a date.

I like the idea of a Mask extension, perhaps you would like to contribute and add it to the framework?

The MVC XForms core functionality is in the Mvc.XForms namespace. This has to match the w3c XForms spec. I created the Mvc.XForms.UI namespace for extensions to the framework that might be commonly used; currently there is only the grid control. This would be the place for the mask.

The best way to implement this would probably be to wrap a rebuild action (which fires when the xform is rebuilt). Something like (untested):

public static InputSettings Mask(this InputSettings settings, string mask) {
    var script = string.Format("function (ev) { $(ev.target).mask('{0}'); }", mask);
    settings.Action(XForms.Rebuild, script);
    return settings;
}

I'm open to suggestions how to make the framework and javascript API more extensible. This is one of the goals of the project and I think there is still a way to go to achieve this. Another key thing is I would like to keep the script as minimal as possible and not implement things that have been done before. Where we can use jQuery, use jQuery. So use the mask plugin.
Coordinator
Dec 23, 2008 at 11:43 AM
With regard to how I wrote it, first of all I got into LINQ expressions and lambdas:

http://blog.wekeroad.com/2007/07/02/linq-how-to-use-linq-to-query-just-about-anything/
http://www.singingeels.com/Articles/Self_Sorting_GridView_with_LINQ_Expression_Trees.aspx
http://ayende.com/Blog/archive/2007/03/17/Implementing-Linq-for-NHibernate-A-How-To-Guide--Part.aspx

I've been interested in XForms for a long time and noticed that LINQ expressions looked a lot like XPath expressions, which XForms uses for its bindings. Previously I've written a similar framework for .net 1.1 that used weakly-typed "magic strings" for the bindings. I took the old code and completely re-wrote it. Then I refactored several times, including introducing the fluent interface idea that came from using StructureMap and Fluent-NHbernate:

http://martinfowler.com/dslwip/MethodChaining.html
http://structuremap.sourceforge.net/Default.htm
http://code.google.com/p/fluent-nhibernate/

The main motivation behind the project was the frustration that many UI frameworks do not fit the way I like to write UI code:

  • Web standards
  • Separation of HTML & javascript
  • Lightweight
  • Simple API
  • KISS and DRY
Also, I wanted to bring the powerful semantics of XForms to .Net without the need for browser plugins.

To really get a handle on the framework as a whole, you probably need a good understanding of XForms, LINQ expressions, ASP.Net MVC and javascript/jquery.
Dec 23, 2008 at 12:04 PM
Very nice.

I was able to create the extension.  What a perfect way to extend your API !

I did not realize your 'XForms.XFormsEvent.Rebuild' would inject the script on ready.  That is great.

I appreciate you taking the time to explain this!

Just to get this simple example working, here is the extension:

namespace Mvc.XForms.UI
{
    public static class InputExtensions
    {
        public static InputSettings Mask(this InputSettings settings, string mask)
        {
            var script = "function (ev) {";
            script += string.Format("$(ev.target).mask('{0}');", mask);
            script += "}";
            settings.Action(XForms.XFormsEvent.Rebuild, script);
            return settings;
        }
    }
}

And usage:
<%= form.Input(c => c.DOB).Mask("99/99/9999")%>

I have other small plugin examples - ie. money mask, etc... and I saw you mention a datetime picker there is a good jquery datetime picker as well.

Thanks again for pointing me in the right direction - next up for me is to try out the formatter  :)





Dec 23, 2008 at 12:55 PM
I blogged about this here

I haven't contributed before, but would love to - feel free to email me with feedback.  This project fits in very well with what I've been building.

So far, most my helper have been to help attach ajax form capability to any html form - keeping it 'unobtrusive' to the form itself by injecting the javascript, etc...

Also I've been building a set of jQuery enabled html helper controls - but I like the xForm setup better   :)

So anyway I can help with this project, let me know!

Thanks for the links above, so far I've dug into your code and the MvcContrib grid control - I like the use of the expressions and have attempted to use the same setup for controls I build.  Your framework will make it a better fit I believe as it's well organized and pluggable

Dec 23, 2008 at 6:26 PM
Well...it isn't working as I thought it might.

It fails to work correctly if more than on element has a mask applied to it.


Dec 23, 2008 at 6:35 PM
I spoke too soon  :)  Sorry about that.

What happens is if you apply a 'hint' while their is a 'mask' - it conflicts.

I had a hint and mask on the same element.

On a side note, I added in a form id  - since my ajax form code uses id to attach to the forms, I had to explicitly define an id