Webixフレームワークでフォームを作成します-jsチュートリアル-php.cn

Webixフレームワークでフォームを作成します

この記事は、サイモン・コドリントンとマロリー・ヴァン・アチェルバーグによって査読されました。 SetePointコンテンツを最高にするためにSitePointのピアレビュアーのすべてに感謝します！ Webデザイナーとして、かなり定期的にWebフォームを作成する必要がある可能性があります。多くの場合、これは感謝のない作業であり、頭痛の種に悩まされています（特に、マルチステップフォームの作成など、より複雑なことをしている場合）。このような場合、UIフレームワークを使用して痛みを和らげ、開発プロセスをスピードアップする方が良い場合があります。この記事では、さまざまな種類のフォームをすばやく作成できるさまざまなヒントとトリックを概説します。

キーテイクアウト

シンプルさと速度：Webix JavaScript UIライブラリを利用すると、フォーム作成のプロセスが大幅に簡素化され、マルチステップやマルチタブ形式などの複雑な形式の迅速な発展と統合が可能です。フォーム作成の汎用性：Webixは、単純なフォーム、複数の選択オプションを備えたフォーム、フォーム内のツリーウィジェットのようなウィジェットの革新的な使用など、さまざまなフォーム要素と構成を提供します。

カスタマイズと柔軟性：フレームワークは、カスタムスキンの作成や、ドラッグアンドドロップUI作成のためのビジュアルデザイナーツールの使用、特定の設計要件への対応など、広範なカスタマイズオプションをサポートしています。

統合と互換性：フレームワークは、プロジェクトに含めるさまざまな方法と互換性があり、主要なブラウザーとデバイスをサポートし、他のJavaScriptフレームワークと一緒に使用でき、多様な開発環境に適応できます。
webixとは？
Webixは、モバイルおよびデスクトップWebアプリの作成を促進するHTML5コンポーネントのJavaScript UIライブラリです。簡単なボタンからスプレッドシートウィジェットまで、Excelのようなアプリケーションの開発に使用できるさまざまなコンポーネントを提供します。 UIコンポーネントコレクションに加えて、イベント処理メカニズム、オフラインモードサポート、および多数の開発ツールがあります。また、スキンビルダーを使用して独自のスキンを作成し、Visual Designerを使用してドラッグアンドドロップUIの作成を行い、オンラインソースコードプレイグラウンドでコードをプレイすることもできます。このプロジェクトには、徹底的な文書もあります。
このフレームワークを使用する重要な機能と基本について説明する紹介記事を既に書いているので、興味があれば事前に見てください。

プロジェクトに必要なJavaScriptおよびCSSファイルを含めることができるさまざまな方法があります。ライブラリパッケージをダウンロードすると、これらのファイルがCodeBaseフォルダー内にあります。次のように含めることができます：

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="./codebase/webix.css"</span>></span>
</span><span><span><span><script</span> src<span>="./codebase/webix.js"</span>></span><span><span></script</span>></span>
</span>

ログイン後にコピー

または、cdn：

を使用できます

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="http://cdn.webix.com/edge/webix.css"</span>></span>
</span><span><span><span><script</span> src<span>="http://cdn.webix.com/edge/webix.js"</span>></span><span><span></script</span>></span>
</span>

ログイン後にコピー

nuget：

を使用することもできます

nuget <span>install Webix
</span>

ログイン後にコピー

Microsoft Visual Studioを使用している場合は、パッケージマネージャーコンソールからこれを実行します。

install-package Webix

ログイン後にコピー

またはbowerを試してみてください：

bower install webix

ログイン後にコピー

シンプルなフォームの作成

さあ、ライブラリが配置されているので、Webixフォームのウィジェットがどのように機能するかを見てみましょう。

WebixオブジェクトのUIメソッドを呼び出し、さまざまなパラメーターを渡して出力を構成することから始めます。

webix<span>.ui({
</span>  <span>view: "form",
</span>  <span>id: "myForm",
</span>  <span>container: "areaA",
</span>  <span>width: 350,
</span>  <span>elements: [
</span>    <span>{ // first form component },
</span>    <span>{ // second form component},
</span>    <span>{ // n-th form component */}
</span>  <span>]
</span><span>});
</span>

ログイン後にコピー

ビュープロパティは、作成された要素の種類を決定します（ここではフォームを作成していますが、これはメニューまたはチャートである可能性があります）。

IDプロパティはフォームにIDを割り当て、後で参照することができます。

幅プロパティは、フォーム要素の幅を設定するために使用されます。 Webixは、ここではピクセルを測定単位として使用することを想定しているため、適切な数字を設定する必要があります。
まあ、すべてが準備ができているので、結果を確認できます：

webix<span>.ui({
</span>  <span>...
</span>  <span>elements: [
</span>    <span>{ view: "text", label: "Username", name: "username" },
</span>    <span>{ view: "text", label: "Password", name: "password", type: "password" },
</span>    <span>{ view: "checkbox", labelRight: "I accept the terms of use", name: "accept" },
</span>    <span>{ view: "button", value: "Submit", width: 150, align: "center", click: submit }
</span>  <span>]
</span><span>});
</span>

ログイン後にコピー

データを挿入して送信ボタンを押すと、メッセージが表示されます。

デモです：

<span>function submit(){
</span>  webix<span>.message(JSON.stringify($$("myForm").getValues(), null, 2));
</span><span>}
</span>

ログイン後にコピー

すべてがうまく機能しているようです。それでは、もっと面白いものを追加しましょう。

複数の選択と提案

さまざまなフォームコントロールを使用すると、複数のアイテムを選択したり、提案を使用したりできます。私に関しては、それらの最も興味深いのはマルチコンボです。これは、単純で直感的なインターフェイスを介して入力フィールドの複数の値を選択できるコントロールです。

注：最近のWebixリリース（2016年4月26日）では、マルチコンボ制御の仕組みに変更が見られました。現在、Webix Proバージョンのみ（有料製品）で利用可能です。

開発者がCVを生成するのに役立つページを作成したいと想像してください。次のフィールドが含まれている可能性があります。

ユーザーが複数のプログラミング言語を知っていることを期待しているため、そのような言語のリストを作成し、マルチコンボコンポーネントを使用して表示できます。これがどのように見えるかの例です：

Webixフレームワークでフォームを作成します

馴染みのあるプロパティに加えて、ここではボタンプロパティと勧告プロパティを使用しています。ボタンプロパティは、選択を確認するためのボタンを作成しますが、推奨プロパティはマルチコンボに表示されるアイテムのソースを定義します。この例では、データプロパティを使用して配列の名前とテンプレートプロパティを指定して、表示する値を指定しています。また、パスをファイルに設定することも可能です（例：「パス//ファイル/data.js」を提案します）、ビッグソースからさまざまな配列を抽出する場合、上記のようにtを実行することがより良いオプションです。

それがどのように機能するかを確認しましょう。テキストフィールドをクリックすると、ドロップダウンリストが表示されます。

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="./codebase/webix.css"</span>></span>
</span><span><span><span><script</span> src<span>="./codebase/webix.js"</span>></span><span><span></script</span>></span>
</span>

ログイン後にコピー

スクロールして必要なアイテムを選択するか、入力を開始して提案を絞り込むことができます。

Webixフレームワークでフォームを作成します

この特定の例フォームは、選択したアイテムと一致するIDの束を返します。

この例のデモです。 Webixフレームワークでフォームを作成します

Multicomboの代替として、GridSuggestを確認し、DataViewはコンポーネントを提案することができます。ツリーウィジェットをフォーム要素として使用する

Webixは、テキストフィールド、ボタン、チェックボックスなどの従来のフォーム要素に制限されません。好きなウィジェットをフォーム内に配置できます。たとえば、ツリーウィジェットを見てみましょう。最初はフォームコントロールとして設計されていなかったため、この要素に使用可能なSetValueおよびGetValueメソッドはありません。ただし、このコンポーネントの値を返したり設定したりすることができる場合は、これらの方法が必要です。それで、私たちは何ができますか？幸いなことに、私たちを助けることができるProtouiメソッドがあります。既存のビューに基づいて新しいビューを作成できます。

試してみましょう：

上記のコードでは、Formtreeと呼ばれる新しいビューを作成しています。次に、設定してID値を取得できる2つの新しいメソッドを定義します。最後に、この新しいビューの基礎としてツリーウィジェットを使用しています。

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="./codebase/webix.css"</span>></span>
</span><span><span><span><script</span> src<span>="./codebase/webix.js"</span>></span><span><span></script</span>></span>
</span>

ログイン後にコピー

次に、いくつかのデータを作成しましょう：

通常のように新しい要素をフォームに追加できます：

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="http://cdn.webix.com/edge/webix.css"</span>></span>
</span><span><span><span><script</span> src<span>="http://cdn.webix.com/edge/webix.js"</span>></span><span><span></script</span>></span>
</span>

ログイン後にコピー

ここにいくつかの新しいプロパティを導入しています。テンプレートプロパティはツリーノードにチェックボックスを追加し、3状態のプロパティは3状態のチェックボックスを有効にします。これらのチェックボックスは次のとおりです

nuget <span>install Webix
</span>

ログイン後にコピー

ユーザーが親ノードをチェック/チェックすると、親ノードとそのすべての子ノード（ネストの各レベル）がチェック/チェックされていません。

ユーザーが子ノードをチェック/チェックすると、個々の子供ノードのみがチェック/チェックされていません。

3つの州のチェックボックスを使用する場合は、1つの小さな問題に注意する必要があります。チェックボックスを選択すると、Webixがツリーを再レンダリングします。キーボードを使用してフォームに入力することにした場合、
を押してチェックボックスの選択（ChromeなどのWebKitベースのブラウザの場合）を切り替えると、フォーカスが失われる可能性があります。 'llフォームの最初からタブを開始します。

幸いなことに、これには回避策があります。 ONプロパティを使用して、新しいハンドラーをツリーに取り付けることができます。特定のツリーアイテムを選択したときに発火するOnitemcheckイベントとともに使用します。いくつかの追加方法を使用して、フォーカスを安全に保つことができます：

これは機能するはずです。ただし、他の問題は次のとおりです。WebKitはタブ中にチェックボックスをマークしません。これに対抗するために、いくつかのCSSコードを使用して、フォーカスされたチェックボックスにアウトラインまたはボックスシャドウを追加できます。例を次に示します：

このすべてを所定の位置に配置すると、

[

install-package Webix

ログイン後にコピー

]ボタンをクリックして、手作りのメソッドが機能するかどうかを確認できます。

bower install webix

ログイン後にコピー

yep、IDは正常に送信されました。こちらでこのフォームを確認できます：

CodepenのSitePoint（@SitePoint）のペンAnjyjrを参照してください

マルチタブおよびマルチステップフォーム

ユーザーから大量のデータを収集する予定がある場合は、フォームを小さな部分に分離できます。 2つの可能性を見てみましょう。複数のタブで構成されるフォームと、段階的にデータの挿入を可能にするフォーム。 Tabviewコンポーネント

Tabviewコンポーネントは、ユーザーが切り替えることができるタブに分離された要素のコレクションを作成します。 TabViewコンテンツとして単一の要素を使用するか、必要な要素を含む行と列の組み合わせを定義できます。

例を次に示します

このアプローチの背後にある主なアイデアは、フォームをコンパートメント化することです（したがって、ユーザーにとってより管理しやすくします）。ただし、フォーム全体に関連するコンポーネント（たとえば、[送信]ボタンまたは「受け入れる」チェックボックス）は、tabviewコンポーネントの外側に配置する必要があることを覚えておく必要があります。

たとえば：

タブ付きフォームを作成するために必要なのはそれだけです。以下の結果を確認できます：

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="./codebase/webix.css"</span>></span>
</span><span><span><span><script</span> src<span>="./codebase/webix.js"</span>></span><span><span></script</span>></span>
</span>

ログイン後にコピー

このアプローチに追加の利点は、これらのパーツを1つとして機能させるために追加のコードを追加する必要がないことです。 TabViewコンポーネントをフォーム内に配置し、すべてのフィールドに名前プロパティを追加すると、挿入されたすべての値を取得できます。 [

[<link rel="stylesheet" href="http://cdn.webix.com/edge/webix.css"> <script src="http://cdn.webix.com/edge/webix.js"></script>

少し乱雑に見えますが、それでも私たちのデータです。 Webixフレームワークでフォームを作成します

キーボードのアクセシビリティ

あなたの意図は、多数のタブを使用することであり、tab

キーを使用してそれらを切り替える場合は、タブバー内のボタンを使用できます。このアプローチを使用すると、タブをタブナビゲーション順に追加できます。あなたがする必要があるのは、ヘッダープロパティを変更することだけです：

Webixフレームワークでフォームを作成します

これらのボタンをネイティブに見せるために、いくつかのCSSコードを追加する必要があります：

次のデモでは、デートピッカーも使用します。ユーザーがキーボードを介して（現在）対話することはできませんが、有用な視覚補助具を提供することはできないため、ユーザーが

return

にヒットしたときに表示されることを確認する必要があります。これを達成する1つの方法は、Hotkeyプロパティを使用することです。しかし、ここにあなたが気付くべきことがあります。このプロパティは、キーを単一のページ要素にバインドする場合、問題なく動作します。しかし、私たちの形には2つのデートピッカーがあります。したがって、Addhotkeyメソッドを使用して、すべてのデートピッカーで動作する新しいハンドラーを作成する必要があります。次のデモでこれらすべてが一緒に機能するのを見ることができます：

nuget <span>install Webix
</span>

ログイン後にコピー

CodepenのSitePoint（@SitePoint）のペンZWJJMJを参照してください

代替手段として、このタスクにアコーディオンを使用できます。

Multiviewコンポーネント

Multiviewコンポーネントを使用すると、次々と表示できる要素のシーケンスを作成できます。タブを使用してマルチビュー領域を切り替えることができますが、マルチステップフォームの作成に関心があるため、ボタンを追加してさまざまな段階をユーザーにガイドしましょう。

まず、2つの関数を作成して、 next

andbackボタンが機能するようにする必要があります。次の関数は、WebixのgetParentViewメソッドを使用して、クリックされたボタンのセルを含む参照を取得します（つまり、現在表示されているセル）。次に、MultiViewコンポーネント（FormContent）のID値を使用して、（ある場合）セルが次に来るかを計算します。次のセルがある場合、showメソッドを使用してビューに移行されます。バック関数は、バックメソッドを使用して、マルチビューを以前にアクティブビューにスイッチ

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="./codebase/webix.css"</span>></span>
</span><span><span><span><script</span> src<span>="./codebase/webix.js"</span>></span><span><span></script</span>></span>
</span>

ログイン後にコピー

以前にTabView要素を定義したのと同じ方法で、MultiView要素を定義できます。ただし、今回は、すべてのセルの下部に1つの追加の列を配置する必要があります。この行には、コントロールボタンが含まれます。（最初のセルのように）表示するボタンが1つしかない場合、空のオブジェクトが含まれています。

これがどのように見えるか見てみましょう：

今行ったことを見てみましょう：

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="http://cdn.webix.com/edge/webix.css"</span>></span>
</span><span><span><span><script</span> src<span>="http://cdn.webix.com/edge/webix.js"</span>></span><span><span></script</span>></span>
</span>

ログイン後にコピー

次の Webixフレームワークでフォームを作成しますボタンをクリックすると、フォームの次の部分が表示されます。

そして、すべてが予想どおりに機能するかどうかを確認しましょう：

Webixフレームワークでフォームを作成します

そうです！これが最終的なデモです：

CodepenのSitePoint（@SitePoint）のペンAnjldoを参照してください Webixフレームワークでフォームを作成します結論

このチュートリアルでは、Webixが複雑でありながらスタイリッシュでアクセスしやすいフォームを簡単に作成できるようになったことを示しました。このフレームワークは、多くの強力なウィジェットを指先に配置し、箱から出してフォームコンポーネントとして使用することを意図していなくても、Protouiメソッドを使用して動作を再定義するのは非常に簡単です。

プロジェクトでWebixを使用していますか？このチュートリアルはあなたにそれを試してみるように促しましたか？以下のコメントでお知らせください。

Webixフレームワークに関するよくある質問（FAQ）

Webixフレームワークとは何ですか？また、どのように機能しますか？