Morphic Molecules
Technotes
MsgPanel Applet

©Mona M. Everett, Ph.D.; MsgPanel Applet ©Mona M. Everett, Ph.D. All rights reserved. MsgPanel Applet May be used for any NONCOMMERCIAL USE. Java is a copyrighted product and licensed trademark of Sun Microsystems. Javascript is a copyrighted product and licensed trademark of Netscape, Inc.

Table of Contents

Please note that some parameters are listed under more than one topic. For example, Font Color is listed under both Colors and Fonts.

Integer Parameters

Parameters which are translated into integers internally:

Margin Widths, Border Width, Font Size

Colors

Parameters which are translated into Color objects internally:

Font Color, Border Color, BGColor

Fonts

Parameters which have to do with the Font used to print the message:

Font Face, Font Size, Font Color, Font Style

Strings

Values passed into internal strings. These are usually but not always restricted to values in an acceptable list:

Inset, Justification, Font Face, Message

Commented Paint () method of the msgPanel applet

The paint() method actually draws the applet. This method is presented line by line with comments.

Source Code for the Entire Applet

A link to msgPanel.java file. You can save it to your hard disk.

Integer Parameters:
Margin and Border Widths; Font Size

[TOC]

General Method Notes

• All set method require a single variable to be passed as a string.
• All get methods return a single variable as a string.
• The applet internally converts these strings to and from integer values.
• The set methods check to see if you have passed null or an invalid parameter. If so, the variable is set to the default

Java Implementation

Set Method

• Check for null; the parameter may not be defined.
• Use try...catch to validate change to integer.
• If not an integer, set to default and send debugging error to Java console.
• Repaint the application to make change effective.

public void setVMargin(String what)
    {
        if (what == null) { vmargin = 10; }
        else
        {
            try
            {
                vmargin = Integer.parseInt(what);
            }
	        catch (NumberFormatException e)
	        {
	            vmargin = 10;
	            System.err.println("Received vmargin " + what + " is not an integer! Set to default of 10");
	        }
        }
        repaint();
    }

Get Method

• You MUST define a new string to return to requestor.
• Once the string is defined, use valueOf(int) method to convert the integer to a string.

    public String getVMargin()
    {
        String astr = new String();
        return astr.valueOf(vmargin);
    }

Javascript Manipulation

• Called from onclick="..." routine of a button. No parameters are passed. The routine has to know internally what form and elements to look at.
• Looks at three text boxes(hrmarg, vtmarg, and bwid) and puts their values into internal variables (hm,vm,bm)
• Converts all of the variables to integers with parseInt(var). You MUST return into a new variable. Javascript will NOT let you start with something which it sees as a string and convert that variable into an integer. You will get an error if you try.
• Check for not a number with isNAN(int). If variable is not a number, return an alert to the user.
• Otherwise, convert the parsed integer back to a string with varint.toString(). Do this instead of using the original string because parseInt will do some error checking.
• Set the value of the variables with document.appletName.setVariable(string).

function setMargins()
{
    // get the values
    var hm = document.forms[0].hrmarg.value
    var vm = document.forms[0].vtmarg.value
    var bm = document.forms[0].bwid.value
    //alert('hm = ' + hm +'\nvm = ' + vm + '\nbm = ' + bm)
    // change to integers
    var _hm = parseInt(hm)
    var _vm = parseInt(vm)
    var _bm = parseInt(bm)
    //alert('_hm = ' + _hm +'\n_vm = ' + _vm + '\n_bm = ' + _bm)
    // check for validity and set values
    if (isNaN(_hm) || hm == '' )	alert ("Hmargin setting is not a number or is empty.")
    else document.theMsg.setHMargin(_hm.toString)
    if (isNaN(_vm) || vm == '' )	alert ("Vmargin setting is not a number or is empty.")
    else document.theMsg.setVMargin(_vm.toString())
    if (isNaN(_bm) || bm == '' )	alert ("Borderwidth setting is not a number or is empty.")
    else document.theMsg.setBorderWidth(_bm.toString())
}

[TOC]

Colors:
Font, Background, and Border Colors

[TOC]

General Method Notes

• Colors cannot be set as strings. The string representation has to be converted into a color object.
• There are "stock" colors which can be used. This applet currently accepts only stock colors.
• There is no easy way to turn a string representation into a color object.
• Color conversion from string to color object is done by the chooseColor private function.

Java Implementation

Set Method

• Check for null. The applet parameter may not be set. Print debugging message if null and set to default blue.
• Use Color = chooseColor(string) to convert to color object.
• Call repaint() to implement change.

public void setFontColor(String what)
    {
        if (what == null)
        {
            what = "blue";
            System.err.println("Null value was passed for font color; setting it to default blue");
        }
        theFontColor = chooseColor(what);
        repaint();
    }

Get Method

• Convert color object to string representation with color.toString().

    public String getFontColor()
    {
        return theFontColor.toString();
    }

color = ChooseColor (string)
(private internal function)

• Declare local Color object
• Use greatly extended if..then..else to convert to stock color object if the string passed was not null.
• If string did not represent a valid color, set to default darkgray and print an error message defining valid colors.
• If parameter passed was null, set to default darkgray and print an error message.

Color chooseColor(String thecolor)
    {
        Color what;
        System.err.println("You passed the color " + thecolor );
	    if (thecolor != null)
	    {

		    if (thecolor.equals("red")) { what = Color.red; }
    		else if (thecolor.equals("green")) { what = Color.green; }
    		else if (thecolor.equals("blue")) { what = Color.blue; }
    		else if (thecolor.equals("pink")) { what = Color.pink; }
    		else if (thecolor.equals("orange")) { what = Color.orange; }
    		else if (thecolor.equals("magenta")) { what = Color.magenta; }
    		else if (thecolor.equals("cyan")) { what = Color.cyan; }
    		else if (thecolor.equals("white")) { what = Color.white; }
    		else if (thecolor.equals("yellow")) { what = Color.yellow; }
    		else if (thecolor.equals("gray")) { what = Color.gray; }
    		else if (thecolor.equals("black")) { what = Color.black; }
    		else if (thecolor.equals("darkgray")) {what = Color.darkGray; }
    		else if (thecolor.equals("lightgray")) {what = Color.lightGray; }
            else
            {
                System.err.println("Valid colors are: \nred, \ngreen, \nblue, \npink, \norange, \nmagenta, \ncyan, \nwhite, \nyellow, \ngray, \ngray, \nlightgray, \ndarkgray.");
                System.err.println("Color set to default gray.");
                what = Color.darkGray;
            }
        }

    else {
		    System.err.println("No color was passed to function chooseColor.");
		    what=Color.darkGray;
	     }
	return what;
}

Javascript Manipulation

• The safest way to implement a user selected color change is with a SELECTION form element or a set of radio buttons. The SELECTION element is used here.
• The method, doColor() is called by the onchange() routine of a SELECTION element. A reference to the element itself ("this") is passed and enters the routine as the variable "which"
• Find out which SELECTION element sent it with which.name.
• Find out the index of the OPTION chosen with which.selectedIndex
• Find out the text, which should be a correct color string representation, with which.options[i].text
• Use a series of if statements to set the correct variable.

function doColor(which)
{
    var wc = which.name
	   var i = which.selectedIndex
    var ac = which.options[i].text
    if (wc == 'bcolor' ) document.theMsg.setBorderColor(ac)
    if (wc == 'fcolor' ) document.theMsg.setFontColor(ac)
    if (wc == 'bgcolor' ) document.theMsg.setBGColor(ac)
}

[TOC]

Fonts:
Font Face (name), Font Size, Font Style and Font Color

[TOC]

General Method Notes

• Font face, size, and style are all set in a new Font(face,style,size) call in the paint() routine.
• Font color is set by setting the drawing color of the current pen.
• Available font faces differ between systems and if a given font is not available, the system will try to map it to the closest which exists. Otherwise a default font is chosen.This applet limits fonts to Helvetica, Courier, and TimesRoman
• Most of these are passed into routines which fall into other general categories. Font Style is slightly different and will be shown here.

Java Implementation

Set Method

• Check for null and set default to bold
• Convert to lowercase using toLowerCase() and check to see if it is an allowed style.
• The check is permissive in that it will take "italic" or "italics".
• If not a valid style, set to default style and send error message to Java console.
• Font styles are set by using style constants defined for the Font object.
• Each "style" has an off/on bit in an integer.
• Three styles are defined. These are plain, bold, and italic.
• Combine these style by using and OR (" | " in Java )

public void setFontStyle(String what)
    {
        int astyle;
        astyle = Font.PLAIN;
        if (what == null || what.equals("")) { what = "Helvetica"; }

        what = what.toLowerCase();
        if (what.equals("plain") || what.equals("bold") || what.equals("italic") || what.equals("italics") || what.equals("bolditalic") || what.equals("bolditalics") || what.equals("italicbold") || what.equals("italicsbold") )
        {
            if (what.equals("plain"))
                { astyle = Font.PLAIN ;}
            else if (what.equals("bold"))
                { astyle = Font.BOLD ; }
            else if (what.equals("italics") || what.equals("italic") )
                { astyle = Font.ITALIC ; }
            else if (what.equals("bolditalic") || what.equals("bolditalics") || what.equals("italicbold") || what.equals("italicsbold") )
                { astyle = Font.BOLD | Font.ITALIC; }
            else astyle = Font.PLAIN;
            System.err.println("Setting font style to " + what );
        }
        else
        {
            System.out.println("The style you suggested is " + what + ".  The only styles allowed are plain, bold, italics, and bolditalics.");
            what = "bold";
        }
        theFontStyle = astyle;
        repaint();
    }

Get Method

• String cannot be directly returned.
• Get the font style and see if it is equal to any allowed style.
• If so, translate it into a string.

    public String getFontStyle()
    {
        String astylestr;
        astylestr = "";
        if (theFontStyle == Font.PLAIN )
            { astylestr = "plain"; }
        else if (theFontStyle == Font.BOLD )
            { astylestr = "bold"; }
        else if (theFontStyle == Font.ITALIC )
            { astylestr = "italic"; }
        else if (theFontStyle == (Font.BOLD | Font.ITALIC))
            { astylestr = "bolditalic"; }
        else astylestr = "Not a recognized font style!";
        return astylestr;
    }

Javascript Manipulation

• The interface is implemented as a SELECTION.
• The SELECTION (or rather the "this" reference to it is passed and enters the function as "which".
• Get the text of the selectedIndex of the passed SELECTION component.
• Make sure that is acceptable.
• If not acceptable, spawn an alert which lists the acceptable type face names.
• If acceptable, call the appropriate set routine.

function doFontStyle(which)
{
  var i = which.selectedIndex;
  var ff = which.options[i].text;
  if (ff != 'plain' && ff != 'bold' && ff != 'italic' && ff != 'bolditalic') alert("Font Style must be plain, bold, italic, or bolditalic.")
  else document.theMsg.setFontStyle(ff);
}

[TOC]

String Variables:
Justification, Inset, FontFace, Font Style and Msg

[TOC]

General Method Notes

• These are all string variables.
• theMsg represents a direct string to string translation. Whatever you put in "string" is what will end up in "theMsg" internally. There is no error checking.
• The others are checked to see if they represent one of a set of values
• Except for "theMsg", the methods return a list of acceptable inputs if an incorrect input is received.

Java Implementation

Set Method

• Check for a null value in case the param is not specified.
• In this case also check for an empty string.
• If null or empty, set to the default of "none".
• Change the parameter to lower case to avoid capitalization difficulties in string comparisons
• See if the parameter is acceptable
• If parameter is not acceptable, send system error message to list acceptable values. Set parameter to default
• Set internal variable and call repaint to realize the change.

public void setInset(String what)
    {
           //System.err.println("Parameter inset is " + ps);
           if (what == null || what == "") { what = "none"; }
           what = what.toLowerCase();
          if (what == "none" || what == "raised" || what == "lowered")
           {
              theInset = "none";
               System.err.println("Valid inset values are none, raised, or lowered.");
               System.err.println("Inset set to default none");
          }
           theInset = what;
        repaint();
    }

Get Method

• This is just a direct return of a string variable

    public String getInset()
    {
        return theInset;
    }

Javascript Manipulation

• Whenever you need to choose from a list, use a series of radio buttons or a SELECTION component.
• Here a SELECTION component is used and a reference to the component ("this") is passed and enters the routine as "which"
• Get the selectedIndex of the SELECTION
• Find the text value stored at the selectedIndex of the SELECTION
• Compare it to a list of allowed values.
• If value is not allowed, spawn an alert which informs the user of the allowed values.
• Otherwise, use the appropriate "set" method of the applet to establish the internal value.

function doInset(which)
{

  var i = which.selectedIndex
  var is = which.options[i].text
  var is = is.toLowerCase()
  alert( 'is = ' + is)
  if (is != 'none' && is != 'raised' && is != 'lowered') alert("Inset must be raised, lowered, or none.")
  else document.theMsg.setInset(is)
}

[TOC]

Commented Paint Method

All of the changes implemented by set routines are actually realized in the paint() method which actually renders the face of the application. Needless to say, this can be quite complex for a graphics object with many properties. Here we ill dissect the paint routine of MsgPanel line by line.

public synchronized void paint()
Declares the paint method as

• synchronized -- another method cannot be called until it is finished.
• void -- returns nothing, typical of a method as opposed to a function.

{ beginning delineator of the method

int i, j,w,h , c;
int xs,ys,xw,yh;
int cx, cy;
char l[] = new char[1];
local variables established

w = size().width;
Gets the width of the applet into w.

h = size().height;
Gets the height of the applet into h.

// Draw the Applet Border

xs = 0 ; ys = 0;
left and top coordinates of intial border rectangle in relation to applet

xw = w-1 ; yh = h-1;
width and height of initial border rectangle as defined by applet border width(w) and height(h)

g.setColor(theBorderColor);
set the graphics pen; i.e., the color that any subsequent drawing will use, to the color designated for border (theBorderColor)

for ( c = 0 ; c < borderwidth ; c++ )
Set up a for loop which will draw rectangles whose dimensions decrease by two pixels and width and whose top,left coodinates move down and right by one pixel for every iteration of the loop.

{ starting delimiter of for loop routines

g.drawRect(xs,ys,xw,yh);
"g" represents the graphics context (object) of the applet's canvas; drawRect(left, top, width,height) draws an unfilled rectangle in the current color.

xs += 1;
increase left by one

ys += 1;
increase y by one

xw -= 2;
decrease width by two; i.e., one pixel on each side of the rectangle

yh -= 2;
decrease height by two; i.e., one pixel each on top and bottom of rectangle

} ending delimiter of for loop statements

// draw colored rect;

cx = (w - (2 * hmargin ) );
set cx to the width for the colored background rectangle; cx will be the applet width (w) less twice the horizontal margin(hmargin).

cy = (h - (2 * vmargin ) );
set cy to the height for the colored background rectangle; cyx will be the applet height (w) less twice the vertical margin(vmargin).

g.setColor(theBGColor);
set the color of the graphics object (g) pen to the background rectangle color

g.fillRect(hmargin,vmargin, cx , cy );
use the graphics object( g ) fillRect(x, y, width, height) routine to draw a filled rectangle in the current color.

//draw the borders which will make the rectangle appear raised or lowered

if ( theInset.equals("none") )
check to see if you need to raise or lower the box. String objects cannot be directly compared to a string literal representation of the string. You must use the String.equals("thestring") method of string to do the test.

{ beginning delimiter of if test block statemetns

System.err.println("No inset.");
just prints a system message; could simply be left blank.

} ending delimiter of if true block

else
if theInset is not "none" then we have to do some drawing.

{begining delimiter of else statement block

g.setColor(Color.black);
set the graphic object (g) pen to black; we draw a black rectangle first whether the rectangle is to be raised or lowered.

g.drawRect(hmargin,vmargin,cx,cy);
use drawRect(left, top, width, height) to draw a non-filled rectangle in the current color (black). cx and cy were previously calculated to be with width and height respectively of the inset colored block

g.drawRect(hmargin + 1,vmargin + 1 , cx -2, cy - 2 );
the colored block will always be raised or lowered by two pixels so draw another unfilled rectangle which has shrunk by one pixel on each side.

g.setColor(Color.white);
set the current graphics object (g) color to the stock color white; the hilited sides will be drawn in white but which sides are hilted differ between a raised and lowered rectangle. The light source is always off of the upper left corner of the object being rendered.

if ( theInset.equals("raised") )
the top and left sides of the block will be hilited for a raised block.

{ starting delimiter of inset = raised block

g.drawLine(hmargin,vmargin,hmargin, vmargin + cy);
use drawLine(startX, startY, endX, endY) to draw a line down the left side of the colored block; this is covering up some of the black rectangle. Both start and end x coordinates are hmargin.

g.drawLine(hmargin,vmargin,hmargin + cx, vmargin );
use drawLine to draw a line across the top of the colored block. Both start and end y coordinates are hmargin

g.drawLine(hmargin+1,vmargin+1,hmargin+1, vmargin + cy - 1);
draw another vertical line, one pixel to the right of the original and one pixel shorter on each end.

g.drawLine(hmargin+1,vmargin+1,hmargin + cx - 1, vmargin +1);
draw another horizontal line, one pixel beneath the original and one pixel shorter on each end.

} ending delimiter of raised inset = true block

else
if not raised it must be lowered; if the rectangle is lowered, the right and bottom sides are hilited.

{ beginning delimiter of lowered inset = true block

g.drawLine(hmargin + cx ,vmargin ,hmargin + cx , vmargin + cy);
use drawLine(startX, startY, endX, endY) to draw a white vertical line over the right side of the black rectangle previously drawn; startX and endX are now both hmargin + cx ; i.e., the line has moved to the right side of the rectangle.

g.drawLine(hmargin,vmargin + cy,hmargin + cx, vmargin + cy);
draw a white line across the bottom of the rectangle

g.drawLine(hmargin - 1 + cx, vmargin + 1,hmargin - 1 + cx, vmargin + cy - 1);
draw a second white vertical line one pixel left of the original and one pixel shorter on each end

g.drawLine(hmargin+1,vmargin + cy - 1,hmargin + cx - 1, vmargin - 1 + cy);
draw a second white horizontal line one pixel above the original and one pixel shorter on each end

} ending delimiter of the else (inset raised = false) statement block

} ending delimiter of the else block for (inset none = false) block

// set everything up to draw the string

g.setColor(theFontColor);
set the graphics object ( g) pen to the color in which you will draw the string

theFont = new java.awt.Font(theFontName, theFontStyle, theFontSize);
create the font using the variables which you have established for font face (name) style, and size

theFontMetrics = getFontMetrics(theFont);
get the fontMetrics structure (object) for the font you just created

i = theFontMetrics.stringWidth(theMsg);
get the width, in pixels, for the string you want to draw; if this is longer than the inset block, there is no clipping and it will draw as much of it into the applet as it can. It is up to the user to make it fit.

j = theFont.getSize();
determine the height of the font

g.setFont(theFont);
set the font of the graphics object (g) to the font which you have created

cx = (w - i ) / 2;
reuse cx to calculate the x coordinate at which to start drawing the string if the string is to be centered horizontally. Distribute the difference between the width of the applet and the width of the string to both sides of the string. You will have recalculate this for right and left justification.

cy = (h + (j/2) ) / 2;
reuse cy to calculate the y coordinate at which to start drawing the string if the string is to be centered vertically. The string will always be centered vertically.

// finally, draw the string
At last, you get to draw the string; it will always be vertically in the middle. Its left coordinate must be adjusted to fit the justification type

if ( justification.equals("center") )
if the string is to be centered

{ g.drawString(theMsg,cx,cy); }
use drawString(theString, startX,startY) to draw the string; the cx and cy coordinates that you previous calculated are used

else if ( justification.equals("left") )
if the string is to be left justified

{ g.drawString(theMsg,hmargin + 5, cy); }
draw the string using hmargin instead of cx as startX

else if ( justification.equals("right") )
if the string is to be right justified

{ start of right justification statement block

cx =( (w - (2 * hmargin)) - i ) - 5;
recalculate cx so that the string will end five pixels to the left of the right edge of the colored block

g.drawString(theMsg, cx,cy);
draw the string using the adjusted cx

} end of right justify statement block

} end of paint method

[TOC]