Building Your Own Mashup in
Blackboard Learn , Release 9.1
TM
Dan Rinzel, Senior Technical Product Designer
dan.rinzel@blackboard.com
Jim Riecken, Senior Software Engineer
jim.riecken@blackboard.com
We may make statements regarding our product development
and service offering initiatives, including the content of future
product upgrades, updates or functionality in development.
While such statements represent our current intentions, they
may be modified, delayed or abandoned without prior notice and
there is no assurance that such offering, upgrades, updates or
functionality will become available unless and until they have
been made generally available to our customers.
What will you learn in this session?
• About “Mashup” in the curriculum-building world and in Blackboard
Learn
• Handling third party APIs and API keys – risks and rewards
• New Blackboard Building Blocks™ placement options & NG tags
• Explore ideas for other kinds of “mashable” content
“Mashup” in Curriculum Development
• Driven by active learner engagement
• Not easy – province of the tech-savvy
• Map to existing course-building experiences
Blackboard Building Blocks™ and
Mashups
• Delivery & management mechanism is the same
– Treated at institution level like any installed Blackboard Building Block
– Forward compatible with existing manifest syntax
• New placements in edit mode action bar for a content folder
– New placement options for Content Handlers
– Potential new launch point in “Add by file type” workflow
– Full content items are created – HTML is embedded in Description field
• New placement in Visual Textbox Editor (VTBE)
– New Tool placement in 3rd row of Visual Textbox Editor (& plain editor)
– HTML snippet returned is inserted at cursor point
– Post-insertion editing is within VTBE
• New <bbNG:searchResultList> tag
– For iterating a paginated list of results
– Include support for filter display (SearchResultFilter objects)
User Content Platforms
flickr ®
YouTube®
slideshare
Picasa®
Scribd®
vimeo®
…many more
• What do they have in common?
– Publishing platforms for user-generated content
– Developed application interfaces (APIs) for searching
– Content embeddable in other sites
Blackboard Learn, Release 9.1
Demo - YouTube
• End user (Course Builder) perspective
• Very shallow – detailed booth demo and quick
tutorial videos are also available
Third Party API Keys
• Terms of Use
• Bandwidth management or “throttling”
• Global versus per-institution
Dive into Code
• Mashup hooks - bb-manifest.xml
• Search Result List tag
• Coding Example
– Integrating with a 3rd Party API – Google® Translate.
– VTBE Mashup
Mashup hooks
• Two placements for Mashups:
– Content Handler
• Same as a regular <content-handler>.
• Additional type information to determine placement in menus.
– VTBE Tool
• New type of <link> in an <application> entry.
• Endpoint for inserting HTML into the VTBE.
Content Handler
<content-handler>
<name value="resource/x-bb-flickr-mashup.name"/>
<handle value="resource/x-bb-flickr-mashup"/>
<http-actions>
<create value="execute/search"/>
<modify value="execute/edit"/>
<remove value="execute/remove"/>
</http-actions>
<icons>
<toolbar value="/images/handler_icon.gif"/>
<listitem value="/images/handler_icon.gif"/>
</icons>
<types>
<type><action-type value="mashup"/></type>
<type><action-type value="image"/></type>
</types>
</content-handler>
• Just a normal content handler.
– Store the Mashup’s HTML in the Content body.
• Type information determines placement in menus.
Content Handler – Types and Placement
evaluate
more
textbook
createItem
createMedia
newPage
mashup
createOther
image
audio
video
VTBE Tool
<application handle="mashups-flickr" is-sys-tool="true" is-course-tool="true"
is-org-tool="true" is-group-tool="false" use-ssl="false"
name="flickr.vtbe.application.name">
<description lang="en_US">flickr.vtbe.application.description</description>
<links>
<link>
<type value="vtbe_mashup_sys" />
<name value="flickr.vtbe.navitem.name" />
<url value="execute/search?vtbe=true" />
<description value="flickr.vtbe.navitem.description.sys" />
</link>
<link>
<type value="vtbe_mashup_course" />
<name value="flickr.vtbe.navitem.name" />
<url value="execute/search?vtbe=true&amp;course_id=@X@course.pk_string@X@" />
<description value="flickr.vtbe.navitem.description.course" />
</link>
</links>
</application>
• 4 new link types
Trusted?
Yes
No
System Context
vtbe_mashup_priv_sys
vtbe_mashup_sys
Course/Org Context
vtbe_mashup_priv_course
vtbe_mashup_course
Trusted == Has content.trustedcontent.MODIFY entitlement
VTBE Tool
BBLearn
Mashup B2
User clicks on
mashup link.
B2 page POSTs to the URL returned by
PlugInUtil.getInsertToVtbePostUrl()
with HTML in the embedHtml POST parameter .
Search Result List Tag
• New tag that helps render filtered lists of search
results.
– <bbNG:searchResultList>
– Shows a single page of data.
• The body of the tag is looped over for each item in the page.
– Generates paging controls.
– Can also generate filtering controls.
Search Result List Tag
Attribute
Description
items
List of items in the current page.
var
PageContext variable to expose to the body of the tag containing the current
item.
filters
A list of SearchResultFilter objects that define the filters that will be displayed.
onFilterSubmit
JavaScript to run when the “GO” button is clicked next to the filter (by default
the button will submit the surrounding form)
basePagingUrl
Base URL to use when constructing paging links. Two additional parameters:
resultsPerPage and pageIndex will be appended to this URL.
totalResults
Total number of results in the search.
currentPage
The current page (1-indexed).
resultsPerPage
Number of results shown per page. This should be >= items.size()
allowEditPaging
Whether to let the user change the number of items per page. Default: false.
allowShowAll
Whether to allow the user to choose to show all results. Default: false.
This should normally be set to false for performance reasons.
Search Result List Tag
In action code
request.setAttribute( "totalResults", 1000 );
request.setAttribute( "currentPage", 10 );
request.setAttribute( "resultsPerPage", 5 );
request.setAttribute( "currentPageItems",
Arrays.asList( "This", "is", "a", "test", "list" ) );
SearchResultFilter myFilter = new SearchResultFilter( "parameterName", "Sort" );
myFilter.setItems(
Arrays.asList(
new SearchResultFilter.FilterItem( "Ascending", "ascending" ),
new SearchResultFilter.FilterItem( "Descending", "descending" )
)
);
request.setAttribute( "filters", Arrays.asList( myFilter ) );
In JSP page
<bbNG:searchResultList var="currentItem"
items="${currentPageItems}" filters="${filters}"
basePagingUrl="/path/to/action"
totalResults="${totalResults}" currentPage="${currentPage}”
resultsPerPage="${resultsPerPage}">
<div>
This item is: ${currentItem}
</div>
</bbNG:searchResultList>
Search Result List Tag
Example: Google Translate VTBE Mashup
• Goal: Be able to easily and automatically translate
text from one language to another and insert it in the
VTBE.
• How?
a)
b)
c)
d)
Write your own translation program?
Pay large amounts of money for a translation program?
Hire a student to translate for you?
Use the free JavaScript translation API provided by
Google?
• Answer: D!
– Translate API is a perfect candidate for a VTBE Mashup
Coding Time!
• I’ve already created the very basic shell for our B2.
• Now lets walk through coding the rest and see how
simple it is.
– Creating manifest entries
– Creating the Mashup JSP
Finding other kinds of “Mash-ables”?
• From the cloud
– Acceptable Terms of Use?
– Wide usage or interest at your institution?
– Usable, stable API?
• From within
– Linkable or embeddable content in other campus systems
– Embeddable content configured by user, rather than
searched for.
– Complicated HTML of any kind.
Questions?
Please provide feedback for this session by emailing
DevConFeedback@blackboard.com.
The subject of the email should be title of this
session:
TM
Building Your Own Mashup in Blackboard Learn ,
Release 9.1