Ignite UIドック マネージャー: ウェブレイアウトとユーザビリティの向上のために
Infragisticsの新しいドック マネージャーであるAngular、Blazor、React、Web Componentsを使用して、任意のフレームワークでマルチウィンドウ、マルチスクリーンアプリを簡単に構築できる方法をご覧ください。今すぐお試しください!
ラドスラフ・ミルチェフ
9分読み取り
Infragisticsでは、開発プロセスとニーズが常に進化していることを理解しています。市場と顧客の期待に応えるためには、ユーザビリティを向上させると同時に、新しい機能を追加する必要があります。
だからこそ、私たちはIgnite UIツールキットの強化を止めず、新しいコンポーネントや機能を増やしています。そして今、Ignite UIドック マネージャーコンポーネントの新しいリリースを発表できることを嬉しく思います。この強力な新しいツールを使用すると、任意のフレームワークでマルチウィンドウ、マルチスクリーンのWebアプリを簡単に構築できます。
しかし、これについては少し詳しく説明します。
ドック マネージャーとは何ですか?
ドック マネージャーは、複雑なレイアウトを作成し、ビューを小さなレイアウトに分割するための、標準的でユーザーフレンドリーなWebコンポーネントです。これは、実行時に操作および調整できる任意のレイアウトを作成するために、再帰的に行うことができます。レイアウトに加えて、複数のウィンドウ、パネル、その他の UI 要素の配置を柔軟な方法で管理し、アプリ内の異なる場所にドッキングできます。
エンドユーザーにとって、このドック マネージャーとは、ペインの固定、サイズ変更、移動、フローティング、非表示などの機能を使用して、作成したレイアウトをさらにカスタマイズできることを意味します。
ドック マネージャーを使用する利点は何ですか?
一般に、ドック マネージャーを使用すると、動的で複雑なUIを構築する際の時間と労力が節約され、WebアプリケーションのエンドユーザーのUXが向上します。ここでは、その利点の一部をご紹介します。
クロスプラットフォーム:それについての最も良いことの1つは、デスクトップとモバイルの複数のプラットフォームのサポートです。また、最新のWebブラウザとの互換性があるため、ドック マネージャーコンポーネントを使用して、任意のプラットフォーム向けのレスポンシブレイアウトソフトウェアソリューションを開発できます。
組み込みのドラッグアンドドロップ:ペイン内のタブを 1 つの宛先から別の宛先に並べ替える場合は、コンポーネントが提供するドラッグ アンド ドロップ機能を使用してすばやく変更できます。
シームレスな統合: Angular、Blazor、Web Components、またはその他のフレームワークでアプリを開発する場合でも、ドック マネージャーは常に特定のフレームワークアーキテクチャに依存して、アプリのロジックとデータ内にドッキング可能なUI要素を統合します。
柔軟性とカスタム調整:レイアウトの管理、スロットとパーツを使用したすべてのボタンのカスタマイズ、パネルやウィンドウなどのさまざまな位置にドッキング、アプリの要件に合わせて UI 要素の動作を変更するなど、これらはすべて非常に簡単です。
UXの向上:ドック マネージャーコンポーネントは、エンドユーザーが利用可能なUI要素をさらに操作、再配置、サイズ変更する機能を提供することで、実際にはアプリの全体的なエクスペリエンスを向上させます。
Ignite UIドック マネージャーの違いは何ですか?
最大の差別化要因の 1 つは、Ignite UIドック マネージャーコンポーネントが、Angular、Blazor、React、およびWeb Componentsで使用できる依存関係のない純粋な Web コンポーネントであることです。これにより、デスクトップの Visual Studio のようなエクスペリエンスを構築できるだけでなく、あらゆる業界やビジネス向けのより優れた Web アプリケーションを作成するのにも役立ちます。
たとえば、金融会社は大量のデータを扱っており、このデータを表示して理解するために複雑なダッシュボードが必要になることがよくあります。ここでの問題は、金融会社がIgnite UIドック マネージャーを使用することでどのように利益を得ることができるかということです。それを使用すると、彼らはいくつかのことを行うことができます。
- カスタマイズ可能なダッシュボードを構築し、会社の目的と個々のユーザーのニーズを念頭に置いて配置およびサイズ変更が簡単です。
- 画面上の UI 要素のサイズを効率的に変更して、一度に視覚化される財務データの量を最大化します。
- エンドユーザーに適した非常にアクセスしやすい情報をすばやく表示します。
- Ignite UIドック マネージャーのクロスプラットフォーム互換性により、デバイス間で一貫したUXを提供します。
これをよりよく説明するために、「データ分析ツール」の設計会議で遭遇した実際の問題を共有します。データ分析ツールを使用するには、まずデータを選択し、適切なグラフを選択し、それを選択する必要があります。次に、草の最初のヘビであるデスクトップアプリケーションではなく、ブラウザアプリケーションを使用しています。
しかし、このグラフはどこで視覚化するのでしょうか?移動できない静的なダイアログです。それはあなたのグリッドビューを隠し、あなたはそこに立ち往生しています。スクロールして他のものを検索する必要がある場合は、チャートダイアログを閉じて、必要なものを確認して、最初からやり直す必要があります。それは聞こえるほど不器用です。あなたはブラウザによって制限されているだけです。そこでドック マネージャーが非常に貴重になります。これを使用すると、使いやすさを犠牲にしたりエンドユーザーを制限したりすることなく、マルチスクリーンレイアウトを簡単に構築できます。
簡単なドック マネージャーの例と視覚的な比較を次に示します。
ドック マネージャーなしのデータ分析ツール:
ドック マネージャー付きデータ分析ツール:
だからこそ、プロの開発者を含む多くの人々がデスクトップアプリケーションに懐かしさを感じるのでしょうね。今日では、ブラウザウィンドウで10個以上のタブが開いているのを見ることは珍しくありません。n個のページのデータを使用する必要がある場合は、n個のウィンドウが必要です。必要に応じてレイアウトを再配置する自由があるからこそ、ドック マネージャーコンポーネントが重要なのです。これは、シングルページアプリケーション(SPA)の重要性を軽視しているのではなく、別の視点を共有するためのものです。
それで、それが何であるか、そしてなぜそれが重要なのかがわかったので、Ignite UIドック マネージャーの基本的な部分と機能を見てみましょう。
Ignite UIドック マネージャーの使い方は?
NPM パッケージを使用して、Ignite UIドック マネージャー Web コンポーネントを依存関係としてプロジェクトに含めることができます。ドック マネージャーパッケージをインストールするには、次のコマンドを実行します。
npm install --save igniteui-dockmanager
次に、defineCustomElements()関数をインポートして呼び出す必要があります。
import { defineCustomElements } from 'igniteui-dockmanager/loader';
defineCustomElements();
TS
ドック マネージャーをインポートしたら、ページに追加できます。
<igc-dockmanager id="dockManager"> </igc-dockmanager>
GitHub Ignite UIドック マネージャーリポジトリに簡単な操作手順と追加情報を追加しました。
ドック マネージャーの主要なビルディングブロックについて知っておくべき重要なことは、それらがペインと呼ばれるということです。
ドック マネージャーでのペインの使用
ドック マネージャーの主な構成要素はペインです。
コンテンツ ペインは、ヘッダーとコンテンツを含むペインを表します。これは、分割ペインまたはタブグループペイン内でホストできます。
分割ペインは、orientationプロパティに基づいてすべての子ペインを水平または垂直に積み重ねるコンテナ ペインです。
タブ・グループ・ペインには、その子コンテンツ・ペインがタブ・コンポーネントのタブとして表示されます。
フローティングペインは、フローティングウィンドウで他のすべてのペインの上にレンダリングされる分割ペインです。
ドキュメント ホストは、Visual Studio のコード編集とデザイン ビューのタブと同様の、ドキュメントのタブの領域です。
以下は、Ignite UIを使用して作成した別のドック マネージャーデモです。
ドック マネージャーコンポーネントのIgnite UIでのテーマ設定
ドック マネージャーには、ライトテーマとダークテーマの両方の組み込みテーマが付属しています。すぐに使用できるテーマを使用すると便利ですが、アプリケーションに必要なルックアンドフィールを形作るには不十分であるため、CSS変数とCSSパーツを使用してIgnite UIドック マネージャーをカスタマイズするためのオプションをさらに提供します。
まず、closeButton、maximizeButton、minimizeButton、pinButton、unpinButton の各スロットを使用して、独自のアイコンを指定します。
その後、スタイルシートで露出したパーツを使用します。これにより、コンポーネントのスタイルを完全に制御できます。
さあ行こう。これで、カスタマイズされたアイコンとタブ領域を備えたDockManagerができました。
必要に応じて、このstackblitzライブの例で試してみることができます。
Customizing Layouts
エンドユーザーは、次のアクションを実行して、実行時にレイアウトをカスタマイズできます。
- Pin a pane
現時点では必要のないすべてのコンテンツとタブペインをトレイに隠すには、ピン留めを外します。最後にドッキングした位置にそれらが必要な場合は、ピンで固定するだけです。
- ペインのサイズを変更する
- ウィンドウを閉じる
- Float a pane
フローティングペインは、任意のペインのヘッダーをドラッグして作成できます。フローティングペインは、フローティングウィンドウで他のすべてのペインの上にレンダリングされる分割ペインです。他のすべてのペインの上に移動し、ドック マネージャーウィンドウに制限されません。サイズ変更してドッキングしたり、分割ペインまたはタブグループ内でホストしたりできます。
- ペインナビゲーター
ドッキングまたはホストペインに使用可能な位置に関する視覚的な表示(ジョイスティック)は、カーソルが現在配置されているペインのコンテキストです。できます：
- ペインを左、右、上、または下にドッキングして、グローバル/ルートを含む任意のレベルのネストにドッキングします。
- ウィンドウの下部にリアルタイムのログペインをドッキングします。
- MS Officeリボンのように、コマンドと操作を含むペインをウィンドウの上部にドッキングします。
- ウィンドウを別のビューのタブとしてドッキングし、コンテンツ領域を分割しません。
- トレイを開き、アイテムを目的のペインにドラッグして、特定の位置にドッキングします。
カスタムレイアウトや複雑なレイアウトの作成は、常に再作成する必要がある場合、トリッキーで非常に面倒な場合があります。そのため、レイアウトを保存およびロードするオプションを含めました。これで、現在のニーズに合わせてレイアウトをカスタマイズし、デフォルトとして保存して、反復を減らし、時間を節約できます。
自分で試してみたい場合は、たとえばAngularプロジェクトが必要であり、ここの指示に従ってください。
最終的に、ドック マネージャーは Web 開発者に複雑な Web アプリの使いやすさを向上させる機能を提供し、Web 上での完全なウィンドウ エクスペリエンスを提供します。これを迅速かつ簡単に行うことで、次のカフェイン飲料を手に入れるのにかかる時間で、ヒーローとなり、ユーザーのニーズを満たすことができます。