Previous | Next
WireHose Developers Guide

Building the UI

SignupPage is a typical WebObjects component, with the exception that the message prompt and field and button labels will be localizable rather than hard-coded into the HTML or Java code. You can resolve localized strings with a simple @string.key or self.@string.key.

Note: Other useful bindings provided by WHComponent include @userCanEdit.keyPath and @userCanView.keyPath, which return true or false by querying the application helper (and its delegate, if set) as to whether or not the object identified by keyPath in the current context can be edited, viewed or deleted by the current user. The keyPath is any keypath which is currently valid, so you can bind things like @userCanEdit.helper.editingObject to a WOConditional.

Note: WebObjects Builder on Windows will not allow bindings which start with an "@", such as @string.key, so WireHose also supports self.@string.key. There are no performance penalties for using WHComponent's self.@string.key or self.@userCanView.keyPath bindings over @string.key or @userCanView.keyPath.

  1. Add this line to
    public String message;
  2. Open SignupPage.wo in WebObjects Builder.
  3. Select the inner WOSwitchComponent and delete it.
  4. Inside the remaining WOSwitchComponent, add an H1 heading.
  5. Inside the heading, add a WOString and set its value to message. This will be the prompt for the signup page.

  6. Change SignupPage's constructor so it reads like this:
    public SignupPage(WOContext context) {
        message = helper().stringInComponent(this, "signup");
  7. Add this line to SignupPage.strings:
    signup = "Sign up for a new account"; 
  8. Underneath the heading in SignupPage.wo, add a WOForm. Set its action to createAccount, and set multipleSubmit to true.
  9. Delete the text inside the form and add a new table. Make it 4 rows, 2 columns, 0 border, 6 spacing, 0 padding. Uncheck both "First row cells are header cells (<TH>)" and "Second row is wrapped in a WORepetition". Click OK.

  10. Add three WOString components to the left column in the first three rows of the table. Set the value for the first to @string.login. Set the value for the second to @string.password and the third to @string.passwordAgain
  11. Add these lines to SignupPage.strings:
    login = "make up a user name"; 
    password = "make up a password"; 
    passwordAgain = "type password again"; 
    signupButton = "Sign Up"; 
    wantCookie = "save my login and password in a cookie";
  12. Add these lines to
    public String login, password, passwordAgain;
    public boolean shouldSaveCookie = false;
  13. Select the right column of the first row of the table, and add a WOTextField and set its value to login
  14. In the second row, add a WOTextField and set its value to password. Choose the Static Inspector on the Inspector pallete, and click Password Field (invisible typing)
  15.  In the third row, add a WOTextField and set its value to passwordAgain. Make this a password field also.
  16. In the last row, add a WOCheckBox and set its checked to shouldSaveCookie. Add a WOString and set its value to @string.wantCookie
  17. Select inside the form, after the table, and choose Custom WebObject from the WebObjects menu. For "WebObjects class to use:" type WHImageButton, and click OK.
  18. Set the image button's action to createAccount, set its filename to helper.@itemInPage.signupButton, set its framework to helper.@itemInPage.framework and set its label to @string.signupButton

    Note: Since WireHose components can be used in any number of layouts, which may have special graphical needs for buttons or links, WireHose includes the WHImageButton component. WHImageButton will render itself as a hypertext link, a linked image, a graphical submit button, or a plain submit button, depending on whether it's currently in a form or not, and if its filename binding resolves to a string or not. Bindings such as filename and framework are typically resolved through the layout dictionary rather than being bound directly.

Previous | Next