Using EditPlus

5. Previewing the Document

To preview your HTML document, click the Preview button on the HTML toolbar. There are a few different ways that your preview will work, depending on how you have set up EditPlus. Your preview window might be a seamless window that appears as part of the EditPlus program, or clicking the preview button might load your web page in your system's default browser.

To change these settings, select Preferences from the Tools menu and click once on the Tools category. The first option listed in the dialog is the Select Browser list. Here you can select a specific browser program, the seamless preview window, or the system default.

[ Back | Top ]

6. Tag Shortcuts

Coding in HTML can be made easier and more efficient when you take advantage of the shortcut buttons on the HTML toolbar. In most cases, to insert a tag into your document, place your cursor where you want the tag to appear, or select the text that you want to be affected or enclosed between the 'opening' and 'closing' tags. Then click once on the the appropriate button for the tag you want to apply. Note that certain buttons will include some of a tag's attributes, but others you will have to type in by hand.

Here is a list of the various buttons and a brief description:

Bold
Adds the bold tag (B) to the document or places the bold tags around the selected text.

Italics
Adds the italics tag (I) to the document or places the italics tags around the selected text.

Underline
Adds the underline tag (U) to the document or places the underline tags around the selected text.

Font
Adds the font tag (FONT) to the document or places the font tags around the selected text. Includes the SIZE and COLOR attributes.

The Palette Tool
See Selecting Colours

No-Break Space
Adds the special no-break space character ( ) to the document.

Line Break
Adds the line break (BR) tag to the document.

Paragraph
Adds the single paragraph tag (P) to the document.

Headings
Shows a drop-down list from which you can select the desired level of heading you want to apply to the document or selected text.

Image
See Adding Images.

Anchor
Inserts the Anchor tag with HREF attribute to your document, or applies it to the selected text.

Horizontal Rule
Inserts the horizontal rule (HR) tag to the document.

Comment
Inserts the comment tag (<!-- ->) to the document or applies it to the selected text.

Special Character
Displays a list from which you can select a special character to be inserted into the document.

Table
To insert a table into the document, click this button and drag the mouse over the grid to select the number or rows and columns you would like in your table. EditPlus will insert all the necessary TABLE, TR, and TD tags for your table.

Center
Adds the center tag to the document, or applies it to the selected text.

Block Quotation
Adds the BLOCKQUOTE tag to the document, or applies it to the selected text.

Preformat
Adds the preformat (PRE) tag to the document, or applies it to the selected text.

List
Displays a sub menu from which you can select the type of list you want to add to the document. When a list type is selected, the appropriate tags are added to the document.

Script
Adds the script tag to the document. Includes the comment tags for browsers that can't read scritps.

Applet
Adds the applet tag to the document.

Object
Displays a list of objects you can add to the document. Selecting an item in the list will add the necessary tags (or in some cases, run a wizard or other program) to add that object to the document. Be careful, some of the items are buggy and cause EditPlus to crash, so make sure you have saved your document before you use this tool.

Form
Adds the form tag to the document.

Form Control
Displays a list of form controls. Add a form control's tags to the document by selecting one of the controls in the list.

Image Map
Adds the image map tags to the document.

Frameset
Adds the FRAMESET and FRAME tags to the document.

[ Back | Top ]

7. Adding Images

You can add images to your document without having to type out the IMG tag and it's basic attributes. Place the cursor where you want the image tag to go and click on the image button in the HTML toolbar to add an image.

A dialog box appears that allows you to browse your drives and select a folder and an image.

When you've selected your image and cleared the dialog box, the image tag appears in your document.

NOTE: Be careful when using this method of adding images - check your SRC attribute and make sure it's using a relative location and not an absolute location for your image. For example, the image tag:

<IMG SRC="pics/bullet.gif" WIDTH=10 HEIGHT=10 BORDER=0 ALT="a bullet">

uses a relative address. As long as the image BULLET.GIF is located in the PICS folder under the web page's current directory, the image will appear correctly. However, if you select an image located on another drive on your computer, you may end up with an absolute location in the SRC attribute, such as:

<IMG SRC="D:\graphics\bullet.gif" WIDTH=10 HEIGHT=10 BORDER=0 ALT="a bullet">

If you were to leave this code in your page and upload it to your account/server on the web, anyone who goes to your page will get an error because the reader's browser will try to locate the image BULLET.GIF on their D: drive in the graphics folder.

[ Back | Top ]

8. Selecting Colours

EditPlus makes it very easy to add colours to any of the colour attributes that come with various tags. Some people prefer to use the standard colour names (such as "red", "peachpuff", or "dodgerblue") and others prefer to use the hex values that represent the levels of red, green, and blue in the colour (such as "#FF0000" or "#CC0022").

If you prefer using hex values, or you don't know the colour names, or even if you are just the type of person that likes to select colours by seeing them, you will find the Palette tool very handy.

To use the Palette tool, place your cursor where you want the colour code to appear, such as between empty quotes in an attribute (e.g. BGCOLOR="").

Click on the Palette button on the HTML toolbar. A grid of colours appears and you can use your mouse to click the desired colour. The hex value for that colour (with the required # symbol) will appear in your document.

If you prefer a different colour, other than the ones displayed, you can click on the More button at the bottom of the grid and mix the colours yourself.

Note that the palette that is displayed is showing the standard 216 colours that are supported by almost all web browsers. For more information on the "Web Master's Palette", visit the VisiBone Color Lab.

[ Back | Top ]

9. Compiling and Running Java Source Files Using EditPlus Tools

Thanks to Jonathan McKee (Programmer class of Summer, 2001) for the information that was used as a basis for this part of the EditPlus tutorial!

There is a way to compile and run your Java source code files without using the command prompt! You can set up some menu options in EditPlus that allow you to quickly compile and run your Java programs. You might want to print these instructions so you can follow these steps. Later we will add a tool or two to this group, so make sure you keep or bookmark these instructions.

Open up EditPlus. It doesn't matter if you have a new/existing document open or not.

To follow these instructions, you need to know the drive and path where you installed your Java SDK. If you followed the default settings, this is probably c:\jdk1.5.0 or c:\Program Files\jdk1.5.0. If you have a different version of the Java SDK, then the folder name might vary slightly. It doesn't matter what it's called, as long as it contains the "bin" folder with all the SDK utilities. In the instructions, this folder will be referred to as the Java SDK folder.

1. Select "Configure User Tools" from the "Tools" menu.
2. You'll see "Groups and Tool Items" in the middle of the dialog box. Tool groups allow you to organize the different tools you want to create and maintain in EditPlus. We are going to create a tool group called "Java Tools".

   

   1. You should see a dialog box like the image shown here. The default group name will probably be "Group 1". To change it, click on the Group Name button.
   2. In the New Name text box, type Java Tools
   3. Click OK.
   4. You should now see "Java Tools" in the pull-down box under the caption "Groups and Tool Items"
3. Now you need to add some tools to your tool group. We'll start with a tool used to compile Java Source code files. If you don't have the Configure User Tools dialog box open, follow step 1 above.
   1. Click the Add Tool>>> button and select Program from the pop-up menu.
   2. In the Menu Text field, type "Compile Java Source". This is the text you will see in the menu for this tool.
   3. Select the program that will run when you select the "Compile Java Source" menu item: Click the small button to the right of the "Command" field.
   4. Browse to your Java SDK folder and go into the "bin" subfolder. Find and select the file called JAVAC.EXE. Make sure you select the right file - there are a lot of files in this folder and they have similar names. When you're sure you have the right file, click Open. You should see the path and file information in the "Command" field. Of course you could type this in by hand instead of using the Browse button if you wanted to.
   5. When you run the Java compiler, you always give it the name of the source file as an argument. We can set this up for this tool: Click the button to the right of the "Argument" field and select File Name. You should see $(FileName) appear in the field.
   6. If you are using Java SDK 1.5 or higher, type -Xlint, followed by a space, in front of $(FileName).
   7. Click the button beside the "Initial Directory" field and select File Directory. You should see $(FileDir) appear in the field. This ensures that your compiler runs as if it were in the same folder as your Java source file.
   8. Lastly, check off the box for Capture Output. This will show the output to your compile in a small window at the bottom of the screen. If you prefer that the output show up in a larger command-prompt window, do not check this option.
   9. Click the Apply button to save your tool changes.

   When finished, your dialog box should look like this one:

   

4. The next tool we need to add is for running our Java class files. Again, if you aren't in the configure user tools dialog box, follow step 1 above.
   1. Click the Add Tool>>> button and select Program from the pop-up menu.

   2. In the Menu Text field, type Run Java Class. This is the text you will see in the menu for this tool.

   3. Select the program that will run when you select the "Run Java Class" menu item: Click the small button to the right of the "Command" field.

   4. Browse to your Java SDK's /bin folder and select the file called JAVA.EXE. Double check to make sure you have the right file selected, then click Open. You should see the path and file information in the "Command" field.

   5. When you use the JAVA command to run a Java class file, you always specify the name of the class file without the extension. We can set this up for this tool: Click the button to the right of the "Argument" field and select File Name without Extension. You should see $(FileNameNoExt) appear in the field.

   6. Click the button beside the "Initial Directory" field and select File Directory. You should see $(FileDir) appear in the field. This ensures that the java command interpreter runs as if it were in the same folder as your Java class file.

   7. Lastly, check off the box for Capture Output. This will show the output of your program (if any) in the same output window where you see the output to the compile process. If you would rather see the output in a command-prompt window, leave this option unchecked.

   8. Click the Apply button to save your tool changes.

You could also check off this box in the tool menu item you created in step 3, and when you run a program that does not require arguments, click the "Skip" button in the arguments dialog.

Dialog box with Run with Arguments settings

Dialog box with Run settings

Using the Tools

To compile, go to the EditPlus window with the source file you want to compile and select "Compile Java Source" from the Tools menu. If you prefer using the keyboard, you can also compile the current program by pressing the Ctrl-1 keys.

To run a class file, go to the EditPlus window with the source file you want to run (rather, the source file that is associated with the class file you want to run), and select "Run Java Class" from the Tools menu. If you prefer using the keyboard, you can also run the class file by pressing the Ctrl-2 keys.

Note that the keyboard shortcuts may vary if you have already created user tools. You can see what shortcut keys are associated with your tools by looking at your tool menu items in the Tools menu.

Other Important Notes

Note that sometimes when you compile Java source files and you get errors, the little caret ^ symbol that points to the spot in the code statement may not necessarily be in the right location. This is probably because of the fonts you are using in the EditPlus program (even if you didn't change the fonts). For the most part this shouldn't be a problem since you will probably know exactly where your error is in the offending statement, but if not, you will have to try compiling your program in DOS instead.

You can also set up EditPlus to use Appletviewer. The image below shows the settings for the Appletviewer utility:

Dialog box with Run Applet settings (used on an open HTML file!!)

[ Back | Top ]

10. Editing the Auto-completion File

The auto-completion file is the part of EditPlus that is responsible for the automatic completion or adding of elements to various commands you type. For example, if you open up any new or existing Java file and type the words for then press the space bar, you'll notice that suddenly all the brackets, braces and semi-colons needed in a for loop appear!

Everyone has different preferences when they write Java code. I myself prefer to put my opening brace on the same line as the statement that begins a block of code, for example:

public class Temperature {

Unfortunately EditPlus likes the brace on the next line by itself. Luckly we can change this if we want!

In the Program Files/EditPlus 2 folder is a file called CPP.ACP that contains all the "syntax" for automatically completing bits of code in Java and C++. You can edit this file by opening it in EditPlus and making the changes you like (such as moving the opening brace to the end of the line above!).

You'll notice that the characters ^! appear throughout the file. This indicates where your insertion point will end up after the code appears. You can move that, too!

Be careful when editing this file: Don't change lines that start with a # character or ; character.

[ Back | Top ]

11. Updating the Syntax File

When you type Java programs, you'll notice that some of the words turn blue, some pink, some green, some red, etc. That's because of the syntax file EditPlus associates with Java programs. Usually comments are green, classes are red, keywords are blue, and so on. The version of EditPlus on your computer has an older syntax file. You might want to update to a newer file that was created for Java 1.5.0. You don't have to update this file - it won't affect how your programs compile and run. You may want to update it however, so that some of the newer classes added to later versions of Java show up in red text when you code them. The older syntax file doesn't contain entries for classes like JOptionPane, so it won't turn red when you type it. Having an up-to-date syntax file is helpful for programmers new to Java - if the class name doesn't turn red, you know you've typed it incorrectly.

To update your syntax file:

1. Download the javasyntax.zip file.
2. Unzip this file into the EditPlus 2 folder in your Program Files folder.
3. When prompted if you want to replace the existing syntax file, say Yes.

If you want to download and add more syntax files and other files, check out the EditPlus User Files page.

12. Editing the Template File

When you open a new Java program, you'll get some default code, such as:

class 
{
	public static void main(String[] args)
	{
		System.out.println("Hello World!");
	}
}

We don't want the Hello World statement in there every time we start a new Java program, and we also want to make sure that all of our classes are public by default (otherwise you'll forget to add the word "public" yourself!).

Another handy thing would be if you had the proper comments that identified your program at the top of the code! As you know (or will soon learn) all of your programs must be properly identified with your name, class, date, and assignment information.

You can arrange it so that every new Java file you start has the proper program identification, the word public in front of the keyword "class", and no Hello World statement by editing the c:\Program Files\EditPlus 2\template.java file. Just open this file in EditPlus and add/modify the code as you require. For example, a good template.java file for a student named Jen MacDonald in the Computer Science program might be:

/**
*	Name:  Jen MacDonald
*	Assignment:  [name of lab/assignment/example]
*	Class:	Computer Science
*	Date:  [due date or date of example]
*/
public class  
{
	public static void main(String[] args) 
	{

	}
}

Every time Jen opened a new Java file, she would update the Assignment and Date information as appropriate.

When you've edited your template file, save the changes. The template code will not appear in any existing Java files, only in the new ones you create from now on.

Backup Tip: You might want to keep copies of your auto-complete, syntax, and template files in a backup folder on your D: drive so you don't have to re-create them every time you get your laptop re-imaged!