HTMLSample Help/buttons.html

<HTML>
<HEAD>
   <TITLE>Customizing HTMLSample</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<H1><A NAME=top></A></H1>
 
<H1>Customizing HTMLSample</H1>
 
<H3>Contents</H3>
 
<UL>
   <LI><A HREF="#overview">Overview</A></LI>
   
   <LI><A HREF="#defaultpage">Setting the default page</A></LI>
   
   <LI><A HREF="#errorpage">Setting the error page</A></LI>
   
   <LI><A HREF="#custombuttons">Adding custom buttons</A></LI>
   
   <LI><A HREF="#example">An Example Button</A>
   
   <UL>
      <LI><A HREF="#target">The target file</A></LI>
      
      <LI><A HREF="#appearance">The button's appearance</A></LI>
      
      <LI><A HREF="#cicb">The CICB resource</A></LI>
      
      <LI><A HREF="#rbcl">The RBCL resource</A></LI>
   </UL>
   </LI>
   
   <LI><A HREF="#applinks">Adding application links</A></LI>
</UL>
 
<P><A NAME=overview></A></P>
 
<P>&nbsp;</P>
 
<H3>Overview</H3>
 
<P>HTMLSample is an application that demonstrates the capabilities of
the HTMLRenderingLib that is new for Mac OS 9. Facilities have been
provided for adding custom buttons to the control bar at the top of
the window, and for setting the default page displayed in a windows
when no other file has been specified.</P>
 
<P><A NAME=defaultpage></A></P>
 
<P>&nbsp;</P>
 
<H3>Setting the default page</H3>
 
<P>To set the default file displayed by HTMLSample, edit the 'CSTR'
ID=128 resource. This resource contains a HTML link referring to a
file relative to the application's folder. Whenever an empty window
is created by default, the application will display this file. For
example, to display the file 'index.html' that is located in the
folder 'HTMLSample Pages' that is located in the same directory as
the HTMLSample application, we would save the following link in the
'CSTR' ID=128 resource:</P>
 
<BLOCKQUOTE>HTMLSample%20Pages/index.html</BLOCKQUOTE>
 
<P>To display this link, the HTMLSample catenates it together the URL
referring to the application's directory. Once the full URL has been
determined, the program displays the page in the window.</P>
 
<P><A NAME=errorpage></A></P>
 
<P>&nbsp;</P>
 
<H3>Setting the error page</H3>
 
<P>To set the HTML file displayed by HTMLSample when a page cannot be
located, edit the 'CSTR' ID=129 resource. This resource contains a
HTML link referring to a file relative to the application's folder.
Whenever the HTMLRenderingLib is asked to display a URL that does not
map to a file on disk, the application will display this file. In
this example, the 'CSTR' ID=129 resource contains the following
application relative link:</P>
 
<BLOCKQUOTE>HTMLSample%20Pages/error.html</BLOCKQUOTE>
 
<P>To display this link, the HTMLSample catenates it together the URL
referring to the application's directory. Once the full URL has been
determined, the program displays the page in the window.</P>
 
<P><A NAME=custombuttons></A></P>
 
<P>&nbsp;</P>
 
<H3>Adding custom buttons</H3>
 
<P>Navigation controls built in to the top of the window are grouped
into two types. As shown in figure 1, there are the built in
navigation buttons (back, home, and forward) and there are custom
buttons that you can add via a utility such as ResEdit.</P>
 
<P><IMG SRC="images/buttons.gif" WIDTH=231 HEIGHT=90 ALIGN=bottom></P>
 
<P><B>Figure 1</B>. Built-in and custom buttons.</P>
 
<P>ResEdit templates have been included in the resource fork of this
application for accessing the necessary resources. Be sure to make a
backup of the application before doing any editing.</P>
 
<P>Buttons are described in a 'CICB' resources. These resources
include the following information:</P>
 
<UL>
   <LI>A boundary rectangle for the icon. For this version of
   HTMLSample, for custom buttons this should always be the bounding
   rectangle { 0, 0, 32, 32 }</LI>
   
   <LI>A state value. This is used internally by HTMLSample and
   should be set to zero.</LI>
   
   <LI>Three 'cicn' id numbers for drawing the button in one of three
   states. These include disabled, enabled, and pressed. These id
   numbers are used to retrieve the 'cicn' resource used to draw the
   button in whatever state it happens to be in.</LI>
   
   <LI>Button link. For custom buttons, this string should be a html
   link relative to the application's directory that refers to a html
   file to be displayed when the user clicks on the button.</LI>
</UL>
 
<H3><A NAME=example></A></H3>
 
<P>&nbsp;</P>
 
<H3>An Example</H3>
 
<P>Consider the button that opened this page. Here, the button opens
the HTML file named 'buttons.html' located in the 'HTMLSample Help'
folder that is in the application's directory.</P>
 
<H4><A NAME=target></A></H4>
 
<P>&nbsp;</P>
 
<H4>The target file</H4>
 
<P>The html link referring to this file is:</P>
 
<BLOCKQUOTE>HTMLSample%20Help/buttons.html</BLOCKQUOTE>
 
<P>When the HTMLSample application attempts to display this page, it
calculates the URL for the application's directory and catenates it
with the link to determine the page's URL. Once the URL has been
determined, the application displays the page in the window.</P>
 
<H4><A NAME=appearance></A></H4>
 
<P>&nbsp;</P>
 
<H4>The button's appearance</H4>
 
<P>To define the appearance of the button, we have used the three
color icons ('cicn' resources) shown in figure 2. The ID numbers for
these resources are stored in the <A HREF="#cicb">CICB
resource</A>.</P>
 
<P><TABLE BORDER=0>
   <TR>
      <TD>
         <P ALIGN=center><B>Disabled 'cicn'</B></P>
      </TD>
      <TD>
         <P ALIGN=center><B>Enabled 'cicn'</B></P>
      </TD>
      <TD>
         <P ALIGN=center><B>Pressed 'cicn'</B></P>
      </TD>
   </TR>
   <TR>
      <TD>
         <P ALIGN=center><IMG SRC="images/disabled.gif" WIDTH=32 HEIGHT=32 ALIGN=bottom><BR>
         'cicn' ID = 136</P>
      </TD>
      <TD>
         <P ALIGN=center><IMG SRC="images/moofbutton.gif" WIDTH=32 HEIGHT=32 ALIGN=bottom><BR>
         'cicn' ID = 137</P>
      </TD>
      <TD>
         <P ALIGN=center><IMG SRC="images/pressedmoof.gif" WIDTH=32 HEIGHT=32 ALIGN=bottom><BR>
         'cicn' ID = 138</P>
      </TD>
   </TR>
</TABLE>
<BR>
<B>Figure 2</B>. Custom buttons used in this example.</P>
 
<P>IMPORTANT: The disabled color icon resource ('cicn' ID = 136) is
used by the default buttons. Do not remove or delete this 'cicn' if
you are editing the file.</P>
 
<P><A NAME=cicb></A></P>
 
<P>&nbsp;</P>
 
<H4>The CICB resource</H4>
 
<P>The CICB (Color ICon Button) resource provides a place to store
icon's target and appearance information. In this example, we have
created a 'CICB' resource with ID number 132. Figure 3 shows how this
resource appears in a ResEdit window using the 'CICB' template in
application's resource fork.</P>
 
<P><IMG SRC="images/CICB.gif" WIDTH=408 HEIGHT=274 ALIGN=bottom></P>
 
<P><B>Figure 3</B>. ResEdit window displaying the 'CICB' resource
used in this example.</P>
 
<P>Here, the disabled, enabled, and down fields contain id numbers
referring to the color icon 'cicn' resources we will be using, and
the string data field contains the path name referring to the file we
want displayed when the button is clicked.</P>
 
<P><A NAME=rbcl></A></P>
 
<P>&nbsp;</P>
 
<H4>The RBCL resource</H4>
 
<P>The RBCL resource provides a place to store id numbers of all of
the custom icon button resources that the application should display
to the right of the default buttons. In the illustration shown in
figure 4, there are two resources. ID number 131 refers to the help
or question mark button, and ID number 132 refers to the button
created in this example.</P>
 
<P><IMG SRC="images/RBCL.gif" WIDTH=408 HEIGHT=274 ALIGN=bottom></P>
 
<P><B>Figure 4</B>. ResEdit window displaying the 'RBCL' resource
used in this example.</P>
 
<P>In this implementation, the RBCL resource may contain up to 4
custom buttons.</P>
 
<P>&nbsp;<A NAME=applinks></A></P>
 
<P>&nbsp;</P>
 
<H3>Adding application links</H3>
 
<P>Any links in the HTML being displayed by this application that
refer to application files will launch those applications when they
are clicked.</P>
 
<P>&nbsp;</P>
 
<P>&nbsp;</P>
 
<P></P>
</BODY>
</HTML>