Vaadin-themes

Vaadin-テーマ

この章では、テーマとして知られるVaadinの別の機能について詳しく説明します。 一般に、テーマとは、実行時にカスタマイズ可能なフレームワークを意味します。 コンテンツは、サーバー側で受信した応答に応じて動的になります。

Vaadinは、独自のJavaベースのSAASコンパイラーの助けを借りて、テーマをすぐに使用するためのクールなインターフェースを提供します。 テーマ機能は、カスタマイズ可能なスタイルとアプリケーションの外観を提供するためにVaadinに提供されます。 テーマはあらかじめ作成されたテンプレートであり、開発者は時間を節約する独自のアプリケーションを構築するためにテンプレートをカスタマイズする必要があります。

Vaadinのすべてのテーマは theme フォルダーの下にあり、各サブフォルダーは自己記述可能です。 したがって、コードの変更とカスタマイズも非常に簡単です。 テーマには、。saas *タイプと *.css タイプの2種類のCSSファイルを含めることができます。 Vaadinにはフォルダ名に関する制限はありませんが、上記の画像からわかるように、常にフォルダ名を使用することをお勧めします。

*Inbuilt* と *Custom* の2種類のテーマが利用可能です。 このセクションでは、それらについて詳しく説明します。

ビルトインテーマ

テーマに組み込まれたVaadinは、次に示すようにテーマ名で注釈を付けることで提供されます。

@Theme("mytheme")
public class MyUI extends UI {

Vaadinアプリケーションの実行中のすべての灰色の背景は、組み込みの css ファイルに由来します。 別の種類のテーマであるカスタムテーマとして作成するために、これらのファイルを変更できます。 テーマに組み込まれたVaadinについて学ぶことができるものは何もありません。 上記のコンポーネントはすべてVaadinテーマの一部です。

カスタムテーマ–テーマの作成と使用

カスタムテーマは、Webアプリケーションの VAADIN/themes フォルダー、Mavenプロジェクトの WebContent フォルダーまたは src/main/webapp の下のEclipseプロジェクトに配置されます。 これらの場所は固定されており、どのタイプの要件でも変更しないことをお勧めします。 mytheme という名前でSAASテーマを定義するには、ファイルをテーマフォルダーの下のmythemeフォルダーに配置してから、プロジェクトを再構築する必要があります。 Vaadinは、ブラウザから要求されるたびに、独自の.cssファイルをその場で自動的に作成します。

Vaadinカスタムテーマ

要件に応じて、cssファイルのスタイルコンテンツを変更できます。 ただし、プロジェクトをもう一度ビルドすることを忘れないでください。プロジェクトは進行中に反映され始めます。

レスポンシブテーマ

Vaadinはレスポンシブテーマもサポートしています。 レスポンシブWebページは、画面サイズに応じてフォントサイズを自動的に設定できます。 Vaadinアプリケーションでは、アプリケーション全体をレスポンシブにするために1行のコードを追加する必要があります。

Vaadinについてさらに学ぶために、次の例を考えてみましょう。 以下に示すように、MyUI.javaクラスを変更します。

package com.TutorialsMy.myApp;
import java.io.File;
import java.io.FileOutputStream;
import java.io.OutputStream;
import java.time.LocalDate;
import java.util.Arrays;
import java.util.List;
import java.util.Locale;
import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.data.TreeData;
import com.vaadin.icons.VaadinIcons;
import com.vaadin.server.Responsive;
import com.vaadin.server.UserError;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.shared.ui.ContentMode;

import com.vaadin.ui.AbsoluteLayout;
import com.vaadin.ui.Alignment;
import com.vaadin.ui.Button;
import com.vaadin.ui.CustomLayout;
import com.vaadin.ui.DateField;
import com.vaadin.ui.FormLayout;
import com.vaadin.ui.Grid;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.HorizontalSplitPanel;

import com.vaadin.ui.Label;
import com.vaadin.ui.Notification;
import com.vaadin.ui.Panel;
import com.vaadin.ui.TabSheet;
import com.vaadin.ui.TextField;
import com.vaadin.ui.Tree;
import com.vaadin.ui.UI;
import com.vaadin.ui.Upload;
import com.vaadin.ui.Upload.Receiver;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.VerticalSplitPanel;
import com.vaadin.ui.Window;

@Theme("mytheme")
public class MyUI extends UI {
   @Override
   protected void init(VaadinRequest vaadinRequest) {
      final VerticalLayout hLayout = new VerticalLayout();
      Label l1 = new Label("Enter today's Date\n",ContentMode.PREFORMATTED);
      DateField date = new DateField();
      date.setValue(LocalDate.now());
      date.setLocale(new Locale("en","IND"));
      hLayout.addComponents(l1,date);
      hLayout.setComponentAlignment(l1,Alignment.BOTTOM_CENTER);
      hLayout.setComponentAlignment(date,Alignment.BOTTOM_CENTER);
      Responsive.makeResponsive(hLayout);
      setContent(hLayout);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

上記のコードを実行すると、ブラウザで次の出力を確認できます。

Vaadin Responsive Theme

レイアウトの応答性をテストするには、ブラウザーを縮小すると、それに応じてパネルとレイアウトコンポーネントのサイズと形状が変化することがわかります。