FileDocCategorySizeDatePackage
Shortcuts.javaAPI DocExample5128Mon Aug 27 20:12:46 BST 2007com.google.gwt.sample.mail.client

Shortcuts

public class Shortcuts extends com.google.gwt.user.client.ui.Composite
A composite that contains the shortcut stack panel on the left side. The mailbox tree and shortcut lists don't actually do anything, but serve to show how you can construct an interface using {@link com.google.gwt.user.client.ui.StackPanel}, {@link com.google.gwt.user.client.ui.Tree}, and other custom widgets.

Fields Summary
private int
nextHeaderIndex
private com.google.gwt.user.client.ui.StackPanel
stackPanel
Constructors Summary
public Shortcuts(Images images)
Constructs a new shortcuts widget using the specified images.

param
images a bundle that provides the images for this widget


                          
     
    // Create the groups within the stack panel.
    add(images, new Mailboxes(images), images.mailgroup(), "Mail");
    add(images, new Tasks(), images.tasksgroup(), "Tasks");
    add(images, new Contacts(images), images.contactsgroup(), "Contacts");
    
    initWidget(stackPanel);
Methods Summary
private voidadd(com.google.gwt.sample.mail.client.Shortcuts$Images images, com.google.gwt.user.client.ui.Widget widget, com.google.gwt.user.client.ui.AbstractImagePrototype imageProto, java.lang.String caption)

    widget.addStyleName("mail-StackContent");
    stackPanel.add(widget, createHeaderHTML(images, imageProto, caption), true);
private java.lang.StringcomputeHeaderId(int index)

    return "header-" + this.hashCode() + "-" + index;
private java.lang.StringcreateHeaderHTML(com.google.gwt.sample.mail.client.Shortcuts$Images images, com.google.gwt.user.client.ui.AbstractImagePrototype imageProto, java.lang.String caption)
Creates an HTML fragment that places an image & caption together, for use in a group header.

param
imageProto an image prototype for an image
param
caption the group caption
return
the header HTML fragment

    
    boolean isTop = (nextHeaderIndex == 0);
    String cssId = computeHeaderId(nextHeaderIndex);
    nextHeaderIndex++;
    
    String captionHTML = "<table class='caption' cellpadding='0' cellspacing='0'>"
        + "<tr><td class='lcaption'>" + imageProto.getHTML()
        + "</td><td class='rcaption'><b style='white-space:nowrap'>" + caption 
        + "</b></td></tr></table>";
    
    return "<table id='" + cssId + "' align='left' cellpadding='0' cellspacing='0'"
        + (isTop ? " class='is-top'" : "" ) + "><tbody>"
        + "<tr><td class='box-00'>" + images.leftCorner().getHTML() + "</td>"
        + "<td class='box-10'> </td>"
        + "<td class='box-20'>" + images.rightCorner().getHTML() + "</td>"        
        + "</tr><tr>"
        + "<td class='box-01'> </td>"
        + "<td class='box-11'>" + captionHTML + "</td>"
        + "<td class='box-21'> </td>"        
        + "</tr></tbody></table>";
protected voidonLoad()

    // Show the mailboxes group by default.
    stackPanel.showStack(0);
    updateSelectedStyles(-1, 0);
private voidupdateSelectedStyles(int oldIndex, int newIndex)
Example of using the DOM class to do CSS class name tricks that have become common to AJAX apps. In this case we add CSS class name for the stack panel item that is below the selected item.

    oldIndex++;
    if (oldIndex > 0 && oldIndex < stackPanel.getWidgetCount()) {
      Element elem = DOM.getElementById(computeHeaderId(oldIndex));
      DOM.setElementProperty(elem, "className", "");
    }
    
    newIndex++;
    if (newIndex > 0 && newIndex < stackPanel.getWidgetCount()) {
      Element elem = DOM.getElementById(computeHeaderId(newIndex));
      DOM.setElementProperty(elem, "className", "is-beneath-selected");
    }