V616 CeBS UI Framework Overview

1
V616CeBS UI Framework Overview

• Tim Welch
• Staff Architect
• Division Name
• twelch_at_sybase.com

2
Headings are Ariel Black 28 pt.

• Subhead goes here, Ariel Bold, 26 pt.
• Body Copy is Times New Roman, 26 pt
• First Level Bullets, Times New Roman, 26 pt.
• Bullets are orange
• Third Level Bullets

3
Color PaletteTitle can go to two lines
Please choose from this color palette when
highlighting text or graphics.
Arrow Styles
4
Module Objectives

• Explain the goals that drove the design of user
  interface framework
• Describe the high level design of the framework
• Explain how to use the framework to
  build/customize the portal
• Explain how to localize the portal

5
Skills Prerequisites

• Java
• Servlet
• JSP
• HTML
• XML

6
Topic DescriptionDesign Goals

• HTML page designer can implement the pages
• Easy to maintain / implements MVC pattern /
  separation of responsibilities
• Localizable
• Customizable

7
Topic DescriptionOverview

• The web-site is driven by the ActionEngine (a
  servlet) and the sitemap (an XML file).
• The ActionEngine redirects to either an action or
  a page (typically a JSP).
• Actions send information gathered on a JSP to
  CeBS.
• JSPs use Data Beans to display information from
  CeBS.

8
Layer InteractionDisplaying a page
Tag Library
http///foo.do
1
ActionEngine
6
Sitemap
5
2
Data Bean
JSP
3
RedirectAction
4
7
BOD
9
Layer InteractionExecuting an action
http///foo.do
1
ActionEngine
Sitemap
BOD
2
3
5
Your Action
FormBean
4
10
Layer InteractionSample user action
Home
Login
Home
5
1
9
4
ActionEngine
Sitemap
2
6
Redirect Action
3
7
Login Action
8
BOD
11
Module Map

• BOD
• Support Classes
• ActionEngine Sitemap
• Actions
• DataBeans
• Tag Library
• Localization
• Tuning troubleshooting

12
BOD

• What is the BOD?
• The BOD is an EJB that controls access to the
  other CeBS EJBs.
• What is the BOD used for?
• The BOD is used to allow the outside world
  (including the UI) to communicate with the CeBS
  EJBs.
• Can send requests to the EJBs to retrieve data.
• Can send requests to the EJBs to perform a task
  (e.g. submit a trouble ticket).

13
Calling the BOD

• The BOD is called through the ActionContext
  object.
• You pass it XML describing what you would like
  done.
• ltVPgt
• ltTroubleTicketgt
• ltNew WorkID1gt
• ltTypegtBilling Errorlt/Typegt
• ltUrgencygtNormallt/Urgencygt
• ltDescriptiongt You forgot to bill me.
  lt/Descriptiongt
• lt/Newgt
• lt/TroubleTicketgt
• lt/VPgt

14
Calling the BODReturned XML

• The BOD returns XML describing what was done.
• ltVPgt
• ltTroubleTicketgt
• ltTicket WorkID1 NumberTT0001234/gt
• lt/TroubleTicketgt
• lt/VPgt
• The Data Bean or Action would then parse and
  react to this XML.

15
Module Map

• BOD
• Support Classes
• ActionEngine Sitemap
• Actions
• DataBeans
• Tag Library
• Localization
• Tuning troubleshooting

16
ActionContext

• ActionContext makes the rest of the system
  available including
• Page, Request, Session, and Application
  attributes
• Page Parameters
• BOD

17
FormBean

• Gives the action access to form data
• Tracks errors
• Repopulates a form when redisplayed

18
Module Map

• BOD
• Support Classes
• ActionEngine Sitemap
• Actions
• DataBeans
• Tag Library
• Localization
• Tuning troubleshooting

19
ActionEngine Sitemap

• ActionEngine is one part of the Controller in the
  MVC pattern
• How ActionEngine uses sitemap
• Format of sitemap.xml
• What else the ActionEngine is responsible for

20
How ActionEngine uses sitemap

• ActionEngine reads sitemap during initialization
• EAS calls the ActionEngine when an http request
  is made to the portal
• http//localhost/telco/locales/en-us/anaction.do?p
  1
• ActionEngine parses the URL and finds the
  action. In this case it is /anaction.do.
• ActionEngine searches sitemap for the action
  class that supports this action and calls it.

21
Format of Sitemap

• ltDispatchableClasses PackageName"Site
  Map"gtltDispatchableInstance id"/frame_nav.do
  JavaClass"com.sybase.vp.ev.RedirectAction"gt
  ltInstanceParam Name"href
  Value"/frame_nav.jsp" /gt ltInstanceParam
  Name"TelcoCSR Value"/csr_frame_nav.jsp"
  /gtlt/DispatchableInstancegt. . .
• lt/DispatchableClassesgt

22
Other ActionEngine Responsibilities

• Initialize log4j
• Track the locale, language, and character set
• Handles the ForceLogin ltInstanceParamgt
• Redirecting as requested by the actions

Login
Home
1
4
ActionEngine
RedirectAction
Sitemap
2
3
23
Module Map

• BOD
• Support Classes
• ActionEngine Sitemap
• Actions
• DataBeans
• Tag Library
• Localization
• Tuning troubleshooting

24
Actions

• Reminder ActionEngine is one part of the
  Controller in the MVC pattern
• Actions make up the rest of the Controller in the
  MVC pattern
• Actions decide what page to display
• Actions respond to form submissions

25
ActionsClass Hierarchy
Action
BaseAction
RedirectAction
FormAction
WizardAction
YourWizard
YourForm
26
ActionsBaseAction

• Base class for all actions
• Extend if the other base classes are not
  appropriate
• Implements property handling methods
• Sets up the resource and error files
• Implements clone
• Makes no other assumptions about the
  functionality of the action

27
ActionsRedirectAction

• RedirectAction displays a page
• RedirectAction decides which page to display
  based on the current users role
• Role-based customization is implemented using
  RedirectAction
• ltDispatchableInstance id"/frame_nav.do"
  JavaClass"com.sybase.vp.ev.RedirectAction"gt
• ltInstanceParam Name"href" Value"/frame_nav.jsp"
  /gt
• ltInstanceParam Name"TelcoCSR" Value"/csr_frame_n
  av.jsp" /gt
• lt/DispatchableInstancegt

28
ActionsFormAction

• FormAction provides a response when the user
  submits the form for processing
• If your action is processing a single form,
  extend the FormAction class

29
ActionsFormAction - example

• ltDispatchableInstance id"/updateuserinfo.do"
  JavaClass "com.sybase.vp.user.ev.UpdateUse
  rInfoAction"gtltInstanceParam Name"SuccessPage"
  Value"/viewprofile.do"/gtltInstanc
  eParam Name"CancelPage" Value"/viewprofile.do"/
  gtltInstanceParam Name"ErrorPage"
  Value"/edituserinfo.do"/gtltInstanceParam
  Name"Cancel" Value"Cancel" /gtltInstanceParam
  Name"ErrorFile Value"/errors/UserErrors.proper
  ties"/gtltInstanceParam Name"ModelFile Value"/m
  odels/userInfo.xml"/gtltInstanceParam
  Name"ForceLogin" Value"yes"/gt
• lt/DispatchableInstancegt

30
ActionsWizardAction

• Handles wizard-like pages by allowing navigation
  through the pages and processing of the collected
  data when the last page is submitted
• If your action is processing multiple forms,
  extend the WizardAction class

31
ActionsWizardAction - Example

• ltDispatchableInstance id"/adduser_bytelcoadmin.do
  " JavaClass"com.sybase.vp.user.ev.AddUserActio
  n" gt
• ltInstanceParam Name"SuccessPage"
  Value"/manage.do"/gt ltInstanceParam
  Name"CancelPage" Value"/manage.do"/gt
  ltInstanceParam Name"ErrorFile Value"/errors/Us
  erErrors.properties"/gt ltInstanceParam
  Name"ForceLogin" Value"no"/gt ltInstanceParam
  Name"Next" Value"Continue" /gt
• ltInstanceParam Name"Back" Value"Back" /gt
• ltInstanceParam Name"Done" Value"Submit" /gt
• ltInstanceParam Name"Cancel" Value"Cancel"
  /gtltInstanceParam Name"PasswordValidation Valu
  e"com.sybase.vp.user.ev.CeBSPassword"/gt

32
ActionsWizardAction Example contd
ltInstanceParam Name"1" Value"AddUserType"
/gt ltInstanceParam Name"2" Value"AddUserInfo"
/gt ltInstanceParam Name"3" Value"AddUserAddres
s" /gt ltInstanceParam Name"4"
Value"AddUserLang" /gt ltInstanceParam
Name"AddUserType" Value"/userAddUserType.jsp"
/gt ltInstanceParam Name"AddUserInfo"
Value"/userAddUserInfo.jsp" /gt
ltInstanceParam Name"AddUserAddress Value"/user
AddUserAddress.jsp?AddressTypeUser" /gt
ltInstanceParam Name"AddUserLang Value"/userAdd
Lang.jsp" /gt ltInstanceParam Name"AddUserInfo.M
odelFile Value"/models/userAddInfo.xml" /gt
ltInstanceParam Name"AddUserAddress.ModelFile Va
lue"/models/userAddress.xml" /gt lt/DispatchableIn
stancegt
33
Module Map

• BOD
• Support Classes
• ActionEngine Sitemap
• Actions
• DataBeans
• Tag Library
• Localization
• Tuning troubleshooting

34
DataBeans

• Data Beans react to requests from JSPs
• Retrieve data from the business logic EJBs and
  make that data available for presentation
• Create the XML to send to the BOD
• Processes the XML response from the BOD to make
  the data available for presentation
• JSPs access Data Beans using the tag library
• Data Beans extend the BaseDataBean class

35
DataBeansHelper Beans

• Helper Beans assist Data Beans by representing
  nested objects
• Especially useful for repeating objects
• Do not make calls to the BOD
• JSPs access Helper Beans using the tag library
• Helper Beans extend the BaseHelperBean class

36
DataBeansClass Hierarchy
BaseHelperBean
BaseDataBean
YourHelperBean
YourDataBean
37
DataBeansBaseDataBean

• BaseDataBean
• init()
• getPropertyElementMap()
• getPropertyAttributeMap()
• getProperty()

38
DataBeansBaseHelperBean

• BaseHelperBean
• getPropertyElementMap()
• getPropertyAttributeMap()
• getProperty()

39
DataBeansProperty Maps Element Map

• getPropertyElementMap
• Used to retrieve the body of an element
• Use a static init block to populate the map
• _elementMap.put("Description", SysXML.ELEM_Message
  . SysXML.ELEM_Description)

40
DataBeansProperty Maps Attribute Map

• getPropertyAttributeMap
• Used to retrieve the value of an attribute
• Use a static init block to populate the map
• _attributeMap.put("RowCount", new
  ElementAttribute(SysXML.ELEM_Messages,
  SysXML.ATTR_RowCount))

41
Module Map

• BOD
• Support Classes
• ActionEngine Sitemap
• Actions
• DataBeans
• Tag Library
• Localization
• Tuning troubleshooting

42
Tag Library

• The purpose of the CeBS tags is to simplify
  development of JSPs by offering easy, consistent
  access to the CeBS data.
• The CeBS tag library also helps with form
  handling and error reporting.
• We use the vp prefix in all of our JSPs

43
Tag LibraryForm Tags

• checkbox
• editText
• date
• hidden
• singleSelect
• staticText
• button
• submit
• user

• value
• checkedValue
• counter
• selectItem
• form
• account
• country
• state
• formError

44
Tag LibraryMiscellaneous Tags

• body
• link
• history
• arg

45
Tag LibraryTags to Work with Data Beans

• Tags
• source
• value
• data
• loop
• removeSource

• Attributes
• source
• item

46
Tag LibraryFlow Control Tags

• Tags
• loop
• includeIf
• if
• then
• else

• Attributes
• source
• item

47
Module Map

• BOD
• Support Classes
• ActionEngine Sitemap
• Actions
• DataBeans
• Tag Library
• Localization
• Tuning troubleshooting

48
Localization

• Localizing the CeBS portal is a simple matter of
  localizing the resources and specifying the new
  locale in locales.xml.
• ltLocale Name"en-us" Charset"8859_1"
  Image"images/vphead_en-us.gif"/gt
• All localized files go into a locale directory in
  the Web Application. For example the English
  files are in the /locales/en-us directory.
• You must localize all of the files. We do not
  have a default locale that we fall back to if a
  localized file is missing.

49
Localization contd

• Since JSPs typically do not have Java code in
  them, they become the main resource to be
  localized.
• Error and Resource properties files are the only
  remaining resources.
• Displayable information retrieved from the
  business logic EJBs is always displayed as is.
  For example, we always display the users name
  exactly as it was entered.
• Business logic EJBs can return localizable
  information by returning a SysCode which will
  be localized using the resource property files.

50
LocalizationExample

• Copy all files from the ../locales/en-us
  directory and its subdirectories to a new locale
  directory for example, ../locales/ja for
  Japanese.
• Translate the text and images in these files.
• Specify the appropriate charset in JSPs (and
  HTML pages)
• lt_at_ page language"java" contentType"text/html
  charsetShift_JIS" gt
• Create an image representing the locale in this
  case, the word Japanese, using the Shift_JIS
  charset (the image should consist of Japanese
  characters). Add the image file (ja.gif) to
  the images directory of every supported locale.

51
LocalizationExample contd

• Add an element to locales.xml
• ltLocale Nameja" CharsetShift_JIS"
  Image"images/ja.gif"/gt
• Make sure the new locale is added to the
  build/deploy process.

52
Module Map

• BOD
• Support Classes
• ActionEngine Sitemap
• Actions
• DataBeans
• Tag Library
• Localization
• Tuning troubleshooting

53
Tuning Troubleshooting

• Make sure all tags are properly nested and closed
• If you set ActionContexts logging level to
  debug, it will log all XML sent to the BOD and
  received from the BOD.
• Setting ActionEngines logging level to debug
  will log all headers and parameters in the
  incoming request.
• You can log all session attributes at the
  beginning of a request by the log4j category
  servlet.session to debug.

54
Where to go for Help

• http//java.sun.com has links to the JSP
  specification as well as useful articles to help
  you learn to use JSP
• There are many useful books that explain JSP
• To learn more about how we use log4j, see the
  corresponding TechWave Session.

55
Summary

• By using Data Beans and the tag library, JSP
  presentation pages can be kept simple and are
  easily customized
• By using Actions, we move functionality out of
  the JSP and into a Java class
• JSPs then become resources and are easily
  localized