Blackboard Look and Feel through Tag Libraries

1
Blackboard Look and Feel through Tag Libraries

• Presented By Tracy Engwirda

29 September, 2005
2
Road Map

• Consistent UI
• Tag Libraries
• Examples
• Undocumented tags

3
Why Have a Consistent UI?

• Easy to learn
• Less cumbersome to use less frustration
• Generally better accepted by users
• Platform recognition
• Software development simplified

4
Blackboard Look and Feel

• Provides a consistent look for all of the
  Blackboard Platform
• Common elements are reused throughout
• Icons
• Breadcrumbs
• Steps

5
Tag Libraries

• XML-like tags that are evaluated by Java classes
• Standardized in the JSP 1.1 Spec

6
Tag Libraries

• Allow the B2 Developer to seamlessly integrate
  their applications into the Blackboard Platform
• Provides an easy way to render various UI
  elements via Tags in JSP pages
• Ensures the app can evolve as the Blackboard
  Platform evolves
• Set of UI Tags Shipped with Blackboard

7
Using Building Blocks Tag Library

• Must package the bbUI and bbData .tld files with
  the extension
• Include reference to descriptor files in web.xml

lttaglibgt lttaglib-urigt/bbUIlt/taglib-urigt
lttaglib-locationgt /WEB-INF/config/taglibs/bbUI.t
ld lt/taglib-locationgt lt/taglibgt

• Already set up in the sample Building Block

8
Using Building Blocks Tag Library

• Taglib directive in each JSP

lt_at_ taglib uri"/bbUI" prefix"ui"gt lt_at_ taglib
uri"/bbData" prefix"data"gt

• Then, each tag must use the prefix

ltuibreadcrumbBargt lt/uibreadcrumbBargt

• Case Sensitive!

9
bbUI Tags

• context
• breadcrumb
• breadCrumbBar
• button
• coursePage
• courseTitleBar
• dataElement
• docTemplate

• instructions
• spacer
• step
• stepSubmit
• titleBar
• module tags

10
Breadcrumb Tags

• Provide an easy way for a user to backtrack and
  navigate
• Can be automatically generated or generated by
  the Building Block

11
Breadcrumb Tags
ltbbUIbreadcrumbBargt ltbbUIbreadcrumb
href"http//www.breadcrumb1.com/"gtBread
Crumb 1lt/bbUIbreadcrumbgt ltbbUIbreadcrumb
href"http//www.breadcrumb2.com/"gtBread
Crumb 2lt/bbUIbreadcrumbgt ltbbUIbreadcrumbgtCu
rrent Pagelt/bbUIbreadcrumbgt lt/bbUIbreadcrumbBar
gt
12
Breadcrumb Tags
Uses automatically generated breadcrumb
ltbbUIbreadcrumbBar handle"admin_main"gt
ltbbUIbreadcrumbgtCurrent Pagelt/bbUIbreadcrumbgt
lt/bbUIbreadcrumbBargt
Must Specify Navigation Handler root
13
Course Tags
Course Breadcrumb
Title Bar (Deprecated)
ltbbUIbreadcrumbBar handle"course_tools_area"gt
ltbbUIbreadcrumbgtCurrent Pagelt/bbUIbreadcrumbgt
lt/bbUIbreadcrumbBargt ltbbUIcoursePagegt ltbbUIcou
rseTitleBargtThe Page Titlelt/bbUIcourseTitleBargt
14
Step Tags
Step
Data element
ltform action"create_proc.jsp" methodpostgt ltbbUI
step title"Enter Information" number"1"gt
ltbbUIdataElement label"Title"gtltinput
type"text" name"title"gtlt/bbUIdataElementgt
ltbbUIdataElement label"Text"gtlttextarea
name"text" cols40 rows3gtlt/textareagtlt/bbUId
ataElementgt ltbbUIdataElement
label"Available"gtltinput type"Radio"
name"isAvailable" value"true" checkedgtYes
ltinput type"Radio" name"isAvailable"
value"false"gtNo lt/bbUIdataElementgt lt/bbUIstepgt
15
Step Tags
Instructions
Step submit
ltbbUIstep title"Enter Objective" number"2"gt
ltbbUIinstructionsgtPlease enter
objective.lt/bbUIinstructionsgt
ltbbUIdataElement label"Objective"gtltinput
type"text" name"objective"gtlt/bbUIdata
Elementgt lt/bbUIstepgt ltbbUIstepSubmit
title"Submit" number"3" /gt lt/formgt
16
Undocumented Tags

• Examining bbUI.tld reveals more tags than are in
  docs
• Some are more useful than others some are
  deprecated and should not be used
• All are considered AS-IS
• Supported tags to be placed in documentation
  update

17
Action Bar
actionBar
ltbbUIactionBar action"Add"gt ltbbUIactionItem
title"Module" href"edit_module.jsp"
imgUrl"/images/ci/actionbar/add_item.gif"/gt lt/bbU
IactionBargt
18
List Tags

• Allows JSP pages to display a BbList in a tabular
  format

19
List Tags
BbList object

• ltbbUIlist
• collection"ltfilteredList gt
• "collectionLabel"Courses"
• objectId"m"
• className"Course
• resultsPerPage"-1"gt
• ltbbUIlistElement width"30"
• label "Course ID"
• name"courseid
• comparator"ltcompCoursegt"gt
• ltm.getCourseId()gt

20
Caret List
ltbbUIcaretListgt ltbbUIcaret title"Go to
Blackboard" href"http//www.blackboard.com"gt
This link will transform your institution.
lt/bbUIcaretgt ltbbUIcaret title"Go to B2"
href"http//buildingblocks.blackboard.com"gt
This link will transform your institution even
more! lt/bbUIcaretgt lt/bbUIcaretListgt
21
Summary

• JSP tags provide an easy way to abstract UI
  elements
• Blackboard Provides a set of UI tags to
  seamlessly integrate your Building Block
• Developers should use these tags whenever possible

22
Questions?