Tutorial2

From SIMILE Widgets
Revision as of 15:44, 17 February 2012 by Mwaters (Talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

That's basically a set of properties and property values. For example, the property shared has the value "yes". Horst L. Störmer won his Nobel prizes with two other people, and so the property co-winner has two values, which are encoded as elements of an array. That just means you list the values between [ and ], separated by commas.

Properties whose names contain non-alphanumeric characters (such as last-name) must be surrounded by double or single quotes. But if you don't like to quote property names, you can use a different naming convention (for example, imageURL instead of "image-url").

Note: Exhibit 3.0 is stricter about JSON formatting than prior versions of Exhibit. If you're seeing errors in JSON data, try using a validator like JSONlint to check your data formatting: http://jsonlint.com/

Contents

Required Data Values

Each item in your data file must have a label property value. (There are exceptions but this is required for 99% of the cases.) The type property value specifies the type of the item; otherwise, the item's type defaults to Item. In our data file, we set the type property to Nobelist.

Aside from these few restrictions, you can put pretty much anything into your data file.

How Does Exhibit Work?

The file nobelists.html has a reference to the JavaScript file exhibit-api.js. That's how you include Exhibit. Here's roughly what happens when the web page is loaded:

  1. The code of exhibit-api.js is loaded and it automatically pulls in some more code.
  2. A lightweight database is created and the data files are loaded into it.
  3. An Exhibit object is created. It reads the various ex: attributes in the HTML code to configure its user interface. It then reads data out of the lightweight database and constructs its user interface

For Exhibit 3.0 Scripted mode, remember that everything happens inside the Web browser. The user's Web browser loads the entire data set in memory and performs all computation (sorting, filtering, etc.) locally, which provides much of the power of the Exhibit approach.

Note that so far in this tutorial, you haven't had to install, configure, or manage a database or to write a single line of server-side script (in PHP, ASP, JSP, CGI, etc.).

Learn More About Staged Exhibit

For Exhibit 3.0 Staged mode, a server handles filtering, sorting, and data manipulation. See the Exhibit 3.0 Staged documentation for details.

Lenses: Styling How Your Exhibit Displays

Right now the information about each Nobelist is displayed in a table showing an item's property and value. Exhibit uses lenses to style the HTML displaying your data in the browser. For example, you might use lenses to show images for each item in an exhibit.

Insert this table inside the div element with the id exhibit-view-panel (either before or after the inner div element that is already there):

 <table ex:role="lens" class="nobelist" style="display: none;"><tr>
  <td><img ex:src-content=".imageURL" /></td>
  <td>
  <div ex:content=".label" class="name"></div>
  <div>
  <span ex:content=".discipline" class="discipline"></span>, 
  <i ex:content=".nobel-year"></i></div>
  <div ex:if-exists=".co-winner" class="co-winners">
    Co-winners: <span ex:content=".co-winner"></span>
    </div>
  <div ex:content=".relationship-detail" class="relationship"></div>
   </td></tr>
 </table>

Then, find the style element at the start of the HTML code and change it as follows:

<style>
body {
font-size: 75%;
margin: 0;
padding: 0;
font-family: "Lucida Grande","Tahoma","Helvetica","Arial",sans-serif;
color: #222;
}
table, tr, td {
font-size: inherit;
}
tr, td {
vertical-align: top;
}
img, a img {
border: none;
}
#main-content { background: white; }
#title-panel { padding: 0.25in 0.5in; }
#top-panels {
padding: 0.5em 0.5in;
border-top: 1px solid #BCB79E;
border-bottom: 1px solid #BCB79E;
background: #FBF4D3;
}
.exhibit-tileView-body { list-style: none; }
.exhibit-collectionView-group-count { display: none; }
table.nobelist {
border: 1px solid #ddd;
padding: 0.5em;
margin: 0.5em 0;
display: block;
}
div.name {
font-weight: bold;
font-size: 120%;
}
.relationship {
color: #888;
}
div.nobelist-thumbnail {
float: left;
width: 13em;
height: 10em;
border: 1px solid #BCB79E;
background: #F0FFF0;
padding: 1em;
margin: 0.5em;
text-align: center;
}
div.nobelist-timeline-lens {
padding: 1em;
text-align: center;
}
 </style>

Save and reload in the browser. The Nobelists file looks much better, and you've been able to customize its display to emphasize names and photos for each Nobel winner.

What you have just done is specifying an exhibit lens template and some CSS styles. Exhibit uses a lens template to generate the display for each Nobelist. In the lens template, the ex:content attribute values specify which item properties Exhibit uses to fill the corresponding HTML elements. For example,

<div ex:content=".label" class="name"></div>

causes a div element to be generated using the label property value of the Nobelist -- the person's name.

Adding Images

In addition to generating text, you can also generate images by including an img element and specifying its src attribute value to be generated, in our example, from the imageURL property value in the nobelists.js file:

<img ex:src-content=".imageURL" />


Customizing Exhibit Attributes To generate any attribute value in Exhibit, you prepend its name with ex: and append -content. So if your data file contains a field called publication-date, you can display those dates in a lens by using

<div ex:content=".publication-date" />


Note that some Nobelists have co-winners recorded in the data file, but not all. (We only have information about co-winners who are also related to MIT.) For conditional content like this, you use the ex:if-exists attribute value to include a part of the template conditionally:

<div ex:if-exists=".co-winner" class="co-winners">Co-winners:

<span ex:content=".co-winner"></span>

</div>

Without the code ex:if-exists, the page would show a lot of "Co-winners:" with nothing in the data field.

Schema

Properties

In your Web browser, filter the "discipline" facet to show only "Physics", "relationship" to only "research", and "shared" to "yes". You should get 5 Nobelists.

Note that the Nobelist, Horst L. Störmer, shared his prize with two others: Robert B. Laughlin and Daniel C. Tsui. You can readily see Daniel C. Tsui listed with Störmer, but Laughlin's data doesn't display because he's not a researcher and has been filtered out.

However, Laughlin does appear in the rendition of Störmer, so it would be nice to be able to click on Laughlin's name and get some information about him right there and then. We can do this by adding some schema to our data, to say that co-winner property values, such as "Robert B. Laughlin", actually mean items.

Open the file nobelists.js and modify the beginning so that it looks like this:

  {
       "properties": {
           "co-winner" : {
               "valueType": "item"
           }
       },
       "items" : [
           {   "type":       "Nobelist",
               "label":      "Burton Richter",
               "discipline": "Physics",
               "shared":     "yes",
   
   
   ...the rest of the file...

Now, open up another browser window (or tab) and drag the file nobelists.js into it and make sure that the latest version is displayed. If not, hit the browser's Refresh button. Once that's done, switch to the browser window displaying that HTML file and refresh it. Select the same filters as above. You should now see that Robert B. Laughlin's name appears in blue and is underlined. Click on it.

Types

Notice that the number of Nobelists shown on the page is ungrammatical -- it reads "5 Nobelist" instead of "5 Nobelists". Modify the beginning of the file nobelists.js as follows:

{
"types": {
"Nobelist" : {
"pluralLabel": "Nobelists"
}
},
"properties": {
"co-winner": {
"valueType": "item"
}
},
...the rest of the file...


Save your data file, switch to the browser window displaying the .js file, and refresh it. Then switch to the window displaying the .html file and refresh it to see the change.

The key point of this step is that the Web page can look and behave better not just by fine-tuning the HTML code but also by improving the data.

Adding Additional Views

Thumbnail View

Exhibit offers several different Views to display data. With a series of images and short descriptors, the Thumbnail View comes in handy for browsing and sorting a data set like ours. An exhibit can use several different views. Add this code to nobelists.html after the Lens table:

<div ex:role="view"
              ex:viewClass="Thumbnail"
              ex:showAll="true"
              ex:orders=".discipline"
              ex:possibleOrders=".label, .last-name, 
.discipline, .relationship, .shared, .deceased, .nobel-year">
   <div ex:role="lens" class="nobelist-thumbnail" style="display: none;">
              <img ex:src-content=".imageURL" />
              <div><span ex:content=".label"></span></div>
              <div>
              <span ex:content=".discipline" class="discipline"></span>, 
              <span ex:content=".nobel-year" class="year"></span>
              </div>
              </div>
              </div>

Save the file and open it in your browser window. The Thumbnail View is quite handy for showing images and sorting by a particular data field, such as discipline or year.

Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox