SeaBreeze

Georg Heeg eK is proud to announce the release of a new version of seaBreeze.
Version 4.4 is available both via Cincom Public Store and as QuickStart Image.

New features include:
- Based on VisualWorks 7.7 and Seaside 3.0

- Use of ValueHolders so that parts of the webpage are automatically updated whenever a server object changes during an Ajax callback.
- Use Lightbox Dialogs that work the same way as VisualWorks dialogs.
    - They can be called during an Ajax callback or during a normal callback.
    - Use predefined dialogs or use your own Components as dialog.
    - Progressbar Dialogs are available and work like the VisualWorks Notice class.

- Added new Elements:
    - Breadcrump - shows a sequence of links that can be used as history
    - Quicktime - embed QuickTime media in your webpage
    - Wav - embed Wav media in your webpage

- CSS Editor now shows errors in your css rules
- Color-scheme support to help with color selection. Themes can be easily created at http://colorschemedesigner.com.

have fun using seaBreeze!
Karsten

Some days ago Roland encountered a problem with seaBreeze where we wanted to perform a timely task after the user pressed a button. During this time the user simply had to wait and he wanted to present a progressbar to the user. As the goal of seaBreeze is to provide easy solutions to the user I wanted to make such a progress bar as simple to use as it is in VisualWorks. In VisualWorks you can do:

Notice show:'we are working on it' while:[we doALot].

The implementation for seaBreeze looks exactly like that, just with a different class:

SBAjaxProgress show:'we are working on it' while: [we doALot].

This will show a window that only tells the user that something is being done. If you know how much you have to do and you can show a progress bar, you can call:

SBAjaxProgress showProgress: 'counting...' complete: 100 while:[
        1 to: 100 do:[:i | 
            we doABit.  
            IncrementNotification raiseSignal.
        ]
    ]

That’s all there is to do.

Karsten

We have just released a new version of seaBreeze. It’s available both via Cincom Public Store and as QuickStart Image.

New features include:

• improved the build in documentation
• improved the TinyMCE integration
• added a ComboBox widget
• added a replacement for the Seaside Browser that only lists seaBreeze Applications
• added Conditional Element that renders its content only if its condition returns true
• improved the toolbar, it doesn’t have the reflexion anymore and thus bigger icons
• Tables can now generate HTML that allows for alternating row colors, or for non-scrolling Headers. You need to do the css though.
• improved the CSS Parser
• tons of tiny bug fixes

have fun using seaBreeze!
Karsten

Sorry, but although I set the time between comments to 3000 seconds (from the same IP) we still got loads of rubbish comments we had to delete so I have to disable this functionality :(

Nevertheless the members of the seaBreeze team will post here and you can reach them by mail...

Feel free to become a member of our mailing list (see seabreeze.heeg.de) and give us some input:

• Do you need a Squeak version of seaBreeze?
• Do you need a VAST version of seaBreeze?
• Do you need new features/elements?
• Do you need support?

Regards,

Magnus

Today we’ve published a new version of seaBreeze to the Cincom Public Repository and also updated the QuickStart Image.

New feature among bugfixes and small improvements is the change from XML to literal arrays which finally allows for porting seaBreeze to squeak without too deep changes to the squeak compiler.

The seaBreeze Team
at Georg Heeg eK

I managed to get the basic stuff working from a Squeak image, and some people from the mailing list agreed in packing the stuff Monticello-wise, but I still have to zip the image and put it on the server :(

Main problems with Squeak were (after getting rid of SXOR) "ifNotNil:", files (GIFs, JPGs,...), ColorValue (I did some nasty hack that should be changed), Collection protocoll (throughAll:, upToAll:,...) and some strange behavior of suddenly turning a subpane red with a cross through it and refusing to show any contents - dunno whether this is normal behavior.

I had a severe problem with _ in method names but worked around by recreating the CSSParser with the Squeak version of SMACC (after a hard time of finding out how to load Smacc into the Squeak image ;) ).

The current state shows the existing applications and lets you open the editor on it - I even managed to open a Squeak browser from the editor but don't know how to select a method - but some of the Javascript stuff seems not to work and before creating a new application with the wizard one probably should know how to compile classes and methods programmatically in Squeak...

We’ve used XML Methods in seaBreeze for a lot of stuff, most of all for the #windowSpec methods. The biggest problem with these methods were those awful hacks to the parser. I think those hacks are the main reason why seaBreeze couldn’t easily be ported to Squeak.

The last couple days I’ve worked on changing the XML representation to a more smalltalk like representation. The objects are now stored as literal arrays. It doesn’t look pretty but compared to XML it’s much simpler to work with.

The encoding and decoding is a bit different to the normal literal array approach though. In VisualWorks a class needs to implement #literalArrayEncoding or #decodeFromLiteralArray:. I wanted a more general solution and did the same that I did for the previous XML representation: simple literal array representation - slar. The idea is that an object just needs to return an array of symbols. These symbols can be used to access the required properties of the object. With this information the object is converted into a literal array and back.

The resulting literal arrays look a bit like lisp with hashes:

#( #slar 'SeaBreeze.SBSubmitButton'
    #( #positioning #( #slar 'SeaBreeze.SBPositioning'
            #( #positioningType #absolute )
            #( #layout #( #slar 'SeaBreeze.SBLayout'
                    #( #leftOffset 255 )
                    #( #topOffset 20 )
                 ) )
         ) )
    )

The #slar symbol at the beginning of the array tells the array that it has a complex object encoded via simple literal array representation. The string with the name of the class is the second object in the array. Starting with the third object there’s an array for each property of the encoded object. The first object of this subarray is the name of the property and the second object is the literal representing this property. If this object is no literal it is automatically converted.

Karsten

While we often advertise that seaBreeze provides a really simple way of creating web pages with a gui-editor. It is somewhat unknown that it also provides pretty cool features when it comes to programming the application logic. Nowadays Ajax is used almost everywhere on the web, which is cool: Ajax allows for nice user interfaces that update only parts of their content, improving both server load and user satisfaction. The only thing where Ajax doesn’t do much good is when it comes to the work flow: If you load a new page via Ajax, the browser doesn’t recognize this and thus doesn’t change back and forward buttons accordingly. If the user presses the back button after he did quite a lot of input on an Ajax-web page he’s probably taken back way to far in history and looses much of his work.

Now Seaside has these nice continuations that help the developer so much when doing work flows in web pages. But using Ajax you can’t put them to much use. Either you have an anchor that’s used as normal callback, or you use it as Ajax-callback.

In seaBreeze we wanted to simplify the usage of Ajax a lot. The first thing we did there was making updates on the web page more like in normal desktop applications: you just tell an element to update. In normal web applications you always have to know which elements to update when you write the update-handler. That means that Seaside’s “process the callback” and then “render the page again” is now also working for ajax-callbacks; first the callback is performed then the required elements are updated.

To request the update of an element you need to call:

   SBElementUpdater updateElementWithId:#MyElement.

The same mechanism is used to trigger effects on an element. You can call:

   SBEffectTrigger triggerEffect: #toggleBlind onElementWithId: #MyElement.

Getting back to the workflow problem mentioned earlier in this post, seaBreeze also solves this. In any callback you can execute a block so that it is executed like a normal non-ajax callback. This can be done by calling:

   SBAjaxCallback doAsNormalCallback:[self doSomething].

This is actually called whenever you send #call: or #answer: to a seaBreeze ApplicationModel. That has the nice side effect that you can use #call: and #answer: even in Ajax-Callbacks which would lead to problems if you do that with standard Seaside. The calls inside an Ajax-callback also support continuations so you shouldn’t notice any difference.

If you execute something with #doAsNormalCallback: this will reload the whole web page and the browser will update the back and forward buttons accordingly. So even if you don’t use #call: you can still have the browser keep a history of what the user does.

Karsten

I just uploaded a new version of the QuickStart Image. Yesterday’s image didn’t include the demo, now they’re included again. The seaBreeze QuickStart Image is available at http://seabreeze.heeg.de/?download

Karsten

We have just published a new major seaBreeze version, you can download it from cincom public repository (as always).

Some of the improvements are:
- major speed improvements for the editor
- smaller memory footprint
- new elements
- metatag support
...and many more...

In addition to that we have updated our QuickStart Image with these changes. You can find the new version at
http://seabreeze.heeg.de/

Any feedback/comments are appreciated.


The seaBreeze Team
at Georg Heeg eK

Our seaBreeze QuickStart Image (working title was 'One-Click image') is available now for download for Windows, Mac and Linux. To download please use the 'QuickStart' button on the seaBreeze home page seabreeze.heeg.de. The .zip resp. .tar.gz file is less than 25 meg small.

And if you like the demo, please send the link to your friends - they might like it too.

Reinhard

We are just on the verge of releasing a one-click image (for Windows and MacOsX).

It is a self-contained seaBreeze program with some web UI so that you can get a headstart without seing the Visualworks browser...

Maybe even someone who only knows DreamWeaver or a texteditor can play around with it and see the power of Seaside and seaBreeze.

Magnus

We just published the new seaBreeze version 3.1 to the public repository!

The changes include (but are not limited to):
    - much more complete documentation,
    - duplication of a selected element or element-structure,
    - file-based CSS rules editable in the CSS-Editor-Tab,
    - CSS attributes are moveable to and from a CSS file,
    - styled text element to easily import formatted text,
    - fixed embedding and calling of seaBreeze-components,
    - many small fixes and enhancements.   

The seaBreeze Team
at Georg Heeg eK

I added some new examples to the public store:

• A chart element based on PlotKit
• A babelfish element (enables users to translate your webpage into their language if it is accessible by Yahoo)

Enjoy!

Magnus

I put a load of examples into the public store - see "seaBreeze examples".

You even can write your own "Delicious Library" by enhancing the Inventory example (I have changed the query not to use Amazon webservices because you have to provide an Amazon developer ID but it should be easy to undo this).

Be aware that the built-in notebook screencams normally cannot focus on barcodes in a distance of 10cm :(

Magnus

Hi Everybody

we are pround to announce that seaBreeze is available in the public store repository.
Simply load the 'seaBreeze' bundle into a VisualWorks 7.6 image, and read the SeaBreeze-Documentation (a build-in application).

If you want to participate developing seaBreeze, visit:
  http://seabreeze.heeg.de

Look at the Developer-tab to get information about the issues and mailing lists we set up for coordination.

Regards,

Roland Wagener

Hello seaBreeze friends, as you might have heard, seaBreeze will move to open source. We are in the process of preparing a base version of seaBreeze to be published to the cincom open repository - until then, some work has to be done like removing unwanted references, making plans for the near future, do some final testing and provide some basic documentation.

But at least we plan to publish seaBreeze at the end of this week - thank you for your patience.

Reinhard

Yay! seaBreeze won the second price in this year’s Innovation Award at ESUG Conference. The other prices went to iSqueak (3rd price) and Dr. Geo II (1st price).

Georg also made an announcement: seaBreeze will be released under MIT license to the public repository. There is also a commercial license, in case you need support.

Karsten

This time we show how to start a new application with seaBreeze, and how the application works with CSS styles. There are two ways to access the video:

1. YouTube: http://www.youtube.com/watch?v=06ghmi9JTl8

2. Quicktime: http://seabreeze.heeg.de/files/external/AppStartScreencast3.mov

Thanks for any comments

Roland

The new website version is online. It references the screencast video on YouTube, and includes a download link for the Quicktime version of the video (13MB, much more detail).

Roland

The new seaBreeze screencast can be found on YouTube:

   http://www.youtube.com/watch?v=BBTaUR5wF7w

We are working on making the video available through the website asap!

Roland

With the internal release 2.1.0 we are starting a new sprint to enhance usability, design and base. At the same time we start a bootstrapping process for implementing Seabreeze in SeaBreeze

Because SeaBreeze should run in IE 7.0 as fine as in Firefox, i've given it a try yesterday, but it failed miserably because of javascript-errors. Unfortunately the IE is quite confidential about what went wrong in javascript, the IE didn't even tell me the offending script-files...

After some web-searching i've found a promising "how to debug javascript with Visual Web Developer Express 2008":

http://www.berniecode.com/blog/2007/03/08/how-to-debug-javascript-with-visual-web-developer-express/

After a really looooooong installation and following the given instructions word by word, it seems i've found a really nice tool for debugging our javascript in the IE 7.0.

So the real work (pain) begins....now

Yesterday I wanted to cleanup the SeaBreeze interface a bit and realized that I needed a menu implementation for Seaside. I came across http://www.knallgrau.at/code/unordered-list-as-dropdown-menu and as it was based on Scriptaculous I tried to implement a wrapper for Seaside. Now I can create menus with the VisualWorks menu editor and just call: html menu on:#myMenu of: self. and it will create a nice Menu that sends actions back to whatever "self" is. Karsten

Attributes of HTML elements are accessible by means of a property interface. The property interface is an extended way of accessing an object next to accessor methods.

Other applications like an element editor iterate through the properties of an element and can provide fitting user input fields for the specific property.

Today I tried to implement Sortables in Seaside. For some reason it wasn’t as easy as I expected it to be. Here’s what you have to do: add a sortable to your unordered list via:

(html sortable) create;

#tree: true

If you plan to use the onUpdate: method (which is pretty likely as a Sortable doesn’t make any sense without) you need to add passengers to the list items! I added passengers to some span elements inside these list items as I used the spans for drag and drop. But the drag and drop was to inflexible and so I wanted to use Sortables.

It took me a while to figure out that I had to move the passengers from the span objects to the list items. There was just no error or notice whatsoever, the onUpdate: javascript was just never called.

Karsten

I've just had my first look at the new grouping Karsten has done for the seabreeze palette and have to say:

Nicely done, Karsten, looks really good!

Perhaps it would be a good idea to add elements that are not easily categorized in a specific category to more than one to make them easier to find...

Markus

Today I added Undo to SeaBreeze. So far the undo support is implemented for changing the properties, the css and moving the elements around.

Moving the elements around in the hierarchy as well as adding and removing elements is not yet supported, but about to be added as well.

Karsten

I just stumbled over a nice little tool in the public repository: JavascriptInSmalltalk. Michael Lucas Smith developed this handy little package and it allows you to write javascript functions directly inside the Refactoring Browser. All you need to do is create a subclass of JavascriptClass. If you send your new class the method #javascript it’ll return the string that you need to serve as a javascript file. It contains the class definition as well as all the functions that you have in your class. Please note, that the class definition is for MooTools. If you use another Javascript library you might want to modify some of the class methods of JavascriptClass in order to produce text for your library.

The package requires SmeeStandaloneParser, which throws a little error when loaded, but as far as I can tell you might just ignore that.

Karsten

There is a bug in Scriptaculous: assume you have a droppabe inside a div. If this div has overflow:auto or overflow:scroll and you already scrolled down then you’ll see a totally annoying bug when dragging something on this droppable. There’s some ugly offset from the current mouse position to the highlighted element, on which the mouse should actually be on top.

To fix this you need to edit the dragdrop.js and replace occurrences of Position.within() by Position.withinIncludingScrolloffsets(). Documentation says that this function is a bit slower than within(), but at least it works correctly now.

Karsten

Last friday I added a ColorPicker to SeaBreeze. Gone are the times of entering some wild-guessed hex color values.

There’re two different modi: one mode will select the color and save it back into your model instantly, and one will only do so on submit.

Karsten

I just needed to create a more or less complex brush. It was basically a submit button, but it also had to render an additional tag before itself. I subclasses WAButtonTag and tried to implement #with:. It was much more complicated that I thought it to be.

Some digging around showed that the canvas’ #nest: and #insert: methods seemed to do what I needed. The #nest: method assumes that its parameter is rendered between the opening and closing tag, so it wasn’t exactly what I wanted. But the #insert: method was the right one, it allows other brushes to be rendered before the current tag.

Karsten

If you check the links (or the authors) you can see that the setup is still wrong...

We just moved our FileLibrary subclasses to be subclasses of WAExternalFileLibrary. The idea was to serve the files from outside of VisualWorks. Unfortunately the external file libraries are not treated as normal libraries in terms of URL-creation. Any url to a file has the same path but a different filename.

So the link to file main.css in library A would be /files/external/main.css, while in library B it would also be at /files/external/main.css. That’s not too useful and probably a bug in Seaside. More annoying is the fact that #deployFiles doesn’t write the files to disk so that they are found immediately. Instead they go into a folder with the same name as the library’s class. But the external file library searches only in the “files” folder. So one either copies the files manually to the files folder or changes the implementation of #deployFiles so that it always copies to the “files” folder.

However, Seaside 2.9 is said to contain a Seaside-FileSystem package to allow for easier access on files, so lets just keep looking forward to the new version.

Karsten

Checkbox and radio button should now be available.

Have fun (...finding bugs ;-))

The font styles always used default values that were also written to the windowSpec, now they don't do that anymore.

I have created some basic CSS editor functionality once again.

As Markus has enabled CSS usage in the editor you should be able to style a bit

Do we show seaBreeze in Reno?

I have updated the screencast - it is somewhat smaller and contains extended controls (but it still is a SWF file...)

• FileLibrary EditorFiles was changed and now is an external FileLibrary
• Positioning now works in Safari properly
  

All the entries are strangly sorted - maybe the have to be resynced?

Sorry, folks, but during the transfer the posts got somewhat garbled - I am in the process of straightening it out

Why does the picture on the seaBreeze website consist of a shark (and a starfish)?

CSS now is working once again inside the editor

hey, this really seems to work:)

Definition of STKElements in Seabreeze

* Design principles of STKElements

* Architecture of a Seabreeze application

Taylan

Some things should be done differently

• install (seaside.heeg.de)
• Concept: How to build web apps?
• Console: Start/Stop/Configure Server
• Heartbeat
• Select HTML elements
  
• "STK" mode similar to Halo mode
• "passivate" page
• local CSS
• "Auto Update" for preview
• Undo (s. Karstens tool)
• create toolbar (reusable components)
• create palette
• high quality icons
• edit HTML elements
• delete  HTML elements
• toggle edit mode
• Drag&Drop: feasibility
• HTML Editor supports CSS (when useful)
• Wizard concept for new apps
• create component
• "new web page" menu
• generate configuration for an app
• starter  app
• enhanced table support
  
• select methods in HTML editor
  

Just published some small package "SeaBreezeMagritte" as an example how to use Magritte with seaBreeze...

Mainly it consits of some methods I added on the class side.

• Who did try Seaside?
• What where the results?
  

hmm, this Seaside really works nice - see the new webmail app I build that looks much nicer than the old one.

Had a hard time to find out how to do some things, though.

Will buy a book on CSS ...

Does a movable element have to be surrounded by a DIV

Currently it’s pretty tedious to edit CSS in Seaside. There’s the style method in the components or CSS methods in the file libraries. I think using some external CSS editor during development might be a little bit of an overkill. Once the webpage is done, this surely might be the right way to go, but not while exploring how the webpage might look like and giving it some basic style.

Developers don’t need the most feature-complete CSS editor out there. Instead they need a simple way of setting some object’s style. Doing this is just not possible with Seaside. Modifying strings in a method, inside an editor that is made for Smalltalk syntax and not for CSS, is really a pain. It’s even worse if you’re unfamiliar with CSS. Having a CSS editor should really ease the pain and speed up the process of creating webpages with Seaside.

When writing some Seaside applications I found that there is no documentation and almost no comments. That makes it pretty hard to get started with seaside. It would really be cool if there's a tool that could help creating the interface. Using seaside is currently more like drawing directly to the graphics context instead of using widgets.

When programming web pages with Seaside you cannot prevent from comparing with VisualWorks UIPainter, which effectively does the same thing:

Seaside constructing GUIs for the web, UIPainter creating standalone GUIs.

Wouldn't it be nice to have "wysiwyg" construction for Seaside?

The typical development cycle for Seaside programming is:

• Write the code in your Refactoring Browser,
• go to the Internet browser,
• reload the page,
• see if it works,
• go to Refactoring Browser,
• refine the code,
• go to the Internet browser, ...

This reminds to development cycles of ancient times (MS Word text/graphic mode) or typical non-Smalltalk development (code, compile, link, run, ...).

What if having the Internet browser as the wysiwyg editor that allows to configure web pages. I guess this would boost productivity significantly.

We need an application wizard to help novice users of Seaside to get a head start.

At the moment the learning curve is steep if you do not work through one of the tutorials so it would be convenient to have some kind of wizard functionality doing the initial setup.

Best would be to have the application run in a web browser

The current layout of the CSS editor makes it unusable for more complex CSS files/entries

We came to the conclusion to select the HTML-Elements that need to be edited, or deleted are best selected via Drag and Drop.

But not the way it is done when selecting components, but rather by dragging the edit action onto the element that needs to be edited.

To add the drop-area to the HTML-Elements we wrapped them into a div that accepts drop objects of the css-class 'stkAction'. These objects are assumed to carry a one-argument block that is used to double-dispatch the selected object to the editor's action.

The buttons for edit and delete were added and made draggable. They carry said block as 'passenger'. This block is implemented to call #editElement:on an ElementAddComponent. This method sends #editElement:back to the selected element, with self as argument, so that the element knows which object to use when calling #lightbox:. The lightbox method in ElementAddComponent is changed to send #call: instead, because the normal lightbox does not seem to work when called from a scriptaculous callback, like drag and drop handlers. The edit and delete buttons were added to the toolbar of the AddElement window.

This window is yet to be renamed, because it now does more than just add elements.

We just thought the old name too long and prefererred a shorter version - what do you think?