Access Keys:
Skip to content (Access Key - 0)

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 (3)

 

  1. 04 Dec 2007

    Malcolm Murray says:

    Hi George, This is a great reference. As some of these controls differ dependin...

    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.

  2. 17 Jun 2009

    David Carter-Tod says:

    Lessons learned through trial and error.  These work in 8.0 and 9.0. &nbs...

    Lessons learned through trial and error.  These work in 8.0 and 9.0.

     listOptions goes outside a list, e.g.

    <!-- end the list -->

     </bbUI:list>
    
    <!--  list options -->
    <bbUI:listOptions
        formName="mainform"
        showSelectOptions="true"
        showItemsPerPage="true"
        selectChkboxName="csid"
        >
        </bbUI:listOptions>

    Where selectChkboxName is the name of the checkbox, and formName is the name of the form that encloses the <list>

    Breadcrumbs

    Adding a handle value for admin_main auto-generates the link back to the System Admin control panel (8.0)

            <bbUI:breadcrumbBar environment="SYS_ADMIN" handle="admin_main">


    1. 21 Sep 2009

      Patricia Goldweic says:

      Thanks for the tip David! That's very useful to know.

      Thanks for the tip David! That's very useful to know.
Adaptavist Theme Builder (4.1.3) Powered by Atlassian Confluence 3.3, the Enterprise Wiki