デザインファイルをインポートしてアプリケーションを開発する開発者向けのガイドを示します。ヒントとベストプラクティスも紹介します。
デザイン統合サイクルの初期段階では、開発者は一度に数パネルだけを含むデザインのインポートを開始することをお勧めします。こうすることで、開発者とデザイナーがお互いから学べるだけでなく、アプリケーションがどのようにできあがっていくのかを確認することができます。開発者がコードの記述に着手したら、デザイナーは次の新しいパネルの描画を始めます。このサイクルを、完全に機能するアプリケーションが完成するまで繰り返します。
開発者には、UI を実行環境で確認できる強力なツールがあります:
ライブ編集です。このツールにより、不適切なデザインを発見し、容易に修正できるため、優れたデザインのアプリケーションを作成できます。モバイルデザインをインポートする場合は「
ネイティブ モバイル アプリケーションのプロトタイプ」を参照してください。
デザイン インポート ツールは、デザインファイル内のエレメントを以下のオブジェクトとして識別し、解釈することができます。見栄えの良い結果を得るためには、デザイナーは
デザイナー向けガイドに記載されているガイドライン、
規約、
ベストプラクティスに従う必要があることを考慮してください。
Stencil オブジェクトは、デザイナーが定義する
シンボル/コンポーネントから生成されます。
このオブジェクトは、複数のパネルで再利用することを目的とするため、アプリケーション内で再利用したほうがいいコンポーネントがあるかどうかを確認し、デザイナーに新しいシンボルの作成を依頼します。また、インスタンスが正しく適用されているかどうかも確認します (値のオーバーライド、テーマクラスの適用など)。インスタンスはターゲットステンシルの
参照を確認することで見つけることができます。
Panel オブジェクトまたは
Web Panel オブジェクトは、
[ Web パネルとしてインポート ] オプションをチェックしたかどうかに応じて、デザイナーが定義する
アートボード/トップ レベル フレームから生成されます。
これらのオブジェクトの [ レイアウト ] タブは、デザイナーが定義したグループから生成され、コントロールは、適用された
表記規則を通じて生成されます。各テーブルでは、セルサイズ (幅/高さ、絶対または相対) と位置が、デザイナーが定義する
サイズ変更の制約から生成されます。適切な結果を得るためのルールをデザイナーがデザインに適用し忘れた場合のために、インポート時にはこのことを考慮に入れるようにします。また、デザイナーが
パネルをリンクした場合は、 [ コード ] タブに対応する Call イベントがあります。デザイナーがアニメーションを含めた場合は、
フォームの [ Enter Effect ] / [ Exit Effect ] トランジションが適用されます。
Image オブジェクトは、
デザインに含まれる画像から、また「エクスポート可能」とマークされているレイヤーから生成されます (デザイナーが描画したロゴなど)。こうした画像がターゲットプラットフォームで正しく表示されるためには、デザイナーが正しい密度 (1x、2x、3x など) でエクスポートしている必要があります。正しくなかった場合、プレースホルダーとして黒い画像が表示されます。
デザインファイル内のすべての
組み込みフォントに対して、一連の
File オブジェクト (.otf、.ttf) が生成されます。そして、これらのファイルは
デザインシステムの [ Styles ] エレメントで
@font-face ルールとして参照されます。最後に、対応するテーマクラスで設定を行います (ターゲットコントロールの
[ Class ] プロパティの値)。
#color グループが
デザインシステムの [ Tokens ] エレメントで生成され、デザイナーが
スタイル、特に
塗りつぶし、
境界線、または
テキストのスタイルとして定義した色が含まれます (すべての色にこの 3 つのカテゴリのいずれかの接尾辞が付加されます)。また、デザインで
色変数/スタイルとして定義されているすべての色が含まれます。
一連のスタイルクラスが
デザインシステムの [ Styles ] エレメントで生成されます。デザイナーが
スタイルを定義していない限り、すべてのコントロールに独自のスタイルクラスが設定されます。デザインファイルを再インポートすると、手動で変更したプロパティがオーバーライドされることに注意してください。
各スタイルクラスは、接頭語「ExternalDesign」が付いた親から継承されます。たとえば、GeneXus が変数のスタイルクラスを推測する場合、「ExternalDesignAttribute」クラスから継承する Attribute クラスのテーマクラスを生成します (ほかのテーマクラスカテゴリと同様)。
プロジェクトの要件に応じて、デザインのインポートツールを使用する際には、それぞれの長所/短所や留意事項を考慮した上で、さまざまな戦略 (あるいはハイブリッド戦略) を採用することができます。
このアプローチでは、デザイナーがアプリケーションの各メインフレームを要素とともに定義し、インポートできるようにします。このプロセスは、最良の結果を得るためにデザイナーとの反復作業に時間がかかるかもしれませんが、フロントエンドが完全に準備され、開発中に曖昧になる余地がないことを保証します。
前のアプローチと似ていますが、開発との交換サイクルが短くなります。デザインのインポートツールはオブジェクトをマージせずに上書きすることに注意してください。その点から、あらかじめ定義されたモジュール (
[ モジュール ] オプションを使用) にデザインの新しいイテレーションをインポートし、メインブランチに手動でマージすることを強くお勧めします。イテレーションを注意深く評価し、軽微な変更であれば、新たなインポートを避けるために手動での調整を検討します。
アイコン、ボタン、カードなど、個々のコンポーネントの定義に重点を置きます。開発者のための参照用として、これらのコンポーネントのインスタンスを含むメインフレームを作成し、各コンポーネントの動作 (フォーカス時、ホバー時など) について従うべき明確な指示を提供します。既知の制限事項 (「
よくある質問とトラブルシューティングのセクション」に記載されています) に注意し、設計どおりにモデル化できない場合は代替案を試します。
このセクションは、
GeneXus 17 以降に適用されます。