seaBreezeThe Editor Toolbar

The Save Button↑

If you edit a web page in the seaBreeze editor, you should save your work from time to time using this button. It will generate or re-generate the 'windowSpec' method in your application class.

The Undo- and the Redo-Button↑

Most of the operation in the seaBreeze editor are undo-able. So you deleted an element and want it back? As soon as the left one of the two buttons is active (indicated by the yellow color, like in the example on this page), you may undo your last action and get the deleted element back. Furthermore, as soon as you did one undo, the right button will get activated (indicated by the green color), and you may choose to re-do your deletion, if you like. Furthermore, the undo will collect more than one activity, which are all undo-able by pressing undo multiple times (as long as the button is active!).

The Delete Button↑

The Single-Multi-Select Button↑

• single select mode
  
  Each selection will first deselect the previous one. This is the default mode of the editor, and you should normally work in this mode to avoid confusion.
• multi select mode
  
  When switching to multi-select mode, each click on an element in either the tree or the preview area will add the target to the selection set. Only with multiple elements selected, you are able to start certain operations in the editor, like: wrapping all elements into a container, or delete multiple elements. Remember that you have to press the desired group-oriented functionality in multi-select mode! In multi-select mode, the ElementEditor is switched off.
  
  And do NOT forget to switch back to single-select mode afterwards!

The Group Button↑

You use this button to put one or more elements into one container. A container may be e.g. a Div-element, which provides easier arrangement on the page. After you press the Container-Button, you can chose the desired container type from a list:

• an Anchor
• a CollectionContainer
• a DIV element
• a Heading
• an ObjectContainer
• a Paragraph
• a Wrapper or Drawer

Each container type is represented by a class name in the list, all start with the prefix 'SB' (they are seaBreeze classes). The container elements are explained in detail in the Palette chapter.

Create a Subcomponent from the Current Selection↑

If you have developed a fairly complex page, and find, that parts of that page could be re-used as a component, then this function helps you to do so. Simple use the multi-selection button, select the elements on your page, which should be part of the new component, and use this function to create a new sub component.

Duplicate the selected Element↑

This button will duplicate the selected element, it is only active in singel-select mode! The selected element will be duplicated including its child elements. Especialy all the setting for CSS and Layout are preserved. The duplicated element will be created in the same container as, and below of the original element.

Define Models for your Elements↑

The elements on your page may reference aspects and actions of your application class. These are called 'models of the elements', and if you just went ahead during the design of a page to fill in names for aspects and actions, your application will not provide any of these. By using the Define-Models button, seaBreeze generates all this necessary code in your application class. An aspect will be an instance variable with two accessor methods, an action will be a single method. All methods have a comment, indicating that they were generated by seaBreeze; this also will put some text into the Transcript, if the methods are called without you preparing some meaningful code.

Create a Component↑

Think of a Component as a kind of subapplication. You may want to embed it into the page of the main application, or call it from there to request additional data. After you press this button, a dialog in a lightbox will ask you to specify the following parameters of your new component (see graphic to the right): the class name, the namespace for that class, and the package for the class. As you are working on an application already, both the namespace and the package are derived from it, and filled into the input fields. After you hit 'Add Component', the editor will open on this new, empty component, ready for you to add elements.

Browse the Application Class↑

Use this button to open the SBApplicationModel subclass of your current application in a VisualWorks System Browser.

Leave the Editor and start the Application↑

If you have finished your work on an application , and want to see the results, then this button will help you do so. If pressed, the editor will be closed, and your application is started. If this function detects that your work was not saved before pressing the button, a dialog will ask you what should happen with your work. You may either discard the work and leave the editor, cancel this function and stay inside the editor, or save your work, and leave the editor.

The Component Drawer↑

The component drawer gives you immediate access to all components of your project. The drawer is kind of a pull-down-menu here, and allows you to switch between your application and any of the components you created (see graphic). Choosing a component or application in the drawer will ensure that none of your current work is lost. After that, the editor will simply present the web page of your selected component.

Open the Documentation↑

To get more information about how to work with seaBreeze, this button will open the seaBreeze Documentation in a second tab or window of your web browser.