GXT之旅:第八章:Portal&Drag-Drop——Portal的基本介绍
来源:互联网 发布:mac顶栏隐藏 编辑:程序博客网 时间:2024/05/16 03:52
第八章:Portal&Drag-Drop
本章我们要了解GXT的Portal&Drag-Drop功能。我们会首先学习如何使用Portal(非常类似谷歌的iGoogle功能)布局和Portlet,然后再以实践的方式学习GXT的拖拽功能。
我们会涉及到如下GXt功能集
- Portal
- Portlet
- Draggable
- DragSource
- GridDropTarget
- ListViewDropTarget
- TreeGridDropTarget
- TreePanelDropTarget
- ColumnLayout
- RowLayout
Portlet class
Portlet 类继承自ContentPanel,她提供了一种特殊的panel,可以在Viewport的Portal容器里,随意的更改显示位置和大小。她很像widows系统里面的桌面应用。
新建一个Portlet的过程很类似于其他容器的创建。
Portlet portlet = new Portlet();portlet.setHeight(150);portlet.setHeading("Example Portlet");
运行效果如下:
portal.setPinned(true);
设置其是否可以被重置位置。除此之外,Portlet继承ContentPanel的所有功能
Portal class
Portal是专门为Portlet设置的容器。事实上,其容器包含了一组按照ColumnLayout布局的LayoutContainer。其中每一个LayoutContainer都包含一个Portlet,布局效果为RowLayout。Portal同样支持Portlet的拖拽功能。Portal里面会有列,每一个列里面又包含行。因此就有了表格的概念,所以当新建一个Portal的时候,我们就需要在构造函数里,设置有多少列。当然还得通过setColumnWidth()方法设置其每一列的宽度。
假如,我们想创建一个两列的,分别是30%,70%宽的Portal的时候。我们会有如下代码
Portal portal = new Portal(2);portal.setColumnWidth(0, 0.3);portal.setColumnWidth(1, 0.7);
当Portal定义好了之后,我们要往每一列里放入Portlet(其宽度自动的跟着column的宽度适应,只需要设置高度既可)
Portlet portlet1 = new Portlet();portlet1.setHeight(150);portlet1.setHeading("Example Portlet 1");portal.add(portlet1, 0);Portlet portlet2 = new Portlet();portlet2.setHeight(150);portlet2.setHeading("Example Portlet 2");portal.add(portlet2, 1);
生成后的效果如下:
左右两个Portlet可以被拖拽到不同的位置。当一个Portlet正在被拖拽的时候,其效果如下
当右侧的portlet被拖拽到左侧的时候,会自动的改变宽度
ToolButton
正是因为Portlet继承了ContentPanel,所以我们可以在其头部添加ToolButton。这样一来,可以让Portlet在功能和显示效果上,更接近桌面的应用窗口。
portlet.getHeader().addTool(new ToolButton("x-tool-minimize"));portlet.getHeader().addTool(new ToolButton("x-tool-maximize"));portlet.getHeader().addTool(new ToolButton("x-tool-close"));
如上的三行代码,就会构建出如下的效果
- GXT之旅:第八章:Portal&Drag-Drop——Portal的基本介绍
- GXT之旅:第八章:Portal&Drag-Drop——拖拽(Drag-Drop)基本介绍
- GXT之旅:第八章:Portal&Drag-Drop——项目使用Portal重构(1)
- GXT之旅:第八章:Portal&Drag-Drop——项目使用Portal重构(2)
- GXT之旅:第八章:Portal&Drag-Drop——项目使用Portal重构(3)
- GXT之旅:第八章:Portal&Drag-Drop——项目使用Drag-Drop重构(1)
- GXT之旅:第八章:Portal&Drag-Drop——项目使用Drag-Drop重构(2)
- GXT之旅:第八章:Portal&Drag-Drop——项目使用Drag-Drop重构(3)
- portal介绍
- Portal介绍
- GXT之旅:第九章:Charts图表——Chart的基本创建(1)
- Portal应用点滴 —— Portal简介
- GXT之旅:第二章:GXT组件(4)——容器的布局
- GXT之旅:第七章:MVC——标准的MVC与GXT MVC
- GXT之旅:第七章:MVC——GXT MVC的相关类
- 几种开源Portal的简单介绍
- Portal官网上的介绍1什么是门户(Portal)?
- Portal官网上的介绍2(Portal)门户功能
- 阿捷网站制作
- git 使用详解(10)-- 远程分支
- iPhone的-hd图片给ipad用。
- win7 64位下myeclipse集成flex builder无法创建项目的问题解决
- Android的语言设置(二)
- GXT之旅:第八章:Portal&Drag-Drop——Portal的基本介绍
- Android的EditText自动获取焦点并弹出输入法问题
- 随机森林——Random Forests
- 基于C++的局域网聊天系统客户
- ActionContext\servletActionContext
- 【Android Training - 09】高效地显示Bitmap图片 [ Lesson 0 - 章节概览 ]
- 用Linq快速删除重复的元素的方法
- oracle修改processes与sessions
- InitializeForm