001: /*
002: * Copyright 2007 Google Inc.
003: *
004: * Licensed under the Apache License, Version 2.0 (the "License"); you may not
005: * use this file except in compliance with the License. You may obtain a copy of
006: * the License at
007: *
008: * http://www.apache.org/licenses/LICENSE-2.0
009: *
010: * Unless required by applicable law or agreed to in writing, software
011: * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
012: * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
013: * License for the specific language governing permissions and limitations under
014: * the License.
015: */
016: package com.google.gwt.sample.kitchensink.client;
017:
018: import com.google.gwt.user.client.ui.Button;
019: import com.google.gwt.user.client.ui.CheckBox;
020: import com.google.gwt.user.client.ui.DisclosurePanel;
021: import com.google.gwt.user.client.ui.DockPanel;
022: import com.google.gwt.user.client.ui.FlowPanel;
023: import com.google.gwt.user.client.ui.Grid;
024: import com.google.gwt.user.client.ui.HTML;
025: import com.google.gwt.user.client.ui.HorizontalPanel;
026: import com.google.gwt.user.client.ui.HorizontalSplitPanel;
027: import com.google.gwt.user.client.ui.ScrollPanel;
028: import com.google.gwt.user.client.ui.TabPanel;
029: import com.google.gwt.user.client.ui.VerticalPanel;
030:
031: /**
032: * Demonstrates various panels and the way they lay widgets out.
033: */
034: public class Panels extends Sink {
035:
036: public static SinkInfo init(final Sink.Images images) {
037: return new SinkInfo(
038: "Panels",
039: "<h2>Panels</h2><p>This page demonstrates some of the basic GWT panels, each of which "
040: + "arranges its contained widgets differently. "
041: + "These panels are designed to take advantage of the browser's "
042: + "built-in layout mechanics, which keeps the user interface snappy "
043: + "and helps your AJAX code play nicely with existing HTML. "
044: + "On the other hand, if you need pixel-perfect control, "
045: + "you can tweak things at a low level using the "
046: + "<code>DOM</code> class.</p>") {
047:
048: @Override
049: public Sink createInstance() {
050: return new Panels(images);
051: }
052:
053: @Override
054: public String getColor() {
055: return "#fe9915";
056: }
057: };
058: }
059:
060: public Panels(Sink.Images images) {
061: HTML contents = new HTML(
062: "This is a <code>ScrollPanel</code> contained at "
063: + "the center of a <code>DockPanel</code>. "
064: + "By putting some fairly large contents "
065: + "in the middle and setting its size explicitly, it becomes a "
066: + "scrollable area within the page, but without requiring the use of "
067: + "an IFRAME."
068: + "Here's quite a bit more meaningless text that will serve primarily "
069: + "to make this thing scroll off the bottom of its visible area. "
070: + "Otherwise, you might have to make it really, really small in order "
071: + "to see the nifty scroll bars!");
072: ScrollPanel scroller = new ScrollPanel(contents);
073: scroller.setStyleName("ks-layouts-Scroller");
074:
075: DockPanel dock = new DockPanel();
076: dock.setHorizontalAlignment(DockPanel.ALIGN_CENTER);
077: HTML north0 = new HTML(
078: "This is the <i>first</i> north component", true);
079: HTML east = new HTML(
080: "<center>This<br>is<br>the<br>east<br>component</center>",
081: true);
082: HTML south = new HTML("This is the south component");
083: HTML west = new HTML(
084: "<center>This<br>is<br>the<br>west<br>component</center>",
085: true);
086: HTML north1 = new HTML(
087: "This is the <b>second</b> north component", true);
088: dock.add(north0, DockPanel.NORTH);
089: dock.add(east, DockPanel.EAST);
090: dock.add(south, DockPanel.SOUTH);
091: dock.add(west, DockPanel.WEST);
092: dock.add(north1, DockPanel.NORTH);
093: dock.add(scroller, DockPanel.CENTER);
094:
095: DisclosurePanel disc = new DisclosurePanel(
096: "Click to disclose something:");
097: disc.setContent(new HTML(
098: "This widget is is shown and hidden<br>by the "
099: + "disclosure panel that wraps it."));
100:
101: FlowPanel flow = new FlowPanel();
102: for (int i = 0; i < 8; ++i) {
103: flow.add(new CheckBox("Flow " + i));
104: }
105:
106: HorizontalPanel horz = new HorizontalPanel();
107: horz.setVerticalAlignment(VerticalPanel.ALIGN_MIDDLE);
108: horz.add(new Button("Button"));
109: horz.add(new HTML(
110: "<center>This is a<br>very<br>tall thing</center>",
111: true));
112: horz.add(new Button("Button"));
113:
114: VerticalPanel vert = new VerticalPanel();
115: vert.setHorizontalAlignment(VerticalPanel.ALIGN_CENTER);
116: vert.add(new Button("Small"));
117: vert.add(new Button("--- BigBigBigBig ---"));
118: vert.add(new Button("tiny"));
119:
120: VerticalPanel vp = new VerticalPanel();
121: vp.setHorizontalAlignment(VerticalPanel.ALIGN_CENTER);
122: vp.setSpacing(8);
123: vp.add(makeLabel("Disclosure Panel"));
124: vp.add(disc);
125: vp.add(makeLabel("Flow Panel"));
126: vp.add(flow);
127: vp.add(makeLabel("Horizontal Panel"));
128: vp.add(horz);
129: vp.add(makeLabel("Vertical Panel"));
130: vp.add(vert);
131:
132: Grid grid = new Grid(4, 4);
133: for (int r = 0; r < 4; ++r) {
134: for (int c = 0; c < 4; ++c) {
135: grid.setWidget(r, c, images.gwtLogo().createImage());
136: }
137: }
138:
139: TabPanel tabs = new TabPanel();
140: tabs.add(vp, "Basic Panels");
141: tabs.add(dock, "Dock Panel");
142: tabs.add(grid, "Tables");
143: tabs.setWidth("100%");
144: tabs.selectTab(0);
145:
146: HorizontalSplitPanel hSplit = new HorizontalSplitPanel();
147: hSplit.setLeftWidget(tabs);
148: hSplit
149: .setRightWidget(new HTML(
150: "This is some text to make the right side of this "
151: + "splitter look a bit more interesting... "
152: + "This is some text to make the right side of this "
153: + "splitter look a bit more interesting... "
154: + "This is some text to make the right side of this "
155: + "splitter look a bit more interesting... "
156: + "This is some text to make the right side of this "
157: + "splitter look a bit more interesting... "));
158:
159: initWidget(hSplit);
160: hSplit.setSize("100%", "450px");
161: }
162:
163: @Override
164: public void onShow() {
165: }
166:
167: private HTML makeLabel(String caption) {
168: HTML html = new HTML(caption);
169: html.setStyleName("ks-layouts-Label");
170: return html;
171: }
172: }
|