可以做电算化的网站,网站建设费入预付款什么科目,wordpress 获取分类列表,wordpress关闭缓存贾斯汀#xff08;Justin#xff09;#xff0c;帕特#xff08;Pat#xff09;和我已经开始着手一个需要用户界面进行管理和管理的副项目。 在与SmartGWT和GWT共同工作了一段时间之后#xff0c;我们决定使用SmartGWT创建接口。 我们非常喜欢视觉组件#xff08;请查看… 贾斯汀Justin帕特Pat和我已经开始着手一个需要用户界面进行管理和管理的副项目。 在与SmartGWT和GWT共同工作了一段时间之后我们决定使用SmartGWT创建接口。 我们非常喜欢视觉组件请查看SmartGWT展示柜 以及它有助于快速开发的事实。 在本教程中我将向您展示如何在短短几个小时内为用户界面创建原型。 该界面在很大程度上受Drools Guvnor应用程序的影响。 我们在许多项目中都使用了Drools并且有Guvnor来创建业务规则。 我们只是喜欢用户界面它既美观又实用。 查看一些Guvnor屏幕截图 。 让我们开始吧。 我假设您已经安装了GWT SDK和Eclipse的Google插件 。 SmartGWT与GWT 1.5.3GWT 1.6.4GWT 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 namecom.smartgwt.SmartGwt/ 另外注释掉声明GWT主题用法的现有部分 !--inherits namecom.google.gwt.user.theme.standard.Standard/ -- 这是模块XML文件的外观 ?xml version1.0 encodingUTF-8?
module rename-toawesomesmartgwtuiproject!-- Inherit the core Web Toolkit stuff. --inherits namecom.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 namecom.google.gwt.user.theme.standard.Standard/ --!-- inherits namecom.google.gwt.user.theme.chrome.Chrome/ --!-- inherits namecom.google.gwt.user.theme.dark.Dark/ --!-- Other module inherits --inherits namecom.smartgwt.SmartGwt/!-- Specify the app entry point class. --entry-point classcom.javacodegeeks.smartgwt.appui.client.AwesomeSmartGWTUIProject/!-- Specify the paths for translatable code --source pathclient/source pathshared//module 下一步是删除“ AwesomeSmartGWTUIProject.html”文件中存在的一些自动生成的代码尤其是H1和Table标记。 这是您应该得到的 !doctype html
!-- The DOCTYPE declaration above will set the --
!-- browsers rendering engine into --
!-- Standards Mode. Replacing this declaration --
!-- with a Quirks Mode doctype may lead to some --
!-- differences in layout. --htmlheadmeta http-equivcontent-type contenttext/html; charsetUTF-8!-- --!-- Consider inlining CSS to reduce the number of requested files --!-- --link typetext/css relstylesheet hrefAwesomeSmartGWTUIProject.css!-- --!-- Any title is fine --!-- --titleWeb 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 typetext/javascript languagejavascript srcawesomesmartgwtuiproject/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 srcjavascript: id__gwt_historyFrame tabIndex-1 styleposition:absolute;width:0;height:0;border:0/iframe!-- RECOMMENDED if your web app will not function without JavaScript enabled --noscriptdiv stylewidth: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serifYour 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 GWTs 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.codesvr127.0.0.1:9997 这是您应该看到的图像 几分钟的代码还不错。 不必弄乱CSSHTML和JavaScript我们已经创建了UI的框架其中包括严格定义的子区域。 剩下的就是通过使用各种精美的小部件填充区域来增强它。 在本教程的下一部分中我将向您介绍一些最高级的组件例如树和选项卡。 现在您可以在此处找到到目前为止创建的Eclipse项目。 请注意我删除了一些SmartGWT特定的内容图像等因为它们使档案过大。 这些应该由新项目自动创建。 “ gwt-servlet.jar”也已从“ war \ WEB-INF \ lib”目录中删除。 UI编码愉快 更新我还发布了本教程的第二部分 。 相关文章 SmartGWT入门提供出色的GWT界面 将JSON功能添加到您的GWT应用程序中 建立自己的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
