CUSTOMIZING THE HTML VIEWER AND CREATING TEMPLATES - RIVERSIDE

In this exercise you make some modifications to the interface of the HTML Viewer by manipulating the frameset, adding custom tool icons,  and changing the interface to reflect a custom look and feel.  Once you have completed these customizations, you will create a template from your customized web site that will allow you to create similar web sites in the future using ArcIMS Designer.

Step 1 - Setup and View the Web Site

1. Copy this folder to your c:\arcims\website folder:

n:\int_gis_map\labs\Ex09

Move the two AXL files, Riverside.axl and RiversideOV.axl to c:\arcims\website

2. Using ArcIMS Administrator create two services with the following properties

3. Start your browser and go to http://cfd312xxx/website/Ex09 to ensure the service and web site are functioning.

4. Leave your browser open

Step 2 - Replace the Tool Images

All the tools and buttons in the HTML Viewer are .gif images. If you would like to create your own images, you can replace the existing tool and button images with your own.  In this step, you will replace some of the default images with custom images.  The custom images follow the naming convention of the default tools and buttons so you can simply replace the default images.

1. Copy the following images from n:\int_gis_map\labs\exercise09\images and paste them in c:\arcims\website\Ex09\images

fullextent_1.gif
identify_1.gif
identify_2.gif
pan_1.gif
pan_2.gif
zoomin_1.gif
zoomin_2.gif
zoomout_1.gif
zoomout_2.gif

Click Yes if prompted to overwrite existing files.

2.  Refresh your browser (Ctrl + F5)

You should notice that the default images have been replaced, but the new images do not appear to fit in the space allocated.  The new images are larger than the default tool and button size (16x16 pixels).  You will need to modify the toolbar to accommodate these new images.  Since there are very few tools and buttons in the current web site, it also makes sense to put them in a single column rather than the default two column table.  The toolbar is a dynamically written (document.writeln) HTML table.  The table is written dynamically to take into account the variable in the ArcIMSParam.js file.

3. In Front Page, open toolbar.htm from the Ex09 Web site directory.

4. Use the replace tool to search for all occurrences of isSecond = ! isSecond; and replace with isSecond = true;

The Legend List/Layer button and the Overview Map button are placed in the toolbar in the same row.  Add the following line of code (in bold) to make each button appear in its own row:

if ((parent.MapFrame.hasTOC) && (parent.MapFrame.aimsLegendPresent)) {
// Legend toggle. . . requires aimsLegend.js
document.write('<td align="center" valign="middle">');
document.write('<img src="images/togglelegend.gif" width=16 height=16 hspace=1 vspace=0 border=0 alt=" ' + t.buttonList[14] + '" name="legend" onmousedown="parent.MapFrame.clickFunction(\'legend\');" onmouseover="window.status=\' ' + t.buttonList[14] + '\'">');
isSecond = true;
//***Exercise 9 Step 02.4: Add code to end a table row and start a new one
document.write('<tr><tr>');
document.writeln('</td>');
}
 

Notice that all the pieces of code that write out this table begin with an if ()statement.  This is checking global variables defined in the ArcIMSParam.js file to see whether that particular button or tool has been set to true.

The size of the new images is 80 x 20 pixels.  You will need to edit toolbar.htm to accommodate this new size.

5. Find the code to dynamically write the table cell for the zoom in tool and modify the width and height attributes as follows:

if (parent.MapFrame.useZoomIn) {
// Zoom In . . . requires aimsNavigation.js
document.write('<td align="center" valign="middle">');
//***Exercise 9, Step 02.5: Edit the width and height attributes
//**Exercise 9, Step 3.6: Write code to handle the rollover
document.write('<img src="images/zoomin_1.gif" width= 80 height=20 hspace=1 vspace=0 border=0 alt=" ' + t.buttonList[16] + '" name="zoomin" onmousedown="parent.MapFrame.clickFunction(\'zoomin\'); setToolPic(\'Zoom In\');" onmouseover="window.status=\' ' + t.buttonList[16] + '\'">');
isSecond = true;
document.writeln('</td>');
if (isSecond) document.write('</tr><tr>');
}
 

6. Edit the width and height for the following tools or buttons:

7. Save your changes to toolbar.htm

8. Refresh your browser (Ctrl + F5)

You should now have a one column toolbar and toolbar cells should be appropriate for the size of the new images.  The frame allocated for the toobar is too small for the larger tools.

9.  In Front Page. open the viewer.htm file from your Ex09 web site.

10. Modify the size of the toolbar frame as follows (change the values in bold):

document.writeln('</HEAD>');
//***Exercise 9, Step 4.11: Make the topframe bigger
document.writeln('<FRAMESET ROWS="' + (30+addNS) + ',*,30,0" FRAMEBORDER="No" FRAMESPACING="0" onload="doIt()" BORDER=0 ' + moreStuff + '>');
document.writeln(' <FRAME NAME="TopFrame" SRC="top.htm" MARGINWIDTH="5" MARGINHEIGHT="0" SCROLLING="No" FRAMEBORDER="0" NORESIZE>');
//***Exercise 9, step 2.10: Modify the size of the tool bar frame
document.writeln(' <FRAMESET COLS="' + (90+addNS) + ',*,180" FRAMEBORDER="No" FRAMESPACING="0" BORDER=0>');
document.writeln(' <FRAME NAME="ToolFrame" SRC="blank.htm" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLLING="No" FRAMEBORDER="0" NORESIZE FRAMESPACING="0" BORDER="0">');
document.writeln(' <FRAMESET ROWS="*,110"> ');

11.  Save your changes to viewer.htm

12. Refresh your browser.

Your toolbar with the new tool and button images should now be the correct size.  Note: If you were creating this web site as a template and plan to use additional tools and buttons in web sites in the future, you may want to modify the width and height of all the tools and buttons and replace all of the tool and button images with custom ones.

Step 3  - Customize the Interface

You will now modify the interface by adding your own logo, changing the background color for the HTML pages, removing the backgroup image from the HTML pages and replacing the animated .gif that display whenever the HTML  Viewer is waiting for a response from the ArcIMS server.

You can create your own animated .gif images if you would like to replace the default one displayed in the HTML Viewer.  Two custom animated .gifs have been created for you. 

1. Copy loadData.gif and loadMap.gif from n:\int_gis_map\labs\exercise09\images to c:\arcims\website\Ex09\images replacing the existing images.

The image that appears in the top left corner of the HTML Viewer is called aimslogo1x2.gif.  In the step below you will copy a custom aimslog1x2.gif into your HTML Viewer.

2. Copy aimslogo1x2.gif from n:\int_gis_map\labs\Exercise09\images   to c:\arcims\website\Ex09\images.

Since you have replaced images in the HTML Viewer with ones with the same name. you browser may have cached the old images.  To get the new images displayed, you may need to clear the browser's cache.

3. In Internet Explorer, clear the cache by navigating to Tools > Internet Options > Gneral > Delete Files> OK.

4. Refresh your browser (Ctrl + F5)

You should see the new animated gif briefly and the image in the upper left corner is new but the frame is not big enough to display it properly.  You will modify the frameset and top.htm to accommodate this larger image.

5. In Front Page open top.htm

6.  In the BODY element, delete the background attribute and value.

7. In the BODY element, edit the bgcolor to blue.

8. In the IMG element, edit the width and height attributes to 89.

9. Save your changes to top.htm

10. In Front Page open viewer.htm

11. Make the top frame larger by making the following edit (in bold):

document.writeln('</HEAD>');
//***Exercise 9, Step 4.11: Make the topframe bigger
document.writeln('<FRAMESET ROWS="' + (89+addNS) + ',*,30,0" FRAMEBORDER="No" FRAMESPACING="0" onload="doIt()" BORDER=0 ' + moreStuff + '>');
 

12. Save the change to viewer.htm

You will now make the background color of the other HTML pages blue and remove any background images.

13. Using Front Page, set the BODY element's bgcolor attribute in:

TOCFrame.htm, toolbar.htm, toc.htm, bottom.htm and ModeFrame.htm

Note: Changing the background color of these frames is one of the most important design decisions you can make.  Only 16 color names are supported by the W3C HTML 4.0 standard (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow). For all other colors you should use the Color HEX value.  Here is a website that will give you a large set of those HEX colors - http://www.w3schools.com/html/html_colornames.asp

So, for example, if you wanted these background colors to be Alice Blue you would replace the bgcolor attribute value to #F0F8FF (in quotes).  Choose a nice mild background color from the ones listed.

14. Remove the BODY element's background attribute in: top.htm, bottom.htm and ModeFrame.htm

15.  In the viewer.htm file, change the title variable to read:

// Designer will set the next variable - theTitle
var theTitle = "______Template";

Replace ______ with the name of your color choice for the background colors.

16.  Save all your changes

17.  Refresh your browser (Ctrl + F5)

You should see a new interface in your selected color with no graduated gray bars and a new title reflecting your color choice.

Step 4 - Put the Overview Map in a Separate Frame

In this step you will move the overview map from its default location on a Cascading Style Sheet to a new frame that you will create.

Disable the current overview map location:

1. Open the MapFrame.htm file and find the following lines of code (new code in bold):

// overview map and shadow
content = '<img name="ovShadowImage" src="images/gray_screen2.gif" border=0 ';
//if (isNav5up) content += 'width=' + (locWidth+4) + ' height=' + (locHeight+4);
content += '>';
//***Exercise 9, Step 5.1: Remove the overview CSS-->
createLayer("ovShadow",0,0,0,0,false,content);
if ((isNav4) || (isIE)) clipLayer("ovShadow",0,0,0,0);
//content = '<img name="ovImage" src="images/locmap.gif" border=2 width=' + locWidth + ' height=' + locHeight +' onmousedown="ovMap2Click(event)">';
content = '<img name="ovImage" src="images/locMap.gif" border=2 width=' + locWidth + ' height=' + locHeight +'>';
createLayer("ovLayer",0,0,0,0,false,content);
setLayerBackgroundColor("ovLayer", "white");
// overview extent box
content = '<img name="zoomOVImageTop" src="images/pixel.gif" width=1 height=1>';
createLayer("zoomOVBoxTop",0,0,0,0,false,content);
content = '<img name="zoomOVImageLeft" src="images/pixel.gif" width=1 height=1>';
createLayer("zoomOVBoxLeft",0,0,0,0,false,content);
content = '<img name="zoomOVImageRight" src="images/pixel.gif" width=1 height=1>';
createLayer("zoomOVBoxRight",0,0,0,0,false,content);
content = '<img name="zoomOVImageBottom" src="images/pixel.gif" width=1 height=1>';
createLayer("zoomOVBoxBottom",0,0,0,0,false,content);

2. Open ArcIMSParam.js and find this line of code:

var ovMapIsLayer = true;

3. Change this variable to false.  This informs the viewer that the overmap is not going to be present in the MapFrame.  If you just wanted to get rid of the overmap you would change the variable  hasOvMap to false.  You are going to put the overmap in a different place.

4. Save your work

5. Refresh your browser (Ctrl + F5)

You should notice that even though the overview extent box will still be visible in the upper left hand corner of the map, the overview map itself is not visible. 

6.  Open the viewer.htm file and add the following bold lines of code to create a new frame:

The JavaScript code for making the overview map work in its own frame is in a file caled overview.htm.

7. Copy overview.htm from c:\student\cims\Exercise09 to c:\arcims\website\Ex09

8.  In the ArcIMSParam.js file, find the following line of code in the checkParams function:

ovImageVar = document.ovImage;

9. Change this code so that the new OverviewFrame references the overview image.  The code should look like this:

ovImageVar = parent.OverviewFrame.document.ovImage;

10.  Save your work and refresh your browser.  You should see the overview map in its own frame on the lower right hand corner.

There are still a few small issues to clean up before saving this web site as a template.

11.  The Toggle Overview map button is still visible in the toolbar. Open toolbar.htm and find this code.  Make the changes in bold:

if (parent.MapFrame.hasOVMap) {
// Overview Map toggle . . . requires overview map
//document.write('<td align="center" valign="middle">');
//document.write('<img src="images/overview_html.gif" width=16 height=16 hspace=1 vspace=0 border=0 alt=" ' + t.buttonList[15] + '" name="refmap" onmousedown="parent.MapFrame.toggleOVMap();" onmouseover="window.status=\' ' + t.buttonList[15] + '\'">');
//isSecond = true;
//document.writeln('</td>');
//if (isSecond) document.write('</tr><tr>');
}
You are commenting out the code so it will not write out a toggle overview map on/off button which doesn't work anyway.

12.  Replace the ArcIMS copyright blurb with something else, e.g. Geog 518 - CCSU Fall 2004.  Open the ArcIMSParam.js

var CopyrightText = "Geog. 518 CCSU Fall 2004";

13. Remove the line above the word "Layers" in the table of contents. Open toc.htm and remove the following line:

<HR WIDTH="75%">
14.  Save your changes and refresh your browser (Ctrl + F5)

Step 4 - Replacing the Retrieving Data .GIF file

One of the early customizations a lot of people make is to replace the Retrieving Data animated gif file so people think... maybe this isn't an ArcIMS site.  First, you need a gif file.  Go to Google, type in animated gifs, find a free web site and get one.  Place it in the IMAGES folder of the c:\arcims\website\Ex09\Images folder with its original name.  In order for this to work you will need to change the width and height of the images that get drawn because yours is very unlikely to match the Retrieving Data gif file exacty.

From the Accessories menu open the animated fig in Paint.  From the Image menu option pull down to attributes and write down the width and height of the gif file.  In the images folder, rename loadMap.gif to loadMap.bak and loadData.gif to loadData.bak and rename your animated gif to loadMap.gif.  Then copy it and rename the copy to loadData.gif.  Now you have replaced those two gif files with your animated one.

Next open your mapframe.htm table and locate this section of text;

Change all the width and height values to the width and height of your gif file.  Save your changes and reload your map.

Step 5A - Create a Template from the Web Site

The steps below come from the ESRI training course on customization using HTML and Java.  However, I and students have had great difficulties implementing this process.  If there is some very small mistake your web site will not load and these mistakes are very difficult to track down. Try this process at your own risk.  For an easier way, go directly to Step 5.

Now that you have spent all this time making changes to the HTML Viewer it might be nice to use this Web site as a template for all new Web sites created using Designer.  This can be done using a Java Development Kit (JDK) such as the one you have on your computer if you are running ArcIMS.  The default template Designer uses is a Java Archive (JAR) file that is located in you <arcims_install_directory>/manager/designer/templates.  Note: You must have full control privileges on this folder to be able to replace files in it.  Dr. Harmon may have to set those privileges for you.

In this step you will create a new JAR file from your customized Web site, place it in the templates directory, and rename it html.jar.  To turn an existing Web site into a template you must first modify viewer.htm and ArcIMSParam.js.

1. In the c:\arcims\website\Ex09 folder open the viewer.htm file.

2. Replace the value of the variable theTitle with var theTitle = "###TITLE###";

3. Save your changes and close the viewer.htm file.

4. Open the ArcIMSParam.js file.

5. FInd the following lines:

//*********************************************************************
//* parameters set by Designer *
//*********************************************************************
var imsURL = 'http://' + hostName + '/servlet/com.esri.esrimap.Esrimap?ServiceName=Riverside';
var imsOVURL = 'http://' + hostName + '/servlet/com.esri.esrimap.Esrimap?ServiceName=RiversideOV';
.
.
.
// End of Designer set parameters

6. Replace all the lines above including those indicated with the ellipses (...) with the the following:

//Do not edit the following lines
//DESIGNERSETSPARAMETERS
//Do not edit the above line
//End of Designer set parameters

Note: the word DESIGNERSETSPARAMETERS is the key word that Designer looks for when creating a Web site.  It must be spelled exactly as above.

7. Save your changes and close the ArcIMSParam.js file.

Designer will look for the lines above and replace them with user set parameters.  Next you will create a JAR file from the EXx09 Web site.

8. Open a command prompt (Accessories>Command Prompt) and navigate to c:\arcimswebsdite\Ex09. (get to drive C:\ and type cd c:\arcims\website\Ex09)

9.  Type c:\j2sdk1.4.2\bin\jar -cvf myhtml.jar *.*

You should see a list of files from your customized Web site that are being included in the JAR file.  All of the files in the Ex09 Web site are archived into a JAR file named myhtml.jar.

10.  Use Windows Explorer to navigate to the c:\arcims\website\Ex09 directory.

11.  Copy the myhtml.jar file to c:\program files\ArcGISIMS\ArcIMS\Manager\Designer\templates.

12.  Rename the existing html.jar file in the templates directory to old_html.jar

13.  Rename the myhtml.jar file to html.jar

The new template will be used every time Designer creates a web site.  To confirm that the new template is working, create a Web site using Designer.  The new Web site should contain the custom frameset, logo image and custom retrieving image.  In a work environment you might want to have several different templates.  Every time you wanted Designer to use a different one, you would rename html.jar to what it actually is, e.g. Blue_Frame.jar and then rename the template you want to use to be html.jar.  Then all new websites would be created using the new template until you changed it back to something else.

What they really need is a pull-down menu of all the templates in the folder that would allow you to select the template you wanted to use instead of going through this set of steps.

Note:  If you included more tools and buttons in your new Web site than you altered in Ex09 (the ones left are toggle legend/layer, full extent, zoom in, zoom out, pan and identify) there will be no custom images for those tools or buttons.

Step 5B - A Quick and Dirty Way to Copy a Website with a Different Service

Once you have the website the way you like it you might want to place different map services in the mapframe.htm frame.  Use the following steps:

1. Create the AXL file for the service

2. Create the service

3. Create an out of the box website for the service; all you need from this website are a few lines from the ArcIMSparams.js file but you need to go through the Designer steps to create that file.

4. Copy the website folder of the website you wish to duplicate with the new service.  Rename it to what you want to call the website.

5. Get into the ArcIMSParams.js file of the website you created in step 3 (the out of the box website) and copy these lines to the clipboard:
    

   var imsURL = 'http://cgissrv1.ccsu.edu/servlet/com.esri.esrimap.Esrimap?ServiceName=world_120_2';
   var imsOVURL = 'http://cgissrv1.ccsu.edu/servlet/com.esri.esrimap.Esrimap?ServiceName=world_120_2';
   var imsQueryURL = '';
   var imsGeocodeURL = '';
   //initial map extent
   var startLeft = -22279819;
   var startRight = 21933454;
   var startTop = 11924288;
   var startBottom = -14101530;
   //maximum map extent
   var limitLeft = -2.00375070671618E7;
   var limitRight = 2.0670937707221925E7;
   var limitTop = 1.2659135538861299E7;
   var limitBottom = -1.46526651139651E7;

   These variables define the service for the main map, the overview map and the initial startup extent.
   
    

6. Get into the ArcIMSparams.js file of the website you have duplicated, delete those lines from the file and replace them with the ones on the clipboard.  All you are doing is replacing the service and initial extent variables.  Remember, you will only have access to the tools that are included in the toolbar.htm file for the new service; the parameters you set in Designer for the temporary website may or may not be available.