Spring <form:form> self id & name generation

**varunmehta** · May 3rd, 2007, 02:26 PM

Hi all,

I'm using SWF for a registration process in the app. Now the hierarchy of the objects is

Code:

                     +--------------+
                     | Registration  |
                     +--------------+
                            |
+-------+     +----------+     +---------+     +----------+
| Login	|     | Baseline |     | Contact |     | Products |
+-------+     +----------+     +---------+     +----------+
 \-username    \-firstName      \-address1      \-bla1
 \-password    \-lastName       \-address2      \-bla2
               \-email          \-phone         \-bla3
               \etc             \-zip

Now that is the object organization, along with the member variables. I'm using spring form tags for the page rendering. Now my commandName is 'registration' across all the pages that I use. I have two pages.
- baseline.jsp
- demographics.jsp

The baseline.jsp is a mix of login and baseline and the demographics.jsp is the mix of contact and products so the jsp looks like

Code:

<form:form commandName="registration">
  <form:label path="login.login"> Username </form:label>
  <form:input path="login.login" /><br/>

  <form:label path="login.password"> Password </form:label>
  <form:input path="login.password" /><br/>

  <form:label path="baseline.firstName"> First Name</form:label>
  <form:input path="baseline.firstName" /><br/>

<form:form>

Now this jsp when rendered to HTML gives and output

Code:

<form id="registration" action="bla bla bla">
  <label for="login.login">Username</label>
  <input id="login.login" name="login.login" type="text" value=""/> <br/>
    
  <label for="login.password">Password</label>
  <input id="login.password" name="login.password" type="password" value=""/><br/>

  <label for="baseline.firstName">First Name</label>
  <input id="baseline.firstName" name="baseline.firstName" type="text" value=""/><br/>
</form>

Now for the bad news, the design team wants the id to be a simple one as a dot(.) notation in css is illegal!!

Soln 1: I take the commandName and get it to one object, so I can call everything directly with the path and things will work.
Problem: I have multiple objects, too much of refactoring.

Soln 2: Manually assign the id's
Problem: I don't like it!! too much of code clutter, let the system take care.

At the moment using Soln 2, does any one have a a better idea??

**klr8** · May 4th, 2007, 02:35 AM

Now for the bad news, the design team wants the id to be a simple one as a dot(.) notation in css is illegal!!

Can they show you a reference to the CSS spec that says that?

In HTML, the "id" attribute of the <input> element is defined as an "ID", so using dots is legal:
http://www.w3.org/TR/html401/types.html#type-name

And according to the CSS validator something like this is legal:
#login.password {color: green}

Which corresponds with what the spec says:
http://www.w3.org/TR/CSS1#id-as-selector

Erwin

**varunmehta** · May 4th, 2007, 11:15 AM

Hey thanks!!

Was not aware about it.

**varunmehta** · May 4th, 2007, 12:14 PM

Ok, some more research into the same.

My CSS says

HTML Code:

<style type="text/css">
    #login.login {
	border:1px solid red;
	color:red;
	font-weight:bold;
    }
</style>

And my rendered HTML says

HTML Code:

  <input type="text" value="Clone" id="login" class="login"> <br/>
  <input type="text" value="Clone2" id="login.login">

Now as per the documentation, the ID for an input box as "login.login" is valid, and that's true. But for CSS the same in terms of styling means an object with an ID "login" and using the class "login"

When u copy the example below, it renders the first textbox, but ignores the second one for CSS.

HTML Code:

<html>
<head>
<title> New Document </title>
	<style type="text/css">
		#login.login {
			border:1px solid red;
			color:red;
			font-weight:bold;
		}
	</style>
</head>
<body>

	<input type="text" value="Clone" id="login" class="login"> <br/>
	<input type="text" value="Clone2" id="login.login">

</body>
</html>

So back to the square one.

**varunmehta** · May 4th, 2007, 12:15 PM

And according to the CSS validator something like this is legal:
#login.password {color: green}

No wonder this is valid by the CSS validator

**klr8** · May 5th, 2007, 08:38 AM

Now as per the documentation, the ID for an input box as "login.login" is valid, and that's true. But for CSS the same in terms of styling means an object with an ID "login" and using the class "login"

Good point.

As another alternative, maybe there is a way to customize the Spring form tags to generate stuff like "login_password". You could then add a filter to your webapp that changes the parameter names back into "login.password". Still hacky though...

Erwin

**Sam Brannen** · May 6th, 2007, 05:39 PM

Hi Fellas,

The solution is really quite simple: just escape the period as follows...

HTML Code:

<html>
<head>
<title> New Document </title>
	<style type="text/css">
		#login\.login, #login.login {
			border:1px solid red;
			color:red;
			font-weight:bold;
		}
	</style>
</head>
<body>

	<input type="text" value="Clone" id="login" class="login"> <br/>
	<input type="text" value="Clone2" id="login.login">

</body>
</html>

I think you'll find that this solves your problem quite easily.

FYI: both input boxes are styled correctly in IE 7.0 and Firefox 2.0.

cheers,

Sam

p.s. assuming you're targeting CSS2, here's more information on the syntax for escape sequences: http://www.w3.org/TR/REC-CSS2/syndat...ped-characters

**klr8** · May 7th, 2007, 01:28 AM

Ah, finally somebody who knows what he's talking about!

Thanks for sharing that Sam!

Erwin

**Sam Brannen** · May 7th, 2007, 04:21 AM

Originally Posted by klr8

Ah, finally somebody who knows what he's talking about!

Thanks for sharing that Sam!

Erwin

You're very welcome.

@varunmehta, I have to ask: why are you trying to define styles based on the IDs of the input fields anyway? Normally, to make use of the benefits of CSS, you would want to define styles based on CSS classes and reuse them for all form fields. Is there any particular business use case that requires that you style by selecting the IDs in CSS instead of simply using the class attribute?

regards,

Sam

**varunmehta** · May 7th, 2007, 10:47 AM

Hey Sam,

Thanks a ton for the reply. Never thought it that way!! That's simple.

Is there any particular business use case that requires that you style by selecting the IDs in CSS instead of simply using the class attribute?

Well that's the way the design team has planned. There are no tables, so if the design team does not like the way the object has been placed on the screen and needs to change some attributes, for that specific one, they can add a special ID based style. They are initially formatted using the 'class' attribute, and use the ID for specific field which might misbehave. But from the dev point of view, we provide all of them with ID's so later they don't have to revisit us.

Thread: Spring <form:form> self id & name generation

Thread Tools

Display

Spring <form:form> self id & name generation

You can escape a period in an ID in CSS2

Posting Permissions