This page last changed on Jul 06, 2006 by cmiller.

Having written the model and the controller, it's now time to work on the view. Confluence views are written in Velocity.

Our velocity template needs to draw a form. It needs to populate that form with the UserInformation object we loaded during the doDefault method of the EditUserInfoAction, and submit it back to the action for saving.

I put the velocity file in src/etc/templates/extra/userinfo/edituserinfo.vm.

<html>
	<head>
		<title>Edit Contact Details</title>
    </head>

        <body>
            <div class="thickPadded">
                <form name="edituserinfo.form" method="POST" action="doedituserinfo.action">
                    <table class="greyBox" width="450" cellpadding="2" cellspacing="4">
                        #tag( TextField "label='Position'" "name='userInfo.position'" "size='50'" )
                        #tag( TextField "label='Office'" "name='userInfo.office'" "size='50'" )
                        #tag( TextField "label='Extension'" "name='userInfo.extension'" "size='4'" )

                        <tr><td colspan="2" >&nbsp;</td></tr>
                        #tag( TextField "label='Mobile Phone'" "name='userInfo.mobilePhone'" "size='20'" )
                        #tag( TextField "label='Other Phone'" "name='userInfo.otherPhone'" "size='20'" )
                        #tag( TextField "label='AOL Instant Messenger'" "name='userInfo.aimId'" "size='30'" )
                        #tag( TextField "label='MSN Messenger'" "name='userInfo.msnId'" "size='30'" )
                        #tag( TextField "label='Yahoo!'" "name='userInfo.yahooId'" "size='30'" )
                        #tag( TextField "label='Jabber'" "name='userInfo.jabberId'" "size='30'" )
                        #tag( TextField "label='ICQ'" "name='userInfo.icqId'" "size='10'" )
                        #tag( TextField "label='Skype'" "name='userInfo.skypeId'" "size='30'" )
    <tr>
        <td colspan="2" align="center">
            <br/>
            #tag( Submit "name='confirm'" "value='update.name'" "theme='notable'" )
            #tag( Submit "name='cancel'" "value='cancel.name'" "theme='notable'" )
        </td>
    </tr>
</table>
</form>
</body>
</html>

Here I'm taking advantage of WebWork Velocity tags to draw the form elements. The velocity tags take care of making the form elements part of the surrounding table, formatting them, filling them with their associated data, and if necessarily associating them with validation errors.

Note that we've called each form userInfo.propertyName. This means that when we submit the form, XWork will call getUserInfo().setPropertyName(value) for each property, thus populating our UserInformation bean before it is saved in the execute() method.

Note also that this HTML is lacking anything to define the Confluence look and feel. SiteMesh will take care of filling in the surrounding detail.

Document generated by Confluence on May 01, 2007 19:27