vaadinvaadin入门


备注

Vaadin是一种用Java编写的服务器端脚本语言,它将生成Web应用程序所需的大多数客户端代码。它使用Google Web Toolkit生成客户端对象,并可通过扩展Google Web Toolkit进行扩展。

版本

在Eclipse中创建Vaadin项目

用于eclipse的Vaadin插件提供了一种使用Apache Ivy依赖管理器构建vaadin项目的快速方法。 Vaadin的文档解释了如何在Eclipse插件的帮助下创建vaadin项目。

要安装插件,请访问eclipse marketplace并搜索vaadin 。当前版本的插件是3.0.0

安装插件后,您将拥有以下快速功能,

  • 创建Vaadin6Vaadin 7 项目( 默认依赖管理器是常春藤
  • 编译Widgetsets( 编译客户端小部件
  • 编译主题( 编译主题以构建最终的CSS
  • 创建窗口小部件( 构建自定义窗口小部件
  • 创建Vaadin主题

因此,在设置插件之后,只需使用最少的配置创建新的Vaadin项目。您还可以在创建项目时指定vaadin的版本。

  • File > New > Vaadin7 Project
  • 指定要在项目中使用的vaadin版本
  • 指定要使用的目标运行时
  • 完!

一旦Ivy解决了所有依赖关系,下载vaadin所需的所有jar都需要时间。您可以直接在服务器上运行项目,您将在浏览器屏幕中看到一个带有Click Me Button 。请注意,Vaadin7与Java 6和更新版本兼容。

使用Maven创建Vaadin项目

使用Maven,您可以使用vaadin-archetype-application 原型创建Vaadin项目。您还可以在IDE中添加该原型以使用IDE创建maven项目。

mvn archetype:generate 
   -DarchetypeGroupId=com.vaadin 
   -DarchetypeArtifactId=vaadin-archetype-application 
   -DarchetypeVersion=7.6.8 
   -DgroupId=myvaadin.project 
   -DartifactId=DemoVaadinProject 
   -Dversion=0.1 
   -Dpackaging=war 
 

执行上述命令后,您将拥有以下项目结构。

DemoVaadinProject 
  |-src
     |-main
         |-java
         |   |-myvaadin
         |         |-project
         |            |-MyUI.java
         |-resource
         |    |-myvaadin
         |         |-project
         |            |-MyAppWidgetset.gwt.xml
         |-webapps
              |- VAADIN
                   |-theme   
                      |- mytheme.scss
                      |- addons.scss
                      |- styles.scss
                      |- favicon.ico
 

创建的默认maven项目可以直接在IDE中导入。要运行maven应用程序,我们必须编译vaadin的默认小部件集。

请注意,我们可以直接使用以下maven命令打包vaadin应用程序,默认情况下它将编译widgetset。您可以使用maven jetty插件在Jetty上部署vaadin应用程序。

cd path/to/DemoVaadinProject
mvn package jetty:run
 

这将部署默认应用程序并开始在默认端口8080 上运行它。您可以在http:// localhost:8080访问已部署的应用程序。

它可以在没有任何变化的情况下运行。默认情况下,Vaadin archetype添加默认主题,widgetset xml和MyUI 类,它是vaadin应用程序的入口点。

在浏览器中,我们将看到以下表单。

在此处输入图像描述

第一个项目 - “Hello World”

复制粘贴此代码并启动您的程序:

@Theme(ValoTheme.THEME_NAME) //[optional] adds Vaadin built in theming 
public class SampleUI extends UI {
    
@Override
protected void init(VaadinRequest request) {
         final VerticalLayout rootLayout = new VerticalLayout();
         Label label = new Label("Hello World"!);
         rootLayout.addComponent(label);
         setContent(rootLayout);
     }
 }
 

在lauching成功后,请导航到localhost:8080 / yourApplicationNamehttp:// localhost:8080 /以查看您的应用程序已启动并正在运行。

安装或设置

https://vaadin.com/framework/get-started

Netbeans的Vaadin插件

使用NetBeans IDE创建项目

在下文中,我们将引导您在NetBeans中创建Vaadin项目并演示如何运行它。

安装NetBeans IDE和插件中介绍了NetBeans和Vaadin插件的安装。

如果没有插件,您最容易使用Vaadin原型创建一个Vaadin项目作为Maven项目。您还可以将Vaadin项目创建为常规Web应用程序项目,但需要许多手动步骤来安装所有Vaadin库,创建UI类,配置servlet,创建主题等。

创建项目

  1. ▸新建项目选择文件...从主菜单或按Ctrl + Shift + N键。

  2. 在打开的“新建项目”窗口中,从右侧选择Vaadin类别和一个Vaadin原型。 在此处输入图像描述

    Maven Archetypes概述中更详细地描述了原型。

  3. 在“ 名称和位置”步骤中,输入项目参数。 在此处输入图像描述

    项目名

    项目名称。该名称必须是有效的标识符,该标识符可能只包含字母数字,减号和下划线。它附加到组ID以获取源的Java包名称。

    项目位置

    要创建项目的文件夹的路径。

    组ID

    项目的Maven组ID。它通常是您的组织域名,顺序相反,例如com.example。组ID也用作Java源包的前缀,因此它应该是与Java兼容的包名。

    您的应用程序的初始版本。该号码必须遵守Maven版本编号格式。

    要放入源代码的Java包名称。

    其他创建属性

    属性控制各种名称。它们特定于您选择的原型。

    单击完成。

    当Maven加载所有需要的依赖项时,创建项目可能需要一段时间。

探索项目

项目向导为您完成了所有工作:已将一个UI类框架写入src目录。项目资源管理器中显示的项目层次结构显示在NetBeans的新Vaadin项目中在此处输入图像描述图1. NetBeans中的一个新Vaadin项目

mytheme的

用户界面的主题。有关主题的信息,请参阅主题。

MyUI.java

UI类,它是应用程序的主要入口点。有关Vaadin应用程序基本结构的信息,请参阅服务器端应用程序。

Vaadin库和其他依赖项由Maven管理。请注意,库不存储在项目文件夹下,即使它们列在Java资源▸库▸Maven依赖项虚拟文件夹中。运行应用程序

创建后,您可以按如下方式在服务器中运行它。

  1. 在“项目”选项卡中,选择项目,然后单击工具栏中的“运行项目”按钮(或按F6)。

  2. 在“选择部署服务器”窗口中,从“服务器”列表中选择服务器。它应该显示GlassFish或Apache Tomcat或两者,具体取决于您在NetBeans安装中选择的内容。

    netbeans服务器

    此外,如果您希望在将来开发应用程序时也使用同一服务器,请选择“永久记住”。

    单击确定。

此时将编译窗口小部件集,这可能需要一段时间。

如果一切顺利,NetBeans将在端口8080中启动服务器,并根据您的系统配置启动默认浏览器以显示Web应用程序。如果没有,您可以手动打开它,例如,在http:// localhost:8080 / myproject 。默认情况下,项目名称用作应用程序的上下文路径。

现在,当您在源编辑器中编辑UI类并保存它时,NetBeans将自动重新部署该应用程序。几秒钟后完成后,您可以在浏览器中重新加载应用程序。