|
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. |
- 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>
</bbUI:docTemplate>
Course page
The basis for the styled rendering of a course page.
Creates a course page element.
<bbUI:coursePage courseId="<%=COURSE_ID%>">
</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); %>
<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>
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.