accordionpanetest.xml

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

<Application autoNameMapping="true">
	<!--<Theme name="Beige" default="true"/>-->
	<Window caption="Accordion Test" width="400" height="400">
		<HBox top="0" left="0" Bottom="0" right="0">
			<GridPanel Box.Flex="1" hGap="5" cols="*,*" rows="25,*" border="2 inset">
				<Label paddingTop="5" text="Component (default)" align="center" />
				<Label paddingTop="5" text="Flowlayout"  align="center" />
				<AccordionPane id="Accordion1" animationSpeed="10">
					<AccordionPage text="Inbox" selected="true" >
						<VBox border="2 solid black" top="0" left="0" Bottom="0" right="0">
							<Label backColor="red" font="36">In</Label>
							<Label backColor="yellow" font="36">Vertical</Label>
							<Label backColor="green" font="36">Box</Label>
						</VBox>
					</AccordionPage>
					<AccordionPage text="Draft" >
						<DockPanel border="2 solid black" top="0" left="0" Bottom="0" right="0">
							<Label DockPanel.dock="top" backColor="red" font="36">In</Label>
							<Label DockPanel.dock="left" backColor="yellow" font="36">Dock</Label>
							<Label DockPanel.dock="fill" backColor="green" font="36">Panel</Label>
						</DockPanel>
					</AccordionPage>
					<AccordionPage text="Outbox" >
						<GridPanel border="2 solid black" cols="*,2*,3*" top="0" left="0" Bottom="0" right="0">
							<Label backColor="red" font="36">In</Label>
							<Label backColor="yellow" font="36">Grid</Label>
							<Label backColor="green" font="36">Panel</Label>
							<Label backColor="blue" font="36">!</Label>
						</GridPanel>
					</AccordionPage>
				</AccordionPane>
				<AccordionPane id="Accordion2" />
			</GridPanel>
			<VBox margin="5" preferredWidth="100">
				<Label text="Animation" />
				<ComboBox id="Animation" onchange="var b = event.getTarget().getUserValue(); Accordion1.setAnimated(b); Accordion2.setAnimated(b); ">
					<ComboBoxItem text="Yes" userValue="true" selected="true"/>
					<ComboBoxItem text="No" userValue="false" />
				</ComboBox>
				<Label marginTop="5" text="Animation Speed" />
				<ComboBox id="AnimationSpeed" onchange="var b = event.getTarget().getUserValue(); Accordion1.setAnimationSpeed(b); Accordion2.setAnimationSpeed(b); ">
					<ComboBoxItem text="1 (instant)" userValue="1" />
					<ComboBoxItem text="1.1" userValue="1.1" />
					<ComboBoxItem text="1.2" userValue="1.2" />
					<ComboBoxItem text="1.3" userValue="1.3" />
					<ComboBoxItem text="1.4 (default)" userValue="1.4" selected="true"/>
					<ComboBoxItem text="1.5" userValue="1.5" />
					<ComboBoxItem text="1.6" userValue="1.6" />
					<ComboBoxItem text="1.7" userValue="1.7" />
					<ComboBoxItem text="1.8" userValue="1.8" />
					<ComboBoxItem text="1.9" userValue="1.9" />
					<ComboBoxItem text="2" userValue="2" />
					<ComboBoxItem text="2.5" userValue="2.5" />
					<ComboBoxItem text="3" userValue="3" />
					<ComboBoxItem text="5" userValue="5" />
					<ComboBoxItem text="10" userValue="10" />
					<ComboBoxItem text="20 (slow)" userValue="20" />
				</ComboBox>
			</VBox>
		</HBox>
	</Window>

	<Resources>
		<Script><![CDATA[

function AccordionPaneTest() {}

AccordionPaneTest.main = function ()
{
	var images = ['folder.open.16.png', 'infomark.16.png', 'folder.open.16.png',
				  'infomark.16.png', 'folder.open.16.png', 'infomark.16.png',
				  'infomark.16.png', 'folder.open.16.png', 'infomark.16.png'];

	var accPage = [];
	var fp;
	for( var i=0; i<5; i++)
	{
		Accordion2.add( accPage[i] = new BiAccordionPage( 'Page ' + i ) );
		accPage[i].setContentPane( fp = new BiFlowPanel() )
		fp.setOverflowY( "auto" );
		for(var j=0; j<images.length; j++)
		{
			accPage[i].add( tb = new BiToolBarRadioButton() );
			tb.setPreferredHeight(28);
			tb.setPreferredWidth(28);
			tb.setPadding(6);
			tb.setIcon( new BiImage("images/" + images[j]) );
		}
	}
};

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