DXブログ

TOP > DXソリューション > DXブログ

WorkWithPlusDSを用いたデザインの変更【基本編】

目次

はじめに

こんにちは!! GeneXus開発者の佐藤と山崎です。
今回のブログは、「WorkWithPlusDSを用いたデザインの変更【基本編】」です。
環境：GeneXus18、WorkWithPlus（WWP）、Tomcat 10.1使用

🐦

佐藤

今回はWorkWithPlusDSの基本編ということで、まずは簡単に「WorkWithPlusDS」について解説していきます。

⛰

山崎

よろしくお願いします。

WorkWithPlusDSとは

🐦

佐藤

GeneXusで生成される画面資産のレイアウトは、「WorkWithPlusBaseDS」と「WorkWithPlusDS」というデザインシステムオブジェクトに基づいて制御されています。 デフォルトでは「WorkWithPlusBaseDS」が設定されており、ここに基本的なクラスが記述されています。

⛰

山崎

「WorkWithPlusDS」は、「WorkWithPlusBaseDS」にないクラスなど、デベロッパー側で 新たにクラスを設けたいときに使用するカスタマイズ用CSSのようなものですね。

🐦

佐藤

そうですね。また、「WorkWithPlusDS」側で「WorkWithPlusBaseDS」と同じクラス名を指定することで、親のクラスの要素を上書きすることもできます。

⛰

山崎

親と子のような関係ですね。

🐦

佐藤

また、「WorkWithPlusBaseDS」と「WorkWithPlusDS」には基本的な要素として、トークンというものが用意されています。 トークンを設定することで、フォントやフォントサイズ、間隔などのビジュアルデザイン 要素をモデル化できます。

⛰

山崎

別のデザインシステムでもインポートすることができるので、 トークンをつかいこなすことで、デザインの一貫性と保守が容易になりますね。

基本的な使い方

🐦

佐藤

次は基本的な使い方を見ていきましょう。山崎さん、お願いします。

1.「WorkWithPlusDS」に記述

⛰

山崎

ここでは例として、テキストエリアのボックスサイズを変更してみます。
参考用にBlogTrnというトランザクションオブジェクトを作成し、WWPを適用しました。
以下の画面はボックスサイズを変更する前のテキストエリアです。

フォーカスイン時のアクション適用前

⛰

山崎

WorkWithPlusDSに以下のクラスを記述してみましょう。WorkWithPlusDSはGeneXus上のエクスプローラーから開くことができます。

    
/* 入力欄のボックスサイズ変更 */
 .custom-input-box {	
  box-sizing: border-box;  //ボックスサイズ
  padding: 5px;  //ボックス内側の余白（上下左右）
  margin: 5px;  //ボックス外側の余白（上下左右）
  border: 1px solid #ccc;  //枠線
  border-radius: 5px;  //角丸
  Height: 30px;  //要素全体の縦幅
 }

⛰

山崎

実際に記述してみたのがこちらです。

WorkWithPlusDSにクラスを記述

2.トランザクションやWebPanelなどの対象資産のStyleプロパティに「WorkWithPlusDS」を適用

対象資産に「WorkWithPlusDS」を適用

⛰

山崎

上記のようにプロパティに適用することで、オブジェクト上でWorkWithPlusDSに記述したクラスを扱えるようになります。
🐦

佐藤

準備万端です。

3.スタイルを適用させたいオブジェクトのプロパティを開き、「Theme class」プロパティに1で記述したクラス名を適用

⛰

山崎

先ほど記述したクラスを、「Theme class」プロパティに適用してみましょう。
今回はattribute：BlogNoにのみ適用してみます。

Theme classプロパティに適用後

⛰

山崎

表示してみます。

実装後

🐦

佐藤

変更できましたね。

⛰

山崎

以下のソースをWorkWithPlusDSに実装すればこんなこともできます。

    
 /* 「custom-input-box」をフォーカスしたときのカスタム */
 .custom-input-box:focus {
  background-color: #fffedd;  //背景：クリーム色
  outline: none;  //デフォルトのフォーカスアウトラインを削除
  box-shadow: 0 0 4px #aaa;  //影
 }

フォーカスイン時のアクションを設定後

🐦

佐藤

なるほど。フォーカスイン時のアクションを設定したのですね。 これは視覚的にわかりやすいです。

Tips

🐦

佐藤

応用すればこんなこともできるようになります。

　

参考ブログ
💡GeneXusで項目のディスクリプションを左詰めにする方法

まとめ

  1. 1.「WorkWithPlusDS」に記述
  2. 2.対象資産にWorkWithPlusDSを適用
  3. 3.スタイルを適用させたいオブジェクトのプロパティを開き、「Theme class」にクラス名を設定

おわりに

今回は、WorkWithPlusDSを用いたデザインの変更【基本編】でした。
WorkWithPlusDSを用いたデザインの変更【応用編】についても現在執筆中です。お楽しみに。
今回の内容が、皆さんの開発に役立つと幸いです。
最後までお読みいただき、ありがとうございました！

Tag Icon GeneXus, ローコード開発