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

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

キーテイクアウト

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

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

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

プロジェクトに必要な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を割り当て、後で参照することができます。

コンテナプロパティは、フォームをレンダリングするHTML要素のIDを指定します。
• 幅プロパティは、フォーム要素の幅を設定するために使用されます。 Webixは、ここではピクセルを測定単位として使用することを想定しているため、適切な数字を設定する必要があります。
Elementsプロパティは、フォームに含まれるコンポーネントの配列です。フォーム内の任意の適切なコンポーネントを使用できます：テキストフィールド、ラジオボタン、チェックボックス、ボタンなど。
簡単なログインフォームを作成しましょう。 2つのテキストフィールド（1つはユーザー名用、もう1つはパスワード用）、1つのチェックボックス、そしてもちろん、送信ボタンが必要です。
フォーム要素の名前属性を指定し、パスワードフィールドの「パスワード」を設定して、入力された文字をマスクするように指定していることに注意してください。要素のラベルプロパティを設定すると、その要素のラベルが定義されており、要素のクリックプロパティを使用して、フォームが送信されたときに呼び出されるイベントハンドラーを定義できます。すべてがデータで問題ないことをチェックする可能性があるのは素晴らしいことですが、クライアント側の検証はサーバー側の検証のみを補足するだけであることを忘れないでください。 このデモを実行する前に、このイベントハンドラーを定義する必要があります。ここでは、Webixメッセージボックスを使用して、入力されたものについてユーザーのフィードバックを提供します。
このコードは、Webix getValuesメソッドを使用して、myformのIDを使用してフォームから挿入されたデータを導出し、json.stringify（）。
• まあ、すべてが準備ができているので、結果を確認できます：

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を生成するのに役立つページを作成したいと想像してください。次のフィールドが含まれている可能性があります。

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

馴染みのあるプロパティに加えて、ここではボタンプロパティと勧告プロパティを使用しています。 ボタンプロパティは、選択を確認するためのボタンを作成しますが、推奨プロパティはマルチコンボに表示されるアイテムのソースを定義します。この例では、データプロパティを使用して配列の名前とテンプレートプロパティを指定して、表示する値を指定しています。また、パスをファイルに設定することも可能です（例：「パス//ファイル/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>

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

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

この例のデモです。

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コンポーネントをフォーム内に配置し、すべてのフィールドに名前プロパティを追加すると、挿入されたすべての値を取得できます。 [

[<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>

少し乱雑に見えますが、それでも私たちのデータです。

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

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

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

これらのボタンをネイティブに見せるために、いくつかの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>

次のボタンをクリックすると、フォームの次の部分が表示されます。

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

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

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

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

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

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

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

​​ Webixは、開発者がリッチで高性能のWebアプリケーションを作成できる強力なJavaScript UIライブラリです。データテーブル、チャート、フォームなど、100を超える完全にカスタマイズ可能なウィジェットを提供します。 Webixは、開発者がJavaScriptを使用してUIコンポーネントを作成できるようにすることで機能し、任意のWebアプリケーションに簡単に統合できます。このフレームワークは、シンプルで直感的なAPIを備えた使いやすいように設計されており、幅広いブラウザーとデバイスもサポートしています。 Webixを始めましょう。まず、公式Webix Webサイトからライブラリをダウンロードする必要があります。ライブラリを手に入れたら、HTMLファイルにスクリプトタグを追加して、プロジェクトに含めることができます。そこから、Webix APIを使用してUIコンポーネントの作成を開始できます。公式のWebixドキュメントは、あなたが始めるのに役立つ豊富な情報と例を提供します。 Web開発のための強力なツール。いくつかの重要な機能には、100を超えるUIウィジェット、シンプルで直感的なAPI、幅広いブラウザーとデバイスのサポート、複雑なUIレイアウトを作成する機能が含まれます。さらに、Webixは、データバインディング、イベント処理、AJAXサポートなどの多くの高度な機能も提供します。他のJavaScript UIライブラリはいくつかの方法で。まず、他のほとんどのライブラリよりもはるかに大きなUIウィジェットを提供し、開発者がより複雑で機能が豊富なアプリケーションを作成できるようにします。第二に、Webixは使いやすいように設計されており、シンプルで直感的なAPIを使用して、簡単に開始できます。最後に、Webixは、高速レンダリング時間と効率的なメモリ使用量を備えた優れたパフォーマンスを提供します。 Angular、React、およびVue.JS.これにより、開発者はアプリケーションで複数のフレームワークの強みを活用できます。たとえば、UIウィジェットの豊富な選択にWebixを使用しながら、強力なデータバインディング機能にAngularを使用する場合があります。また、携帯電話やタブレットなど、幅広いデバイスをサポートしています。これにより、モバイルフレンドリーなWebアプリケーションの作成を検討している開発者に最適です。

Webixアプリケーションの外観をカスタマイズするにはどうすればよいですか？

​​

Webixは、アプリケーションの外観をカスタマイズする方法をいくつか提供します。 CSSを使用してUIコンポーネントのスタイルを設定することも、Webixが提供する多くの事前に作成されたスキンのいずれかを使用できます。さらに、Webixを使用すると、Skin Builderツールを使用して独自のカスタムスキンを作成することもできます。公式WebixのWebサイトには、豊富なドキュメントと例、および質問をしてコミュニティから助けを得ることができるフォーラムが提供されています。さらに、Webixは、Webix開発チームへの直接アクセスを含むプレミアムサポートパッケージも提供しています。無料バージョンには、限られたウィジェットと機能が含まれていますが、有料版はすべてのウィジェットと機能へのアクセスとプレミアムサポートを提供します。

Webixの詳細については、公式WebixのWebサイトにアクセスすることが最善の方法です。ここでは、ドキュメント、例、チュートリアルなど、豊富な情報やリソースを見つけることができます。 GitHubのWebixコミュニティに参加することもできます。ここでは、追加のリソースを見つけて、他のWebix開発者と接続できます。

以上がWebixフレームワークでフォームを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。