Symfoware

Symfowareについての考察blog

Vaadin 公開パスの変更方法と複数アプリケーションの公開

Vaadinのアプリケーションを公開するとき、web.xmlの記載はこんな感じになるかと思います。


<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
    <display-name>sample</display-name>
    
    <context-param>
        <description>Vaadin production mode</description>
        <param-name>productionMode</param-name>
        <param-value>false</param-value>
    </context-param>
    
    <servlet>
        <servlet-name>SAMPLE_A</servlet-name>
        <servlet-class>com.vaadin.terminal.gwt.server.ApplicationServlet</servlet-class>
        <init-param>
            <description>Vaadin application class to start</description>
            <param-name>application</param-name>
            <param-value>com.fc2.blog68.symfoware.Application_A</param-value>
        </init-param>
        <init-param>
            <description>Application widgetset</description>
            <param-name>widgetset</param-name>
            <param-value>com.fc2.blog68.symfoware.Application_AWidgetset</param-value>
        </init-param>
    </servlet>
    
    <servlet-mapping>
        <servlet-name>SAMPLE_A</servlet-name>
        <url-pattern>/*</url-pattern>
    </servlet-mapping>
    
    <welcome-file-list>
        <welcome-file>index.html</welcome-file>
        <welcome-file>index.htm</welcome-file>
        <welcome-file>index.jsp</welcome-file>
        <welcome-file>default.html</welcome-file>
        <welcome-file>default.htm</welcome-file>
        <welcome-file>default.jsp</welcome-file>
    </welcome-file-list>
</web-app>





これで、
http://www.example.com/vaadin/
とかにアクセスすると、アプリケーションが実行されるわけですが、例えば

http://www.example.com/vaadin/subdir/
こんなURLに変更したいと思い、servlet-mappingの記載を


    <servlet-mapping>
        <servlet-name>SAMPLE_A</servlet-name>
        <url-pattern>/subdir/*</url-pattern>
    </servlet-mapping>



上記のように変更したのですが、上手く動かず・・・



調べてみると、以下のURLの方法で解決できました。

Simple Vaadin Portlet in Liferay Plugins SDK



公開URLを変更したいときには・・・


<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
    <display-name>sample</display-name>
    
    <context-param>
        <description>Vaadin production mode</description>
        <param-name>productionMode</param-name>
        <param-value>false</param-value>
    </context-param>
    
    <servlet>
        <servlet-name>SAMPLE_A</servlet-name>
        <servlet-class>com.vaadin.terminal.gwt.server.ApplicationServlet</servlet-class>
        <init-param>
            <description>Vaadin application class to start</description>
            <param-name>application</param-name>
            <param-value>com.fc2.blog68.symfoware.Application_A</param-value>
        </init-param>
        <init-param>
            <description>Application widgetset</description>
            <param-name>widgetset</param-name>
            <param-value>com.fc2.blog68.symfoware.Application_AWidgetset</param-value>
        </init-param>
    </servlet>
    
    <servlet-mapping>
        <servlet-name>SAMPLE_A</servlet-name>
        <url-pattern>/subdir/*</url-pattern>
    </servlet-mapping>
    
    <servlet-mapping>
        <servlet-name>SAMPLE_A</servlet-name>
        <url-pattern>/VAADIN/*</url-pattern>
    </servlet-mapping>
    
    <welcome-file-list>
        <welcome-file>index.html</welcome-file>
        <welcome-file>index.htm</welcome-file>
        <welcome-file>index.jsp</welcome-file>
        <welcome-file>default.html</welcome-file>
        <welcome-file>default.htm</welcome-file>
        <welcome-file>default.jsp</welcome-file>
    </welcome-file-list>
</web-app>



このように、「VAADIN」というパターンを追加すればOK。
Apacheと連携して公開する場合には、このフォルダのリクエストは、Apacheに
処理してもらうようにすると幸せになれる気がします。




複数のアプリケーションを公開したい場合も同様に、


<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
    <display-name>sample</display-name>
    
    <context-param>
        <description>Vaadin production mode</description>
        <param-name>productionMode</param-name>
        <param-value>false</param-value>
    </context-param>
    
    <servlet>
        <servlet-name>SAMPLE_A</servlet-name>
        <servlet-class>com.vaadin.terminal.gwt.server.ApplicationServlet</servlet-class>
        <init-param>
            <description>Vaadin application class to start</description>
            <param-name>application</param-name>
            <param-value>com.fc2.blog68.symfoware.Application_A</param-value>
        </init-param>
        <init-param>
            <description>Application widgetset</description>
            <param-name>widgetset</param-name>
            <param-value>com.fc2.blog68.symfoware.Application_AWidgetset</param-value>
        </init-param>
    </servlet>
    
    <servlet>
        <servlet-name>SAMPLE_B</servlet-name>
        <servlet-class>com.vaadin.terminal.gwt.server.ApplicationServlet</servlet-class>
        <init-param>
            <description>Vaadin application class to start</description>
            <param-name>application</param-name>
            <param-value>com.fc2.blog68.symfoware.Application_B</param-value>
        </init-param>
        <init-param>
            <description>Application widgetset</description>
            <param-name>widgetset</param-name>
            <param-value>com.fc2.blog68.symfoware.Application_BWidgetset</param-value>
        </init-param>
    </servlet>
    
    <servlet-mapping>
        <servlet-name>SAMPLE_A</servlet-name>
        <url-pattern>/subdir/*</url-pattern>
    </servlet-mapping>
    
    <servlet-mapping>
        <servlet-name>SAMPLE_B</servlet-name>
        <url-pattern>/subdir2/*</url-pattern>
    </servlet-mapping>
    
    <servlet-mapping>
        <servlet-name>SAMPLE_A</servlet-name>
        <url-pattern>/VAADIN/*</url-pattern>
    </servlet-mapping>
    
    <welcome-file-list>
        <welcome-file>index.html</welcome-file>
        <welcome-file>index.htm</welcome-file>
        <welcome-file>index.jsp</welcome-file>
        <welcome-file>default.html</welcome-file>
        <welcome-file>default.htm</welcome-file>
        <welcome-file>default.jsp</welcome-file>
    </welcome-file-list>
</web-app>



こんな感じの設定にすれば、上手く動いてくれました。





Vaadinに関する記事のまとめ












テーマ:プログラミング - ジャンル:コンピュータ

  1. 2010/12/09(木) 14:18:12|
  2. Vaadin
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集

Vaadinチュートリアル 7.4. Final version

Vaadinのチュートリアルを試してます。
http://vaadin.com/tutorial

今回は、7.4. Final versionです。
http://vaadin.com/tutorial/-/page/themeing.final.html



最後に、共有とヘルプボタンを押したとき動作するようにします。

「TestApplication」の「createToolbar」メソッドに以下の内容を追記。


        share.addListener((Button.ClickListener) this);
        help.addListener((Button.ClickListener) this);






「buttonClick」メソッドに分岐を追記。


    @Override
    public void buttonClick(ClickEvent event) {
        
        final Button source = event.getButton();
        if (source == search) {
            showSearchView();
        } else if (source == newContact) {
            addNewContanct();
        } else if (source == help) {
            showHelpWindow();
        } else if (source == share) {
            showShareWindow();
        }
        
    }






共有・ヘルプの画面表示処理を追記。


    private void showHelpWindow() {
        getMainWindow().addWindow(getHelpWindow());
    }

    private void showShareWindow() {
        getMainWindow().addWindow(getSharingOptions());
    }






これで、共有とヘルプボタンが有効になるかと思います。

24_001.png

24_002.png



これでチュートリアルは終了です。
今後は、データベースを使用したアプリケーションの作成方法を調べていこうと思います。





前:7.3. Images and icons

チュートリアルの一覧














テーマ:プログラミング - ジャンル:コンピュータ

  1. 2010/12/05(日) 16:30:59|
  2. Vaadin
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集

Vaadinチュートリアル 7.3. Images and icons

Vaadinのチュートリアルを試してます。
http://vaadin.com/tutorial

今回は、7.3. Images and iconsです。
http://vaadin.com/tutorial/-/page/themeing.icons.html


この章では、


・ボタンにアイコンを設定
・ツールバーにロゴを表示
・ツールバーの表示をカスタマイズ
・テーブルの表示をカスタマイズ



ということを行なっていきます。



事前準備



この章で使用する画像ファイルは以下の通り。

document-add.png
document-add.png

folder-add.png
folder-add.png

help.png
help.png

users.png
users.png


logo.png
logo.png

gradient.png
gradient.png

table-header-bg.png
table-header-bg.png


「WebContent/VAADIN/themes/contacts/icons/32」というフォルダを作成し、
以下のファイルを保存します。

document-add.png
folder-add.png
help.png
users.png



また、「WebContent/VAADIN/themes/contacts/images」というフォルダを作成し、
以下のファイルを保存します。

logo.png
gradient.png
table-header-bg.png




上記の作業が終わったら、プロジェクト・エクスプローラーの表示は以下のように
なっているはずです。

23_001.png







ボタンにアイコンを設定する



各々のボタンにアイコンを設定するには、以下のように記載します。


search.setIcon(new ThemeResource("icons/32/folder-add.png"));
share.setIcon(new ThemeResource("icons/32/users.png"));
help.setIcon(new ThemeResource("icons/32/help.png"));
newContact.setIcon(new ThemeResource("icons/32/document-add.png"));



このコードを「TestApplication」の「createToolbar」メソッドに追記します。
サーバーを起動して画面を見てみると、以下のように画像がボタンに反映されているかと思います。

23_002.png





ツールバーにロゴを表示する



次に、ツールバーの右端にロゴを表示してみます。
コードは以下の通り。


lo.setWidth("100%");
Embedded em = new Embedded("", new ThemeResource("images/logo.png"));
lo.addComponent(em);
lo.setComponentAlignment(em, Alignment.MIDDLE_RIGHT);
lo.setExpandRatio(em, 1);



HorizontalLayoutに対して、画像をコンポーネントとして追加します。

上記コードを「TestApplication」の「createToolbar」メソッドに追記します。
サーバーを起動して画面を見てみると、以下のようにツールバーへロゴが表示されると思います。


23_003.png




ボタンのレイアウトを変更する



現在、ボタンの名称はアイコンの右側に表示していますが、アイコンの下に
表示するよう変更してみます。

まず、HorizontalLayoutに対して独自の「toolbar」というレイアウトを採用するように指定。


lo.setStyleName("toolbar");



上記コードを「TestApplication」の「createToolbar」メソッドに追記します。


次に、cssに追加を行ないます。
「WebContent/VAADIN/themes/contacts/styles.css」を以下のように変更。


@import url(../runo/styles.css);
.v-tree {
     padding-top: 16px;
     padding-left: 32px;
}

.toolbar .v-button {
     display: block;
     width: 65px;
     height: 55px;
     background: transparent;
     border: none;
     text-align: center;
}

.toolbar .v-button img {
     display: block;
     margin-left: auto;
     margin-right: auto;
     margin-bottom: 5px;
}
.toolbar .v-button span {
     font-size: x-small;
     text-shadow: #fafafa 1px 1px 0;
}




サーバーを起動して画面を確認すると、以下のようにアイコンの下に名称が
表示されるようになったかと思います。

23_004.png







ツールバー、ツリービューの表示をカスタマイズする



ツールバーとツリービューをいい感じの表示に変更してみます。

まず、ListViewとSearchViewのコンストラクタに以下のコードを追加。


addStyleName("view");




style.cssにも以下の内容を追記します。


.v-app {
     background: #d0e2ec;
     font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
     color: #222;
}
.toolbar {
     background: #ccc url(images/gradient.png) repeat-x bottom left;
}
.v-panel-caption-view {
     color: #004b98;
}

.view {
     background: white;    
}





実行してみると、以下のような表示になるはずです。

23_005.png






テーブルの表示をカスタマイズする



最後に、テーブルの表示をカスタマイズしてみます。
テーブルの表示変更は、style.cssで行ないますので以下の内容を
style.cssに追記します。



/* Theme table to look bit lighter */
.v-table-header-wrap {
     height: 20px;
     border: none;
     border-bottom: 1px solid #555;
     background: transparent url(images/table-header-bg.png) repeat-x;
}
.v-table-caption-container {
     font-size: 5px;
     color: #000;
     font-weight: bold;
     text-shadow: #fff 0 1px 0;
     padding-top: 1px;
}
.v-table-body {
     border: none;
}
.v-table-row-odd {
     background: #f1f5fa;
}

.v-table-row:hover {
     background: #fff;
}

.v-table-row-odd:hover {
     background: #f1f5fa;
}
.v-table .v-selected {
     background: #3d80df;
}
.v-table-cell-content {
     line-height: normal;
     font-size: 85%;
}




こんな感じの表示になるかと思います。

23_006.png





前:7.2. Adding some space around the components 次:7.4. Final version

チュートリアルの一覧














テーマ:プログラミング - ジャンル:コンピュータ

  1. 2010/12/05(日) 16:19:14|
  2. Vaadin
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集

Vaadinチュートリアル 7.2. Adding some space around the components

Vaadinのチュートリアルを試してます。
http://vaadin.com/tutorial

今回は、7.2. Adding some space around the componentsです。
http://vaadin.com/tutorial/-/page/themeing.spacing.html



画面上部に表示しているボタンのツールバーですが、見た目が若干窮屈です。
こんなときは、HorizontalLayoutのマージンとスペーシングを有効にしてやります。

「TestApplication」の「createToolbar」メソッドを以下のように変更します。


    public HorizontalLayout createToolbar() {
        //水平配置レイアウト
        HorizontalLayout lo = new HorizontalLayout();
        
        //ボタンを追加
        lo.addComponent(newContact); //追加
        lo.addComponent(search); //検索
        lo.addComponent(share); //共有
        lo.addComponent(help); //ヘルプ
        
        /* 「7.2. Adding some space around the components」で追加した処理 */
        lo.setMargin(true);
        lo.setSpacing(true);
        
        search.addListener((Button.ClickListener) this);
        newContact.addListener((Button.ClickListener) this);
        
        return lo;
    }





修正後、サーバーを起動して画面を確認してみます。

22_001.png


上が変更前、下が変更後のツールバーの状態です。
狙い通り、余白が挿入されました。



次に、左側のツリーメニューも余白を設定してみます。
ツリーの余白を設定するには、スタイルシートに以下の内容を記述します。


@import url(../runo/styles.css);
.v-tree {
     padding-top: 16px;
     padding-left: 32px;
}


※わかりやすさのため、あえて大きな値を設定しています。


22_002.png


左が変更前、右が変更後のツリーの表示となります。



前:7.1. Using a Custom Theme 次:7.3. Images and icons

チュートリアルの一覧














テーマ:プログラミング - ジャンル:コンピュータ

  1. 2010/12/05(日) 15:10:41|
  2. Vaadin
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集

Vaadinチュートリアル 7.1. Using a Custom Theme

Vaadinのチュートリアルを試してます。
http://vaadin.com/tutorial

今回は、7.1. Using a Custom Themeです。
http://vaadin.com/tutorial/-/page/themeing.html



この章から、独自のテーマを作成してアプリケーションに適用する手順を見てみます。

これから作成するテーマの名前は「contacts」にすることにしました。
まったく新規のテーマを作ることも簡単に出来ますが、今回は「runo」というテーマを
拡張する形で新しいテーマを作成することにします。

手順は以下の通り

「WebContent/VAADIN/themes」フォルダを作成し、その中に「contacts」という名前のフォルダを作る。
「contacts」フォルダの中に、「styles.css」というファイルを作成する。




「styles.css」には、以下の内容を記載します。


@import url(../runo/styles.css);




プロジェクト・エクスプローラーでの表示は以下のようになります。

21_001.png



作成したテーマを有効にするために、プログラムへ以下の一行を追加します。


setTheme("contacts");



追加する位置は、「TestApplication」の「buildMainLayout」メソッドです。



サーバーを起動して画面を確認してみます。
「runo」のテーマから何も変更していないので、以下のような表示になるかと思います。

21_002.png



この章ではここまでです。
次の章から、新たに作成した「styles.css」を編集し、コンポーネント間のスペースを変更してみます。




前:7. Building a Simple Theme 次:7.2. Adding some space around the components

チュートリアルの一覧














テーマ:プログラミング - ジャンル:コンピュータ

  1. 2010/12/05(日) 14:30:10|
  2. Vaadin
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
次のページ