webdisk.xhtml

来自「OperaMasks是一种基于J2EE的Web开发技术」· XHTML 代码 · 共 54 行

<f:view xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core"
	xmlns:w="http://www.apusic.com/jsf/widget" xmlns:layout="http://www.apusic.com/jsf/layout"
	xmlns:ajax="http://www.apusic.com/jsf/ajax" renderKitId="AJAX"
	xmlns:h="http://java.sun.com/jsf/html">
	<w:head>
		<w:stylesheet src="/common/resources/examples.css" />
	</w:head>
	<w:page title="文件上传">
		<layout:borderLayout fitToBody="true">
			<layout:panel region="north" header="false">
				<div class="examDesc">
					<p>本例子使用tree,datagrid,fileUploadDialog3个组件来实现一个简单的网络硬盘，左边的树是代表目录结构，可以增加和删除目录，右边列出当前目录下的所有文件，同样可以上传文件，删除文件(上传的文件大小需小于1M，文件夹总容量100M)</p>
				</div>
			</layout:panel>
			<layout:panel region="west" width="150" title="目录" split="true">
				<w:form groupId="group1">
					<w:toolBar>
						<w:button value="添加目录" id="addDirectory" />
						<w:button value="删除目录" id="delDirectory" onclick="return confirm('确定要删除吗?');"/>
					</w:toolBar>
					<w:tree id="tree" border="false" style="height:100%;width:100%;" jsvar="clientTree" />
				</w:form>
			</layout:panel>
			<layout:panel region="center" title="文件">
				<div style="height: 300px; width: 500px;">
				<w:form groupId="group1">
					<w:toolBar>
						<w:button value="添加文件" id="addFile" />
						<w:button value="删除文件" id="delFile" onclick="return confirm('确定要删除吗?');"/>
					</w:toolBar>
				</w:form>
				<w:dataGrid id="fileList" paged="true" rows="10" var="file">
					<w:outputColumn id="filePath" align="left" width="300" header="文件名" value="#{file.name}" />
					<w:outputColumn id="fileLength" align="center" width="100" header="文件大小"
						value="#{(int)(file.length()/1024)}K">
						<f:convertNumber />
					</w:outputColumn>
				</w:dataGrid>
				<h:outputText id="response" escape="false"></h:outputText>
				</div>
				<w:form groupId="group1">
					<w:fileUploadDialog id="fileUpload" fileSizeMax="1048576"></w:fileUploadDialog>
				</w:form>
			</layout:panel>
		</layout:borderLayout>
		<layout:window id="directoryDetail" width="250" height="100" title="请输入目录名">
			<w:form groupId="group1">
				<w:textField id="directoryName" fieldLabel="目录名："></w:textField>
				<w:button value="确定" id="sure" />
			</w:form>
		</layout:window>
	</w:page>
</f:view>