* * (2) * +--------------------------v-----------------------------+ * |--------------------------------------------------------| * |--------------------------------------------------------| (1) * |--------------------------------------------------------| * | / | * | / | * | tracks | * | | * | | * | scene | * | | * | | * | | * | | * | | * | | * +--------------------------------------------------------+* *
The array of tracks encodes itself within an element tagged <div
* id='StageV-top'>. The page author must attach this element either to the
* top of the document such that it moves with the scene, or to the top of the viewport
* such that the scene scrolls beneath it. Here are some mockups of simple layouts for
* two staged scenes, Votorola's home page and the difference bridge. Many of the track
* visuals here are outdated and no longer reflect the running code, but the overall
* layout of tracks is roughly correct:
The composition of the track array (which tracks? in what order?) is a user * preference and does not vary from scene to scene. More complex layouts of up to four * arrays (1-4) will eventually be supported. The top array will be present in all such * layouts and all arrays will attach to the viewport, not the page:
+--------------------------v-----------------------------+ * |--------------------------------------------------------| * |--------------------------------------------------------| (1) * |--------------------------------------------------------| * ||| ( ) / ||| * ||| / ||| * ||| tracks ----- ||| (2) * ||| ||| * ||| scene ||| * ||| ||| * ||| ||| * (4) ||| ----- tracks ||| * ||| / ||| * ||| / ||| * |--------------------------------------------------------| * (3) |--------------------------------------------------------| * +--------------------------------------------------------+* *
There will also be a "curtain", as shown below. It will temporarily and partially * overlay the scene in order to present larger props, such as navigational views, that * cannot easily be squeezed into the confines of a track:
+--------------------------v-----------------------------+ * |--------------------------------------------------------| * |--------------------------------------------------------| * |--------------------------------------------------------| * ||| ( ) ||| * ||| | ||| * ||| | ||| * ||| | ||| * ||| | curtain ||| * ||| | ||| * ||| | ||| * ||| | ||| * ||| +---------------------------------------------- ||| * ||| ||| * |--------------------------------------------------------| * |--------------------------------------------------------| * +--------------------------------------------------------+* *
These "curtained props" will include votespace and geomap views. They are shown * below in stand-alone mockups and prototypes that pre-date the newer stage * design.
You must imagine away the difference feed on the left side of these because it * will not be present in the curtained versions. The difference feed will eventually be * replaced by a much slimmer talk track, as shown in the previous set of mockups.
*/ public final class StageV extends FlowPanel // HTML div { /** Creates the {@linkplain #i() single instance} of StageV. * * @param toDisplay whether to style the view for immediate display. Set false * for embedded displays that require stabilization, then subsequently call * {@linkplain #initEmbeddedDisplay() initEmbeddedDisplay}() to actually * display the view. */ public StageV( final boolean toDisplay ) { final Element element = getElement(); element.setId( "StageV-top" ); element.addClassName( "staged" ); if( !toDisplay ) element.getStyle().setDisplay( Style.Display.NONE ); add( new WarnV() ); for( Track track: Stage.i().tracks() ) add( track.newView( StageV.this )); // final Anchor testTool = new Anchor( "TEST", "HREF" ); // final Button testTool = new Button( "TEST" ); // testTool.addClickHandler( new com.google.gwt.event.dom.client.ClickHandler() // { // public void onClick( com.google.gwt.event.dom.client.ClickEvent _e ) // { // // put your test code here // } // }); // votorola.s.gwt.stage.link.LinkTrackV.i(StageV.this).addLeftTool( testTool ); } /** The single instance of StageV. */ public static StageV i() { return instance; } private static StageV instance; { if( instance != null ) throw new IllegalStateException(); instance = StageV.this; } /** Displays the stage view, simultaneously removing any stabilization view from the * top of the document body. */ public void initEmbeddedDisplay() { // Display the stage view. // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - getElement().getStyle().clearDisplay(); // Undisplay any stabilization view. // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - final Element div = Document.get().getElementById( "voLayoutStabilizer-top" ); if( div != null ) div.getStyle().setDisplay( Style.Display.NONE ); else // standard border stabilizer { final Style style = Document.get().getBody().getStyle(); final String p = "borderTopStyle"; if( "solid".equals(style.getProperty(p)) ) style.setProperty( p, "none" ); // else there was no stabilzation } } }