WebTk Editor User Guide

Contents

• Browsing
• Basic Tips
• Toolbar
• Cut and Paste
• Links and Anchors
• Paragraphs
• Character Styles
• Lists
• Forms
• Extensibility
• Link Validation
• Downloading

Browsing

You can use the editor as a simple browser. Note the Edit/Browse mode buttons in the upper right part of the interface. Chosing Browse leaves the page read-only. Next to these buttons is a text entry labeled URL. Enter a URL here and press <Return> to view it. Or, follow hyperlinks by left-clicking on them. You can display the page in a new window by using shift-click. Shift-click works even in Edit Mode.

You will need to qualify file names with a leading file: in the URL entry, or use the Open operation under the File menu. Once you have established a base URL you can enter relative names in the URL entry.

To follow http: links you may need to tweak the Proxy setting under Preferences. If you clear the proxy host, then the browser tries to contact the http host directly.

Basic Tips

This is a new program, so there are surely bugs. The editor makes a backup copy of the page you are working (e.g., foo.bak) on the first time you Save your work. While there should never be a core dump, you might drive the editor into a funky state. Every so often, check the HTML by using the Show HTML check button. (Even in this mode you cannot edit the tags directly :-) It could be possible to clutter the page with some extra HTML markup. If things get so bad you need to use a text editor to rescue things, please take the time to send me a copy of the damaged page and some description of what you think lead to the problem. Repeatable test cases are ideal.

There is a mostly-working multi-level undo. Keep pressing <Control-u> to get the editor to unwind what it has done. This is not always perfect, and you might need to press <Control-u> more than you expect. Be warned that the Refresh operation clears the undo log.

Toolbar

Below the menus are a set of buttons that represent HTML tags. If you do not know what these are, use the menus at first to learn them. Not all tags are in the toolbar. The Toolbar... menu item under Preferences brings up an editor that lets you customize the toolbar.

Cut and Paste

You can cut and paste within the editor and between the editor and raw HTML documents. Make a selection with the left mouse button (buton-1), and paste it using the middle mouse button (button-2). The Cut, Copy, and Paste keys also work. If you make a selection in the editor and paste it into another application, you get raw HTML markup. If you select raw HTML from some other document and you paste it into the editor, the HTML is rendered for you. You can copy between pages if you have multiple pages displayed. Shift-click on a link to have it displayed in a new window.

Links and Anchors

You create links and anchors with operations under the Html menu, or with the a toolbar button. The user interface is still quite simple. Select a range of text with the first mouse button and then select the menu operation. You are prompted for the link URL and/or the anchor name.

You can edit a link or anchor by double-clicking, or with the Edit Link operation in the Html menu. Anchors are identified by a different color so you can find them.

What's an anchor?

An HTML hyperlink has two main attributes: HREF and NAME. The HREF is a URL like http://www.sun.com/. You create links to other locations by filling in the HREF with the destination URL.

An anchor is a point within a page that can be the target of a link. You can have links from a table of contents, for example, into the sections of a longer page. To create an anchor point, fill in the NAME field. To reference an anchor point, use the #name syntax in the URL. This page is a good example. The contents at the top has links to the section headings. Go into Edit mode and double click on the links to see how they fit together. T

The link editor has a set of Browse choices. If you select Anchor names you'll see a list of the anchors defined in the page. You can also browse the history list and the file system.

Paragraphs

I use the term node to refer to a heading (e.g. <h1>), a paragraph (<p>), or list item (<li>). There are several editting operations that operate on nodes and may affect their type.

• When you hit the <Return> key, WebTk makes a new node that is the same as the current type. This is how you start a new list element, for example.
• When you delete the space between paragraphs, the two nodes are merged and take on the type of the first node.
• You change a node's type as in FrameMaker. Put the insert cursor in a node and choose a type from the Paragraph menu or the Toolbar. You can change list types this way, too. For example, if you are in an unordered list <ul> you can change it to a numbered list <ol> by chosing that list type from the List menu or the Toolbar.
• Use the No Paragraph operation in the Paragraph menu to eliminate the <p> tag before a paragraph.

Character Styles

You can add strong, emphasis, underline, code, and other looks to text with operations in the Style menu. These common styles are available in the Toolbar as B, I, code, and U buttons.

The only way to remove styles is with the Plain Text operation under the Style menu. Unlike many other editors, the style operations do not behave in a toggle fashion.

There is a bolditalic macro under the Macro menu that gives you a bold-italic look in one step.

Lists

You create a list by changing the type of an existing node, typically a paragraph node. This changes the <p> tag to an <li> tag and wraps up the new list element with open and close tags for the list. Once you have a list going you can add new items in two ways. First, you can just press <Return> to end the current list item and start a new list item.

If you want a <p> tag in the middle of your list for some space, use <Control-Return>. This action ends the current list item and inserts a <p> tag. There are also operations under List to add/remove the list bullet. This changes between an <li> and a <p> tag.

You can nest lists. To start a sub-list, press <Tab> with the insert cursor in a list item. This starts a new sublist that contains the current list element. If you press <Shift-Tab> in a list, the list element is made part of the outer list. Think if this as indenting and outdenting list elements by using <Tab> and <Shift-Tab>, respectively. There are also operations under List to indent and outdent a list item.

Terminate a list with the End List operation in the List menu. This moves the insert cursor out of the list and starts a new <p> node. Alternatively, you can type <Shift-Tab>

Forms

Start a form by selecting New Form... from the Form menu. There are three ways to start a form from the dialog:

1. Insert a form template. Select the template and it will be inserted at the cursor. So, be sure to set the insert cursor to the right location before doing this.
2. Put a <form> tag around the current selection. Make a selection before selecting New Form..., then select Custom from the dialog.
3. Put a <form> tag around the whole page. Clear any selection (just click somewhere) before selecting New Form..., then select Custom from the dialog.

After starting your form, you are asked to fill in the attributes for the form tag. The ACTION field is the URL of the CGI script. The METHOD is either POST or GET, which affects how the script gets its input data.

Once you start your form you can add new form elements with the Add Form Item cascade menu. Hint - tear off this menu by selecting the first dotted-line entry at the top. This'll give you a crude "pallet" of form elements. You can also cut and paste form elements.

Click on a form element to modify its attributes. In general, you will need to set the NAME of each element so your CGI script knows where values come from. If you click on a Submit button, you can do a test submission to see what values will be posted by your form. This is all in edit mode, of course. In browse mode the form works as in a browser.

Extensibility

This editor and the HTML display library are written entirely in Tcl and Tk. This makes it extensible in some interesting ways. For example, see tags.tcl for the definition of a new HTML tag for selecting different colors, so you can include green, white, orange, or any color you like in your documents. We also have prototyped client-side form validation and the ability to download extensions into Safe Tcl interpreters.

The Macro menu lets you define and insert custom lumps of HTML markup.

The Preferences Toolbar... operation lets you customize the Toolbar. The edit toolbar can be programmed to:

• Call any Tcl function. Not that there is any documentation on what would be good candidates. You can also load your own code into WebTk by puting it into a webtk.tcl file. On UNIX this file is named ~/.webtk.tcl. On Windows and Macintosh this is webtk.tcl in the user folder of the webtk distribution.
• Insert any single HTML tag. This uses the Input_Tag Tcl command.
• Invoke any macro. This uses the Macro_Invoke Tcl command.

Link Validation

Under HTML, the Link Validate/Chart operation computes a new page that summarizes the links on a family of pages. This works recursively, so you can start at your home page, for example, and verify what it references. Links off the server or to points higher in the URL hierarchy are NOT followed, so the process will terminate :-) You can aim this at any point in the web - it doesn't have to be a local page.

Downloading

You can download images and other pages. First, make a selection that includes the images or links you are interested in. Then select the Image Download or URL Download operations under the Edit menu. These put the results into directories that you can define.

Brent Welch
Sun Laboratories

This is the main Tcl Developer Xchange site, www.tcl-lang.org .    About this Site | [email protected]
Home | About Tcl/Tk | Software | Core Development | Community | Documentation