smartgwt_高级SmartGWT教程,第2部分

smartgwt

这是我的教程的第二部分,有关使用SmartGWT快速进行UI开发。 在本教程的第一部分中 ,我们创建了基本的界面布局并添加了一些基本组件。 现在是时候解决这个问题,并使用SmartGWT的真正功能了。

在继续之前,让我们记住到目前为止我们创建的UI的样子:

完成本教程后,UI将变成以下内容:

为了重新定义它们的功能,我们将不得不重新访问一些现有的类。 让我们从NavigationArea类开始。 在那里,我们使用SectionStack类创建了手风琴。 但是,每个堆栈部分仅包含一个普通标签。 我们将在导航方面添加一些更有用的东西。 我们将在导航窗格中使用一棵树,其中每个叶子实际上都代表一个动作。 为此,我们将通过定义要实现的特定特征来扩展TreeGrid类。 因此,这是“ NavigationTreeGrid”类:

package com.javacodegeeks.smartgwt.appui.client.ui.widgets;import com.smartgwt.client.types.SelectionStyle;
import com.smartgwt.client.types.TreeModelType;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.tree.Tree;
import com.smartgwt.client.widgets.tree.TreeGrid;
import com.smartgwt.client.widgets.tree.TreeNode;
import com.smartgwt.client.widgets.tree.events.NodeClickEvent;
import com.smartgwt.client.widgets.tree.events.NodeClickHandler;public class NavigationTreeGrid extends TreeGrid {public NavigationTreeGrid() {setNodeIcon("arrow_down.png");  setFolderIcon("arrow_up.png");  setShowOpenIcons(false);setShowDropIcons(false);setShowSelectedStyle(true);  setShowPartialSelection(true);  setCascadeSelection(false);setCanSort(false);setShowConnectors(true);setShowHeader(false);setLoadDataOnDemand(false);setSelectionType(SelectionStyle.SINGLE);Tree data = new Tree();data.setModelType(TreeModelType.CHILDREN);data.setRoot(new TreeNode("root", new TreeNode("File",new TreeNode("FileChild")), new TreeNode("Edit",new TreeNode("EditChild",new TreeNode("EditGrandChild"))), new TreeNode("Window")));setData(data);addNodeClickHandler(new NodeClickHandler() {            @Overridepublic void onNodeClick(NodeClickEvent event) {String name = event.getNode().getName();SC.say("Node Clicked: " + name);}});}}

我们首先为树定义一些属性,更重要的是:

  • setShowConnectors :定义是否应显示连接器线,以说明树的层次结构。
  • setClosedIconSuffix :此后缀附加到提供的图标名称中,默认为“ closed”,因此您最好使用自定义值并覆盖该值。
  • setSelectionType :定义网格的可单击选择行为,即,是否可以在给定时间选择多个项目。

此外, setNodeIcon和setFolderIcon方法用于为每个节点设置适当的图标,具体取决于它是父节点还是叶节点。

接下来,我们创建一个Tree实例,该实例本质上是一个数据模型,它代表链接到层次结构中的一组对象。 每个树节点都通过TreeNode类实现,我们使用setRoot方法设置根节点。 请注意,可以通过使用名称和对象数组来构造每个节点,因此通过采用递归方法,我们可以在一行中创建整个树。 然后,我们使用setData方法将Tree中的数据提供给TreeGrid 。 最后,我们为节点单击事件注册一个处理程序,并通过创建一个显示节点名称的弹出窗口来实现NodeClickHandler接口。

为了使用我们新创建的树,我们返回“ NavigationArea”类并更改以下几行:

...
SectionStackSection section1 = new SectionStackSection("Section 1");
section1.setExpanded(true);
final NavigationTreeGrid navigationTreeGrid = new NavigationTreeGrid();
navigationTreeGrid.setHeight100();
section1.addItem(navigationTreeGrid);
...

让我们看看这是如何改变导航区域中的界面的:

单击其中一个节点后,将显示一个具有相关名称的窗口:

下一步是填充主要区域,该区域现在几乎是空的。 我们将为此使用标签。 使用选项卡是高度首选的,因为它在屏幕空间方面非常有效。 通过堆叠选项卡,用户可以同时打开许多面板,只需单击即可导航到首选面板。

在SmartGWT中,选项卡的使用由Tab类提供。 但是,为了呈现选项卡,必须将这些选项卡分组在TabSet中 ,该选项卡允许多个窗格上的组件共享同一空间。 用户可以选择顶部的选项卡以显示每个窗格。

现在,我们将重新访问“ MainArea”类,并在其中添加三个不同的选项卡窗格。 第一个将仅包含任意HTML元素,第二个将具有附加菜单,第三个将自定义垂直手风琴。 让我们看看如何做到这一点:

package com.javacodegeeks.smartgwt.appui.client.ui;import com.javacodegeeks.smartgwt.appui.client.ui.widgets.CustomAccordion;
import com.smartgwt.client.types.Overflow;
import com.smartgwt.client.types.Side;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.HTMLFlow;
import com.smartgwt.client.widgets.layout.VLayout;
import com.smartgwt.client.widgets.menu.Menu;
import com.smartgwt.client.widgets.menu.MenuItem;
import com.smartgwt.client.widgets.tab.Tab;
import com.smartgwt.client.widgets.tab.TabSet;
import com.smartgwt.client.widgets.toolbar.ToolStrip;
import com.smartgwt.client.widgets.toolbar.ToolStripButton;
import com.smartgwt.client.widgets.toolbar.ToolStripMenuButton;public class MainArea extends VLayout {final TabSet topTabSet = new TabSet();public MainArea() {super();this.setOverflow(Overflow.HIDDEN);topTabSet.setTabBarPosition(Side.TOP);  topTabSet.setTabBarAlign(Side.LEFT);ToolStrip toolStrip = new ToolStrip();toolStrip.setWidth100();ToolStripButton iconButton = new ToolStripButton();iconButton.setTitle("MyButton");toolStrip.addButton(iconButton);        MenuItem[] itemArray = new MenuItem[4];itemArray[0] = new MenuItem("MenuItem1");Menu menu1 = new Menu();menu1.setData(new MenuItem("SubMenuItem11"), new MenuItem("SubMenuItem12"));itemArray[0].setSubmenu(menu1);itemArray[1] = new MenuItem("MenuItem2");Menu menu2 = new Menu();menu2.setData(new MenuItem("SubMenuItem21"), new MenuItem("SubMenuItem22"));itemArray[1].setSubmenu(menu2);Menu parentMenu = new Menu();  parentMenu.setCanSelectParentItems(true);  parentMenu.setData(itemArray);ToolStripMenuButton menuButton = new ToolStripMenuButton("Menu", parentMenu);toolStrip.addMenuButton(menuButton);VLayout hlayout = new VLayout();hlayout.addMember(toolStrip);hlayout.addMember(new HTMLFlow("Tab3"));addTabToTopTabset("Tab1", new HTMLFlow("Tab1"), true);addTabToTopTabset("Tab2", hlayout, true);        addTabToTopTabset("Tab3", new CustomAccordion(), true);this.addMember(topTabSet);}private void addTabToTopTabset(String title, Canvas pane, boolean closable) {Tab tab = createTab(title, pane, closable);topTabSet.addTab(tab);topTabSet.selectTab(tab);}private Tab createTab(String title, Canvas pane, boolean closable) {Tab tab = new Tab(title);tab.setCanClose(closable);tab.setPane(pane);return tab;}}

这里要注意的事情。 首先,我们使用ToolStrip ,它实际上是一个条,可以将各种小部件(按钮,菜单等)附加到该条上。 特定的类只能添加到工具条中。 例如,如果要添加按钮,则必须创建一个ToolStripButton实例。 同样,可以将整个菜单附加到该菜单上。 创建菜单类的实例后,我们使用MenuItem类向其添加组件。 最后,菜单被封装到ToolStripMenuButton中 ,然后最终被添加到工具条中。

关于标签,API非常简单。 我们使用TabSet类的addTab方法添加新的选项卡,并使用selectTab方法来选择特定的选项卡。 在选项卡本身上,我们可以使用setPane方法来指定与特定选项卡关联的窗格。 为了确定选项卡是否应提供用于关闭自身的图标,使用setCanClose方法。

最后,让我们看一下“ CustomAccordion”类,它基本上是一种垂直手风琴。

package com.javacodegeeks.smartgwt.appui.client.ui.widgets;import com.smartgwt.client.types.Overflow;
import com.smartgwt.client.types.VisibilityMode;
import com.smartgwt.client.widgets.HTMLFlow;
import com.smartgwt.client.widgets.layout.SectionStack;
import com.smartgwt.client.widgets.layout.SectionStackSection;public class CustomAccordion extends SectionStack {public CustomAccordion() {this.setWidth100();this.setVisibilityMode(VisibilityMode.MUTEX);this.setShowExpandControls(false);this.setAnimateSections(true);SectionStackSection section1 = new SectionStackSection("TabSection1"); section1.setExpanded(true); HTMLFlow htmlFlow1 = new HTMLFlow();  htmlFlow1.setOverflow(Overflow.AUTO);  htmlFlow1.setPadding(10);  htmlFlow1.setContents("TabSection1");     section1.addItem(htmlFlow1);SectionStackSection section2 = new SectionStackSection("TabSection2");  section2.setExpanded(false);  HTMLFlow htmlFlow2 = new HTMLFlow();  htmlFlow2.setOverflow(Overflow.AUTO);  htmlFlow2.setPadding(10);  htmlFlow2.setContents("TabSection2");  section2.addItem(htmlFlow2);SectionStackSection section3 = new SectionStackSection("TabSection3");  section3.setExpanded(false);HTMLFlow htmlFlow3 = new HTMLFlow();  htmlFlow3.setOverflow(Overflow.AUTO);  htmlFlow3.setPadding(10);  htmlFlow3.setContents("TabSection3");    section3.addItem(htmlFlow3);this.addSection(section1);  this.addSection(section2);  this.addSection(section3);}}

我们以前没见过什么,我们使用SectionStack类创建手风琴并向其添加SectionStackSection 。 HTMLFlow类用于显示应扩展为自然大小而无需滚动HTML内容。

启动Eclipse配置,然后将浏览器指向提供的URL:

http://127.0.0.1:8888/AwesomeSmartGWTUIProject.html?gwt.codesvr=127.0.0.1:9997

现在让我们看一下每个选项卡的外观:

* Tab1:非常简单明了。

* Tab2:此选项卡包含一个工具条,带有一个按钮和一个菜单。

* Tab3:此选项卡将垂直手风琴围成三个独立的部分。

这就是整个用户界面的样子:

我们已经到了本教程的结尾,所以让我们重新回顾一下已经完成的工作。 首先,我们通过定义特定区域并添加相应的子布局来创建UI的主布局。 每个子布局都是单独处理的。 对于标题区域,我们在左侧添加了应用程序的徽标,在右侧添加了已登录用户的名称。 对于导航区域,我们使用了一个手风琴,该手风琴将一棵树封闭在其中的一部分中。 这棵树可以有任意数量的子代,孙代等,但是您不可以一味地接受它。 最后,对于主布局,我们使用选项卡来充分利用屏幕区域。 创建了三个预定义的选项卡,每个选项卡包含各种小部件。 请注意,导航窗格应链接到主区域。 每当用户单击其中一个叶子时,都可以通过创建一个新选项卡来实现。

伙计们。 您可以在这里找到创建的最终Eclipse项目。 如果您喜欢这个,别忘了分享! 干杯!

相关文章 :
  • 高级SmartGWT教程,第1部分
  • SmartGWT入门,提供出色的GWT界面
  • 在您的GWT应用程序中添加JSON功能
  • 建立自己的GWT Spring Maven原型
  • 将CAPTCHA添加到您的GWT应用程序
  • GWT Spring和Hibernate进入数据网格世界

翻译自: https://www.javacodegeeks.com/2011/01/advanced-smartgwt-tutorial-part-2.html

smartgwt

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/359646.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

百年理工计算机专业课程,这两所国内的百年理工院校,实力强劲,都是国内顶尖实力...

2021年全国高考终于圆满落下了帷幕,但考生们即将要面临一件人生大事,那就是高考志愿填报,因此高考虽然结束,但考生们的压力仍然是不小,只有正确地填好高考志愿,确保自己能够被心仪的高校收录取,…

数学图形之SineSurface与粽子曲面

SineSurface直译为正弦曲面.这有可能和你想象的正弦曲线不一样.如果把正弦曲线绕Y轴旋转,得到的该是正弦波曲面.这个曲面与上一节中的罗马曲面有些相似,那个是被捏过的正四面体,这个则是个被捏过正方体. 本文将展示SineSurface与粽子曲面的生成算法和切图,使用自己定义语法的脚…

计算机工程学院文艺例会,西航职院 | 计算机工程学院 2019年度学生会干部第一次例会...

原标题:西航职院 | 计算机工程学院 2019年度学生会干部第一次例会西航职院计算机工程学院,2019年度第一次学生会干部例会,于2月26日下午在四号教学楼201顺利召开。参加此次会议的有计算机学生会全体学生干部和指导老师刘老师。会议开始&#…

dateformat线程_Java最佳实践–多线程环境中的DateFormat

dateformat线程这是有关使用Java编程语言时的拟议实践的系列文章的第一篇。 所有讨论的主题均基于用例,这些用例源于电信行业关键任务超高性能生产系统的开发。 在阅读本文的每个部分之前,强烈建议您参考相关的Java API文档以获取详细信息和代码示例。…

关于图连通性的几道题(水)

POJ 2186 强连通分量缩点 1 #include<cstdio>2 #include<cstring>3 #include<algorithm>4 using namespace std;5 6 int en[10010], col[10010], dfn[10010], low[10010], stack[10010], tot[10010], chu[10010];7 bool ins[10010];8 int n, m, esize, dtime…

一台计算机硬盘容量标为800gb,一台计算机的硬盘容量标为800GB,其存储容量是()。...

台硬盘不适的装用于料是室外饰材。行的有_能进操作&#xff0c;计算机系统源管在W“资”中操作理器。不正有_确的&#xff0c;容量下列叙述中。的有描述正确&#xff0c;其存文输的中s系统下关于入。文档选定应_整篇&#xff0c;储容d文档编在W辑中。不能作进行_操&#xff0c;…

jQuery验证插件

jQuery验证插件 原文:jQuery验证插件学习要点&#xff1a; 1.使用 validate.js 插件 2.默认验证规则 3.validate()方法和选项 4.validate.js 其他功能 验证插件&#xff08;validate.js&#xff09;&#xff0c;是一款验证常规表单数据合法性的插件。使用它&#xff0c;极大的解…

爱思助手更新后无法连接服务器,爱思助手出现无法连接或连接超时的操作教程...

使用爱思助手的用户很多&#xff0c;一些新用户不清楚出现无法连接或连接超时怎样处理&#xff0c;今天小编给大家带来在爱思助手出现无法连接或连接超时的操作教程&#xff0c;希望可以帮到大家。爱思助手出现无法连接或连接超时的操作教程一、数据线和电脑USB接口正常状态请确…

计算机演示题打不开,大神为你演示win7系统计算机上右键管理打不开的还原技巧...

当我们经常使用的电脑工作的时候&#xff0c;时间久了难免会遇到win7系统计算机上右键管理打不开的问题&#xff0c;如今就有用户反映在使用电脑的时候遇到win7系统计算机上右键管理打不开的情况不知怎么解决&#xff0c;针对这个问题小编就整理总结出win7系统计算机上右键管理…

apache lucene_Apache Lucene拼写检查器的“您是不是要”功能

apache luceneGoogle的“您是不是要”功能 在上一篇文章中对Lucene进行了介绍之后 &#xff0c;现在是时候提高它并创建一个更复杂的应用程序了。 您肯定最熟悉Google的“您是不是要”功能&#xff08;其他搜索引擎也支持此功能&#xff09;。 这是一个例子&#xff1a; Luce…

荣耀6手机常显示无法链接服务器怎么处理,华为手机连接上WiFi上不了网怎么办...

华为手机(Mate7,荣耀6 Plus,荣耀6,P7) 连接上WiFi上不了网怎么办每当小编被遇到这样的问题&#xff0c;小编都会深深的醉一把。这样的问题就应该被消灭在火星上&#xff0c;谁让他来地球的。网络就像一张大网&#xff0c;哪个节点有问题都可能导致WIFI连上无法上网&#xff0c;…

jboss 配置上下文路径_JBoss Portal上的“ Hello World” portlet

jboss 配置上下文路径Portlet概述 本教程将向您展示如何创建和部署简单的Portlet。 Portlet是基于Java技术的Web组件&#xff0c;可以处理请求并生成动态内容。 Portlet不是自治实体&#xff0c;但是由Portlet容器管理&#xff0c;Portlet容器为Portlet执行提供了必要的运行时…

创建型-工厂方法模式

1、工厂方法模式意图&#xff1a; 定义一个用于创建对象的接口&#xff0c;让子类决定实例化哪一个类。Factory Method使一个类的实例化延迟到其子类。 工厂方法模式用于为属于同一类别的产品定义对应的具体工厂类&#xff0c;并将具体工厂类开放给用户类来使用。 2、应用场景&…

服务器添加角色显示灰色,添加角色 web服务器 灰色

添加角色 web服务器 灰色 内容精选换一换OneAccess支持通过AD认证用户身份和控制权限。AD全称Active Directory&#xff0c;中文名称活动目录。您可以将AD简单理解成一个数据库&#xff0c;其存储有关网络对象的信息&#xff0c;方便管理员和用户查找所需信息。本文主要介绍One…

虚拟服务器关机怎么开,云服务器关机了怎么开启

云服务器关机了怎么开启 内容精选换一换开启防护后&#xff0c;您可以根据需要进行安全配置。包括配置常用登录地、常用登录IP、SSH登录IP白名单&#xff0c;开启恶意程序自动隔离查杀功能。配置常用登录地后&#xff0c;企业主机安全服务将对非常用地登录主机的行为进行告警。…

web文件怎么传到服务器,web文件传到服务器

web文件传到服务器 内容精选换一换工具中所有涉及上传文件功能的&#xff0c;如果需要上传的文件大于1GB或者解压后超过剩余磁盘空间的一半&#xff0c;则需要释放磁盘空间或手动将文件上传至服务器&#xff0c;其他情况可通过Web界面上传功能上传。Web服务端证书&#xff0c;即…

weblogic ejb_使用Oracle WebLogic对应用程序外部的EJB的引用

weblogic ejb在之前的文章中&#xff0c;我们对EJB 3.0版及其为您提供的构建Java EE应用程序的可移植机制进行了概述。 由于Java EE规范都是关于可移植性的&#xff0c;因此冒着重复自我的风险&#xff0c;我们经常强调EJB v。3.0规范上仍然存在最重要的可移植性限制&#xff1…

Android Studio显示行数

Android Studio在打开的文件左側单击鼠标右键&#xff0c;也能像Eclipse一样设置显示代码行数&#xff0c;如图1。可是这边跟Eclipse有一个非常大的差别&#xff0c;Eclipse设置后&#xff0c;其余的相应文件也跟着生效&#xff0c;即使文件关闭后又一次打开行数也还是会显示&a…

visio 小技巧

Visio作图非常的方便 目前我还是用Visio2003&#xff0c;有一些小技巧&#xff0c;记录一下。 1、visio修改文本框文字对齐方式。默认的对齐方式是上下、左右居中。修改的位置: 在一个文档中可以插入多个标签页&#xff0c;当需要分页&#xff0c;用不同页归类不同信息的时候使…

java中字符串的精确匹配_Java最佳实践–字符串性能和精确字符串匹配

java中字符串的精确匹配在使用Java编程语言时&#xff0c;我们将继续讨论与建议的实践有关的系列文章&#xff0c;我们将讨论String性能调优。 我们将专注于如何有效地处理字符串创建&#xff0c; 字符串更改和字符串匹配操作。 此外&#xff0c;我们将提供我们自己的用于精确字…