Vaadinライブラリを使用してWebアプリケーションを作成する例

2016年、私たちの多くは、たとえば、保留中の本を読んだり、新しいスポーツやプログラミング言語を習得するなど、新しい成果を約束しました。 新しい技術を学ぶことは、上記の手順に多少似ています。 そのため、このような愛好家のために、Java言語でWebアプリケーションを開発するための便利な「ツール」について少しレビューします。

新しいシリーズの記事はVaadinとLiquibaseに捧げられます。

最初の記事では、このFrameWork（Vaadin）を開始するためのいくつかのステップについて説明します。 テンプレートの「ロード」と、最初の「レイアウト」への要素の追加について説明します。 Liquibaseについて少し話しましょう。 次の記事では、xmlファイルの処理を追加する予定です。



ヴァーディン

私にとって、これはユーザーインターフェイスのJavaコードの「インタープリター」です。 実際、私は開発をJavaレイヤーの制御レベルまで減らしています。 JavaEEに基づいたサーバー指向アーキテクチャのおかげで、個々のパーツの設定を失うことなく、複雑なロジックのレイヤーを作成できます。 そして、既に準備されているブラウザーの最適化（ブラウザー間の互換性について話している）は、作業のこの部分を最小限に抑えます。

サーバー指向モデルを使用すると、高品質のアプリケーションを迅速に（後で参照）作成し、特定の段階で「行き詰まる」リスクを減らすことができます。 Javaで開発しており、クライアントにはJavaScriptが表示されます。

さらに、AJAXを使用すると、インターフェースの為替レートが増加することを約束する必要があります。

多くのソフトウェア製品がこの方向で開発されています。 これらのいくつかは、以下の第1および第4の記事で説明されています。

使用について話す場合、中規模および大規模企業向け-これは素晴らしい選択肢です（IMHO）。

Vaadinに関する重要な情報。

Vaadinの公式ウェブサイト

以下はビデオへのいくつかのリンクです。 ご覧になることを強くお勧めします。

ロシア語で 。 小さなアプリケーションの視覚的な作成に関するストーリーが含まれています。

外国語で 。 ベストプラクティスは、インターフェイスの一部を適切に作成する方法に関する非常に優れたストーリーです。

FrameWorkの記事 。

最初の記事へのリンク 。 Vaadinとその「兄弟」の違いに関する小さな記事。

2番目の記事へのリンク 。 FrameWork機能の概要。

3番目の記事へのリンク 。 便利な機能。

4番目の記事へのリンク 。 GWTとVaadinについて。 復習



最初のテンプレートを作成するには、次のことができます。

1つ目は、適切な開発のためにいくつかのパーツをインストールして構成することです。 たとえば、 IntelliJ IDEAを使用する場合、新しいプロジェクトを作成するときに、「Additional Libraries and FrameWorks」セクションで「Vaadin」を選択します。 その後、「Vaadin Distribution」を指定するよう求められます。さらに、これらの手順の前に「Create sample application」を配置できます。ProjectSDKとApplication Serverへのパスを指定してください（これらの設定はすべて1つのウィンドウで行われます）。

ところで、他のIDE用のテンプレートがあります。

テンプレートへのリンク 。

Eclipse用Vaadinプラグイン 。

NetBeans用Vaadinプラグイン 。

このプロジェクトでは、TomCatを起動すると、そのような碑文「Hello World」が表示されます。 このリンクを使用すると、プロセスを再度表示できます。



Liquibaseとは何ですか、なぜそれが必要なのですか？

Liquibaseウェブサイトへのリンク 。

作品の特徴に関する良い記事 。

別のよく書かれた資料。

liquibaseとは何ですか？ 私にとって、これは異なるデータベース（Oracle、PostgreSQLなど）に同じタイプのオブジェクトを作成するための便利なメカニズムです。 ソフトウェアを開発する企業にとって非常に良い選択です。

非常に簡潔に説明しようとすると、xmlでテーブル、シーケンス、およびその他のオブジェクトを説明します。 さらに、同じファイルをさまざまな種類のデータベースへのインストールに使用できます（特定の制限があります）。

この記事では、例えばLiquibaseファイルを作成するためのユーザーインターフェイスの作成を開始します（xmlオプションに制限されています）。

多くのデータベースのサポートのおかげで、この機会を研究し、適用しようとします



Apache Tomcatについて言及するのを忘れました。 Tomcat Webサイトへのリンク 。

テストで提案したバージョンでは、組み込み機能を使用して、開発環境から直接実行できます。



Vaadinのユーザーインターフェイスから始めましょう。

ところで、サイト自体には、 「アドレス帳」を構築する例があります。

独自の方法で、同様の「まだ」アプリケーションを作成しようとします。

始めましょう。

テンプレートをロードできた場合、次のようになります。

package com; import com.vaadin.server.VaadinRequest; import com.vaadin.ui.*; /** * Created by Terran on 20.01.2016. */ public class MyVaadinApplication extends UI { @Override public void init(VaadinRequest request) { VerticalLayout layout = new VerticalLayout(); setContent(layout); layout.addComponent(new Label("Hello, world!")); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コードで次の行を確認できます。

 final VerticalLayout layout = new VerticalLayout();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

実際、これは要素を追加する「レイアウト」です（サイトの主要要素に加えて、膨大な数の追加要素を見つけることができます）。



将来のユーザーに2つのオプションを提供します。1つ目は要素の作成に進むこと、2つ目はhabrahabr.ruへのリンクに従うことです 。 ここでは、実際のアプリケーションで任意のリソースを自由に使用できます-テクニカルサポートサイトである場合があります。



これを行うには、いくつかの要素を追加します。 ここにあります：

 final Label startVariant = new Label(); startVariant.setValue("Choose button"); layout.addComponent(startVariant); Button buttonClick = new Button("The option to create"); buttonClick.setStyleName(ValoTheme.BUTTON_TINY); layout.addComponent(buttonClick); Button buttonHabrahabr = new Button("Go habrahabr.ru"); buttonHabrahabr.setStyleName(ValoTheme.BUTTON_DANGER); layout.addComponent(buttonHabrahabr);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

起動時に（Tomcatバージョン7.0.65で起動しています）、次のものがあります。





将来のユーザーは2つのオプションを使用できます。1つ目はオブジェクトの作成に進み、2つ目はhabrahabr.ruに進みます。



したがって、ユーザーは「作成するオプション」ボタンをクリックします。 選択肢があります。 これを行うには、アクションにaddClickListenerを追加します。 このようなもの：

 buttonHabrahabr.addClickListener(new Button.ClickListener() { @Override public void buttonClick(Button.ClickEvent clickEvent) { } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

なぜなら Lambda式を使用する方が便利です;以下のすべてのハンドラーは、それらを使用して記述されます。 ->

 buttonHabrahabr.addClickListener((Button.ClickListener) clickEvent -> { });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、処理を行い、リスナーを（buttonClick）ボタンに追加し、クリックされたら別のComboBox要素を描画します。

 buttonClick.addClickListener((Button.ClickListener) clickEvent -> { final ComboBox boxChange; layout.addComponent(boxChange = new ComboBox("Choose creation variant ")); boxChange.addItems("Create Table", "Create PrimaryKey");
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

TomCatを再起動すると、次の結果が得られます。





ここでは、ボタンの場所（「作成するオプション」と「habrahabr.ruを実行する」）がすぐにわかります。 私の意見では、それらは非常に近いものです。

これは簡単に修正できます。



要素の追加を削除し、新しい水平レイヤー（「レイアウト」）を追加し、それにボタンを追加し、元のレイアウトに新しいレイヤーを追加します。

 layout.addComponent(buttonClick); layout.addComponent(buttonHabrahabr); final HorizontalLayout horizontalLayoutForButton = new HorizontalLayout(); horizontalLayoutForButton.addComponents(buttonClick,buttonHabrahabr); horizontalLayoutForButton.setSpacing(true); layout.addComponent(horizontalLayoutForButton);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これは、アプリケーションサーバー（TomCat）を再起動した後に得られるものです。





「テーブルの作成」で、次の部分を追加します。

 boxChange.addValueChangeListener((Property.ValueChangeListener) valueChangeEvent -> { if (Objects.equals(boxChange.getValue(), "Create Table")) { } else if (Objects.equals(boxChange.getValue(), "Create PrimaryKey")) { } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

小さな変更を加えます。 たとえば、一度選択すると、アイテムは読み取り専用になります。 テーブルの名前と将来のファイルの作成者を入力するフィールドを追加します。

 boxChange.addValueChangeListener((Property.ValueChangeListener) valueChangeEvent -> { if (Objects.equals(boxChange.getValue(), "Create Table")) { boxChange.setReadOnly(true); final TextField tableName = new TextField("Enter table name"); tableName.setWidth("300px"); tableName.setRequired(true); tableName.addValueChangeListener(event -> { String value = (String) event.getProperty().getValue(); Notification.show("Value is: " + value); }); tableName.setImmediate(true); final TextField authorName = new TextField("Enter author name"); authorName.setWidth("300px"); authorName.setRequired(true); authorName.addValueChangeListener(event -> { String authorNameValue = (String) event.getProperty().getValue(); Notification.show("Value is: " + authorNameValue); }); authorName.setImmediate(true); layout.addComponent(tableName); layout.addComponent(authorName);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

結果を取得します。これは、選択後、テーブルの名前と変更の作成者を入力する機会があったことを示しています。 入力値の長さおよびその他のパラメーターは、制限または変更できます。





ここでは、小計を要約するための推論とコードの記述について説明します。 最初のVaadinレイアウトを少し整理し、いくつかの要素を作成してみて、その処理も追加しました。



これから、 Liquibaseを少し掘り下げてください 。 手始めに、例とのリンクを見る価値があります。



テーブルの作成-「変更： 'createTable'」

作成例。

 <?xml version="1.0" encoding="UTF-8"?> <databaseChangeLog xmlns="http://www.liquibase.org/xml/ns/dbchangelog" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.liquibase.org/xml/ns/dbchangelog http://www.liquibase.org/xml/ns/dbchangelog/dbchangelog-3.1.xsd"> <changeSet id="1" author="bob"> <createTable tableName="department"> <column name="id" type="int"> <constraints primaryKey="true" nullable="false"/> </column> <column name="name" type="varchar(50)"> <constraints nullable="false"/> </column> <column name="active" type="boolean" defaultValueBoolean="true"/> </createTable> </changeSet> </databaseChangeLog>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ファイルを作成するには、（id、author、tableName、name、type）にデータを追加/書き込みしてから、個別の「ピース」を1つのファイルに収集する必要があります。 実際の状況では、さまざまなフィールドを使用できます。

これをどのように行いますか？ いくつかのオプションがあります。 次の記事でそれらの解析を試みます。

継続する...