SpringMVC powering SaaS-based Learning Management System for a Fortune 500 company

1. CourseSites New User Profile
pages
Powered by SpringMVC 2.5

2. 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 )

3. Spring MVC 2.5
key concepts
• The importance of annotations
– @Controller (no more inheriting from
SimpleFormController, MultiActionController on
2.0 version)
– @ModelAttribute
– @SessionAttribute

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

5. General Architecture …(1)
• @RequestMapping(method =
RequestMethod.GET)
• public String setupForm(HttpServletRequest
request, HttpServletResponse response,
Model model) {
• …….
• }

6. General Architecture….(2)
• @RequestMapping(method =
RequestMethod.POST)
• public String processSubmit(HttpServletRequest
request, @ModelAttribute("spring25UserVO")
Spring25UserVO spring25UserVO,
• BindingResult result, SessionStatus status, Model
model) {
• ….
• }

7. Profile

8. Profile page

9. Model
in particular  wiring the Gender
• public class Spring25UserVO {
– private UserVO userVO;
• …….
• }

10. Model…(1)
• public class UserVO {
– private User user;
• ………..
• }

11. 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 );
• }
• ……
• }

12. Profile Controller
• @InitBinder
• public void initDataBinder(WebDataBinder
dataBinder)
• {
• dataBinder.registerCustomEditor(Gender.class,
new GenderEditor());
•
dataBinder.registerCustomEditor(EducationLevel.class,
new EducationEditor());
• }

13. 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);
• }
– }
• }

14. Profile View/JSP
• <form:form id="profileForm"
name="NewUserProfileForm"
modelAttribute="spring25UserVO"
method="POST">
• ……
• </form:form>

15. 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>

16. Social Page
jQuery Dialog

17. Social Page
jQuery dialog

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

19. 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;
• });

20. Q&A
• Questions?! Comments?!