CatalogBox-ComboBox開発のアイデア

プログラマは、自分ではなくユーザーの生活を簡素化する必要があります。

（もちろん、微妙な違いがあります）

記事の著者

コンボボックスでした

この記事では、リストから項目を選択するための視覚的なWebコントロールのアイデアについて説明しています。 このアイデアは、 ComboBox



（別名DropDown



、別名htmlでselect



）を進化させて、ユーザーのソフトウェア製品の使いやすさを向上させる方法に関するものです。そのため、大きなリストではなく大きなリストから複雑なオブジェクトを選択するときに、選択コントロールがはるかに便利で使いやすくなります。 結局のところ、プログラマーの仕事は、ユーザーの生活を継続的に改善し、簡素化することです。



これは、その実装が部分的であり、ASP.NET Webフォームとdevexpressを組み合わせた場合のみのアイデアです。これは、この特定のテクノロジバンドルに関する大きな背景があるためです。



この記事は、コードをコピーして貼り付け、F5キーを押して結果を確認したい人向けではありません。 それをFunctional RequirementsまたはFunctional Designと呼ばれるドキュメントに帰するのが最も正しいでしょう。 したがって、利便性の進化に興味がある場合は、この記事が役立つことを願っています。

ComboBoxの進化-すでにあるもの

最初に、視覚コントロールの優れた実装に既にある便利な機能のリストを示します。 このセクションは新しいものではなく、ビジュアルコントロールの高度なライブラリに既に実装されている機能の説明のみです。



たとえば、htmlでのselect



に関するdevexpress機能は次のとおりです（私の意見では、必要性を減らすため、つまり最も重要なことから先に）。

• 入力した行でフィルタリングします。
  
  
  
  
  
  
  
  コントロールに文字を入力すると、リストがフィルタリングされます。 コメントは次のとおりです。
  
  
  
  -入力した文字列のエントリを確認するフィールドは何ですか？ コントロールに表示されていないものをチェックすると、ユーザーは明らかな動作ではない可能性があります。 ただし、これが必要になる場合があります。 また、フィールドが連結されているときにユーザーが境界線を含む文字列を入力した場合はどうなりますか？ つまり、従業員の名前、たとえば「Chernyaev Konstantin」が表示され、名前と姓が異なるデータフィールドに保存され、ユーザーが「yaev kons」と入力した場合（文字の大文字小文字は関係ありません-テキストを検索する場合、これが標準だと思います）事実上）。 このエントリを見つけることは、コントロールから友好的です：
  
  
  
  
  
  
  
  -通常、 ソートはアルファベット順に行われます。 そして、ユーザーが行（たとえば、「テーブル」）を入力し、リストにそのような要素があり、この行を含むがそれに等しくない要素もある場合（「 table b」、「apo table 」、「pi table 」 ））、ユーザーがリストをスクロールして、必要なものを選択する必要があることがわかります （この例の順序は、「apo table 」、「pi table 」、「 table 」、「 table b」）。 さらに、リクエストを明確にしてリストを絞り込むことは不可能です。 リストが大きい場合、これは親しみやすさにとって大きなマイナスです。
  
  この問題の解決策は、「平等/発生」に基づいてソートすることです。 つまり、入力された行に等しいレコードが最初に移動し、次に残りが移動します。 さらに先に進むこともできます-最初に平等になり、次にこの行から始まり、それから残りです。
• 自動補完、自動 -最初に見つかったものの選択 ：
  
  
  
  
  
  
  
  入力すると、コントロールはデータをフィルタリングして表示し、入力テキストを補完します
  
  最初に見つかったもの。 フォーカスを失うと、選択されます。
  
  注-ユーザーが必要な行の先頭からではない文字を入力した場合、自動的に選択することはできません。
• リストにない新しい値を書き込むことができる場合、モードを有効にできます。 そうしないと、要素が見つからなかったテキストを入力できません。 プロンプトだけでなく入力できるヒントモードのようなものです。
  
  このモードは、ユーザーが複雑なオブジェクトではなく新しい値を追加できるようになったときに、ユーザーの生活を簡素化します。 たとえば、名前。 または、以前の仕事の場所での位置-それは任意ですが、すでに知られている位置のリストがあります。
• データソース 、つまりリスト自体は、クライアント上のjavascript配列（つまり、既にダウンロードされたデータ）、またはサーバーへのajaxリクエスト（つまり、クライアントがデータをオンデマンドで正確にダウンロードする場合）のいずれかです。
• 仮想スクロール -すべてのデータをダウンロードせずにリストをスクロールします。 前の段落の続き。 大量のデータがある場合は、表示されている要素のみがダウンロードされるか、わずかなマージンがあり、リストをスクロールすると、必要な要素がポンピングされます。
  
  リストに多くの要素がある場合、それらをすべてクライアントに保存するべきではありません-必要に応じてそれらを強化してください。 十分ではない場合は、ページを読み込むときに事前にダウンロードしてブラウザのメモリに保存できます。 「一度にすべてのデータをダウンロードする」と「表示されているデータウィンドウをスクロールするときに次のページをダウンロードする」を比較する場合、最適化のバランスが必要です。
• たとえば、「値のリセット」、「次/前の要素」など、コントロールのボタンをプログラムすることができます 。 または、ユーザーが必要とするその他のアクション。 カスタムボタンを追加する例：
  
  
  
  
  
  
  
  スクリーンショットのコンボでは、通常の三角形のボタンが削除されています
  
  
  
  
  
  
  
  しかし、3つのカスタムが追加されました。
• リストのテーブルビュー ：
  
  表示されるデータを構造化し、要素の名前だけでなく、そのフィールドのいくつかを表示できます。
  
  
  
  
  
  
• テーブルビュー、 アイコン 、要素テンプレートのセルのスタイル ：
  
  
  
  
  
  
  
  
  
  
• ComboBox
  
  
  
  の形式で階層リストから要素を選択する機能について言及することもできますが、これは異なるコントロールです（ DropDownEdit 、タイトルにはTree List Lookupがあります ）。
  
  

ComboBoxの進化-新規

これらの機会を利用して、 ComboBox



さらなる進化は十分ではないという結論に徐々に達しました。

1. 「 値のリセット 」ボタンの簡単な追加。 プログラミングなし。
   
   このようなボタンは非常に頻繁に必要になるため、単純なboolean
   
   
   
   制御プロパティを割り当てることで追加する場合に便利です。
   
   
   
   

    <comboBox showResetButton=”true” />
         
         
   
           
           
           
         
   
       
           
           
           
         
         
   
           
           
           
         
   
       
        

   
   
   
   
   
2. 選択した値が変更されたことを示します。
   
   ほとんどのテキストエディタは、ファイルが変更されて保存されていないことを示しています。 この機能は、編集コントロール上で便利なようです。 もちろん、これはComboBox
   
   
   
   だけでなく、一般的にすべてのエディターに適用されます。
   
   
   
   
   
   
   
   編集コントロールの変更をロールバックする機能を追加する価値があるかもしれません。 cntr + zのように。
   
   
3. 選択したアイテムのページへのリンク 。 もちろん、リストアイテムエンティティには独自のページがあります。
   
   
   
   たとえば、ユーザーが注文し、ピックアップポイントを選択します。 また、選択するとき、および選択した後、選択したアイテムに関する完全な情報（住所、そこへの行き方、スキーム、写真）を不要なジェスチャーなしで取得するのが自然です。 この機会に気づいたら、どのコンボボックスでもそれを望んでいます。
   
   
   
   ビジュアルコントロールの横に通常のタグを記述するのが最も便利です
   
   
   
   

    <a href='entity?id=...'>i</a>
         
         
   
           
           
           
         
   
       
           
           
           
         
         
   
           
           
           
         
   
       
        

   
   
   選択した値のテキストをリンク自体にすることはできますが、それだけの価値はありません。結局、コンボをクリックすると、通常、選択リストが開きます。 彼らはそうします-リストを開くには、ユーザーは三角形のボタンをクリックする必要があります
   
   
   
   。
   
   
   
   これらの3つのポイントの実装例：
   
   
   
   
   
   
   
   アスタリスクは、値が変更されたことを意味します（ caption
   
   
   
   とコントロールの右側の両方に表示できます。これは特定のプロジェクトのスタイルの問題です-通常、アスタリスクは値が選択に必要であることを意味します）、赤い十字-「値のリセット」ボタン、i-選択したブランチのカードへのリンク、省略記号付きのボタン-ポイント4
4. エンティティにさまざまなフィルター、便利な視覚化、ページング、並べ替えなどの機能を備えたカタログページがある場合、このカタログページ を使用して選択し ます 。 この劇的な改善により、 ComboBox
   
   
   
   ' CatalogBox
   
   
   
   'オーム-21世紀のComboBox
   
   
   
   'オームになりました。
   
   
   
   たとえば、ユーザーは契約で代用するクライアントを選択し、 ComboBox
   
   
   
   は表示されたデータ（たとえば、クライアントの番号と名前）を検索しますが、ユーザーは名前、たとえばTIN、電話番号、または求められている法人のディレクターの名前のみを知りません。 次に、クライアントディレクトリページを開き、フィルターを使用して目的のページを検索し、クライアントの番号/コード/名前をコピーし、ディレクトリを閉じて、バッファーからComboBox
   
   
   
   挿入します。 しかし、私たちのタスクは、ユーザーにとってより便利なものにすることです（エピグラフを参照）。
   
   
   
   また、ユーザーにとっては、 CatalogBox
   
   
   
   特別なボタン（省略記号ボタン）をクリックすると、モーダルウィンドウでカタログを開くと便利です。
   
   
   
   ）
   
   
   
   ディレクトリページの例：
   
   
   
   
   
   
   
   スクリーンショットでは、省略記号ボタンをクリックすると、カタログがモーダルウィンドウで開かれます。
   
   ただし、カタログページ自体をモダリティに関連付けてはいけません。個別に独立して、モーダルウィンドウで開くことができる必要があります。 モーダルウィンドウでは、グリッドは選択された1行（または複数行）を強調表示でき、その後「選択」ボタンがアクティブになります（選択が行われていないためスクリーンショットでdisabled
   
   
   
   になります）。 押されると、選択された値がComboBox
   
   
   
   、つまりCatalogBox
   
   
   
   置き換えられCatalogBox
   
   
   
   。
5. リストから複数のアイテムを選択する必要がある場合があります。 CheckBoxList
   
   
   
   （ pictures ）のようなものですが、 CatalogBox
   
   
   
   があり、便利なフィルターで選択できるため、 複数のCatalogBox
   
   
   
   必要です。 ここで、関数は自然です：追加、削除。 選択したアイテムの数の検証を入力する必要がある場合があります-拡張機能がrequired
   
   
   
   。
   
   
   
   たとえば、注文に製品を追加する必要があり、ユーザーが一度に複数を選択できるようにする必要がありCheckBoxList
   
   
   
   、 CheckBoxList
   
   
   
   製品の数が多いため不便です。 次に、フィルターを使用してカタログ内のユーザーが複数の製品を選択し、[追加]をクリックし、必要に応じてさらに追加すると便利です。
   
   視覚的な例：
   
   
   
   
   
   
   
   ご覧のとおり、 CheckBox
   
   
   
   はグリッドの左側の列にあります。この方法で、複数の要素を選択できます。
   
   
   
   この機能はすでにComboBox
   
   
   
   完全に破壊しています。選択された複数の値を保存することを意図したものではありません。 一般的なケースでは、実装が変化する独創的なタスクを取得します。
   
   
   
   行われた選択の視覚的な例を示します。
   
   -1つのアイテムが選択されている場合：
   
   
   
   
   
   
   
   -2つのアイテムが選択されている場合：
   
   
   
   
   
   
   
   -そのため、選択したアイテムのリストを表示して、不要なものを削除できます。
   
   
   
   
   
   
6. 2つのリストから 1つのアイテムを選択する機能が必要な場合があります 。
   
   たとえば、注文を配達する人を選択する必要があります-第三者の会社または宅配業者のいずれかです。 共通の親エンティティ（「配信エグゼキューター」）を入力できますが、カタログページには意味がありません。 したがって、異なるリストから1つのComboBox
   
   
   
   を選択できる必要があることがComboBox
   
   
   
   ます。
   
   
   
   ユーザーが1つのCatalogBox
   
   
   
   コントロールでこの選択を行うのが最も便利ですが、（異なるエンティティの）異なるカタログページを開く2つ（またはそれ以上）のボタンを作成します。 また、選択したオブジェクトだけでなく、その本質も保存する値として。
   
   
   
   例：
   
   
   
   
   
   
   
   それ以外の場合、すべては以前と同じです-選択ボタンだけが省略ボタンに追加されます。
7. 前の2つのポイントの組み合わせとして、 異種混合選択 。
   
   たとえば、前の段落の例から複数の配信プロバイダーを選択する必要がある場合。

ほとんどすべてのWebアプリケーションでは、最初の4ポイントが非常に必要です。「値をリセット」ボタン、変更を強調表示、選択したアイテムのページへのリンク、完全なフィルターで選択します。 残りの追加は、すべてのプロジェクトで必要なわけではありません。 しかし、大規模な情報システムでは、いずれにしても、すべてのポイントが必要なようです。

完全な機能要件

カタログボックス

1. 三角形ボタン（リストを通常のドロップダウンリストとして表示）：
   
   
   
   a。 三角形ボタンを設定、表示または非表示する機能。
   
   大きなリストの場合、「リスト全体を表示」ボタンはそれほど重要ではなく、フィルターされたリストのみが重要です。 そして、それが大きなリストであるかどうかに関係なく、基準を選択するには、コントロール自体ではなく、インターフェース設計者がすべきです。したがって、構成が必要です。
   
   b。 異種の選択（2つのリストから値を選択）の場合、複数の三角形ボタンを作成するか、省略ボタン（モーダルカタログページを開く）を作成する場合は作成しないでください。
   
   c。 コントロールをクリックしたときにリストを開くかどうか。
   
   d。 制御に焦点を当ててリストを開くかどうか。
   
   
2. Xボタン（選択した値をリセット）。
   
   
   
   a。 検証に関連付けられています。 選択が必要な場合、クロスはありません。
   
   b。 複数選択の場合、すべての選択をクリアします。 選択した1つの値に対して削除ボタンを作成することも価値があります。
   
   
3. コントロールにテキストを入力して要素を選択する：
   
   
   
   この動作は理想的なようです。 ユーザーがテキストを入力し、要素が検索され、見つかった要素が表示されます（承認フィルター、指定されたフィルター、他のコントロールで値を選択するフィルター、仮想スクロールウィンドウの設定を考慮に入れます）。 フォーカスの喪失が選択されている場合：
   
   -何も見つかりませんでした。選択は変わりません。
   
   -1つのアイテムが見つかりました：選択されています。
   
   -1つ以上の設定が見つかりました：最初の設定または前に選択した設定が選択されています。
   
   マウスで要素を選択し、スクロールして、矢印を入力します。 リストは完全であるか、必要に応じてスワップされます（仮想スクロール）。
4. アイテムの検索、フィルター：
   
   入力された行でフィルタリング-ソート：1）名前は入力された行と等しい、2）名前はそ​​れで始まり、3）それで終わり、4）その中。
   
   
   
   必要なフィルター：
   
   
   
   a。 この制御インスタンスの定数設定フィルター。
   
   b。 他のページコントロールによって生成されるフィルター。
   
   c。 許可フィルター。 このフィルターはサーバー側に重ねる必要があります-これはセキュリティルールです。
   
   これらすべてのフィルターをカタログページに転送し、ユーザーがフィルターを変更してはならないことを示します。
5. 見つかったアイテムの表示：
   
   
   
   a。 テーブルビュー、セルテンプレート、スタイル/フォーマットの可能性。
   
   b。 要素で見つかったテキストを選択します。
   
   
6. 選択された（複数選択で選択された）要素の表示：
   
   理論的に可能なオプション：
   
   -j.analog string.Format
   
   
   
   テンプレートパス（たとえば、「 {Name} ({Id})
   
   
   
   」）;
   
   -テキストjs
   
   
   
   関数;
   
   -HTMLテンプレート。
   
   元のhtml select
   
   
   
   タグ内に留まる場合、テキストオプションのみが可能です。また、マークアップが完全にカスタムである場合、想像力の余地があります。
7. title
   
   
   
   古い値を持つ「値が変更されました」マーカー（ツールチップ）。
8. ボックスの表示領域に収まらない、選択した要素に関する情報を表示するTitle
   
   
   
   またはbaloon
   
   
   
   。
9. 選択したアイテムのページへのリンク。
   
   すべてのエンティティにページがあるわけではないことを考慮してください（ただし、存在する場合はすべての要素にエンティティがあります）。
10. 省略記号ボタン。
    
    モーダルウィンドウでこのエンティティのディレクトリページを開きます。 カタログ内のアイテムを選択すると、CatalogBoxに渡されます。
11. 異種選択。
    
    モーダルウィンドウで異なるディレクトリを開く複数の省略ボタン。 ボタンのアイコンの設定、 title
    
    
    
    。
12. 複数の選択肢。
    
    選択した複数の値を表示し、1つまたはすべてを一度に削除します。
13. 多様な複数の選択肢。
14. サイトスタイルでこれが必要な場合は、 CatalogBox
    
    
    
    カーソルを合わせたときにのみボタンを表示します。
15. 検証 ボタンを押した後にのみ無効なステータスを表示します。

カタログページ

1. 参照によって独立して開くことも、省略ボタンをクリックしてモーダルで開くこともできます。
2. クエリ文字列で、外部パラメーターとしてフィルターします。 フィルター機能により、 CatalogBox
   
   
   
   必要なフィルター処理が可能になりCatalogBox
   
   
   
   。
3. 「フィルターをクリップボードに保存」ボタン-正確に選択されたリストを開くリンクを送信します。
   
   並べ替えとページングをクエリ文字列に保存することもできます。
4. 転送されたフィルターをユーザーに対して変更できるかどうかを決定するパラメーター（送信されたフィルターのみ）。 これは、ユーザーが禁止されているものを選択できないカタログをCatalogBox
   
   
   
   が開くことができるようにCatalogBox
   
   
   
   ためにCatalogBox
   
   
   
   です。
5. モーダルモードの場合、パラメータは単一/複数選択です。
   
   複数選択の場合、ユーザーにとって最も便利なオプションは、各アイテムのcheckbox
   
   
   
   を表示することです。
6. アイテムのリストを表示する方法は、通常grid
   
   
   
   です。 しかし、おそらくlist
   
   
   
   またはtree
   
   
   
   。
7. 更新ボタン-ページを更新せずに、つまり、選択したフィルターをドロップせずにリストを更新できます。
8. 「フィルターをリセット」ボタン。 ただし、p2から外部パラメーターに渡されたフィルターをリセットしないでください。
   
   
   
   モーダルモードの場合（つまり、 CatalogBox
   
   
   
   にCatalogBox
   
   
   
   ている場合）：
   
   
   
   
9. ヘッダーなし、フッターなし、メニューなど、要素の選択に直接影響しないもの。
10. ページ上のすべてのリンクが新しいウィンドウ/タブで開きます（ target=”_blank”
    
    
    
    ）。
11. 選択ボタン。 アイテムはまだ選択されていません。 disabled
    
    
    
    です。 最初のものが選択されると、アクティブになります。 何らかの方法で押されると、選択されたアイテムを生成されたCatalogBox
    
    
    
    に送信しCatalogBox
    
    
    
    
12. キャンセルボタン。 クリックすると、モーダルウィンドウが閉じます。 十字ボタンのように。
13. 再度開くと、2つのオプションがあります。ページをリロードするか、リロードしないかです。これにより、フィルター/ソート/ページングが選択されたままになります。
14. 承認を考慮した表示-要素のリストの一部がユーザーに利用できない場合があります。 または、いくつかのフィルター。 しかし、これはサイト全体のルールであり、カタログページはここでも変わりません。

PS

同僚、オブジェクトを選択するための同様の機能が完全に機能するカタログページを使用して実装されている場所を知っている場合、コメントを書いてください。 少なくともWebの世界では、そのような実装を見たことはありません。