|
Tom L. Hall President |
|
Issue 9
Sept 3,
2007 |
In this issue, I will cover some of the basics of the new SmartStyles and SmartPages features in ToolBook Instructor 9.
In this Issue:
Under the Hood with the Styles
With the
new SmartStyles
snd SmartPages features, we encounter some new terminology.
Before explaining a bit about these new features, here is a summary of the
terminology:
Smart Book – a book that has been set up to allow the SmartStyles and SmartPages
features to work
SmartStyles – the term used to refer
to the new styles feature
Smart Styles – the actual styles
available
SmartPages – the
term used to refer to the new pages feature
Smart Pages – the actual pages
available
Smart Backgrounds – the backgrounds
available to be used by Smart Pages
Smart Objects – objects set up so that
they can be restyled using SmartStyles
Page Types – the different types of Smart
Pages available
SmartStyle Outlines – the various outlines designed
to be used with Smart Styles and Smart Pages
Page Usage – defines how a Smart Page
is used
Page Structure – refers to the types of
objects on a page based upon a Page Type
In the following sections, I will talk quite a bit about the various
files that give us these new features.
This is the basic file structure for the files:
ToolBook
Instructor 9
Catalog
Styles.wbk
Pages.wbk
Spclst
Outlines
Generic1.tbOutline
` Quiz1.tbOutline
Skill1.tbOutline
Etc.
Styles
Basic.ptp
Aurora.ptp
Boxy
Blue.ptp
Etc.
Page
Types
Standard
Background.tbBackground
Text.tbPage
Text
and Image.tbPage
Meun.tbPage
Bullets.tbPage
Multiple
Choice Question.tbPage
Etc.
Style
Definitions
Basic.tbStyle
Aurora.tbStyle
Boxy
Blue.tbStyle
Etc.
Cache
Basic.xls
Aurora.xls
Boxy
Blue.xls
Etc.
Basic
All
Source Files for Basic
All Source Files for
Boxy Blue
All Source Files for Boxy Blue
Etc.
|
The term SmartStyles refers to the new
feature in ToolBook Instructor 9 that provides uniformity across the various
methods for building an application including Templates and the Book
Specialist. SmartStyles
is intended to provide a good variety of styles. While the term SmartStyles refers to the
feature, the actual style component is called a Smart Style and is found in a Styles Category of the Catalog as well as from the Book
Wizards. A Smart Style is added to a
book by just dragging one of the objects from the Styles Category or making a choice from the Book Wizards. SmartStyles
provides a way for developers to create a book using a particular Smart
Style, and then add new pages to a book using that style. Various objects can also be added to a book
using the chosen Smart Style. A new
Smart Style can be added to a book at any time, and that style will then be
applied to all relevant objects. This
is the Styles Category and is a
view of the styles.wbk Catalog file. The file type for each Smart
Style is .ptp and these files are found in
the Spclst\Styles directory. Each one of the objects in the Styles Category of the Catalog
represents a ptp
file that contains all the pages that are currently available for this style. The Basic
Smart Style currently contains 28 different types of pages. |
|
|
A Smart Style can include,
but is not limited to, the following things:
• Fonts
used by various objects
• Graphics
used by questions, navigation panels and other objects
• Background
graphics
• Page
layout
In the case of the Text and Image page from the Basic Smart Style, you see a blue and
orange bar at the bottom of the page which is the background graphic. The Navigation buttons such as Menu, Back, and Next have
graphics that closely match the background graphic. Each record field such as the Title (%LESSONTITLE%), Subtitle (%CHAPTER%), and Prompt (the field with the Click Next
to continue message on the background and fields such as Topic (%TOPICTITLE%) and BodyText (the field on the right), and) on the foreground
has a font defined that is deemed appropriate for this page. Finally, each page has a defined layout. In the case of the Text and Image page, you
see that there will be a graphic on the left and text on the right with the
Navigation buttons at the bottom-right part of the background.
Note that the record fields with text such as %LESSONTITLE%, %CHAPTERTITLE%, and the field with %TOPICTITLE% are automatically populated with information such as
the Book Title (%LESSONTITLE%), and
Page Name (%TOPICTITLE%). The Subtitle record field (%CHAPTERTITLE%)
will be populated with the name of a chapter which is defined from the Behavior
tab of the Page Properties dialog box.
In the graphic below, the Book Title is Atomic Theory, the name of the Page is Proton and this page has been identified as the first page of a
Chapter named Parts of the Atom. Note that the “tokens” are replaced by this
information when you switch to Reader level.
Each Smart Style (ptp file) has a corresponding Style Definition file that is
found in the \Spclst\Styles\Definitions
folder. These files have a .tbstyle file extension.
For each style, there also is a corresponding xls file found
in a \Spclst\Styles\Cache folder
SmartPages is a
feature that gives pre-defined common page types based upon today’s learning
needs as opposed to the older page types found in the Templates and Book Specialists
of earlier versions of ToolBook. While SmartPages is
the term used to describe the feature in ToolBook Instructor 9 that provides a
series of pre-designed pages that are set up so that the style can be changed
using SmartStyles, the actual pages built or
available using SmartStyles will be referred to as Smart Pages. Each page in the ptp file is a Page Type
(different types of pages available for a particular Smart Style).
This is the Pages
Category and is a view of the pages.wbk Catalog
file.
Each Page Type is defined by a tbpage file that is found in the
\Spclst\Styles\Page Types folder. These files are simple XML files. For instance, the file Text and Image.tbpage looks like this:
<?xml version="1.0"?>
<toolbook:Page xmlns:toolbook="sumtotalsystems:toolbook:tbpage"
underlay="Standard
Background"
class="text-plus-image"
layout="two-column-right"
name="Text
and Image"
usage="Title,Introduction,Chapter Heading,Content,Summary"
description="A
page with a single text field and single image.">
<toolbook:TextField class="topic-title"
name="Topic">%PAGENAME%</toolbook:TextField>
<toolbook:TextField class="content" name="BodyText">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate
velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.</toolbook:TextField>
<toolbook:Image class="content"
column="2" name="Image Placeholder"/>
</toolbook:Page>
Notice that the Page Type includes
an underlay, class, layout, name, usage, and description:
- underlay
– defines which background to be
used, Standard Background in this case
- class –
defines the page class, text-plus-image
in this case.
- layout –
the basic layout of objects on the page, two-column-right in this case.
- name –
the actual name of the Page Type, Text
and Image in this case.
- usage –
defines how a page can be used, Title,
Introduction, Chapter Heading, Content, or Summary in this case.
- description – a general
description of the use of the page, a page with a single text field and a
single image in this case.
These Page Types are referenced
by a SmartStyle Outline when the Book Wizard is used
to build a book. These files are also
XML files and are tbOutline files found in the \Spclst\Outlines folder. This is the quiz1.tbOutline file that
defines a Simple Quiz:
<outline name="Simple
Quiz" description="Simple Quiz Outline - Provides a basic structure
for a quiz.">
<page name="Title"
page-type="Text"/>
<page name="Objectives"
page-type="Text"/>
<page name="Interaction" page-type="Multiple
Choice Question"/>
<page name="Interaction"
page-type="True-False Question"/>
<page name="Interaction" page-type="Fill in
the Blank Question"/>
<page name="Summary/Score" page-type="Text
with Score Button"/>
<page name="Return to LMS" page-type="Text
with Exit Button"/>
<page name="Remedial Feedback"
page-type="Text with Back Button"/>
</outline>
A Smart Object is a term I am currently using
to describe any object that can have one or more of it’s properties modified as
a result of having a different Smart Style applied to the book that the object
is located in. The following sections
will go into a bit of detail about the various Smart Objects starting with the
book itself.
A Smart Book
When you use a template, build a book using the Book
Wizards, or add a style to a book, a special book property TBK_Styles_StyleName, is used to
make the book a Smart Book.
In the example shown here, the Basic
style has been applied to the current book.
A Smart Background
A Smart Background has a property named TBK_StylesPageType
that identifies which background that is used.
In the example here, it is Standard
Background. All Smart Objects below
the book level (backgrounds, pages, buttons, fields, etc.) have a special
User-defined property named TBK_Styles_ElementName.
In the case of a background, this property is set to toolbook:Page. Note that each element name will be
preceded by toolbook:.
With the SmartSim Product that Lee Karns and I have developed,
we have created a different background for our Simulation Page types. Here you
see I have set that Smart Background’s TBK_StylesPageType property to Sim StandardBackground.
A Smart Page
A Smart Page also has the property TBK_Styles_ElementName. In the case of a Smart Page, this is also toolbook:Page.
A Smart Button
A Smart Button also has the TBK_Styles_ElementName property. In the case of a normal button on a page or
background, the value is toolbook:Button. If you look at an Exit button, it is toolbook:Exit
since this button has different properties as compared to a normal button.
Notice also that with a button, you have several properties that control the
various button graphics for the current style: TBK_Styles_ButtonMaster(checked), TBK_Styles_ButtonMaster(normal), etc.
A Smart Field
The element name for a field is
identified like this: toolbook:TextField.
Each object on the foreground of
a page, such as the field named Topic
and the field named BodyText has a class value which then determines the style of that object. These properties are set up in a Cascading
Style Sheet (css file). The field topic has the class topic-title,
while the field bodytext
has the class content. The User-defined property for the class is TBK_Styles_Class. This also applies to the various record
fields on the background of a page.
Under the
Hood with the Styles
In the previous sections, I introduced quite a bit of new
vocabulary including User-defined properties such as TBK_Styles_ElementName and TBK_Styles_Class. In this section, I will take you “under the
hood” and give some specifics as to how all this works.
The tbStyle File
As explained earlier, the tbStyle file is the Style Deflnition file and this file is found in the Spclst\Styles\Style Definitions
folder. For the Basic Smart Style, there is a basic.tbstyle
file. This file is actually a zip
file. If you have Winzip
installed, all you need to do is right-click over the file and choose Open With, Winzip Executable as shown here, you can see the
listing of files in this tbStyle file.
This is the listing of files in this zip. These are all the “assets” that make up this
style, including all the graphics for the background and buttons as well as the
Cascading Style Sheet (basic.css):
Hopefully, you can see from this just how easy it might be
to create your own style by cloning this one. You could extract the graphics,
make changes to them and then rezip the files. Just
remember that when you rename the tbstyle file, then you also must rename the css file
accordingly.
The CSS File
The Basic.css (Cascading Style
Sheet) contains all the actual Style Definitions. Below is the part of that file (which can be
edited with Notepad) that defines the style for the topic-title Class which is the Class for the topic field.
TextField.topic-title
{
position:
t;
font-family:
Times New Roman;
font-size:
18pt;
font-weight:
bold;
margin-top:
auto;
margin-bottom:
auto;
}
Here you see the typical dot notation if you are familiar
with Cascading Style Sheets. The format
is Element Name.Class
and thus you see TextField.topic-title where the Element Name is TextField and the Class
is topic-title. Any field that has the property TBK_Styles_ElementName=toolbook:TextField and TBK_Styles_Class=topic-title will have text that is Times New Roman, Bold, 18. As with the graphics, you should see here
that to change the style, all you would need to do is make a few edits for the
various sections of this CSS file. This is the section that controls the style
for the Title and Sub-Title record fields with the Title record field having the lesson-title Class and the Sub-Title record field having the chapter-title Class:
TextField.lesson-title, TextField.chapter-title
{
position:
l;
font-family:
Tahoma;
color: rgb( 134, 150, 130 );
}
Here you see that we can also control the color of the
text.
Finally, this is a part of the CSS that controls the
various graphics for a button such as the Menu
button:
NavPanel::menu
{
background-image:
url ( "Basic-menu-normal.gif"
);
background-color:
transparent;
}
NavPanel::menu:active
{
background-image:
url ( "Basic-menu-invert.gif"
);
}
NavPanel::menu:disabled
{
background-image:
url ( "Basic-menu-disabled.gif"
);
}
NavPanel::menu:hover
{
background-image:
url ( "Basic-menu-hover.gif"
);
}
If you created your own style and changed the names of the
graphics, you would need to make the changes here also.
TCC Publishing, Inc
Internet Address: tomhall1@tcc-pub.com
Phone:
252-758-4590
Fax:
252-758-4590