Using EditPlus

Quick List of Contents:

Using EditPlus:
[ Opening a Document | Creating A New Document | Editing Templates | Using Projects ]

Coding HTML in EditPlus:
[ Tag Shortcuts | Previewing your Document | Adding Images | Selecting Colours ]

Advanced Features:
[ Compiling and Running Java Source Files | Editing the Auto-completion File | Updating the Syntax File ]

EditPlus is a non-WYSIWYG editor that allows you more flexibility in coding your web pages while at the same time allowing you more efficient ways to enter frequently-used tags. EditPlus not only allows you to create and edit Cascading Style Sheets and documents in HTML, but also in Perl, Java, and C++. The program is simple to use once you know how to use the basic tools and functions. A portion of the main window with an HTML document open is shown below:

part of edit plus window

Once you have downloaded and installed the EditPlus program, you should run it while you view this tutorial.

1. Opening a Document

To open an existing document, click on the File menu, then select Open. You can also select the Open button open document button on the toolbar.

If you want to open a document that already exists, select Open from the File menu. This will bring up the Open File dialog box, similar to other Open Dialogs in other programs:

Notice in the diagram that the File Types list box is down. You can see the variety of different types of files that EditPlus supports. You can now select the file you wish to open or you can select a file type from the File Type list to limit your file listing to a certain kind of file.

Once you have selected the file you want to open, click the open button.

You will notice that your document (except text documents) appears in the window in multi-colour! EditPlus colour-codes tags, attributes, comments, scripts, keywords, and strings in your code, making it much easier to read! Also, an additional toolbar appears on your screen. This toolbar is specific to the type of document you've opened, for example if you open an HTML document you will see the HTML toolbar, as shown in the previous picture.
[ Back | Top ]


2. Creating a New Document

To create a new document, click on the File menu, then select New, and then select the type of document you would like to create (e.g. HTML). You can also create a new document by clicking on the New Document button new document button on the main toolbar and selecting the document type from the list.

The default template for your chosen document type will also appear on the screen. You can change the default template for any type of document so that it contains tags or commands that you frequently use in your documents. For example, you may want to change the default HTML template so that it has your name and other information in it.

[ Back | Top ]


3. Changing Templates

The following exercise will show you how to change a default template. As an example, we will change the default HTML template.

  1. Open up the template file you want to change. Template files that you can edit are called "TEMPLATE.xxxx", where xxxx is the file extension that is typically associated with the desired file type. For example, the Java template file is TEMPLATE.JAVA and the HTML template is TEMPLATE.HTML. For this exercise, look inside your EditPlus folder for the TEMPLATE.HTML file and open it.
  2. The template file is loaded and you will see it on the screen. The default HTML template file should appear with the following text (or something similar):

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    </HEAD>

    <BODY BGCOLOR="#FFFFFF">
    ^!
    </BODY>
    </HTML>

    Notice the ^! between the two BODY tags. This is a special code that causes the cursor to be in that exact position when the user opens a new document using the template. You'll notice that when you opened a brand new HTML document that the cursor was right where the ^! now appears.

  3. Type your name in the empty quotes in the META tag for Author.
  4. Save your template file by clicking on the save button save document button on the main toolbar, or by selecting Save from the File menu.
Now, when you create a new HTML document, it will automatically contain your name in the Author META tag.

Having the customized default template is nice, but you might find that you would like to have a default HTML template for various kinds of HTML documents. For example, if you have a web site with many pages, you may want a special default template specifically for new web pages for that site. You can add your own templates very easily.

Example: Joe Schmoe, carpenter extroardinaire, is developing his own website for his company, Joe's Hardware. To make his life easier, Joe builds his own template so that when he creates new pages for his site, he can have many of the standard settings already coded for him! His template file, JOE.HTML, appears below:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Joe's Hardware - [page title]</TITLE>
<META NAME="Author" CONTENT="Joe Schmoe">
<META NAME="Rating" CONTENT="General">
<META NAME="Keywords" CONTENT="wood, nails, hardware, paint">
<META NAME="Description" CONTENT="">
<LINK REL="stylesheet" TITLE="mainstyle" HREF="mainstyles.css">
<BASEFONT SIZE="2">
</HEAD>

<BODY BACKGROUND="images/joesbg.jpg">
^!
</BODY>
</HTML>

Notice that Joe's template includes some content in the META tags, as well as a style sheet and default background file. When Joe want's to create a new page for his site, he can select his template from the list of file types when he opens a brand new document.

To create your own template:

  1. Create the HTML template file and save it to your EditPlus folder. For example, Joe created the JOE.HTML file to be used as his template. add template dialog
  2. From the tools menu, choose Preferences. Expand the Files section and choose the Templates dialog by clicking once on the word Templates.
  3. To add your template to the list, click on the Add button. You'll see a new entry in the templates list called New Template.
  4. In the Menu Text box, type in the text you want to appear in the menu (when you select a new document type to open).
  5. In the File Path box, type in the path of your HTML template file that you made. If you like, you can also click the builder button builder button and browse/select your template file.
  6. Click on OK in the Template dialog box.

If you now try to create a new document, you will see your template listed among the different file types you can choose from!

[ Back | Top ]


4. Using Projects

You will find that you are often working on the same groups of pages that belong to a single web site. In EditPlus, a group of web pages that make up one site is called a project. You may find that you will have quite a few of these pages open at the same time, and it can be tedious to constantly open up each page of your project by clicking File/Open/filename. EditPlus contains a project manager that makes it easy to organize and maintain projects and web sites.

How Do I Use Projects?

Using projects to organize your pages and sites gives you quick access to HTML files and allows you to open up multiple files all at once.

To create a new project, you must first have a group of web pages that might all belong to a single project. For example, your personal web page assignment probably consists of a few different pages.

Add a New Project:

project dialog
Managing Projects and Project Files

Now that you have a project or two set up, lets look at some of the benefits and features of using projects in EditPlus.

You will notice a Project menu on the menu bar. Clicking on the Select Project option opens up a sub menu that contains a list of your projects. Selecting a project from the list will show the project files in the Project menu next time you select it.

Try it: Select your project from the Select Project option of the Project menu, then select the Project menu again. You will see that all the files in your project are listed.

Other Common Tasks:

  • To edit a project and it's files, click the Project menu and from the Manage Project sub menu, select Edit Project. This will take you to the Project Dialog.
  • To open all the files in a project, select Load Project from the Manage Project sub menu.
  • To close all the files in a project, select Close Project from the Manage Project sub menu.
  • If you have a file open in EditPlus, you can quickly add it to a project by making sure it's the current active window and selecting Add To Project from the Manage Project sub menu. You can also add all the currently open files by selecting Add All To Project.
  • To open a single file of the project, select that file from the Project menu (make sure the desired project is selected, see above).

    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 bold
    Adds the bold tag (B) to the document or places the bold tags around the selected text.

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

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

    Font 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 palette
    See Selecting Colours

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

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

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

    Headings 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 images
    See Adding Images.

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

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

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

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

    Table 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 center
    Adds the center tag to the document, or applies it to the selected text.

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

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

    List 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 script
    Adds the script tag to the document. Includes the comment tags for browsers that can't read scritps.

    Applet 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 form
    Adds the form tag to the document.

    Form Control 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 image map
    Adds the image map tags to the document.

    Frameset 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 image 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").

    palette grid 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 palette 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.

    Setting up the Tools

    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".

      tools dialog box

      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:

      dialog box after setup

    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.
    To run a program using command-line arguments, set up a new tool menu just like the one in step 3, but make sure you check off the box labeled "Prompt for Arguments". This will cause a dialog box to appear where you can type your command-line arguments (in the exact same format you would type them at the Dos prompt).

    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.

    [ Back | Top ]


    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!

    [ Back | Top ]


    Last Updated:

    © 2005, Wendi Jollymore
    Sheridan College