smartgwt_高级SmartGWT教程,第1部分

smartgwt

贾斯汀(Justin),帕特(Pat)和我已经开始着手进行一个需要管理和管理用户界面的副项目。 在与SmartGWT和GWT共同工作了一段时间之后,我们决定使用SmartGWT创建接口。 我们非常喜欢视觉组件(请查看SmartGWT展示柜 )以及它有助于快速开发的事实。

在本教程中,我将向您展示如何在短短几个小时内为UI创建原型。 该界面在很大程度上受Drools Guvnor应用程序的影响。 我们在许多项目中都使用了Drools,并且有Guvnor来创建业务规则。 我们只是喜欢用户界面,它既美观又实用。 查看一些Guvnor屏幕截图 。

让我们开始吧。 我假设您已经安装了GWT SDK和Eclipse的Google插件 。 SmartGWT与GWT 1.5.3,GWT 1.6.4,GWT 1.7.x和GWT 2.0.x兼容。 当前,我正在使用GWT 2.1.0 SDK和SmartGWT 2.2版本。 从本质上讲,这是有关SmartGWT的更高级的教程,因此,您可能必须查看我的入门文章“ SmartGWT入门,以获取令人敬畏的GWT接口” 。 此外,另一个有用的资源是“布局用户界面”教程,我们曾用来启动我们自己的界面的开发。

首先,我们在Eclipse中创建一个新的“ Web应用程序项目”。 我选择“ AwesomeSmartGWTUIProject”作为项目名称,选择“ com.javacodegeeks.smartgwt.appui”作为程序包名称。

接下来,将提取的ZIP中的“ smartgwt.jar”文件添加到项目的类路径中。 请注意,该文件也应添加到“ war / WEB-INF / lib”目录中。

然后编辑模块xml文件(名为“ AwesomeSmartGWTUIProject.gwt.xml”),并在标准“继承”声明之后添加以下行:

<inherits name="com.smartgwt.SmartGwt"/>

另外,注释掉声明GWT主题用法的现有部分:

<!--<inherits name='com.google.gwt.user.theme.standard.Standard'/> -->

这是模块XML文件的外观:

<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='awesomesmartgwtuiproject'><!-- Inherit the core Web Toolkit stuff.                        --><inherits name='com.google.gwt.user.User'/><!-- Inherit the default GWT style sheet.  You can change       --><!-- the theme of your GWT application by uncommenting          --><!-- any one of the following lines.                            --><!-- <inherits name='com.google.gwt.user.theme.standard.Standard'/>  --><!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/> --><!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/>     --><!-- Other module inherits                                      --><inherits name="com.smartgwt.SmartGwt"/><!-- Specify the app entry point class.                         --><entry-point class='com.javacodegeeks.smartgwt.appui.client.AwesomeSmartGWTUIProject'/><!-- Specify the paths for translatable code                    --><source path='client'/><source path='shared'/></module>

下一步是删除“ AwesomeSmartGWTUIProject.html”文件中存在的一些自动生成的代码,尤其是H1和Table标记。 这是您应该得到的:

<!doctype html>
<!-- The DOCTYPE declaration above will set the    -->
<!-- browser's rendering engine into               -->
<!-- "Standards Mode". Replacing this declaration  -->
<!-- with a "Quirks Mode" doctype may lead to some -->
<!-- differences in layout.                        --><html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><!--                                                               --><!-- Consider inlining CSS to reduce the number of requested files --><!--                                                               --><link type="text/css" rel="stylesheet" href="AwesomeSmartGWTUIProject.css"><!--                                           --><!-- Any title is fine                         --><!--                                           --><title>Web Application Starter Project</title><!--                                           --><!-- This script loads your compiled module.   --><!-- If you add any GWT meta tags, they must   --><!-- be added before this line.                --><!--                                           --><script type="text/javascript" language="javascript" src="awesomesmartgwtuiproject/awesomesmartgwtuiproject.nocache.js"></script></head><!--                                           --><!-- The body can have arbitrary html, or      --><!-- you can leave the body empty if you want  --><!-- to create a completely dynamic UI.        --><!--                                           --><body><!-- OPTIONAL: include this if you want history support --><iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe><!-- RECOMMENDED if your web app will not function without JavaScript enabled --><noscript><div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">Your web browser must have JavaScript enabledin order for this application to display correctly.</div></noscript></body>
</html>

同样,删除所有存在于EntryPoint类中的名为“ AwesomeSmartGWTUIProject”的代码,仅保留一个空的onModuleLoad方法,如下所示:

package com.javacodegeeks.smartgwt.appui.client;import com.google.gwt.core.client.EntryPoint;public class AwesomeSmartGWTUIProject implements EntryPoint {public void onModuleLoad() {}}

现在我们准备开始编写SmartGWT代码,因此请确保已将SmartGWT Javadocs标记为书签。 在构建接口时,我们将继续使用两个非常重要的类。

  • HLayout :这是一个与布局相关的类,沿水平轴应用大小调整策略,即,其所有内部组件将以水平方式放置。
  • VLayout :这是一个与布局相关的类,沿垂直轴应用大小调整策略,即,它们的所有内部组件都将以垂直方式放置。

这些类都从父Layout扩展,因此它们继承了addMember方法,该方法允许它们添加其他Canvas对象或Widget 。

使用各种布局对象,我们会将整个屏幕区域分解为特定的子区域(北,南,东,西和主区域)。 让我们看看入口点类的第一个版本如何:

package com.javacodegeeks.smartgwt.appui.client;import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.RootLayoutPanel;
import com.javacodegeeks.smartgwt.appui.client.ui.ApplicationMenu;
import com.javacodegeeks.smartgwt.appui.client.ui.HeaderArea;
import com.javacodegeeks.smartgwt.appui.client.ui.MainArea;
import com.javacodegeeks.smartgwt.appui.client.ui.NavigationArea;
import com.smartgwt.client.widgets.layout.HLayout;
import com.smartgwt.client.widgets.layout.VLayout;public class AwesomeSmartGWTUIProject implements EntryPoint {private static final int HEADER_HEIGHT = 85;private VLayout mainLayout;private HLayout northLayout;private HLayout southLayout;private VLayout eastLayout;private HLayout westLayout;public void onModuleLoad() {Window.enableScrolling(false);Window.setMargin("0px");// main layout occupies the whole areamainLayout = new VLayout();mainLayout.setWidth100();mainLayout.setHeight100();northLayout = new HLayout();northLayout.setHeight(HEADER_HEIGHT);VLayout vLayout = new VLayout();vLayout.addMember(new HeaderArea());vLayout.addMember(new ApplicationMenu());northLayout.addMember(vLayout);westLayout = new NavigationArea();westLayout.setWidth("15%");eastLayout = new MainArea();eastLayout.setWidth("85%");southLayout = new HLayout();southLayout.setMembers(westLayout, eastLayout);mainLayout.addMember(northLayout);mainLayout.addMember(southLayout);// add the main layout container to GWT's root panelRootLayoutPanel.get().add(mainLayout);}}

不用担心编译错误,我们稍后将创建必要的类。 如您所见,我们将整个屏幕区域划分为较小的块,并使用SmartGWT API将所有组件连接在一起。 请注意使用setWidth100和setHeight100方法,它们方便地允许特定组件占据整个可用区域。 最后, RootLayoutPanel是GWT类,它使我们可以访问屏幕的根面板。 现在让我们创建各种组件。

* ApplicationMenu:

package com.javacodegeeks.smartgwt.appui.client.ui;import com.smartgwt.client.types.Alignment;
import com.smartgwt.client.types.Overflow;
import com.smartgwt.client.widgets.Label;
import com.smartgwt.client.widgets.layout.HLayout;public class ApplicationMenu extends HLayout {private static final int APPLICATION_MENU_HEIGHT = 27;private Label label;public ApplicationMenu() {super();this.setHeight(APPLICATION_MENU_HEIGHT);label = new Label();label.setContents("Application Menu");label.setAlign(Alignment.CENTER);label.setOverflow(Overflow.HIDDEN);this.addMember(label);}}

这里没什么特别的,我们只是在布局中添加了一个Label并将Alignment设置为居中。

*标头区域:

package com.javacodegeeks.smartgwt.appui.client.ui;import com.smartgwt.client.types.Alignment;
import com.smartgwt.client.types.Overflow;
import com.smartgwt.client.widgets.Img;
import com.smartgwt.client.widgets.Label;
import com.smartgwt.client.widgets.layout.HLayout;public class HeaderArea extends HLayout {private static final int HEADER_AREA_HEIGHT = 60;public HeaderArea() {super();this.setHeight(HEADER_AREA_HEIGHT);Img logo = new Img("jcg_logo.png", 282, 60);Label name = new Label();name.setOverflow(Overflow.HIDDEN);  name.setContents("Java 2 Java Developers Resource Center"); HLayout westLayout = new HLayout();westLayout.setHeight(HEADER_AREA_HEIGHT);    westLayout.setWidth("70%");westLayout.addMember(logo);westLayout.addMember(name);Label signedInUser = new Label();signedInUser.setContents("Fabrizio Chami ");   HLayout eastLayout = new HLayout();eastLayout.setAlign(Alignment.RIGHT);  eastLayout.setHeight(HEADER_AREA_HEIGHT);eastLayout.setWidth("30%");eastLayout.addMember(signedInUser);this.addMember(westLayout);      this.addMember(eastLayout);}}

同样,很简单。 我们使用Img类添加了图像,并提供了文件名。 请注意,图像URL自动位于“ images”文件夹下,因此基本上“ jcg_logo.png”文件必须位于“ war / images”文件夹中。

*导航区域:

package com.javacodegeeks.smartgwt.appui.client;import com.smartgwt.client.types.Overflow;
import com.smartgwt.client.types.VisibilityMode;
import com.smartgwt.client.widgets.Label;
import com.smartgwt.client.widgets.layout.HLayout;
import com.smartgwt.client.widgets.layout.SectionStack;
import com.smartgwt.client.widgets.layout.SectionStackSection;public class NavigationArea extends HLayout {public NavigationArea() {super();this.setMembersMargin(20);  this.setOverflow(Overflow.HIDDEN);this.setShowResizeBar(true);final SectionStack sectionStack = new SectionStack();  sectionStack.setVisibilityMode(VisibilityMode.MULTIPLE);sectionStack.setShowExpandControls(true);sectionStack.setAnimateSections(true);sectionStack.setVisibilityMode(VisibilityMode.MUTEX);sectionStack.setOverflow(Overflow.HIDDEN);SectionStackSection section1 = new SectionStackSection("Section 1");section1.setExpanded(true);Label label1 = new Label();label1.setContents("Label1");section1.addItem(label1);SectionStackSection section2 = new SectionStackSection("Section 2");section2.setExpanded(false);Label label2 = new Label();label2.setContents("Label2");label2.setOverflow(Overflow.AUTO);label2.setPadding(10);section2.addItem(label2);SectionStackSection section3 = new SectionStackSection("Section 3");section3.setExpanded(false);Label label3 = new Label();label3.setContents("Label3");label3.setOverflow(Overflow.AUTO);label3.setPadding(10);section3.addItem(label3);sectionStack.addSection(section1);sectionStack.addSection(section2);sectionStack.addSection(section3);this.addMember(sectionStack);}}

对于导航区域,我们需要类似手风琴的组件。 这是在SmartGWT中通过我们向其中添加SectionStackSection实例的SectionStack类实现的。 我们可以向这些项目添加任意的小部件,但为简单起见,现在我们仅添加一些Label 。 注意使用setShowResizeBar方法,该方法允许我们在布局中的此成员之后显示调整大小的条,以允许调整其大小。

*主要区域:

package com.javacodegeeks.smartgwt.appui.client.ui;import com.smartgwt.client.types.Alignment;
import com.smartgwt.client.types.Overflow;
import com.smartgwt.client.widgets.Label;
import com.smartgwt.client.widgets.layout.VLayout;public class MainArea extends VLayout {private Label label;public MainArea() {super();label = new Label();label.setContents("Main Area");label.setAlign(Alignment.CENTER);label.setOverflow(Overflow.HIDDEN);this.addMember(label);}}

主要区域将托管我们界面的大部分小部件,但目前仅包括标签。

好,让我们看看到目前为止我们做了什么。 启动Eclipse配置(作为Web应用程序项目),然后将浏览器指向提供的URL:

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

这是您应该看到的图像:

几分钟的代码还不错。 不必弄乱CSS,HTML和JavaScript,我们已经创建了UI的框架,其中包括严格定义的子区域。 剩下的就是通过用各种精美的小部件填充区域来增强它。

在本教程的下一部分中,我将向您介绍一些最高级的组件(例如树和选项卡)。 现在,您可以在此处找到到目前为止创建的Eclipse项目。 请注意,我删除了一些SmartGWT特定的内容(图像等),因为它们使档案过大。 这些应该由新项目自动创建。 “ gwt-servlet.jar”也已从“ war \ WEB-INF \ lib”目录中删除。

UI编码愉快!

更新:我还发布了本教程的第二部分 。

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

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

smartgwt

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

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

相关文章

计算机英语女人英语怎么说,英语时差:计算机和女人

00:0000:00微信扫码登陆&#xff0c;畅听全站所有音频&#xff01;(20秒后自动关闭)X关注后&#xff0c;点此关闭https://online2.tingclass.net/lesson/shi0529/10000/10183/67.mp3https://image.tingclass.net/statics/js/2012When you hear the term, "computer geek,&…

云计算系统是大规模计算机系统吗,云计算的系统架构及技术探析

云计算技术属于计算机技术的一种&#xff0c;是目前计算机技术中应用以及研究重点之一&#xff0c;那么云计算到底是什么呢&#xff1f;云计算是在并行处理&#xff0c;分析式处理等技术的基础上发展而来的新技术&#xff0c;可以有效的将计算机进行整合&#xff0c;建立新颖的…

Vue 封装echarts柱状图(Bar)组件

目的&#xff1a;减少重复代码&#xff0c;便于维护 显示效果 组件代码 <template><div class"ldw-data-content-box"><div class"ldw-chilren-box"><div class"title" v-if"title">{{ title }}</div>…

smartgwt_高级SmartGWT教程,第2部分

smartgwt这是我的教程的第二部分&#xff0c;有关使用SmartGWT快速进行UI开发。 在本教程的第一部分中 &#xff0c;我们创建了基本的界面布局并添加了一些基本组件。 现在是时候解决这个问题&#xff0c;并使用SmartGWT的真正功能了。 在继续之前&#xff0c;让我们记住到目前…

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

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

数学图形之SineSurface与粽子曲面

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

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

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

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

dateformat线程这是有关使用Java编程语言时的拟议实践的系列文章的第一篇。 所有讨论的主题均基于用例&#xff0c;这些用例源于电信行业关键任务超高性能生产系统的开发。 在阅读本文的每个部分之前&#xff0c;强烈建议您参考相关的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;即…