Snow Flower WebForm

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

WebForm Control

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

ネイティブアプリケーションの複数の簡単なレイアウトパネルを組みわせるやり方は、まるで目標の絵を完成させるパズルを解くような複雑さがあります。

HTML/CSS では一つの汎用的なレイアウトエンジンをだけで良いのでパズル的な複雑さはなくシンプルなレイアウト記述となります。クロスプラットフォーム技術として最も成功している HTML/CSS を使用しますので、多くの既存のオープンソース技術を利用でき、Web と同じ進化の速度を手に入れることができます。

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

インタフェーデザイン

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

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 のスタイルがエッセンスとして加えられます。

ポートレート

WebForm

ランドスケープ

WebForm Control

インタフェーデザイン

関連