CourseSites New User Profile pages

Powered by SpringMVC 2.5

Goals

• Modernize the code-base from SpringMVC 2.0 to SpringMVC 2.5 with the end goal of SpringMVC 3.0 in the future

• More engaging User experiences drive adoption (91 countries, 6000+ institutions )

Spring MVC 2.5key concepts

• The importance of annotations – @Controller (no more inheriting from

SimpleFormController, MultiActionController on 2.0 version)

– @ModelAttribute– @SessionAttribute

General Architecture (Controller)

• @Controller• @RequestMapping(value="/profile.form")• @SessionAttributes("spring25UserVO")• public class ProfileForm {• ……• ……• }

General Architecture …(1)

• @RequestMapping(method = RequestMethod.GET)

• public String setupForm(HttpServletRequest request, HttpServletResponse response, Model model) {

• …….• }

General Architecture….(2)

• @RequestMapping(method = RequestMethod.POST)

• public String processSubmit(HttpServletRequest request, @ModelAttribute("spring25UserVO") Spring25UserVO spring25UserVO,

• BindingResult result, SessionStatus status, Model model) {

• ….• }

Profile

Profile page

Modelin particular wiring the Gender

• public class Spring25UserVO {– private UserVO userVO;

• …….• }

Model…(1)

• public class UserVO {– private User user;

• ………..• }

Model…(3)• public class User {• …….

• /**• * Returns the gender of this <code>User</code> object.• * <p>• * Requires AttributePermission with name "user.personalinfo", actions "get".• * • * @return a gender value as defined in {@link User.Gender}• * @see User.Gender• */• public User.Gender getGender()• {• if ( _checkPerms )• {• SecurityUtil.checkPermission( _getPersonalInfo );• }

• return (User.Gender) _bbAttributes.getBbEnum( UserDef.GENDER );• }• ……• }

Profile Controller

• @InitBinder• public void initDataBinder(WebDataBinder

dataBinder)• {• dataBinder.registerCustomEditor(Gender.class,

new GenderEditor());•

dataBinder.registerCustomEditor(EducationLevel.class, new EducationEditor());

• }

Custom Editor• public class GenderEditor extends PropertyEditorSupport {

– @Override– public String getAsText() {

• // TODO Auto-generated method stub• Gender value = (Gender) getValue();• return value.toFieldName();

– }

– @Override– public void setAsText(String text) throws IllegalArgumentException {

• // TODO Auto-generated method stub• //super.setAsText(text);• if (text.equalsIgnoreCase(Gender.FEMALE.toFieldName())) {

– setValue(Gender.FEMALE);

• }• else if (text.equalsIgnoreCase(Gender.MALE.toFieldName())) {

– setValue(Gender.MALE);

• }• else {

– setValue(Gender.UNKNOWN);

• }

– }

• }

Profile View/JSP

• <form:form id="profileForm" name="NewUserProfileForm" modelAttribute="spring25UserVO" method="POST">

• ……• </form:form>

Profile View/JSP• <spring:message code="bb.userProfile.gender" var="gender">

</spring:message>• <bbNG:dataElement label="${gender}" isRequired="false">• <!-- the "path" element (gender) points to the userVO.user.gender

property • so as long as the userVO.user.gender reflects the value from the • DB (User.gender) such as "MALE"...this will be automatically• "selected" as well -->

• <form:select path="userVO.user.gender" items="${genders}"/>

• </bbNG:dataElement>

Social PagejQuery Dialog

Social PagejQuery dialog

jQuery Dialog• jQuery("#dialog").dialog({• modal: true,• bgiframe: true,• width: 500,• height: 200,• autoOpen: false• });

• jQuery("#confirmDeleteImage").dialog({• modal: true,• bgiframe: true,• autoOpen: false });

jQuery Dialog …(cont)• jQuery(".myavatar").click(function (e) {• jQuery("#dialog").dialog({• buttons : {• "Update" : function() {• window.location.href = "imageUpload.form";• },• "Delete" : function() {• jQuery(this).dialog("close");• jQuery('#confirmDeleteImage').dialog('option', 'buttons', { • "No": function() { jQuery(this).dialog("close"); },• "Yes": function() { window.location.href = "imageDelete.form"; } • });• jQuery('#confirmDeleteImage').dialog('open');• • }, • "Cancel" : function() {• jQuery(this).dialog("close");• }• }• });

• jQuery("#dialog").dialog("open");• return false;• });

Q&A

• Questions?! Comments?!