1 / 22

Blackboard Look and Feel through Tag Libraries

Blackboard Look and Feel through Tag Libraries. Presented By Tracy Engwirda. 29 September, 2005. Road Map. Consistent UI Tag Libraries Examples Undocumented tags. Why Have a Consistent UI?. Easy to learn Less cumbersome to use; less frustration Generally better accepted by users

tallys
Download Presentation

Blackboard Look and Feel through Tag Libraries

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  8. Using Building Blocks Tag Library • Taglib directive in each JSP: <%@ taglib uri="/bbUI" prefix="ui"%> <%@ taglib uri="/bbData" prefix="data"%> • Then, each tag must use the prefix: <ui:breadcrumbBar> </ui:breadcrumbBar> • Case Sensitive!

  9. context* breadcrumb breadCrumbBar button coursePage courseTitleBar dataElement docTemplate instructions spacer step stepSubmit titleBar + module tags bbUI 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 <bbUI:breadcrumbBar> <bbUI:breadcrumb href="http://www.breadcrumb1.com/">Bread Crumb #1</bbUI:breadcrumb> <bbUI:breadcrumb href="http://www.breadcrumb2.com/">Bread Crumb #2</bbUI:breadcrumb> <bbUI:breadcrumb>Current Page</bbUI:breadcrumb> </bbUI:breadcrumbBar>

  12. Breadcrumb Tags Uses automatically generated breadcrumb <bbUI:breadcrumbBar handle="admin_main"> <bbUI:breadcrumb>Current Page</bbUI:breadcrumb> </bbUI:breadcrumbBar> Must Specify Navigation Handler root

  13. Course Tags Course Breadcrumb Title Bar (Deprecated) <bbUI:breadcrumbBar handle="course_tools_area"> <bbUI:breadcrumb>Current Page</bbUI:breadcrumb> </bbUI:breadcrumbBar> <bbUI:coursePage> <bbUI:courseTitleBar>The Page Title</bbUI:courseTitleBar>

  14. Step Tags Step Data element <form action="create_proc.jsp" method=post> <bbUI:step title="Enter Information" number="1"> <bbUI:dataElement label="Title"><input type="text" name="title"></bbUI:dataElement> <bbUI:dataElement label="Text"><textarea name="text" cols=40 rows=3></textarea></bbUI:dataElement> <bbUI:dataElement label="Available"><input type="Radio" name="isAvailable" value="true" checked>Yes <input type="Radio" name="isAvailable" value="false">No </bbUI:dataElement> </bbUI:step>

  15. Step Tags Instructions Step submit <bbUI:step title="Enter Objective" number="2"> <bbUI:instructions>Please enter objective.</bbUI:instructions> <bbUI:dataElement label="Objective"><input type="text" name="objective"></bbUI:dataElement> </bbUI:step> <bbUI:stepSubmit title="Submit" number="3" /> </form>

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

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

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

  20. Caret List <bbUI:caretList> <bbUI:caret title="Go to Blackboard" href="http://www.blackboard.com"> This link will transform your institution. </bbUI:caret> <bbUI:caret title="Go to B2" href="http://buildingblocks.blackboard.com"> This link will transform your institution even more! </bbUI:caret> </bbUI:caretList>

  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?

More Related