This tutorial will introduce you to the special techniques involved in creating a resizable publication. The first thing we need to do is decide what our publication’s interface will look like. Generally, most Windows applications are divided into a few distinct interface components: a tool bar, status bar and work space. More complex applications may include additional elements, but the process is basically the same.


For this tutorial we will create a basic image viewer. Our publication will consist of a tool bar (containing a file selector button); a status bar (showing the name of the image file being viewed); and a work space (where the image will be displayed).


Getting Started

1. Launch VisualNEO for Windows and create a new publication by selecting New from VisualNEO for Windows’s File menu. From the New Publication screen select the following: 640 x 480, 16 Million Colors and Standard Application (EXE).


2. Select App Properties > General from the App menu.


The App Properties screen will appear.


3. Type Image Viewer in the Title field.


4. Type your name in the Author field.


5. Click the Window icon to display that section of the App Properties screen.



6. Under Window Style, make sure Standard Window is selected and the following options are checked: Title bar, System menu, Maximize button, Minimize button, Sizeable, Moveable and most important Auto-size work area.


7. Click OK to apply these changes to the publication.


The Interface Components

The first thing we need to do is add three Container objects - one for each of our main interface components. Assigning the correct properties to these Containers is the key to creating a sizeable publication.


1. Select the Container Tool from the Tool Palette.


2. Move the mouse pointer to the upper portion of the page. Press and hold down the left mouse button and draw a rectangle about 2 inches wide and ½ inch tall. Once the rectangle is the correct size, release the mouse button.


3. Place the mouse pointer over the Container object and click the right mouse button.


The Container Properties screen will appear.


4. Set the Snap Position property to Top.



5. Click OK to save the changes.


The Container will reposition itself along the top of the page. This Container will serve as our publication’s tool bar. The Snap Position setting will keep it docked along the top edge of the page even if our reader’s later alter the publication window‘s shape.


The next Container will become our publication’s status bar.


6. Select the Container Tool from the Tool Palette.


7. Move the mouse pointer to the lower portion of the page. Press and hold down the left mouse button and draw a rectangle about 2 inches wide and ½ inch tall. Once the rectangle is the correct size, release the mouse button.


8. Place the mouse pointer over the new Container object and click the right mouse button.


The Container Properties screen will appear.


9. Set the Snap Position property to Bottom.


10. Click OK to save the changes.


Finally, let’s create the most important Container of all - the work space.


11. Select the Container Tool from the Tool Palette.


12. Move the mouse pointer to the center of the page. Make sure the pointer is not on top of any other objects. Press and hold down the left mouse button and draw a rectangle about 2 inches wide and 2 inches tall. Once the rectangle is the correct size, release the mouse button.


13. Place the mouse pointer over the new Container object and click the right mouse button.


The Container Properties screen will appear.


14. Set the Snap Position property to Center.


15. For this Container, let’s also set both of the Margin properties to “8” pixels. This will give us some space between the edge of the work space Container and the Picture object we’re going to add later.


16. Click OK to save the changes.


Adding a Picture Object

The publication we’re creating is an image viewer, so we need to add a Picture object to handle that task.


1. Select the Picture Tool from the Tool Palette.


2. We need to make sure that the Picture object is attached to the work space Container (the one in the center of the page). To accomplish this, simply position the mouse pointer on top of the work space Container. Press and hold down the left mouse button and draw a rectangle. The size isn’t important because we’re going to change it in a moment.


A Windows File Selector screen will appear.


3. In this case, we don’t really need to select a particular file, but VisualNEO for Windows won’t let us create a Picture object without one. To satisfy VisualNEO for Windows, just select any image file you like and click OK.


The selected image file will be inserted into the Picture object and displayed on the page.


4. Place the mouse pointer over the Picture object and click the right mouse button.


The Picture Properties screen will appear.


5. The name of the image you selected will appear in the Image File field. Backspace over the entire file name and enter the following (including the square brackets) in its place:


[ImageFile]


Your screen should look like this:



6. Set the Picture’s Snap Position property to Center.


7. Click the Appearance icon.


8. Set the Display Mode property to Actual Size.


9. Place check marks in both the Scroll bars and Allow mouse to pan image options.


10. Click OK.


The Picture will snap to match the dimensions of the work space Container minus the margins we specified earlier. Because the Picture object is attached to the Container, it snaps to the bounds of the Container instead of the entire publication. Don’t worry if the Picture is blank - that’s what we want.


Adding Text to the Status Bar

Next, let’s add the name of the image file we’re viewing to the status bar.


1. Select the Simple Text Tool from the Tool Palette.


2. We need to make sure that the Simple Text object is attached to the status bar Container (the one at the bottom of the page). To accomplish this, simply position the mouse pointer on top of the status bar Container. Press and hold down the left mouse button and draw a rectangle. The size isn’t important because we’re going to change it in a moment. Just make sure that the rectangle begins and ends within the bounds of the Container.


The Text Properties screen will appear.


3. Type [ImageFile] in the Caption field. (This is the same variable name we used in the Picture’s Image File field above.)


4. Set Horizontal Margin to “2” and Vertical Margin to “0”.


5. Set the Snap Position property to Center.


6. Click OK.


7. With the Text object selected, click the small arrow next to the Style Palette’s Line Width box.


8. Select “None” for the line width.


9. Click the small arrow next to the Style Palette’s Font box.


10. Select Arial, Normal, 10 Point.


Adding a File Selector Button

Finally, we need to add a button to the tool bar Container so that our readers can select image files for viewing.


1. Select the Push Button Tool from the Tool Palette.


2. We need to make sure that the Push Button object is attached to the tool bar Container. To accomplish this, simply position the mouse pointer on top of the tool bar Container (the one at the top of the page). Press and hold down the left mouse button and draw a rectangle. The size isn’t critical, just make sure that the rectangle begins and ends within the bounds of the Container.


The Push Button Properties screen will appear.


3. Type Open in the Caption field.


4. Click the Actions icon.


5. Type the following into the Action Editor:


FileOpenBox "Select an Image" "Images|*.jpg;*.bmp;*.png;*.gif" "" "[ImageFile]" ""


6. Click OK.


If part of the Open button’s text is missing, use the mouse to resize the object. Your publication should look something like this:



Saving The Publication

Before going any further, let’s save what we’ve done so far.


1. Select Save from the File menu.


2. In the VisualNEO for Windows 5 folder on your hard drive, open the Tutorial Files folder.


3. Type Tutorial4.pub in the File Name field.


4. Click Save.


Testing The Publication

We’re ready to take our image viewer for a test drive.


1. Select Run (From Start) from the App menu.


2. Test the publication by clicking the Open button and selecting an image file.


3. The purpose of this tutorial was to create a resizable publication, so let’s test that by using the mouse to change the size and shape of the window. As the window’s shape changes, notice how the Containers automatically adjust to compensate while retaining their relative positions.


4. Click the publication window’s close button or press the Esc key on your keyboard to return to design mode.


Congratulations, you’ve just created a resizable publication!