javascript_service_tutorial

A Tutorial for the DDS JavaScript Search API
JSHTML v1.1

Overview of the DDS JavaScript Search Service
O f h S S S hS
Example web pages that have been built using
the service
h i
Look at how to create a web page using the
service
i
Summary of available service commands

JavaScript Search Service Tutorial 2

Lets web developers place DDS search into web pages with
p p p g
JavaScript
Development of the custom page can be done using a text editor
or tools like Dreamweaver
Uses JavaScript, CSS and HTML – Web standards that are
supported by all major browsers
Users do not need to install plug‐ins or other special software in
order to view the page
Compatible with all 5.5 and later browsers
p 55
Can be deployed to any static web server
Does not require CGI or other application servers like Tomcat
Available only for resources that reside in the ADN framework
For other formats, use the DDS Search Service with JSON output instead

p p g
The service API enables developers to customize their page
for a specific audience
Developers can:
Customize which search options are displayed in the page
Create custom menus for any topic or domain
Make SmartLinks and SmartLinkDropLists that return specific
DDS resources when clicked or selected
Customize the way the search results are displayed in the page
Tailor the fonts, colors and other HTML elements that are
returned by the service to match a particular web page design
t d b th i t t h ti l b d i


Title
reflects the
user’s
actions

CSS controls the
fonts,
fonts sizes and
colors in the
page
SmartLinks that bring up
resources for specific topics

A search
box to
enter text
Ability to search within the
SmartLink results Links to page
through results
User’s
search
actions are Standard and
reflected custom menus to
limit searches by
category or topic

Search results -
can be
customized

Similar to a web service client/server architecture
2. HTTP
HTML Page on JavaScript
1. User performs request is
a search – HTTP Web Server JavaScript Service
(Client) proxied to the
request (Server)
service
•HTML page sits on
p g •Accepts JavaScript
Accepts
a static web server service commands and
•Contains HTML user’s search request
Web Site Visitor and CSS plus encoded in HTTP
JavaScript parameters
•Accesses the
commands that •Returns HTML inside a
page from their
render the search JavaScript write()
web browser
service content function
•All HTTP •HTML includes forms
3. HTML in the
parameters are (search box, menus,
web page is
proxied through to etc.), search results
returned
the JavaScript
h and other custom-
directly to the
service tailored content
browser

4. HTML from the search
service is wrapped in a
JavaScript write() function
and returned to the browser


Search box

Simple search
results

Search box

Standard menus
include:
•Grade Levels
•Subjects
S bj t
•Resource Types
•Content
Standards
•Collections

SmartLinks

Search Box

Custom menus
can be mapped to
any topic or
category.
category For
example subjects,
locations (states,
regions), web site
domains, many
others

SmartLinkDropList

When user selects
a topic from the
menu a search is
issued and the
results are
displayed in the
page

SmartLinks

When the user
clicks a SmartLink,
a search is issued
and the results are
displayed in the
page

Three options:
1. Start with one of the example search pages and use it as a
template for your custom page:
http://www.dlese.org/dds/services/examples/jshtml1‐1/
http://www dlese org/dds/services/examples/jshtml1‐1/

2. Insert example code provided in the documentation into
an existing web page:
http://www.dlese.org/dds/services/jshtml1‐1/javascript_service_documentation.jsp
htt // dl /dd / i /j ht l /j i t i d t ti j

3. Edit and modify the code directly in your web page. This
is covered next in this tutorial.


In your HTML page:
In your HTML page
1. Source the serviceURL JavaScript library, which enables use of the
the service commands (required)
2. Include an inline script element that contains one of the two
2
required commands plus any optional commands. Place this where
you would like the DLESE search to be rendered in your page
(required)
3. Insert HTML for SmartLinks or SmartLinkDropMenus (optional)
4. Source the suggested CSS style sheet and other CSS styles
(optional)


1. Use standard HTML for
the overall page design
<html>
<head> 5. The Suggested CSS
5
<title>Example custom DLESE search page</title> may be applied to the
page (optional)
<LINK REL="stylesheet" TYPE="text/css"
HREF="http://www.dlese.org/dds/services/jshtml1-1/suggested_styles.css">

<style type="text/css">
BODY { font-family: Arial, sans-serif; } 6. CSS may applied to the TD element
TD { font-size:10pt; } to control the way the content from the
</style> service is rendered (optional)

</head>
/h d 4. A SmartLink command may be used
<body> in the <a> tag to show resources for a
<h1>Example custom search page</h1> given query when clicked (optional)
<a href='JavaScript:SmartLink("tsunamis","Tsunamis")'>Tsunamis</a>

<SCRIPT TYPE="text/javascript"
SRC="http://www.dlese.org/dds/services/jshtml1-1/javascript_search_service.js"></SCRIPT>

<SCRIPT TYPE="text/javascript">
ShowElement("searchBox"); 2. Source the serviceURL
RenderPage(); JavaScript library, which
</SCRIPT> enables use of the
3. Insert an inline <script> element
service commands
</body> and include one of the two required
(required)
</html> commands plus any optional
commands.
commands This is inserted at the
point in the HTML at which the service
output is rendered (required)


p y
Display commands
Are used to insert and control the search options that are
visible in your page and how the search results are
displayed
SmartLink commands
Are used to make dynamic links and drop menus in your
page that return specific resources when clicked or
selected
Logic commands
Are used to control global behaviors for your page
Required commands
q
Are used to render the dynamic content in your page ‐ one
of these two commands must be included in your page


Sample: ShowElement("searchBox");
Instructs the service to display a particular HTML element in your
page
Search‐related elements that available with this command include a
search box, standard menus for grade levels, subjects, content
search box standard menus for grade levels subjects content
standards, resource types or collections and an option to search
within SmartLink results
Search results can be configured with this command to show grade
levels, subjects, resource types, collections, annotations and
l l b ll d
accession date
May be repeated as many times as needed to insert as many
elements you want
The order in which these appear in your inline <script> has no effect
on how the elements appear in your page


Sample: HideElement( pager );
HideElement(“pager");
Instructs the service to hide a particular
y
HTML element that normally would be
displayed
Allows you to disable display of the links to
page through the results, disable the
rewriting of the title of the page or disable
the display of the DLESE logo
th di l f th DLESE l
May be repeated as many times as needed
to disable each of the given items

Sample: CustomMenuItem( Topics ,"Biology","su:03");
CustomMenuItem("Topics" Biology su:03 );
Allows you to create custom menus for
y
your page
p g
May be repeated as many times as needed
to insert as many menus as you would like
The order in which these appear in your
inline <script> controls how the menus are
ordered in your page
d d i
Each menu item is mapped to any search
query you choose

MaxResultsPerPage ‐ Instructs the service to display a given
MaxResultsPerPage
maximum number of results per page of results
Sample: MaxResultsPerPage("5");
MaxLinkLength
MaxLinkLength ‐ Instructs the service to truncate the links
displayed in the page to a given length
Sample: MaxLinkLength("50");
MaxDescriptionLength ‐ Instructs the service to truncate the
description displayed in the search results to a given length
Sample: MaxDescriptionLength("200");


Unlike all the other commands, these
Unlike all the other commands these
two commands are used within standard
HTML tags (the <a> tag and the <select>
tag) rather than within the inline <script>
tag


Sample:
<a href='JavaScript:SmartLink("oceans","Oceans")'>Oceans</a>
Allows you to create one or more custom links for your page
that is mapped to one or more search queries
pp q
When the user clicks on a SmartLink, the given query is
executed and the search results are displayed in your page
Allows you to make a group of resources available to your site
visitors with a single click


Sample:
<select id="smartLinkDropList" onchange="JavaScript:SmartLinkDropList()">
<option value="">-- Select a category --</option>
<option value="tsunamis">Tsunamis</option>
<option value="earthquakes">Earthquakes</option>
</select>

Allows you to create a drop list containing one or more custom
selections for your page that is mapped to one or more search
queries
When the user selects an item in the SmartLinkDropList, the
given query is executed and the search results are displayed in
your page

Allows you to make groups of resources available to your site
g p
visitors from a single drop menu


p g
SearchConstraint ‐ Instructs the service to constrain all searches in the page to a
given sub‐set of resources based on the search query you define
Sample: SearchConstraint("su:08");
SearchBoost ‐ Instructs the service to boost the ranking of results in the page that
match the criteria you define using a search query
Sample: SearchBoost(“florida");
SortBy ‐ Instructs the service to apply a given sort order to the results that are
displayed. Results can be ordered alphabetically by title, by date they were
p y p y y , y y
cataloged or by most relevant to the user’s search query (default)
Sample: SortBy(“title");
RedirectSearchTo ‐ Instructs the service to redirect the user's search request to a
second page where the result will be displayed
d h th lt ill b di l d
Sample: RedirectSearchTo(“search-page2.html");
SuppressErrors ‐ Instructs the service to suppress any developer errors that may
be returned by the service
Sample: SuppressErrors( );


RenderPage Instructs the service to render the
RenderPage ‐
page
Sample: RenderPage( );
p g (

RenderSearchResults ‐ Instructs the service to
perform a search based on a query you define
and render the results automatically in the page
Sample:
S l
RenderSearchResults(“tsunamis");


Embedded search queries are used in the commands to return a given sub‐set
of library resources
Embedded search queries are used in the following commands:
CustomMenuItem, SmartLink, SmartLinkDropList, SearchConstraint,
SearchBoost, RenderSearchResults
SearchBoost RenderSearchResults
In the CustomMenuItem, SearchConstraint, SmartLink, SmartLinkDropList
commands, the embedded query can also be used to limit the user’s search to
the given sub‐set of library resources
Example ‐ The query for resources in the area of atmospheric science is:
su:01 or subject:”Atmospheric science”
When used in RenderSearchResults or the SmartLink commands, this query
returns all atmospheric science resources
When used in CustomMenuItem, SearchConstraint, or the SmartLink
Wh d i C t M It S hC t i t th S tLi k
commands with the search in option enabled, this query limits searches to only
those resources that are within atmospheric science
See documentation for details about creating queries


CSS may be used to control the fonts,
sizes and colors in the service output


Suggested CSS A style sheet that contains suggested
Suggested CSS –
styles for use with the service
Once sourced, individual styles may be redefined later in the
page
All service output is within a TD element
Apply styles to the TD element to control the way the service
pp y y y
output is rendered
The class stdTable is assigned to all TD elements in the
service output
Apply styles to TD.stdTable to control the way the
service output is rendered independently from other TD
content in your page


<head>
HREF "htt // dl /dd / i /j ht l1 1/ t d t l ">

<style type="text/css"> CSS applied to the BODY
BODY { font-family: Arial, sans-serif; } effects the entire page
TD { font-size:10pt; }
</style>
/style CSS applied to the TD element
</head> effects the service output


<head>
HREF "htt // dl /dd / i /j ht l1 1/ t d t l ">

<style type="text/css"> CSS applied to the BODY
BODY { font-family: Arial, sans-serif; } effects the entire page
TD { font-size:10pt; font-family: Monospace; color: green; }
</style>
/style
</head> CSS applied to the TD element
effects the service output


<head>
<style type="text/css">
BODY { font-family: Arial, sans-serif; }
TD { font-size:10pt; } CSS applied to the TR.resourceTitle
TR.resourceTitle { background-color:#ddddff; } background-color controls the color
</style> behind the title of the resources in the
</head> search results


y p, p y p g y
As you develop, open your page in your browser to see how
the dynamic content is displayed
Test your page in different browsers to verify they are
rendering as you intended
g y
As you edit the commands in your page, you will need to
'force' the browser to refresh itself in order to see the
c a ges
changes
There are some issues when developing using Internet
Explorer (which do not occur once your page is deployed to a
web server). Firefox or Netscape are recommended for
developing your pages
Use the JavaScript debugging features of your browser to
look for JavaScript errors


• See:
S
http://www.dlese.org/dds/services/jshtml1‐1/javascript_service_documentation.jsp

• For questions and comments, please
send e-mail to support@dlese org
e mail support@dlese.org


javascript_service_tutorial

More Related Content

Viewers also liked (7)

Similar to javascript_service_tutorial (20)

More from tutorialsruby (20)

Recently uploaded (20)

javascript_service_tutorial