When a web application is opened with Sidewinder its appearance defaults to that of a simple desktop application, with basic chrome. It is possible to control this appearance by specifying metadata properties, either in the document or as part of the URL.
To make an application dock itself to one of the edges of the desktop we use the property anchor with a value of true.
We can also indicate where we would like the application to start, by using the position property.
To auto-hide--i.e., slide off the desktop when the user moves their mouse away from the application--we use the property autohide with a value of true.
By adding the following settings to the Flickr Search web application we would dock the application to the top right of the screen, and make it auto-hide:
<link rel="stylesheet" href="flickr.css" type="text/css" />
<meta name="position" content="top-right" />
<meta name="anchor" content="true" />
<meta name="autohide" content="true" />
<xf:model>
Note that the location of a window with a position of 'top right' and one with a position of 'right top' will be the same. The difference is only apparent when docking; the first will be docked to the top edge, whilst the second will be docked to the right edge. This means that when auto-hiding, a window that is positioned 'top right' will slide off the top, whilst a window that is positioned 'right top' will slide off the right.
The modified application is available here.
If the webapp is being loaded via the command-line then we can open the basic (unmodified) web application using the following command:
swviewer2 http://svn.x-port.net/svn/public/samples/flickr/flickr.webapp#meta(position=top-right,anchor,autohide)
To make windows behind our desktop application 'show through' we can use the property transparency to give Sidewinder the value of a colour that will be set to 'transparent'. This has the effect of allowing any application that is behind our web application to be visible and respond to mouse-clicks--extremely useful if we want to give our application a different shape. The chrome is often removed when using transparency.
By adding the following settings to the Flickr Search web application our application would have none of the usual desktop application chrome, and the entire application would appear to grow and shrink as the user searched:
<meta name="autohide" content="true" />
<meta name="height" content="700" />
<meta name="chrome" content="false" />
<meta name="transparency" content="fffffe" />
<style type="text/css">
body
{
background-color : #fffffe;
}
html, body
{
margin : 0;
}
</style>
<xf:model>
The modified application is available here.
Alternatively, we can open the basic Flickr web application with the following command:
swviewer2 http://svn.x-port.net/svn/public/samples/flickr/flickr.webapp#meta(position=top-right,anchor,autohide,height=700,chrome=false,transparency=fffffe)
Note however that this won't quite work with the example we've been using, since a background of #fffffe needs to be added.
To make windows behind our desktop application partly visible we can use the property opacity. The value given is a percentage, and tells Sidewinder how much of the web application to show, and how much of any application sitting behind. This feature is useful when creating applications such as clocks where we'd like the information to be available all the time, but we don't want to lose screen space.
By adding the following settings to the Flickr Search web application other applications will now be partly visible 'through' our application:
<meta name="transparency" content="fffffe" />
<meta name="opacity" content="70" />
<style type="text/css">
The modified application is available here.
Alternatively, we can open the basic Flickr web application with the following command:
swviewer2 http://svn.x-port.net/svn/public/samples/flickr/flickr.webapp#meta(position=top-right,anchor,autohide,height=700,chrome=false,transparency=fffffe,opacity=70)
Note however that this won't quite work with the example we've been using, since a background of #fffffe needs to be added.