Announcement Announcement Module
Collapse
No announcement yet.
Spring <form:form> self id & name generation Page Title Module
Move Remove Collapse
X
Conversation Detail Module
Collapse
  • Filter
  • Time
  • Show
Clear All
new posts

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

    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??
    Last edited by varunmehta; May 3rd, 2007, 03:27 PM. Reason: added the .jsp to avoid confusion

  • #2
    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
    Last edited by klr8; May 4th, 2007, 03:40 AM.

    Comment


    • #3
      Hey thanks!!

      Was not aware about it.

      Comment


      • #4
        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.

        Comment


        • #5
          And according to the CSS validator something like this is legal:
          #login.password {color: green}
          No wonder this is valid by the CSS validator

          Comment


          • #6
            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

            Comment


            • #7
              You can escape a period in an ID in CSS2

              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

              Comment


              • #8
                Ah, finally somebody who knows what he's talking about!
                Thanks for sharing that Sam!

                Erwin
                Last edited by klr8; May 7th, 2007, 02:35 AM.

                Comment


                • #9
                  Originally posted by klr8 View Post
                  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

                  Comment


                  • #10
                    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.
                    Last edited by varunmehta; May 7th, 2007, 02:21 PM.

                    Comment


                    • #11
                      Originally posted by varunmehta View Post
                      ... 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. But from the dev point of view, we provide all of them with ID's so later they don't have to revisit us.
                      Ahhhh, OK. It's perhaps a bit of overkill, but if it saves you time down the road, I guess I can live with that answer.

                      cheers,

                      Sam

                      Comment

                      Working...
                      X