Skip navigation
 

Using the Blackboard tag libraries
Added by George Kroner, last edited by George Kroner on 10 Mar 2008 11:06 AM
(None)

Incorporating the Blackboard tag libraries into your Building Block results in a seamless user experience by allowing your user interface to mimic that of the core Blackboard user interface.

Here we discuss various tag libraries and show you how to use them.
Tutorial Contents
  • Page layout
    • Document templates, course pages, and title bars
  • Page content
    • Steps and step content, data elements, lists, pickers, and multi-select boxes
  • Navigation
    • Action bars, breadcrumbs, caret lists, buttons, and receipt pages

Page layout

Doc template

The basis for the styled rendering of a Blackboard page. You must surround your JSP code with the document template tag to load the default style sheets and Javascript resources for your page.

<bbUI:docTemplate>
<!--More content-->
</bbUI:docTemplate>

Course page

The basis for the styled rendering of a course page.
Creates a course page element.

<bbUI:coursePage courseId="<%=COURSE_ID%>">
<!-- other tags go here -->
</bbUI:coursePage>

Title bar

Creates a general use title bar with an icon.

<bbUI:docTemplate>
<% String iconUrl = "/images/ci/icons/bookopen_u.gif"; %>
<bbUI:titleBar iconUrl="<%=iconUrl%>">A Generic Title</bbUI:titleBar>
</bbUI:docTemplate>

Page content

Step, step content and step submit

Creates HTML for a wizard Step element. These are used throughout the Blackboard for form input.

<bbUI:docTemplate>
  <bbUI:step title="Step 1">
  <bbUI:instructions>Sample Instructions</bbUI:instructions>
  	<bbUI:stepContent>
  	Sample Step Content
	</bbUI:stepContent>
  </bbUI:step>
  <bbUI:step title="Step 2">
  <bbUI:instructions>More Sample Instructions</bbUI:instructions>
  	<bbUI:stepContent>
	</bbUI:stepContent>
  </bbUI:step>
  <bbUI:stepSubmit title='Submit your selections' cancelUrl='cancelAction.jsp'/>
</bbUI:docTemplate>

Data and data element

Provides the style for data elements contained within a Step element.

<bbUI:docTemplate>
  <bbUI:step title="Step 1">
  <bbUI:instructions>Sample Instructions</bbUI:instructions>
  	<bbUI:stepContent>
  		<bbUI:dataElement label="Input text:">
  		<input>
  		</bbUI:dataElement>
	</bbUI:stepContent>
  </bbUI:step>
  <bbUI:stepSubmit title='Submit your text' cancelUrl='cancelAction.jsp'/>
</bbUI:docTemplate>

List and list element

Creates a styled list with data

<% ArrayList<String> list = new ArrayList<String>();
	list.add("Item 1");
	list.add("Item 2");
	list.add("Item 3");	%>

<bbUI:docTemplate>
<bbUI:list collection = "<%=list%>" collectionLabel="Sample Label" objectId="item" className="String">
<bbUI:listElement label="Sample column">
<%=item%>
</bbUI:listElement>
</bbUI:list>
</bbUI:docTemplate>

Information pickers (date and user)

Built-in widgets to perform typical Blackboard tasks

<bbUI:docTemplate>
<FORM ACTION="formAction.jsp" name="datePicker" METHOD="POST">
<bbUI:datePicker formName="datePicker" startDateField="start" />
</FORM>
</bbUI:docTemplate>

If you wanted to specify the date value for this tool, you can do so as follows:

<% 
Calendar now = Calendar.getInstance(); 
now.add(Calendar.DAY_OF_YEAR, -10); // set to 10 days prior to today
%>
<bbUI:docTemplate>
<FORM ACTION="formAction.jsp" name="datePicker" METHOD="POST">
<bbUI:datePicker formName="datePicker" startDateField="start" startDate=<%=now%> />
</FORM>
</bbUI:docTemplate>


<bbUI:docTemplate>
<FORM ACTION="formAction.jsp" name="userPicker" METHOD="POST">
<bbUI:userPicker formName="userPicker" username="" textFieldName="user" textFieldSize="25" selectMultiple="false"/>
</FORM>
</bbUI:docTemplate>

Multi-select box

This widget is used to select multiple items from a list of many items.

This tag library populates the right and left frames each with a list of blackboard.servlet.data.MultiSelectBean objects. You must import the taglib-api.jar library into your project to access this package.

First, populate these lists.

List leftList = new ArrayList();
List rightList = new ArrayList();

for (int i = 1; i <= 5; i++){
MultiSelectBean mbeanLeft = new MultiSelectBean();
mbeanLeft.setLabel("Left data value number "+ i);
mbeanLeft.setValue("L"+i);
leftList.add(mbeanLeft);
}

MultiSelectBean mbeanRight = new MultiSelectBean();
mbeanRight.setLabel("Right data value number 1");
mbeanRight.setValue("R1");
rightList.add(mbeanRight);

Then, use HTML and the UI tags to display the multi-select box. It is important that the formName value matches the name of the containing form exactly for the JavaScript to work. Your data is submitted to the form action as an HTML select object with the name as indicated in rightSelectName.

<FORM name="container_form" action="process.jsp">
<bbUI:multiSelect leftCollection="<%=leftList%>" rightSelectName="selectedItems" rightCollection="<%=rightList%>" formName="container_form" />
</FORM>

Navigation

Breadcrumb bars and breadcrumbs

Creates the breadcrumb navigation bar. Wraps the text and URL for an individual breadcrumb item (one element in the breadcrumb bar).

<bbUI:docTemplate>
<% String iconUrl = "/images/ci/icons/bookopen_u.gif"; %>
<bbUI:breadcrumbBar>
<bbUI:breadcrumb href="jsp/top_level_page.jsp">Main page</bbUI:breadcrumb>
<bbUI:breadcrumb href="jsp/mid_level_page.jsp">Sub-navigation page</bbUI:breadcrumb>
<bbUI:breadcrumb>Current page</bbUI:breadcrumb>
</bbUI:breadcrumbBar>
<bbUI:titleBar iconUrl="<%=iconUrl%>">A Generic Title</bbUI:titleBar>
</bbUI:docTemplate>

Action bar and action items

A row of button-style links that can be used to perform various actions.

<bbUI:docTemplate>
<bbUI:actionBar>
	<bbUI:actionItem title="Action One" href="action1.jsp" imgUrl="/images/ci/actionbar/add_item.gif"/>
	<bbUI:actionItem title="Action Two" href="action2.jsp" imgUrl="/images/ci/actionbar/selecteditemsremove.gif"/>
</bbUI:actionBar>
</bbUI:docTemplate>

Buttons

Creates a navigation button

<bbUI:docTemplate>
<bbUI:button type="FORM_ACTION" name="ok" alt="OK" action="LINK" targetUrl="formAction.jsp"/>
</bbUI:docTemplate>

Receipt

Creates a receipt page using titleBar and button components.

<bbUI:docTemplate>
<bbUI:receipt type="DISABLED" iconUrl="/images/ci/icons/bookopen_u.gif" title="Disabled Sample Page" recallUrl="actionBack.jsp">This is a sample error message.</bbUI:receipt>
</bbUI:docTemplate>

Carets and caret lists

Carets are used to create a sub-navigation page

<bbUI:docTemplate>
<bbUI:caretList>
	<bbUI:caret title='First link' href='action1.jsp'>Here is a description of action 1</bbUI:caret>
	<bbUI:caret title='Second link' href='action2.jsp'>Here is a description of action 2</bbUI:caret>
	<bbUI:caret title='Third link'	href='action3.jsp'>Here is a description of action 3</bbUI:caret>
</bbUI:caretList>
</bbUI:docTemplate>

Comments  (Hide)

Hi George,

This is a great reference. As some of these controls differ depending on the version of Bb you are using, it might be useful to state which version you used to create your examples.

If I'm also being demanding, it might help to include the name to use to retrieve the value from controls such as datePickers, textboxes, etc. My pet hate it the visual text editor which I still can't reliably get the values from each time. I've seen lots of traffic on this topic on the bb open-src lists in the past. Maybe someone who has got this to work could enlighten us! 

Malcolm.

Posted by Malcolm Murray at 26 Nov 2007 03:39 PM; last updated at 04 Dec 2007 05:19 PM
Adaptavist Theme Builder Powered by Atlassian Confluence

By accessing the Knowledge Base, you agree to the following: Blackboard makes no representations or warranties as to the accuracy of any information in the Knowledge Base. Blackboard is not responsible in any way for information provided to the Knowledge Base by third parties. Information in the Knowledge Base is not documentation for any Blackboard product. Nothing in the Knowledge Base shall be deemed to modify your license in any way to any Blackboard product. Blackboard reserves the right to use your name and the name of your institution in reference to any information submitted by you to the Knowledge Base. Blackboard may modify, distribute, republish in any format, delete, incorporate or use in any way the information that you contribute to the Knowledge Base.