Sage Runtime / WebTop Apps

2010-07-13T15:48:00.000-07:00

Version 1.0 of Sage is finally out and there are a couple of noteworthy changes.

All Non-OSS dependencies removed

Prior to v1.0 the commercially licensed JIDE libraries were needed to launch Sage. This is no longer the case. The only library now needed is the jide-oss library. If the basic Swing components plus jide-oss meet your needs, then you are good to go. The Black Majic and Covergirls demo use this configuration. Check them out to see an example of the available functionality. Here is some of what will not be available, all specialized tables (including tree
and property tables), JIDE specific table enhancements like header/footer tables, column/row spanning, all table editing enhancements (Sage and JIDE), specialized combo boxes ( including the date chooser and color chooser ), docking and frames, and the specialized tab panes (outlook, floor, document).

Native Browser Support

Thanks to the fine work by the folks at the SWT Project and Christopher Deckers Native Swing Project, you can now embed the native browser in Sage apps (IE on Win32, Safari on OS X, and Firefox on Linux). The JVM property -DSage.webBrowser=swt enables this feature and registers the appropriate mime types and viewers.

New Default LNF

There is a new Default Look And Feel (LNF) which is the LNF used when you don't specify one or you use the name "Default". This is basically the System LNF on windows and Mac and the Cross Platform one on Linux with some platform specific enhancements and some standard UI properties and colors set. Using this LNF and setting the Sage.control color property will give you nice gradients (for light colors) derived from the specified color. It will also give you the improved HTML support and nice looking combo boxes, spinners and scroll bars on non-Mac platforms.

Improved HTML Capabilities

Hyperlinks in Table and List viewers - Table and List viewers now support hyperlinks via the default Label renderer. You can use HTML links in your table/list data and then attach a hyperlink listener the table/list. Sage will invoke the appropriate method (entered, exited, clicked) when the user interacts with a hyperlink. HTML 5 Canvas support - An HTML 5 Canvas widget has been added. This widget supports the HTMLCanvasElement and CanvasRenderingContext2D APIs such that any code written for those APIs will run unmodified in Sage. You can also retrieve a CanvasRenderingContext2D handle that will allow you to draw on the background of any Sage widget via this API. The cool thing about supporting this API is not the functionality it exposes (you already have the full Java2D API at your disposal), but the ability to leverage libraries written to this API. Supposedly Flash CS5 will emit code for the HTML5 Canvas. See the Black Majic demo for a couple Chrome Experiments demos running in Sage.
HTML Lists Enhancements - The default Swing HTML list painter has been replaced so that now bulleted lists are painted properly and they scale as the font size increase. Also there are new actions for inserting lists into existing HTML text and they should work as expected (i.e. not the default Swing behavior).
Dynamic color support - You can now use any Sage color name in your HTML and style sheets. If that color is a dynamic color then the color of the rendered HTML will change whenever you update the dynamic color's value.
Enhanced support in Labels. A new UI property has be introduced (Sage.Label.useCustomEditorKit) that when set to true will allow labels to take advantage of all Sage specific HTML enhancements. This means that all global styles defined in your custom style-sheet will be utilized by labels (including dynamic colors). Labels also support hyperlinks and expose APIs to find the link or text under the mouse pointer. The Black Majic demo makes minimal use of dynamic colors and a custom style sheet. This property is automatically enabled under the default LNF

Improved Asynchronous Programming Support.

All runnables now support the ability to specify code that gets called when the execution of the runnable has completed, and code that gets called when the runnable is canceled. You can also be notified via the standard Java wait/notify model wen the execution is complete.
New APIs for the delayed retrieval of icons/images with the ability to specify the image to display while the requested image is still being loaded. The ability to isolate background loading of images such that they don't block other background tasks from running.
Support for animated spinners that can be displayed while background tasks are running

Check out the Boondoggle Facebook application which showcases all of the new HTML enhancements (except for the Canvas) and the heavy use of the asynchronous capabilities to arbitrarily cancel pending data loads and start new ones. Even if you don't have a Facebook account you can still see some additional screenshots as the Boondoggle's page is public. Below is a screen shot of Boondoggle displaying the Facebook feed for Nickelback. What you are looking at is a TreeTable widget rendering the HTML(the bright white text are hyper links). This particular table also supports text selection and copying (like in a text editor). The text "They have extended their Dark Horse World Tour. The next leg of the tour, produced by Live Nation, will begin on September 14 in Nashville and will run through October 30 in Las Vegas." was copied and pasted into this document. This functionality is implemented in JavaScript using a custom background painter and the ability to find the text at any point in a label-based renderer.

Boondoggle Facebook Application

2009-08-19T14:19:00.000-07:00

Version 0.98 (http://www.sparseware.com/sage/demos/) is out. I have been busy working on a real world sage application with real requirements in order to help flesh out the sage feature set and smooth out the rough edges. I finally came to a good stopping point and can now put out a new version. There are a couple of significant new features and a couple of nice to haves. The old demos’ have been upgraded to look better/cleaner and to take advantage of some of the new features and a new demo(Black Majic) has been created to show of the flasher side of Sage. Some of the things featured in the new demo are:

a shaped windows using soft clipping, achieved by setting the opaque attribute to false and using a shaped border,
skinning via dynamic color management and combox, slider, and scrollbar customization,
window translucency (Disappearing act slider) ,
support for plugin animations (see the load animation of the Skynard panel) ,
and last but not least JavaFX integration via a JavaFX scene viewer for Sage

Text/Icon Zooming

Sage now supports text and icon zooming similar to what is found in most other browsers.
Simply call the setRelativeFontSize method on the sage object with a value other than 1 and the application will be zoomed accordingly.
The following JavaScript function zooms in by 10% (relative to the normal size) every time the function is called:

 function increaseFontSize() {
var rsize=sage.relativeFontSize
rsize+=.1
if(rsize>3) {
 window.beep()
}
else {
 sage.relativeFontSize=rsize
}
}

One of the problems with scaling no-vector based graphics is that you loose fidelity as you scale up. Most of the time scaling a big image down by 50% produces an image that is better looking than scaling a small image up by 100%. Whether or not you want sage to automatically scale icons during zooming is controlled via the scaleIconsWithFont property on the application configuration object. It is defined as follows:

scaleIconsWithFont Boolean Default false [defaultBaseSize, defaultBaseScaleFactor, scaling="bilinear_cached"]

The defaultBaseSize and defaultBaseScaleFactor attributes lets you determine the default size for your icons and the default scaling base for those icons when the relative font size is equal to 1. This allows you to use icons that are larger than the standard 16x16 and have sage scale them down to 16x16. For example, the following configuration will automatically scale all 24x24 images (that don't explicitly have a scaling base defined) down to 16x16 images when the relative font size is equal to 1.

scaleIconsWithFont: true [defaultBaseScaleFactor="0.666666666", defaultBaseSize="24x24"]

The images will be scaled using bilinear interpolation and the resulting value cached (default value for the scaling attribute).
This functionality can be seen in the Outlook demo using the view menu zooming options or pressing Ctrl+Plus to zoom in and
Ctrl+Minus to zoom out. The outlook demo was redesigned to use font sensitive units for layout, component preferred sizes, and table column widths. Sage will automatically layout and resize widgets and columns (if they haven't been resized by the user), as appropriate, when the relative font size changes. The icons in the demo are all 16x16. I was too lazy to create higher fidelity ones.

Scriptable HTML Forms

HTML forms are now supported by the document pane.
Sage widgets are created for form elements, allowing them to be skinned, scripted, and controlled like any other Sage widget.
Also supported is a custom input type and the ability to use the class attribute to configure sage properties. For example if you wanted to have a radio button where the text was part of the button you could use the following HTML:

<input type="radio" name="rb_1" value="hello" class="RadioButton{value='Hello World'}">

In a regular browser you would just get the button with no text. In sage you would get a button with the text "Hello World" next to it and the user will be able to click on the text to toggle the button.

To insert a real table widget (not an HTML table) you could do the following:

<input type="custom" name="table_1" class="Table{templateName: 'mytable_template' }">

This would create a table using the information contained in the 'mytable_template' template to configure the table. You could put the complete table definition in the class attribute but that would be a very long line and look a little sloppy (which doesn't matter if the HTML is being programmatically generated).

Dynamic Color Management

Sage now allows you to dynamically update the color of all widgets/painters by simply changing the value of a named color. Activating this support is simply a matter of setting the keep_color_keys attribute on the lookAndFeelPropertiesURL property of the application to true. The following definition derives all colors that are part of a color scheme from a single color:

lookAndFeelPropertiesURL:<<
defaultBackground=MappedColor|#EDE9E3 [os="windows,linux"]
defaultBackground=MappedColor|#E8E8E8 [os="os x"]
tableGrid=MappedColor|defaultBackground@50
tableAlternating=MappedColor|defaultBackground@25
menuBackground=MappedColor|defaultBackground+25

Sage.controlLtGradient=Color|defaultBackground+5
Sage.controlDkGradient=Color|defaultBackground-5
Sage.control=Color|defaultBackground
Sage.controlShadow=Color|defaultBackground-25
Sage.controlDkShadow=Color|defaultBackground-50
Sage.controlLtShadow=Color|defaultBackground-5
Sage.controlHighlight=Color|defaultBackground-5
Sage.controlLtHighlight=Color|white

Sage.ScrollBar.thumb=Color|defaultBackground-5  [os="windows,linux"]
Sage.ScrollBar.thumbShadow=Color|Sage.controlShadow [os="windows,linux"]
Sage.ScrollBar.thumbDarkShadow=Color|Sage.controlDkShadow [os="windows,linux"]
Sage.ScrollBar.arrow=Color|Sage.controlDkShadow [os="windows,linux"]
Sage.ScrollBar.background=Color|defaultBackground-5 [os="windows,linux"]
Sage.ScrollBar.shadow=Color|Sage.controlShadow [os="windows,linux"]
Sage.ScrollBar.trackBorder=Color|Sage.controlDkShadow [os="windows,linux"]

Sage.ComboBox.border=Border|{line_3d [cornerArc="6",padForArc=false]}
Sage.ComboBox.background=BackgroundColor|white|defaultBackground-5 [os="windows,linux"]
PopupMenu.background=Color|menuBackground
PopupMenuSeparator.background=Color|menuBackground
Menu.mouseHoverBorder=Border|{line}
Menu.mouseHoverBackground=Color|menuBackground
Menu.selectionBackground=Color|menuBackground
Menu.background=Color|menuBackground
Menu.selectionBorderColor=Color|Sage.controlShadow
MenuItem.background=Color|menuBackground
MenuItem.selectionBorderColor=Color|Sage.controlShadow
MenuItem.shadowColor==Color|defaultBackground+5
CheckBoxMenuItem.background=Color|menuBackground
CheckBoxMenuItem.selectionBorderColor=Color|Sage.controlShadow
>> [ inline="true", keep_color_keys=true]

The BackgroundColor class designates the color is a background color (which means that it can be a gradient). The MappedColor class designates that colors derived form this color will all reference the named and not reference the actual color value.
Note: color@50 gives you a 50% transparency; color-50 gives you a color with 50% less luminance; [os="windows,linux"] means that these values should only be used for windows and Linux

The configuration produces the following color scheme (on windows and Linux, the scheme is gray for OS X)

Executing the following JavaScript code:

sage.UIDefaults["defaultBackground"]= window.getColor("#DCE0DC")
window.update()

Will instantly make the application look like this:

Other Niceties

Shaped and translucent windows are supported for JRE 1.6u10 and later, or if the JNA library is in the class path. The windowPainter property of the MainWindow objects allows you to specify a background image, background color/gradient and border for the main window (the border is placed on the root pane). The contentPanePainter property allows you to specify a background image, background color/gradient and border for the content pane. If you set true useBorderShape to true then the window will be shaped to match the specified border and sage will handle the reshaping when the windows is resized or maximized
Support for load and transition animations and other custom effects via the print primer/finisher interface that allows complete control over paint surfaces.
Improved slider, scrollbar and combo box skinning
Ruby is now a first class scripting language

2008-10-28T21:54:00.000-07:00

Version 0.9.1 is out. It is a minor update with some API cleanup and a few new miscellaneous features. The most noteworthy thing is the inclusion of a sage-extras jar that has some none-core widgets. One is a map viewer and the other is a coverflow viewer. These widgets are not ready for prime time but they are usable and the source is available. The coverflow viewer can be seen in action on the iTunes Clone demo.

I also did an interview with Kirill Grouchnikov from Pushing Pixels. You can see the interview here

2008-09-20T14:01:00.000-07:00

Version 0.9 has been released. This is the code complete version with stable APIs. Notable in this version is better Mac support, as well as automatic support for deploying any Sage application as a Java Applet. Also available is an alpha version of Guru™, the IDE for sage that includes a WYSIWUG form designer, JavaScript editor, and interactive JavaScript debugger with remote debugging support. What’s cool about Guru™ is that is just another Sage application and a large portion of the code is written in JavaScript.

The website (http://www.sparseware.com/sage/) has been upgraded and screen casts have been added to show the demo applications as well as demonstrate Guru. The source code for the two main demos can also be browsed online. The source code for all demos as well as the source for Sage itself is available for download on the site.

Version 0.6 Released

2007-11-12T14:02:00.000-08:00

Version 0.6 has been released (slowly but surely making my way to version 1.0). This version is functionally complete and the APIs are relatively stable. The developer toolkit now contains a modified version of the Abeille Forms Designer. This version has a new file menu option that allows Abeille forms to be saved as SDF. Most of the property forms in the Widget Explorer were designed with this tool.

The Widget Explorer allows most of the widgets and their associated properties to be visually configured and explored in real-time. You can play around with multi-color gradients, semi-transparent background and overlay images as well as non-rectangular line borders, all of which can be combined to create some interesting visual effects. These features are supported for most widgets.

You can also check out the MS Outlook Demo again which highlights the support for gradient selection painters with custom borders and having the border (and focus rectangle) around the row instead of the column (when columns are not selectable)

A note on colors:

plus and minus (+- ) are used to adjusts luminance
when using hex, you can specify the alpha value for a color by adding it to the end of the normal 6 character hex string (e.g. #ffffff80 gives a 50% transparent white) or if you use a named color then you can say “white@50” to get 50% transparent white.
you can type any shorthand color value into any of the color fields and it will resolve to the correct hex color value

Introducing Sage

2007-08-12T21:29:00.000-07:00

Sage is the realization of an idea I had about 11 years ago after I had built my first Netscape plug-in to provide a table widget capable of doing things that table widgets do in typical desktop applications. I wanted to be able to build desktop caliber apps that are built the way web applications are built, using a markup language to describe the UI and scripting to control the interactions. I also wanted them to be URL centric, such that all resources and data are accessed via an URL.

Except for the quality of tools available for building JavaScript/DHTML (or AJAX) applications, not a lot has changed. Granted the technology has evolved enough such that the table widget plug-in can now be built using AJAX. However, the level of sophistication of desktop has also significantly increased in that span of time, and to match that level of sophistication using existing approaches requires a lot of effort to just get something that is close enough. Also, while the new Yahoo mail client is fairly impressive, I am not about to ditch my Microsoft Outlook client anytime soon.

MS Outlook happens to be one of the three most used applications on my desktop (the other two being FireFox, and NetBeans). One of the goals I had for Sage was to be able to build a UI that looks and functions just like Outlook by simply using markup and scripting. I also wanted the applications capable of being run standalone without the need for a web browser but to also able to be launched via a web browser. Another key requirement was the data model. While there are a number of existing tools out there that allow you to do some of these things, none that I know of, fully addresses the issue of easily populating widgets with data and providing the widgets with some understanding of how to render the data (fonts, colors, action links, icons, tooltips, drag and drop, etc). Basically, to be able to not just markup the UI but also markup data (similar to what you would do if the data was being presented via a web page), yet still able to do typical client-side data manipulations like sorting, filtering, drag and drop etc. It is not that some of these things are not possible with the current technologies, it is the effort required to do them is what I had an issue with.

Thus was Sage born, built on Java (because of the proliferation of the runtime and commercial and open source libraries available), and Swing (because it is written in Java so I could fix bugs and make changes as needed). I do hope to have a .Net version someday. Sage is still in its infancy but the functionality is comprehensive enough and it is stable enough to be officially unveiled to the public. As you might expect, documentation is sparse but there are a couple of full fledged examples (including a MS Outlook clone), and the source code for the engine is also available.

Sage was born out of my needs, wants, and experiences with other technology. If your wants, needs, or experiences differ from mine, then Sage may be of little interest to you. You can find the demos and downloads at http://www.sparseware.com

Don

PS. Some of the icons in the MS Outlook clone may be copyright Microsoft. So if you feel the urge to take the demo and make it a real mail application, please change the icons. The icons for Outlook were used merely to demonstrate the ability to easily markup a UI that looks and functions like Outlook.