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