You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@pivot.apache.org by gb...@apache.org on 2009/12/09 03:32:36 UTC
svn commit: r888681 [2/2] - in /incubator/pivot/trunk/tutorials:
src/org/apache/pivot/tutorials/lists/ www/
Modified: incubator/pivot/trunk/tutorials/www/menu-buttons.xml
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/www/menu-buttons.xml?rev=888681&r1=888680&r2=888681&view=diff
==============================================================================
--- incubator/pivot/trunk/tutorials/www/menu-buttons.xml (original)
+++ incubator/pivot/trunk/tutorials/www/menu-buttons.xml Wed Dec 9 02:32:34 2009
@@ -22,5 +22,265 @@
</properties>
<body>
+ <p>
+ Menu buttons are similar to <a href="list_buttons.html">list buttons</a>, but provide
+ access to "drop-down" menus rather than list views. They are often used in toolbars,
+ but can be placed anywhere within an application's user interface.
+ </p>
+
+ <p>
+ The following sample application demonstrates the use of a menu button. The
+ application's toolbar contains a menu button containing a list of shapes, and a list
+ button containing a list of colors. Selecting an item from the shape menu button adds
+ the selected shape to the drawing shown in the application's content area:
+ </p>
+
+ <application class="org.apache.pivot.tutorials.menus.MenuButtons"
+ width="640" height="480">
+ <libraries>
+ <library>core</library>
+ <library>wtk</library>
+ <library>wtk-terra</library>
+ <library>tutorials</library>
+ </libraries>
+ </application>
+
+ <p>
+ The WTKX source for the application is as follows:
+ </p>
+
+ <source type="xml" location="org/apache/pivot/tutorials/menus/menu_buttons.wtkx">
+ <![CDATA[
+ <Window title="Menu Buttons" maximized="true"
+ xmlns:wtkx="http://pivot.apache.org/wtkx"
+ xmlns:collections="org.apache.pivot.collections"
+ xmlns:content="org.apache.pivot.wtk.content"
+ xmlns="org.apache.pivot.wtk">
+ <content>
+ <Border styles="{padding:2}">
+ <content>
+ <TablePane styles="{verticalSpacing:2}">
+ <columns>
+ <TablePane.Column width="1*"/>
+ </columns>
+ <rows>
+ <TablePane.Row height="-1">
+ <BoxPane styles="{fill:true}">
+ <MenuButton>
+ <buttonData>
+ <content:ButtonData icon="@shape_square_add.png" text="New Shape"/>
+ </buttonData>
+ <menu>
+ <Menu>
+ <sections>
+ <Menu.Section>
+ <Menu.Item buttonData="Circle" action="newCircle"/>
+ <Menu.Item buttonData="Square" action="newSquare"/>
+ <Menu.Item buttonData="Text" action="newText"/>
+ </Menu.Section>
+ </sections>
+ </Menu>
+ </menu>
+ </MenuButton>
+
+ <ListButton wtkx:id="colorListButton" selectedIndex="0" styles="{listSize:6}">
+ <listData>
+ <collections:ArrayList>
+ <content:ColorItem color="#000000" name="Black"/>
+ <content:ColorItem color="#0000AA" name="Blue"/>
+ <content:ColorItem color="#00AA00" name="Green"/>
+ <content:ColorItem color="#00AAAA" name="Cyan"/>
+ <content:ColorItem color="#AA0000" name="Red"/>
+ <content:ColorItem color="#AA00AA" name="Magenta"/>
+ <content:ColorItem color="#AA5500" name="Brown"/>
+ <content:ColorItem color="#AAAAAA" name="Light Gray"/>
+ <content:ColorItem color="#555555" name="Dark Gray"/>
+ <content:ColorItem color="#5555FF" name="Bright Blue"/>
+ <content:ColorItem color="#55FF55" name="Bright Green"/>
+ <content:ColorItem color="#55FFFF" name="Bright Cyan"/>
+ <content:ColorItem color="#FF5555" name="Bright Red"/>
+ <content:ColorItem color="#FF55FF" name="Bright Magenta"/>
+ <content:ColorItem color="#FFFF55" name="Bright Yellow"/>
+ <content:ColorItem color="#FFFFFF" name="White"/>
+ </collections:ArrayList>
+ </listData>
+ <dataRenderer>
+ <content:ListButtonColorItemRenderer/>
+ </dataRenderer>
+ <itemRenderer>
+ <content:ListViewColorItemRenderer/>
+ </itemRenderer>
+ </ListButton>
+ </BoxPane>
+ </TablePane.Row>
+ <TablePane.Row height="1*">
+ <Border styles="{padding:2}">
+ <content>
+ <ScrollPane horizontalScrollBarPolicy="fill_to_capacity"
+ verticalScrollBarPolicy="fill_to_capacity">
+ <view>
+ <ImageView wtkx:id="imageView"/>
+ </view>
+ </ScrollPane>
+ </content>
+ </Border>
+ </TablePane.Row>
+ </rows>
+ </TablePane>
+ </content>
+ </Border>
+ </content>
+ </Window>
+ ]]>
+ </source>
+
+ <p>
+ Like the previous example, it defines a set of menu items that are associated with
+ named actions. The Java source, which defines the actions, is shown below:
+ </p>
+
+ <source type="xml" location="org/apache/pivot/tutorials/menus/MenuButtons.java">
+ <![CDATA[
+ package org.apache.pivot.tutorials.menus;
+
+ import java.awt.Color;
+ import java.awt.Paint;
+
+ import org.apache.pivot.collections.Map;
+ import org.apache.pivot.wtk.Action;
+ import org.apache.pivot.wtk.Application;
+ import org.apache.pivot.wtk.Bounds;
+ import org.apache.pivot.wtk.DesktopApplicationContext;
+ import org.apache.pivot.wtk.Display;
+ import org.apache.pivot.wtk.ImageView;
+ import org.apache.pivot.wtk.ListButton;
+ import org.apache.pivot.wtk.Point;
+ import org.apache.pivot.wtk.Window;
+ import org.apache.pivot.wtk.content.ColorItem;
+ import org.apache.pivot.wtk.media.Drawing;
+ import org.apache.pivot.wtk.media.drawing.Ellipse;
+ import org.apache.pivot.wtk.media.drawing.Rectangle;
+ import org.apache.pivot.wtk.media.drawing.Shape;
+ import org.apache.pivot.wtk.media.drawing.Text;
+ import org.apache.pivot.wtkx.WTKXSerializer;
+
+ public class MenuButtons implements Application {
+ private Window window = null;
+ private ListButton colorListButton = null;
+ private ImageView imageView = null;
+
+ private Drawing drawing = null;
+
+ public static final int MAX_X = 480;
+ public static final int MAX_Y = 360;
+
+ public MenuButtons() {
+ Action.getNamedActions().put("newCircle", new Action() {
+ @Override
+ public void perform() {
+ Ellipse ellipse = new Ellipse();
+ ellipse.setSize(50, 50);
+
+ ellipse.setStroke((Paint)null);
+ ellipse.setFill(getSelectedColor());
+ ellipse.setOrigin(getRandomLocation(ellipse));
+
+ drawing.getCanvas().add(ellipse);
+ }
+ });
+
+ Action.getNamedActions().put("newSquare", new Action() {
+ @Override
+ public void perform() {
+ Rectangle rectangle = new Rectangle();
+ rectangle.setSize(50, 50);
+
+ rectangle.setStroke((Paint)null);
+ rectangle.setFill(getSelectedColor());
+ rectangle.setOrigin(getRandomLocation(rectangle));
+
+ drawing.getCanvas().add(rectangle);
+ }
+ });
+
+ Action.getNamedActions().put("newText", new Action() {
+ @Override
+ public void perform() {
+ Text text = new Text();
+ text.setText("ABC");
+ text.setFont("Arial BOLD 24");
+
+ text.setFill(getSelectedColor());
+ text.setOrigin(getRandomLocation(text));
+
+ drawing.getCanvas().add(text);
+ }
+ });
+ }
+
+ @Override
+ public void startup(Display display, Map<String, String> properties) throws Exception {
+ WTKXSerializer wtkxSerializer = new WTKXSerializer();
+ window = (Window)wtkxSerializer.readObject(this, "menu_buttons.wtkx");
+ colorListButton = (ListButton)wtkxSerializer.get("colorListButton");
+ imageView = (ImageView)wtkxSerializer.get("imageView");
+
+ drawing = new Drawing();
+
+ Rectangle borderRectangle = new Rectangle();
+ borderRectangle.setSize(MAX_X, MAX_Y);
+ borderRectangle.setStroke((Paint)null);
+ borderRectangle.setFill("#eeeeee");
+
+ drawing.getCanvas().add(borderRectangle);
+
+ imageView.setImage(drawing);
+
+ window.open(display);
+ }
+
+ @Override
+ public boolean shutdown(boolean optional) {
+ if (window != null) {
+ window.close();
+ }
+
+ return false;
+ }
+
+ @Override
+ public void suspend() {
+ }
+
+ @Override
+ public void resume() {
+ }
+
+ public Color getSelectedColor() {
+ ColorItem colorItem = (ColorItem)colorListButton.getSelectedItem();
+ return colorItem.getColor();
+ }
+
+ public Point getRandomLocation(Shape shape) {
+ Bounds bounds = shape.getBounds();
+
+ int x = (int)(Math.random() * (MAX_X - bounds.width));
+ int y = (int)(Math.random() * (MAX_Y - bounds.height));
+
+ return new Point(x, y);
+ }
+
+ public static void main(String[] args) {
+ DesktopApplicationContext.main(MenuButtons.class, args);
+ }
+ }
+ ]]>
+ </source>
+
+ <p>
+ Each action simply adds a particular shape to the drawing, setting its color based on
+ the current selection in the list button. The shapes are placed at a random location
+ that is adjusted by the shape's size to ensure that the shape remains on-screen.
+ </p>
</body>
</document>
Modified: incubator/pivot/trunk/tutorials/www/menus.xml
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/www/menus.xml?rev=888681&r1=888680&r2=888681&view=diff
==============================================================================
--- incubator/pivot/trunk/tutorials/www/menus.xml (original)
+++ incubator/pivot/trunk/tutorials/www/menus.xml Wed Dec 9 02:32:34 2009
@@ -22,5 +22,30 @@
</properties>
<body>
+ <p>
+ Menus are used to present a user with a hierarchical selection of options. Pivot
+ supports three primary means of incorporating menus into an application:
+ </p>
+
+ <ul>
+ <li>
+ <a href="context_menus.html"><b>Context Menus</b></a> - generally provide
+ convenient "right-click" access to context-sensitive functionality.
+ </li>
+ <li>
+ <a href="menu_bars.html"><b>Menu Bars</b></a> - collection of menus generally
+ located at the top of an application window that provide access to major
+ application features.
+ </li>
+ <li>
+ <a href="menu_buttons.html"><b>Menu Buttons</b></a> - provide access to "drop-down"
+ menus, similar to <a href="list_buttons.html">list buttons</a>; often used in
+ toolbars.
+ </li>
+ </ul>
+
+ <p>
+ Context menus are discussed first.
+ </p>
</body>
</document>