Course sites new user profile pages

373 views
298 views

Published on

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

Published in: Technology, Health & Medicine
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
373
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Course sites new user profile pages

  1. 1. CourseSites New User ProfilepagesPowered by SpringMVC 2.5
  2. 2. Goals• Modernize the code-base from SpringMVC 2.0to SpringMVC 2.5  with the end goal ofSpringMVC 3.0 in the future• More engaging User experiences  driveadoption (91 countries, 6000+ institutions )
  3. 3. Spring MVC 2.5key concepts• The importance of annotations– @Controller (no more inheriting fromSimpleFormController, MultiActionController on2.0 version)– @ModelAttribute– @SessionAttribute
  4. 4. General Architecture (Controller)• @Controller• @RequestMapping(value="/profile.form")• @SessionAttributes("spring25UserVO")• public class ProfileForm {• ……• ……• }
  5. 5. General Architecture …(1)• @RequestMapping(method =RequestMethod.GET)• public String setupForm(HttpServletRequestrequest, HttpServletResponse response,Model model) {• …….• }
  6. 6. General Architecture….(2)• @RequestMapping(method =RequestMethod.POST)• public String processSubmit(HttpServletRequestrequest, @ModelAttribute("spring25UserVO")Spring25UserVO spring25UserVO,• BindingResult result, SessionStatus status, Modelmodel) {• ….• }
  7. 7. Profile
  8. 8. Profile page
  9. 9. Modelin particular  wiring the Gender• public class Spring25UserVO {– private UserVO userVO;• …….• }
  10. 10. Model…(1)• public class UserVO {– private User user;• ………..• }
  11. 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. 12. Profile Controller• @InitBinder• public void initDataBinder(WebDataBinderdataBinder)• {• dataBinder.registerCustomEditor(Gender.class,new GenderEditor());•dataBinder.registerCustomEditor(EducationLevel.class,new EducationEditor());• }
  13. 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. 14. Profile View/JSP• <form:form id="profileForm"name="NewUserProfileForm"modelAttribute="spring25UserVO"method="POST">• ……• </form:form>
  15. 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 theuserVO.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. 16. Social PagejQuery Dialog
  17. 17. Social PagejQuery dialog
  18. 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. 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. 20. Q&A• Questions?! Comments?!

×