themetest.xml

ajax 框价．是个好工具．javascript 矿家．可以用在任何平台．

<Application autoNameMapping="true">
	<Theme name="Beige"/><!-- default="true" -->
	<Window caption="Theme Test" width="800" height="400" centered="true">

		<Command id="alignmentCommand"/>

		<VBox top="0" left="0" right="0" bottom="0">

			<MenuBar>
				<MenuButton text="File" mnemonic="f">
					<Menu>
						<MenuItem text="New">
							<Menu>
								<MenuItem text="Query"/>
								<MenuItem text="Table Selection"/>
								<MenuItem text="Grid"/>
								<MenuItem text="Chart"/>
								<MenuItem text="Pivot"/>
								<MenuSeparator/>
								<MenuItem text="Report"/>
								<MenuItem text="Dashboard"/>
								<MenuSeparator/>
								<MenuItem text="Web Form"/>
								<MenuItem text="Application"/>
								<MenuItem text="Workflow"/>
							</Menu>
						</MenuItem>
						<MenuItem text="Delete"/>
						<MenuItem text="Open / Find"/>
						<MenuItem text="Open Recent"/>
						<MenuSeparator/>
						<MenuItem text="Make a Request"/>
						<MenuSeparator/>
						<MenuItem text="Save"/>
						<MenuItem text="Save As"/>
						<MenuItem text="Revert"/>
						<MenuItem text="Close"/>
						<MenuSeparator/>
						<MenuItem text="Save as a Template"/>
						<MenuItem text="Add to Favorites"/>
						<MenuSeparator/>
						<MenuItem text="Print"/>
						<MenuItem text="Export"/>
						<MenuSeparator/>
						<MenuItem text="Show Private Docs"/>
					</Menu>
				</MenuButton>
			</MenuBar>

			<ToolBar preferredHeight="22">
				<ToolBarButton text="Hello"/>
				<ToolBarButton text="Cruel"/>
				<ToolBarButton text="World" enabled="false"/>
				<ToolBarSeparator/>
				<ToolBarMenuButton text="Switch Theme">
					<Menu id="themeMenu">
						<RadioGroup id="themeRadioGroup"/>
					</Menu>
				</ToolBarMenuButton>

			</ToolBar>

			<TabPane VBox.Flex="1" margin="5"
					 id="tabPane">
				<TabPane.contextMenu>
					<Menu>
						<RadioGroup id="alignmentGroup" command="#alignmentCommand"/>
						<RadioButtonMenuItem checked="true" text="Top" group="alignmentGroup" userValue="top"/>
						<RadioButtonMenuItem text="Bottom" group="#alignmentGroup" userValue="bottom"/>
					</Menu>
				</TabPane.contextMenu>
				<TabPage text="Inputs">
					<VBox left="0" right="0" top="0" bottom="0">
						<HBox margin="5 5 5 0" align="center">
							<Label Box.flex="1" text="Text Field:"/>
							<TextField Box.flex="2"/>
						</HBox>
						<HBox margin="5 5 5 0" align="center">
							<Label Box.flex="1" text="Password:"/>
							<PasswordField Box.flex="2"/>
						</HBox>
						<HBox margin="5 5 5 5" align="stretch" Box.flex="1">
							<Label Box.flex="1" text="Text area:"/>
							<TextArea Box.flex="2"/>
						</HBox>
					</VBox>
				</TabPage>
				<TabPage text="List">
					<SplitPane left="5" right="5" top="5" bottom="5">
						<List>
							<ListItem>Item 0</ListItem>
							<ListItem>Item 1</ListItem>
							<ListItem>Item 2</ListItem>
							<ListItem>Item 3</ListItem>
							<ListItem>Item 4</ListItem>
							<ListItem>Item 5</ListItem>
						</List>
						<List>
							<ListItem>Item 0</ListItem>
							<ListItem>Item 1</ListItem>
							<ListItem>Item 2</ListItem>
							<ListItem>Item 3</ListItem>
							<ListItem>Item 4</ListItem>
							<ListItem>Item 5</ListItem>
						</List>
					</SplitPane>
				</TabPage>
				<TabPage text="More">
					<VBox left="0" right="0" top="0" bottom="0">
						<ComboBox margin="5 5 5 0">
							<ComboBoxItem>Item 0</ComboBoxItem>
							<ComboBoxItem>Item 1</ComboBoxItem>
							<ComboBoxItem>Item 2</ComboBoxItem>
							<ComboBoxItem>Item 3</ComboBoxItem>
							<ComboBoxItem>Item 4</ComboBoxItem>
							<ComboBoxItem>Item 5</ComboBoxItem>
						</ComboBox>
						<ComboBox margin="5 5 5 0" editable="true">
							<ComboBoxItem>Item 0</ComboBoxItem>
							<ComboBoxItem>Item 1</ComboBoxItem>
							<ComboBoxItem>Item 2</ComboBoxItem>
							<ComboBoxItem>Item 3</ComboBoxItem>
							<ComboBoxItem>Item 4</ComboBoxItem>
							<ComboBoxItem>Item 5</ComboBoxItem>
						</ComboBox>
						<Slider margin="5 5 5 0"/>
						<Slider margin="5 5 5 0" orientation="vertical" Box.flex="1"/>
						<Spinner margin="5 5 5 0" Box.flex="1"/>
						<ProgressBar margin="5 5 5 0" value="50"/>
						<StatusBar margin="5">
							<StatusBarPanel left="0" width="100">Status</StatusBarPanel>
							<StatusBarPanel left="102" width="100">Bar</StatusBarPanel>
							<StatusBarPanel left="204" right="0">Panel</StatusBarPanel>
						</StatusBar>
					</VBox>
				</TabPage>
				<TabPage text="Date Pickers">
					<VBox left="0" right="0" top="0" bottom="0">
						<GroupBox text="Group Box" Box.flex="2" margin="5 5 5 0">
							<Calendar left="5" right="5" top="5" bottom="5"/>
						</GroupBox>

						<GroupBox Box.flex="1" margin="5">
							<FlowPanel left="0" right="0" top="0" bottom="0">
								<DatePicker margin="5"/>
								<TimePicker margin="5"/>
							</FlowPanel>
						</GroupBox>
					</VBox>
				</TabPage>
				<TabPage text="Tree View">
					<!--
					<TreeView left="5" top="5" bottom="5" right="5">

						<TreeView.dataModel>
							<DataSetDataModel>
								<DataSetDataModel.dataSet>
									<XmlDataSet uri="datasetdata.xml"/>
								</DataSetDataModel.dataSet>
							</DataSetDataModel>
						</TreeView.dataModel>

					</TreeView>
					-->
					<Tree2 left="5" top="5" bottom="5" right="5"
						columnNames="Zero, One, Two, Three, Four">
						<Tree2Row>
							<Tree2Cell>0.0</Tree2Cell>
							<Tree2Cell>0.1</Tree2Cell>
							<Tree2Cell>0.2</Tree2Cell>
							<Tree2Cell>0.3</Tree2Cell>
							<Tree2Cell>0.4</Tree2Cell>

							<Tree2Row>
								<Tree2Cell>1.0</Tree2Cell>
								<Tree2Cell>1.1</Tree2Cell>
								<Tree2Cell>1.2</Tree2Cell>
								<Tree2Cell>1.3</Tree2Cell>
								<Tree2Cell>1.4</Tree2Cell>

								<Tree2Row>
									<Tree2Cell>2.0</Tree2Cell>
									<Tree2Cell>2.1</Tree2Cell>
									<Tree2Cell>2.2</Tree2Cell>
									<Tree2Cell>2.3</Tree2Cell>
									<Tree2Cell>2.4</Tree2Cell>
								</Tree2Row>

							</Tree2Row>

						</Tree2Row>

						<Tree2Row>
							<Tree2Cell>3.0</Tree2Cell>
							<Tree2Cell>3.1</Tree2Cell>
							<Tree2Cell>3.2</Tree2Cell>
							<Tree2Cell>3.3</Tree2Cell>
							<Tree2Cell>3.4</Tree2Cell>
						</Tree2Row>
						<Tree2Row>
							<Tree2Cell>4.0</Tree2Cell>
							<Tree2Cell>4.1</Tree2Cell>
							<Tree2Cell>4.2</Tree2Cell>
							<Tree2Cell>4.3</Tree2Cell>
							<Tree2Cell>4.4</Tree2Cell>
						</Tree2Row>
						<Tree2Row>
							<Tree2Cell>5.0</Tree2Cell>
							<Tree2Cell>5.1</Tree2Cell>
							<Tree2Cell>5.2</Tree2Cell>
							<Tree2Cell>5.3</Tree2Cell>
							<Tree2Cell>5.4</Tree2Cell>

							<Tree2Row>
								<Tree2Cell>6.0</Tree2Cell>
								<Tree2Cell>6.1</Tree2Cell>
								<Tree2Cell>6.2</Tree2Cell>
								<Tree2Cell>6.3</Tree2Cell>
								<Tree2Cell>6.4</Tree2Cell>
							</Tree2Row>
						</Tree2Row>
						<Tree2Row>
							<Tree2Cell>7.0</Tree2Cell>
							<Tree2Cell>7.1</Tree2Cell>
							<Tree2Cell>7.2</Tree2Cell>
							<Tree2Cell>7.3</Tree2Cell>
							<Tree2Cell>7.4</Tree2Cell>
						</Tree2Row>
						<Tree2Row>
							<Tree2Cell>8.0</Tree2Cell>
							<Tree2Cell>8.1</Tree2Cell>
							<Tree2Cell>8.2</Tree2Cell>
							<Tree2Cell>8.3</Tree2Cell>
							<Tree2Cell>8.4</Tree2Cell>
						</Tree2Row>
						<Tree2Row>
							<Tree2Cell>9.0</Tree2Cell>
							<Tree2Cell>9.1</Tree2Cell>
							<Tree2Cell>9.2</Tree2Cell>
							<Tree2Cell>9.3</Tree2Cell>
							<Tree2Cell>9.4</Tree2Cell>
						</Tree2Row>
					</Tree2>
				</TabPage>
				<TabPage text="Grid">
					<SplitPane left="5" top="5" right="5" bottom="5"
							   dividerLocation="200">
						<Grid columnCount="2"
							  columnNames="Column 1, Column 2"
							  showRowHeaders="true"
							  iconColumn="0"
							  oncreate="event.getTarget().update()">
							<GridRow>
								<GridCell data="0.0"/>
								<GridCell data="0.1"/>
							</GridRow>
							<GridRow>
								<GridCell data="1.0"/>
								<GridCell data="1.1"/>
							</GridRow>
							<GridRow>
								<GridCell data="2.0"/>
								<GridCell data="2.1"/>
							</GridRow>
						</Grid>
						<Tree id="tree" left="210" top="5" right="5" bottom="5"
							  iconColumn="0"
							  oncreate="event.getTarget().update()"/>
					</SplitPane>
				</TabPage>
				<TabPage text="Dialogs">
					<VBox left="0" width="150" top="0" bottom="0">
						<Button onaction="var w = new BiWindow('Normal BiWindow');
										  application.getWindow().add(w);
										  w.setVisible(true)"
								margin="5 5 5 0"
								toolTipText="Tool tip">Window</Button>
						<Button onaction="(new BiColorPicker()).setVisible(true)"
								margin="5 5 5 0">Color Picker</Button>
						<Button onaction="(new BiWizard()).setVisible(true)"
								margin="5 5 5 0">Wizard</Button>
						<Button onaction="BiDialog.createMessageDialog('Message').setVisible(true)"
								margin="5 5 5 0">Message Dialog</Button>
						<Button onaction="BiDialog.createConfirmDialog('Confirm').setVisible(true)"
								margin="5 5 5 0">Confirm Dialog</Button>
						<Button onaction="BiDialog.createInputDialog('Input').setVisible(true)"
								margin="5 5 5 0">Input Dialog</Button>
						<Button onaction="BiDialog.createOptionDialog('Option').setVisible(true)"
								margin="5">Option Dialog</Button>
					</VBox>
				</TabPage>
				<TabPage text="ScrollBars">
					<ScrollBar orientation="horizontal" bottom="62" left="10" right="78" maximum="0"/>
					<ScrollBar orientation="horizontal" bottom="36" left="10" right="52" extent="30"/>
					<ScrollBar orientation="horizontal" bottom="10" left="10" right="26"/>
					<ScrollBar orientation="vertical" top="10" right="62" bottom="78" maximum="0"/>
					<ScrollBar orientation="vertical" top="10" right="36" bottom="52" extent="30"/>
					<ScrollBar orientation="vertical" top="10" right="10" bottom="26"/>
				</TabPage>
			</TabPane>

			<HBox pack="end">
				<Button text="Hello" margin="5"/>
			</HBox>

		</VBox>

	</Window>
	<Resources>
		<Script><![CDATA[

function ThemeTest()
{
	var tm = application.getThemeManager();
	var themes = tm.getThemes();
	var mi;
	for ( var i = 0; i < themes.length; i++ )
	{
		mi = new BiRadioButtonMenuItem;
		mi.setText( themes[i].getName() );
		mi.setChecked( themes[i].getDefault() );
		mi.setUserValue( themes[i] );
		themeMenu.add( mi );
		themeRadioGroup.add( mi );
	}
	themeRadioGroup.addEventListener( "change", this.onThemeMenuChange, this );

	/*
	application.getWindow().addEventListener( "contextmenu", function (e)
	{
		BiComponent.invalidateAll();
	});
	*/


	alignmentCommand.addEventListener( "uservaluechanged", function ( e)
	{
		tabPane.setAlignment( this.getUserValue() );
	} );

	///////////////////////////////////////////////////////////////////////////
	// tree
	var count = 0;
	var cols = 4;
	function getArray() {
		var res = new Array(cols);
		for (var x = 0; x < cols; x++) {
			if (x == 0)
				res[x] = "Item " + count + " (string)";
			else if (x == 1)
				res[x] = new Date( Math.random() * 1e12 )
			else
				res[x] = Math.round(Math.random() * 10000);
		}
		count++;
		return res;
	};

	var MAX = 20;

	var tmp, tmp2, tmp3;
	for (var i = 0; count < MAX; i++) {
		tree.addNode( tmp = new BiTreeNode(getArray()) );
		for (var j = 0; j < 2 && count < MAX; j++) {
			tmp.addNode( tmp2 = new BiTreeNode(getArray()) );
			tmp2.setExpanded(false);
			for (var k = 0; k < 2 && count < MAX; k++) {
				tmp2.addNode( tmp3 = new BiTreeNode(getArray()) );
			}
		}
	}

	tree.setMultipleSelection(true);
	tree.setColumnCount(4);
	tree.setColumnOrders([0,1,2,3]);
	tree.setColumnNames(["Column 0", "Column 1", "Column 2", "Column 3"]);
	tree.setColumnWidths([100,100,100,100]);
	tree.setColumnSortTypes(["string", "date", "number", "number"]);
	tree.setIndentColumn( 0 );
	//tree.update();
}

ThemeTest.prototype.onThemeMenuChange = function ( e )
{
	var theme = e.getTarget().getUserValue();
	var tm = application.getThemeManager();
	tm.setDefaultTheme( theme );

};



ThemeTest.main = function ()
{
	new ThemeTest;
};

		]]></Script>
	</Resources>
</Application>