DXブログ
WorkWithPlusDSを用いたデザインの変更【応用編】
目次
はじめに
こんにちは!! GeneXus開発者の佐藤と山崎です。
今回のブログは、「WorkWithPlusDSを用いたデザインの変更【応用編】」です。
環境：GeneXus18、WorkWithPlus（WWP）、Tomcat 10.1使用
🐦
佐藤
今回はWorkWithPlusDSの応用編ということで、前回の【基本編】でお話した内容の発展版をお届けします。
⛰
山崎
前回の記事もぜひご参照ください。↓↓↓
💡WorkWithPlusDSを用いたデザインの変更【基本編】
💡WorkWithPlusDSを用いたデザインの変更【基本編】
🐦
佐藤
さて、前回のブログの中でGeneXusで生成される画面資産のレイアウトは、「WorkWithPlusBaseDS」と「WorkWithPlusDS」というデザインシステムオブジェクトに基づいて制御されており、それぞれ親子のような関係で扱うことができるというお話をしましたね。
⛰
山崎
はい。「WorkWithPlusDS」側で「WorkWithPlusBaseDS」と同じクラス名を指定することで、親のクラスの要素を上書きすることもできるというお話でした。
🐦
佐藤
では今回は、実際に親のクラスを指定して、レイアウトを変更してみましょう。
応用的な使い方
1.「WorkWithPlusDS」に記述
🐦
佐藤
今回は、下図画面の必須マークをデフォルトからカスタマイズしてみましょう。
デフォルトで設定されているのは「＊」ですね。
試しに、赤い四角形の中に「必須」という文字が表示されるようなマークに変更してみましょうか。
デフォルトで設定されているのは「＊」ですね。
試しに、赤い四角形の中に「必須」という文字が表示されるようなマークに変更してみましょうか。
🐦
佐藤
「WorkWithPlusBaseDS」に設定されているクラス名に対して、同名で「WorkWithPlusDS」に記述してみてください。必須マークは様々なところに適用されているので、クラスの抜け漏れに注意して進めるようにしてください。
⛰
山崎
わかりました!やってみます。
⛰
山崎
「WorkWithPlusBaseDS」に記載されていた必須マークのCSSを「WorkWithPlusDS」に転記しました。
🐦
佐藤
OKです!それでは必須マークの新しいデザインを作成していきましょう。
⛰
山崎
デザインを考えてる時が一番楽しいですね～
⛰
山崎
こんな感じでしょうか？
🐦
佐藤
実行して反映されているか見てみましょう。
2.スタイルが適用されているオブジェクトを開く
⛰
山崎
イメージ通りに変更することができました!
🐦
佐藤
おめでとうございます!やりましたね!
Tips
注意
🐦
佐藤
親の同名のクラスが適用されている箇所はすべてレイアウトが変更されてしまうため、注意しましょう。
⛰
山崎
そうなんですね。特定のページだけ変更する時は別名でクラスを記述するように気を付けようと思います。
まとめ
- 1.「WorkWithPlusDS」に記述
- 2.スタイルが適用されているオブジェクトを開く
おわりに
今回は、WorkWithPlusDSを用いたデザインの変更【応用編】でした。
これからもWorkWithPlusDSシリーズの情報をお伝えしていきます。お楽しみに。
今回の内容が、皆さんの開発に役立つと幸いです。
最後までお読みいただき、ありがとうございました！
GeneXus, ローコード開発 
