DXブログ
WorkWithPlusDSに定義したクラスをEventsで適用させる方法
目次
はじめに
こんにちは～😀
今回は「WorkWithPlusDSに定義したクラスをEventsで適用させる方法」をご紹介します！
前回のブログでは、「WorkWithPlusDSに定義したクラスをTheme classプロパティに適用させる方法」をご紹介しましたが、Eventsでもクラスを適用させることが可能です！
前回のブログ記事はこちらからご覧いただけます↓
WorkWithPlusDSを用いたデザインの変更【基本編】
環境：GeneXus18、WorkWithPlus（WWP）、Tomcat 10.1使用
Eventsでクラスを適用させる利点
Eventsでクラスを適用することで、以下の利点があります！
1.動的なスタイル変更が可能
Eventsでクラスを適用させることで、ユーザーの操作に応じて動的にスタイルを変更できます。
例えば、ボタンのクリックやフィールドの値に基づいてUIのデザインを変更する場合に便利です。
2. 条件に応じたスタイルの切り替え
特定の条件（例えば、ユーザーのロール、データの状態、入力内容）に応じて異なるクラスを適用することで、より柔軟なUIのカスタマイズが可能になります。
これらの利点を活かしてEvents内でWorkWithPlusDSのクラスを適用することで、UIの動的な変更や柔軟なカスタマイズが可能となります😄
【実践1】文字の色を変更してみよう！
では実際に、Events内でWorkWithPlusDSのクラスを適用してみましょう！
まずは画面上の文字の色を変更してみましょう！
【手順】
1.WorkWithPlusDSで文字の色を変更するスタイルを設定
GeneXusのスタイルに「change-color」クラスを定義し、「colorプロパティ」を使って文字色を指定します。
今回は赤色のスタイルを追加してみます。
2.イベントでクラスを適用
GeneXusのイベント内で、このクラスを適用したい要素（例えば、テキストボックスやボタン）に「change-color」クラスを設定します。
これにより、「member_code」というテキストボックスに「change-color」クラスが適用され、文字色が赤に変わります。
表示時やクリック時にクラスを適用することで、ユーザーの操作に応じて文字色を変更することができます。
※既に適用されているクラスに影響を与えないため、「=」ではなく「+=」にすると安全です。
その際には、クラス名の前に必ず半角空欄を含めてください。
（例）xxx.Class += ‘ yyy’
このように設定することで文字の色を動的に変更でき、ユーザー操作に応じて調整が可能です。
【実践2】リンクやボタンの文字列が勝手に改行されないように設定しよう！
GeneXusでリンクやボタンを設定した際、文字列が意図せず改行されてしまい、レイアウトが崩れることがあります。
特に見栄えを整えたい場合、改行を防ぎたい場面も多いのではないでしょうか。
そこで今回は、リンクの文字列が勝手に改行されるのを防ぐ方法をご紹介します。
【手順】
1.WorkWithPlusDSで改行を防ぐスタイルを設定
GeneXusのスタイルに「white-space: nowrap;」を追加して、文字列が改行されないように設定します。
以下のように「no-wrap」クラスを定義します。
2.イベントでクラスを適用
GeneXusのイベント内で、リンクやボタンに「no-wrap」クラスを設定します。
表示時やクリック時にクラスを適用すれば、ユーザーの操作に応じて改行を防ぐことが可能です。
これらの設定を行うことで、リンクやボタンのテキストが思い通りの位置に配置され、レイアウトを整えることができます。
GeneXusでボタンやリンクの改行に悩んでいる方は、ぜひ試してみてください！
おわりに
今回は「WorkWithPlusDSに定義したクラスをEventsで適用させる方法」をご紹介しました!!
この方法を活用することで、アプリケーションのUIをさらに動的で柔軟にカスタマイズできます。
今回の内容が、皆さんの開発に役立つと幸いです。
最後までお読みいただき、ありがとうございました🙇🏻♀️
GeneXus, ローコード開発 
