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 /bbUI /WEB-INF/config/taglibs/bbUI.tld Already set up in the sample Building Block

8. Using Building Blocks Tag Library Taglib directive in each JSP: Then, each tag must use the prefix: 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 Bread Crumb #1 Bread Crumb #2 Current Page

12. Breadcrumb Tags Current Page Uses automatically generated breadcrumb Must Specify Navigation Handler root

13. Course Tags Current Page The Page Title Course Breadcrumb Title Bar (Deprecated)

14. Step Tags <textarea name="text" cols=40 rows=3> Yes No Step Data element

15. Step Tags Please enter objective. <input type="text" name="objective"> Step submit Instructions

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 <bbUI:actionItem title="Module" href="edit_module.jsp" imgUrl="/images/ci/actionbar/add_item.gif"/> actionBar

18. List Tags Allows JSP pages to display a BbList in a tabular format

19. List Tags <bbUI:list collection=" "collectionLabel="Courses" objectId="m" className="Course“ resultsPerPage="-1"> <bbUI:listElement width="30%" label= "Course ID" name="courseid“ comparator=" "> BbList object

20. Caret List This link will transform your institution. This link will transform your institution even more!

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?