0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

コンポーネントの Expose skinをOnにしてウィジェットの見た目を変更する

Last updated at Posted at 2021-03-08

#目次

  1. はじめに
  2. 実装方法
  3. まとめ
  4. 参考

#はじめに
コンポーネントを作成後、元のソースを変更せずに、アプリやフォームに配置したコンポーネントのウィジェットの外観を変更したい場合、
コンポーネントのExpose skinをOnにすることで、変更を行うことができます。
今回はコンポーネントの Expose skinをOnにしてウィジェットの見た目を変更する方法についてご紹介します。

なお、Expose skinをOffにしている場合、元のソースを編集する必要があります。

#実装方法
####①コンポーネントの作成
コンポーネントを作成します。
左のメニューからTemplate > Componentのメニューを開く > Newをクリック > with Contractを選択

※コンポーネントについては下の記事をご参照ください。
https://qiita.com/Kony_Team/items/a25b322d9524f9f1ac92

image.png
青色のFlex Containerを配置しました。

次にExpose skinをOnにします。
右のメニューからSkin > Normal > Component > Expose skinをOn

####②フォームにコンポーネントを配置

  1. フォームを新規作成

  2. 先ほど作成したコンポーネントのメニューを開き、Insert Intoを選択
    image.png

  3. 右のメニューからProperties > Skin > 上のExpose Skinsのリストをクリックし、Normal(skin1)を選択
    この時点では、先ほど作成したコンポーネントのSkinが反映されている

  1. 好きなSkinの設定をする
    今回は、ピンクにしました。

image.png

これで元のコンポーネントに影響を与えずに、
このフォーム限定のSkinを作成することができました。

念のため、先ほど作成したコンポーネントのSkinが変更されていないか確認します。
image.png
変更されていません。

####③実装の確認
image.png
先ほど設定したピンクが表示されています!

#まとめ
今回は、コンポーネントの Expose skinをOnにしてウィジェットの見た目を変更する方法について説明しました。
みなさんもぜひ活用してみてくださいね:wave:

#参考
Create a Component:
https://docs.kony.com/konylibrary/visualizer/visualizer_user_guide/Content/C_CreatingComponent.htm

Kony Visualizerでコンポーネントを作成する:
https://qiita.com/Kony_Team/items/a25b322d9524f9f1ac92

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?