GUI3

Home > ソフトウェア > GUI3

GUI3

GUI3はC++で作成したフレームワークです。SDL3でレンダリングします。アトミックデザインで設計されており、最小単位のアトムコンポーネントを組み合わせてオリジナルコンポーネントを作成します。

コンポーネントベースのパーツを使ってUIを構成します。コンポーネントはアトミックデザインで分類されています。

オリジナルコンポーネントは次のように簡単に作成できます。

class MyComponent : public Component
{
public:
　// modには共通データstoreやdrawerなど共通して使用するオブジェクトのポインタが入ってます。
  MyComponent(MOD mod)
  {
    box = std::make_unique<BoxComponent>(
        mod 
      , [width]
      , [height]
      , spa::box::POS::[VALUE]);

    image = std::make_unique<ImageComponent>(
        mod
      , [filepath]);
  }

  ~MyComponent() = default;

  // コピーコンストラクタ、box、imageをコピー
  MyComponent(MyComponent const& other)
    : Component(mod)
    , box{ std::make_unique<BoxComponent>(*other.box) }
    , image{ std::make_unique<ImageComponent(*other.image) }
  {}

  // コピー演算、box、imageをコピー
  MyComponent& operator(MyComponent const& other)
  {
    Component::operator=(mod);
    *box = *other.box;
    *image = *other.image;
    return *this;
  }

  // thisにboxをアタッチ、boxにimageをアタッチします。
  void configure()
　{
    attach(box.get());
    box->attach(image.get());
  }

private:
  std::unique_ptr<BoxComponent> box;
  std::unique_ptr<ImageComponent> image;
};

作成したコンポーネントをAppComponentに追加します。

// app_component.hpp
#pragma once

#include <gui/components/component.hpp>
// オリジナルコンポーネントを読み込み
#include <[path to my_component.hpp]>

class AppComponent : public Component
{
public:
  AppComponent(MOD mod);

  ~AppComponent() = default;

  AppComponent(AppComponent const&);
  AppComponent& operator=(AppComponent const&);

  void configure();

private:
  // オリジナルコンポーネントを追加
  FcComponent my_component;
};

// app_component.cpp
#include <gui/components/app_component.hpp>

AppComponent::AppComponent(MOD mod)
  : Component(mod)
{
  // 作成したMyComponentで初期化します。
  my_component = MyComponent(mod);
}

AppComponent::AppComponent(AppComponent const& other)
  : Component(other)
{
}

AppComponent& AppComponent::operator=(AppComponent const& other)
{
  Component::operator=(other);
  return *this;
}

void AppComponent::configure()
{
  // my_componentをattachします。
  attach(my_component);
}

width、heightを画面の半分に指定し、ボックスポジションをCENTERに指定した場合次のように描画されます。