Javascript in seaBreeze 

The approach to using Javascript in seaBreeze is different to what other web-frameworks may provide. There're two kinds of Javascript, one is Javascript that runs on the website and handles the user interaction and there's Javascript sent to the website from the server in order to do something.

Handling User Interactions on the Website

To execute Javascript on a website, the Javascript can either be part of the html elements or it can be provided in Javscript files that are linked from the HTML page.

Adding Javascript files to a Website

Every application that is created, has a class that's a subclass of SBFileLibrary. The file libraries can contain CSS files, Images or Javascript files that are stored in Methods. Subclasses can implement the method #selectorsToInclude. The methods that are returned in #selectorsToInclude are files that the html file will link automatically. The file library will automatically figure out based on the file's extension how to link the file from the html file. A Javascript file will be linked as a <script> tag while a CSS file will be linked via <link> tag.

Rendering Javascript in HTML

Another approach of adding Javascript to a web site is to include it in HTML directly. That can be used to add click-handlers to Links. In seaBreeze that can easily be done by checking the "Use Ajax" checkbox in the WebPainter. Other elements like Buttons or Forms have an Ajax checkbox to enable Ajax, too.

It is also possible to render custom Javascript by subclassing an SBElement class. The subclass can render the element in a way that adds Javascript to it. In the WebPainter it is then possible to choose this subclass in the Adv. Tab of the Element Property Editor. The Class attribute defines which kind of class this element is.

Triggering Javascript from the seaBreeze Server

When the user initiates a callback on the seaBreeze server via Ajax, the web site is not automatically reloaded, which is the reason to use Ajax in first place: to update the website in a smart way that doesn't require a full reload of the web site. When the callback is executed in the seaBreeze server, it has to be possible to update specific elements.

Triggering Javascript for seaBreeze Elements

In seaBreeze there're several Ajax actions available that can be triggered during an Ajax Callback. The most important one is probably the one to redraw an element. To manually mark an element for refresh, send #updateElementWithId: to the application model, passing the element's id as argument. As seaBreeze uses ValueHolders for its aspects, it automatically detects when an element should be refreshed so it's only rarely needed to manually update an element. 

On the implementation side, Notification objects are used to find out which elements to communicate the request to trigger some behavior. To implement custom Javascript triggers, subclass SBAjaxNotification or one of its subclasses. These notifications all work on elements and as such remember the element's id. Then then know how to render the correct javascript, when requested to do so.



Copyright 2013 by Georg Heeg eK, released under MIT License