Alventis Button Workshop interface is comprised of the main application window, accompanied by two auxiliary dialogs: Layout and Output. In this topic, we will be discussing the main window, shown below.

 

ButtonWorkshopMain01

 

If you have read the Basic Concepts topics (which will be our assumption), much of the interface should be quite obvious.

 

The interface is comprised of 3 main portions: the Grid at the top, the Preview panel, and the Properties Panel.

 

 

The Grid lists all the buttons that belong to a project. Each button occupies one row in the grid.

The columns of the grid are as follows:

Name

The name of the button is only used to name the image files that will be produced at the Output stage. All images that will represent the states of a given button will have its name as part of the produced filenames. As such, button names may only contain alphanumeric characters and underscore, and must start with an alphanumeric character. Spaces are not allowed. All buttons must have a unique name.

Caption

This is the text that appears on the button. You can leave it empty if you want a button with no text. Only a single line of text is supported in version 1.00.

URL

This will be written to the output HTML file as target URL of the button. It is optional.

Alt

Similarly, this is the optional "Alt" attribute of the <IMG> HTML tag that will be written to the HTML file.

States

The remaining 8 columns correspond to the 8 button states.

 

 

Button Operations in the Grid.

Creating a button

To create a new button, either focus any button in the grid (or just click anywhere in the grid) and hit the Insert key on the keyboard, or invoke the New Button command under the Edit menu or on the toolbar. You can also use the Ctrl-B keyboard shortcut. This will create a new empty grid row for the new button.

Editing a button

You can edit an existing button's textual attributes directly in the grid. First, highlight the cell of interest. You can use the mouse or navigate in the grid using the keyboard (use the Tab key, as well as all the common text-navigation keystrokes). Once the cell is highlighted, you must enter into the cell by either clicking the mouse once again or by hitting the Enter key. The contents of the cell is now selected and ready for editing.

Posting changes to a button

Once satisfied with all cells' values, you must post (save) your changes. You can do so in one of two ways: either invoke the Post to Grid command under the Edit menu or on the toolbar (shortcut: Ctrl-G), or focus any other record in the grid. When creating several buttons, you can simply hit the Insert key to create a new button - the previous one will get posted before the next one is created.

Abandoning changes

Hit the Escape key once to abandon changes to the current cell, hit Escape again to cancel your changes to the entire record.

Deleting a button

Highlight a button and hit Delete on the keyboard. You will be prompted to confirm deletion. Be careful since this operation cannot be undone.

Selecting Apply to scope

You can select a specific button and ensure Apply to is automatically set to "Button in all states" by clicking on the desired button's row in one of the textual columns (the leftmost ones). You can select a state by clicking on any of the state cells that display the state images. Apply to will be automatically set to "Selected state". The concepts behind the Apply to scope are discussed in the Properties Hierarchy topic.

Re-ordering buttons

You can change the order of the buttons by dragging a button to a new place in the grid. Click anywhere on the desired button's row, hold the left mouse button down, and drag the mouse up or down in the grid. Release the mouse when the bright blue line that tracks your movement appears where you'd like the button to be. Buttons will be ordered in the Preview and output in the same order in which they appear in the grid.

Resizing columns

Simply drag column dividers in the grid heading row (place the cursor over the edge between column captions). All state columns with button images get resized together maintaining identical widths, so you can resize any one of them to resize them all in one shot.

 

 

You can resize the panels by dragging the splitters between them with the mouse.

 

SpinEdit boxes allow you to enter numeric values directly by typing, or using the two little buttons on the right. You can click them with the mouse to increment or decrement the value. You can achieve the same effect using the Up and Down cursor keys on the keyboard. The PageUp and PageDown keys change the value by larger increments.

 

As a last note, you can toggle between two layouts of the interface: Preview above Properties or Preview to the left of Properties panel. Invoking the Toggle Splitter Orientation command from the File menu toggles between the two. You may find one or the other panel arrangement more convenient depending on whether the Layout of your buttons is horizontal or vertical.