Thursday, February 3, 2011

ColdMVC: Number Tag

I've playing around with mobile web apps lately. ColdMVC has been a big help in getting them done quickly and "in the cloud".

I've been looking for a house since the market is so good right now and one thing I noticed when searching for houses online is the when you type in a price range only the keypad shows up on my phone. No letters. Just numbers. It's really nice. I viewed the source when I got back to my laptop and found out they were doing it with <input type="number" >. I decided to hack a ColdMVC tag together to hanlde this.

Here is how you call the tag...

<c:number name="miles" value="#service.miles()#">


Here is my hacked in logic...

<cfparam name="attributes.class" default="input"/>
<cfparam name="attributes.value" default=""/>
<cfif thisTag.executionMode eq "end">
<cfoutput>
<cfsavecontent variable="attributes.field">
<input type="number" name="#attributes.name#" title="#attributes.name#" value="#attributes.value#" class="#attributes.class#"/>
</cfsavecontent>
</cfoutput>

<cfset thisTag.generatedContent = coldmvc.form.field(argumentCollection=attributes) />
</cfif>


The above logic doesn't supporting binding, but it works to use. It would be cool if this tag was managed my ColdMVC HTMLHelper.cfc then I would have to worry about the attributes.

Wednesday, February 2, 2011

ColdMVC: Binding

I really like the binding option in the form tag of ColdMVC. It takes an object from the param scope, prefixes all the elements within it, with model's name (ex. user.first_name), and sets the value from the object. It's very handy. Here is an example of what it currently does:

<c:form controller="user" action="save" bind="user">
<c:hidden name="id"/>

<c:input name="first_name"/>
<c:input name="last_name"/>

<c:buttons>
<c:submit label="save"/>
</c:buttons>

</c:form>

If you wanted to bind the form to 2 or more objects it would be cool if you could use a bind tag and group a set of elements within a form.

<c:form controller="student" action="save">

<c:bind key="user">
<c:hidden name="id"/>

<c:input name="first_name"/>
<c:input name="last_name"/>
</c:bind>

<c:bind key="student">

<c:input name="student_number"/>

</c:bind>

<c:buttons>
<c:submit label="save"/>
</c:buttons>

</c:form>

Or even better on the tag itself. (I think this available already, but I am not sure).

<c:form controller="student" action="save">

<c:hidden name="id" bind="user"/>

<c:input name="first_name" bind="user"/>
<c:input name="last_name" bind="user"/>
<c:input name="student_number" bind="student"/>

<c:buttons>
<c:submit label="save"/>
</c:buttons>

</c:form>