Snow Flower WebForm

YOSBITS のクライアントアーキテクチャは、Web テクノロジーをJava テクノロジーに統合します。この記事では Snowflower Controls の Web 指向の拡張コントロールを紹介します。

WebForm

WebForm は 入力フォームの為のコントロールです。レイアウトエンジンとしてJavaFX のレイアウトコンテナではなく、HTML/CSS を使用します。

ネイティブアプリケーションの複数の簡単なレイアウトパネルを組みわせるやり方は、まるで目標の絵を完成させるパズルを解くような複雑さがあります。HTML/CSS では一つの汎用的なレイアウトエンジンをだけで良いのでパズル的な複雑さはなくシンプルなレイアウト記述となります。クロスプラットフォーム技術として最も成功している HTML/CSS を使用しますので、 多くの 既存のオープンソース技術を利用でき、Web と同じ進化の速度を手に入れることができます。

インタフェーデザインはWeb ブラウザ上で行うことができます。Webブラウザに標準的に備わっている開発ツールが利用でき、特殊なデザインツールを必要せずすぐにデザインを始めることができます。

ただし、JavaFX のFXML ではHTMLより多くのコントロールをサポートしますので、WebForm は JavaFX の各種レイアウトを完全に置き換えるものではありません。

Firefox 開発ツール

サンプルコード

以下のサンプルではBootsrap3 を使用してレスポンシブレイアウトに対応しています。

--- 省略
<div class="row">
  <div class="form-group">
    <label class="col-sm-2 control-label">Find</label>
    <div class="col-sm-10">
      <input id="search-text" type="text" class="form-control" placeholder="find text" autofocus>
    </div>
  </div>
</div>
<div class="row">
  <div class="form-group">
    <label class="col-sm-2 control-label">Replace</label>
    <div class="col-sm-10">
      <input id="replace-text" type="text" class="form-control" placeholder="replace text">
    </div>
  </div>
</div>
--- 省略

スクリーンショット

ルックアンドフィールには Snow Flower LnF を使用しています。Snow Flower の美しい ルックアンドフィールに Web で人気の高い Bootstrap3 のスタイルがエッセンスとして加えられます。

ポートレイト


ランドスケープ

関連文書