vaadinvaadinを使い始める

備考

バージョン

EclipseでVaadinプロジェクトを作成する

eclipse用のVaadinプラグインは、Apache Ivy依存マネージャーを使用してvaadinプロジェクトを簡単に構築する方法を提供します。 Vaadinのドキュメンテーションは、Eclipseプラグインの助けを借りてvaadinプロジェクトを作成する方法を説明しています。

プラグインをインストールするには、eclipse marketplaceに行き、 vaadinを検索してください 。現在のプラグインのバージョンは3.0.0 です。

プラグインをインストールした後は、以下のクイック機能があります。

• Vaadin6 またはVaadin 7 プロジェクトを作成する（ デフォルトの依存関係マネージャはIvy ）
• ウィジェットセットのコンパイル（ クライアントサイドウィジェットをコンパイルするため ）
• テーマをコンパイルする （テーマをコンパイルして最終的なCSSを作成する ）
• ウィジェットを作成する（カスタムウィジェットを作成する ）
• Vaadinテーマを作成する

そのため、プラグインを設定した後、最低限の設定で新しいVaadinプロジェクトを作成してください。また、プロジェクトの作成中にvaadinのバージョンを指定することもできます。

• File > New > Vaadin7 Project
• プロジェクトで使用するvaadinのバージョンを指定する
• 使用するターゲットランタイムを指定する
• フィニッシュ！

Ivyがすべての依存関係を解決すると、vaadinに必要なすべてのjarファイルをダウンロードするのに時間がかかります。サーバー上でプロジェクトを直接実行すると、ブラウザ画面に「 Click Me Button が表示されます。 Vaadin7はJava 6以降と互換性があることにご注意ください。

Mavenを使ってVaadinプロジェクトを作成する

Mavenでは、 vaadin-archetype-application archetypeを使って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アプリケーションをパッケージ化することができ、デフォルトでウィジェットセットをコンパイルすることに注意してください。 maven jettyプラグインを使用して、Jettyにvaadinアプリケーションをデプロイできます。

cd path/to/DemoVaadinProject
mvn package jetty:run
 

これにより、デフォルトのアプリケーションがデプロイされ、デフォルトのポート8080 実行されます。デプロイされたアプリケーションには、 http：// localhost：8080からアクセスできます。

何も変更せずに実行する準備ができています。デフォルトでは、Vaadin archetypeはデフォルトテーマ、widgetset xml、およびvaadinアプリケーションのエントリーポイントであるMyUI クラスを追加します。

ブラウザでは、次の形式が表示されます。

最初のプログラム - "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 / yourApplicationNameまたはhttp：// localhost：8080 /に移動して、あなたのアプリが稼動中であることを確認してください。

インストールまたはセットアップ

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

Netbeans用Vaadinプラグイン

NetBeans IDEを使用したプロジェクトの作成

以下では、NetBeansでVaadinプロジェクトを作成し、実行方法を示します。

NetBeansとVaadinプラグインのインストールについては、「NetBeans IDEとプラグインのインストール」を参照してください。

プラグインがなければ、Vaadinのアーキタイプを使用してMavenプロジェクトとしてVaadinプロジェクトを作成するのが最も簡単です。 Vaadinプロジェクトを通常のWebアプリケーションプロジェクトとして作成することもできますが、すべてのVaadinライブラリをインストールし、UIクラスを作成し、サーブレットを構成し、テーマを作成するなど、多くの手作業による手順が必要です。

プロジェクトの作成

1. 新規プロジェクト□[ファイルを選択...メインメニューか、Ctrl + Shiftキー+ Nから。

2. 開いている[新規プロジェクト]ウィンドウで、Vaadinカテゴリと右側のVaadinのアーキタイプの1つを選択します。

   アーキタイプの詳細は、「Maven Archetypesの概要」を参照してください。

3. 名前と場所のステップで、プロジェクトのパラメータを入力します。

   プロジェクト名

   プロジェクト名。名前は、英数字、マイナス、およびアンダースコアのみを含む有効な識別子でなければなりません。グループIDに追加され、ソースのJavaパッケージ名を取得します。

   プロジェクトの場所

   プロジェクトを作成するフォルダへのパス。

   グループID

   プロジェクトのMavenグループID。通常、com.exampleのように、逆の順序で組織のドメイン名です。グループIDはJavaソースパッケージの接頭辞としても使用されるため、Java互換のパッケージ名にする必要があります。

   バージョン

   アプリケーションの初期バージョン。番号は、Mavenのバージョン番号の形式に従わなければなりません。

   パッケージ

   ソースを入れるためのJavaパッケージ名。

   追加の作成プロパティ

   プロパティはさまざまな名前を制御します。それらはあなたが選んだアーキタイプに特有のものです。

   Finishをクリックします。

   Mavenは必要な依存関係をすべてロードするので、プロジェクトの作成にはしばらく時間がかかります。

プロジェクトの探究

プロジェクトウィザードはあなたのためにすべての作業を完了しました。UIクラスのスケルトンがsrcディレクトリに書き込まれました。プロジェクトエクスプローラに表示されるプロジェクト階層は、NetBeansの新しいVaadinプロジェクトに示されています。 図1. NetBeansの新しいVaadinプロジェクト

マイテム

UIのテーマ。テーマについては、テーマを参照してください。

MyUI.java

アプリケーションの主要なエントリポイントであるUIクラスです。 Vaadinアプリケーションの基本構造については、「サーバー側アプリケーション」を参照してください。

Vaadinライブラリやその他の依存関係は、Mavenによって管理されます。ライブラリは、Javaリソース▸ライブラリ▸Maven Dependencies仮想フォルダにリストされていても、プロジェクトフォルダの下には格納されません。アプリケーションの実行

作成すると、次のようにサーバーで実行できます。

1. [プロジェクト]タブでプロジェクトを選択し、ツールバーの[プロジェクトの実行]ボタンをクリックします（またはF6キーを押します）。

2. Select deployment serverウィンドウで、Serverリストからサーバーを選択します。 NetBeansインストールで選択した内容に応じて、GlassFishまたはApache Tomcatのいずれか、またはその両方が表示されます。

   

   また、将来アプリケーションを開発するときに同じサーバーを使用する場合は、[永続的に保存]を選択します。

   [OK]をクリックします。

この時点でウィジェットセットがコンパイルされますが、時間がかかることがあります。

すべてうまくいくと、NetBeansはポート8080でサーバを起動し、システム設定に応じて、デフォルトのブラウザを起動してWebアプリケーションを表示します。そうでない場合は、 http：// localhost：8080 / myprojectなどで手動で開くことができます 。プロジェクト名は、デフォルトでアプリケーションのコンテキストパスとして使用されます。

これで、ソースエディタでUIクラスを編集して保存すると、NetBeansによってアプリケーションが自動的に再デプロイされます。数秒後に終了したら、ブラウザでアプリケーションをリロードすることができます。