1 Installation
2 Design and Architecture
2.1 The SBApplicationModel
2.2 Control Flow in seaBreeze Applications
3 Start a new application
3.1 Using the Editor
3.1.1 The Toolbar
3.1.2 The Preview Area
3.1.3 The Element Tree
3.1.4 The Palette
3.1.5 The Element Editor
3.1.6 The Status Bar
5 How to display a collection of objects
seaBreezeThe Element Editor
Any change in one of the editors tabs is only applied to the selected element after you press the 'OK' button in the top-right corner of the editor tab. Before you change to another tab, you have to press OK to save the settings you have done so far. This is true for most of the parameters you may change or adjust. However, when adding a new attribute definition in the CSS-editor, the change is applied immediately.
All attribute or property settings have a small 'x' button to the right, which allows you to clear this setting you made. In the CSS-editor, this will remove an attribute setting from the editor, if it wasn't one of the default ones.
Some attribute or property settings will have a small light bulb displayed to the right of the small 'x'. If you let your mouse stay over the light bulb, a help text will give additinal info about the use of the respective attribute or property setting.
- Editor tabs for the whole page:
- Editor tabs for a selected element:
The Basic Tab for a selected element ↑
The first element you select will enable the basic editor, it is the first tab.
You will see a fixed set of attributes for all elements, and an individual set. The element documentation in the Palette chapter concentrates on the individual attributes, so the following describes the general ones.
The ID-Attribute
All elements has to have an ID. The value of this field is always set automatically, the ID is locally unique. So, if you add a TextElement, the first one will have the ID 'Text1', and the second 'Text2', and so on. Be carefull when changing the ID of an element, the uniqueness has to be ensured! Otherwise seaBreeze might get in trouble when selection elements in the editor.
The element ID plays an additional role when you use an SBElementUpdater to trigger a display refresh of an individual element in an Ajax call. The ID is the only way to address the target element.
The CSS-Class Setting
Almost all elements support styling support through CSS. This attribute just allows you to enter a CSS-class name, which is defined in a CSS-file. This may be an external CSS-file, serverd by your webserver, or a file you defined for your application, which is contained in the projects fileLibrary. If your choosen CSS-class defines properties for the element you selected, it will be immediately displayed, if the CSS-file containing the definition is accessible to your browser.
The Tooltip Attribute
While the previous attributes are common to all HTML elements, the following are special to seaBreeze elements. The tooltip field takes a string, which is displayed in the running application when the mouse stays above the element in the browser. A tooltip is a temporary window, normaly with a yellow background color, which disappears as soon as you move the mouse.
The CSS Tab ↑
The CSS editor tab presents a fixed set of CSS properties of a selected element. This set is expandable using the bottom line of two entry fields of the tab. You add an additional property like this:
enter an attribute or property name into the left input field (like: width, height, border, padding, margin, float, vertical-align, z-index etc.), and
enter the value or values of the attribute into the right input field.
Numeric values may need a unit, like: ex, em, px.press 'Return' on the keyboard to exit the right input field. Only then, the new property definition is added to your CSS configuration for the selected element! This is one of the situations, when a new setting is immediately applied to the selected element without pressing the 'OK' button.
As you can see in the screenshot, the fixed set in the top area of the editor consists of the text related properties of an element, like alignment, font family, font size, and boldness. The foreground and background color may be set using a small color editor, it is opened if you click on the colored rectangular areas.
In the screenshot, you see an example of the way an external CSS file is integrated into the editor. The selected element has its CSS-class attribute set in the Basic editor, so this editor presents the settings defined by this class (color, background-color, font-family, and padding). The CSS-class based settings may now be edited here, and they are written back to the file, if you press 'OK'.
But the CSS-editor can do more for you. The small folder-like icons to the right of each property setting allow you to:
convert this property from a CSS-class-based property to an element specific property. This way you may overwrite the setting of the CSS-class just for this element.
convert this element specific property into a CSS-file-based property. This button will open a dialog like the one below, which alows you to select the location to write the CSS-property. The file library may be chosen as well as the file in the file library, simply from the pop up menus. You may write the property setting back to a class in the selected file, or create a new class for it by just entering the name of a new class.
The Layout Tab ↑
This tab controls the position of the selected element on the page. The 'Top', 'Left', 'Right' and 'Bottom' fields show the origin coordinate of the element, the numbers will be adapted, if you position the selection in the preview area. But you may also enter numbers into the fields, press the 'OK' button, and then see the result in the preview area.
A very important choice you can make in the layout editor is the way the lement should be positioned, and that is controlled by the pull-down menu labeled 'Position Model'. The choices are:
- Relative
This is the default setting. When using this position model, the browser calculates the final locations for the elements on the page. Positions may be different from browser to browser, in browser windows of different size, and may change when or after the browser window is resized. However, the relative position model is more felxible, adapts to different browsers more easily than the absolute model. - Absolute
Using absolute positioning pin points the elements onto the web page. This is good for layouts using the page space very efficiently. The caveat is that a fixed layout may 'work' on one browser, while it fails to look good on another browser. A missing font, or a default font chosen by the user, might lead to unreadable labels in an absolute positioned layout. The relative layout model is far more flexible in those situations.
The DragDrop Tab ↑
This tab allows you to configure drag and drop functionality for almost any element on the web page. There are two different perspectives:
- Drag configuration
The three options under the topic 'Dragging' support the following behaviour:- Passenger
requires a method name, which is used to ask the application for an object to be transported via drag&drop. This object will be 'dropped' at the target location. The object may be an arbitrary object, no limitiations. Dragging will only work, if the passenger-method is configured. - Revert
If you start dragging an element, say, a text element, you get a transparent image of this text attached to your mouse pointer. If 'Revert' is checked, this drag-image will flip back to its original position, if the drag is finished (with or without a succesful drop!). - Ghosting
Again, the way dragging is presented may be configured. If 'Ghosting' is checked, the drag-image will leave a copy behind at the original position of the draggable element.
- Passenger
- Drop configuration
The two properties are used to configure a drop target.- Class
The element configured to be draggable has to have been configured with the same CSS-class as this property here. - Callback
To be able to trigger an application activity when dropping an element here, you may enter a one-argument method name here (like: dropImage:). The method will receive the passenger object as its argument, and it will only be called, if the element matched the Class setting.
- Class
The Events Tab ↑
This tab allows you to configure event functionality for almost any event of an element.
Simply configure a method name for one or more events in the editor. As soon as you do so, an arrow right to the input field will indicate if the method is implemented (black arrow) or if you have to implement the method (red arrow).
The Basic Tab for the whole page ↑
If no element is selected, the basic editor tab for the whole page is shown.
Only two settings may be configured for the page:
The Title Page Setting
The String you enter here is the title of the page, displayed in the web browser window title.
The Menu Setting
You may enter a method name here, which is searched for in your application; the method should return an instance of class 'Menu'. The menu will show up above all elements of your page, and looks like menu bar. The menu may be complex, including submenus.
The menu resp. the method may be created using the MenuEditor from the VisualWorks UIPainter tool kit. The editor allows you to configure menus from label->value pairs, where the label is visible to the user, and the value is a method name to be executed when the menu item is selected.
The basic editor in seaBreeze allows you to generate a default menu, if you just provide a method name, and click on the red arrow right next to it. The default menu is usefull for debugging your application, it provides a 'Halt' and an 'Inspect' pick, opening a debugger or an inspector on your application object. The design of the menu has a greenish background, and looks like this (this shows an application configured to have the default menu, which is loaded in the seaBreeze editor):
The CSS Tab for the page ↑
The CSS editor tab presented here is used to set style parameters for the whole page. The attributes are the same as described for the CSS-tab for a selected element.
The Meta Tab for the page ↑
This tab allows you to configure event functionality for almost any event of an element.
Simply configure a method name for one or more events in the editor. As soon as you do so, an arrow right to the input field will indicate if the method is implemented (black arrow) or if you have to implement the method (red arrow).
The Files Tab ↑
This tab is only available if NO element is selected, it lists the files in the file library of your application. A checkbox next to each file lets you specify, if the file is to be loaded when the web page is requested by a browser. With the checkbox un-checked, the file will be requested by the browser seperately, when it is referenced during page display.
The small 'x' right to the file name allows you to remove a file from the file library. The method containing the file contents will be deleted.
At the top line of the editor tab you see a file upload functionality. Press 'Durchsuchen' (Browse), and a platform file dialog will open, letting you pick a file on your harddisk. After you return from the file dialog, you have to press 'Upload' to actualy upload and import the file into the file library.