WebAssembly

1. Install WebAssembly.

2. Under the emsdk folder, run
source ./emsdk_env.sh

3. Under the AssortedWidgets folder, run
mkdir build
cd build
cmake .. -DCMAKE_TOOLCHAIN_FILE=~/AssortedWidgets/cmake/Modules/Emscripten.cmake
make

4. Once finished, run the following. You should be able to see AssortedWidgets in browser at http://localhost:8080
emrun --no_browser --port 8080 .

Linux

1. Install SDL2 and SDL2_image:
sudo apt-get install libsdl2-dev ibsdl2-image-dev

2. 2. Under AssortedWidgets folder, run
mkdir build
cd build
cmake ..
make

3. Once done, run
./AssortedWidgets

Mac OS

1. Install SDL2 and SDL2_image via homebrew:
brew install sdl2 sdl2_image

2. 2. Under AssortedWidgets folder, run
mkdir build
cd build
cmake ..
make

3. Once done, run
./AssortedWidgets

To use AssortedWidgets, first define a class inherits AssortedWidgets::Widgets::Dialog:


          class DemoDialog: public AssortedWidgets::Widgets::Dialog
          {
          public:
              DemoDialog(void);
              ~DemoDialog(void);
          };
          

Then, add desired UI elements and layouts to the dialog as private members:


          class DemoDialog: public AssortedWidgets::Widgets::Dialog //subclass the common base for all dialogs.
          {
          private:
              Widgets::Button *m_closeButton;   //add a button
              Widgets::Label *m_label;          //add a text label
              Widgets::ScrollPanel *m_panel;    //add a scroll panel
              Layout::GridLayout *m_gridLayout; //a layout is a container of UI elements.
          public:
              DemoDialog(void);
          public:
              ~DemoDialog(void);
          };
          

Initialize the dialog in its constructor:


          DemoDialog::DemoDialog(void)
            :Dialog("Scroll Panel Test:",400,400,320,240) //provide dialog title and size.
          {
              m_gridLayout=new Layout::GridLayout(2,1); //initialize the grid layout, set its margin
              m_gridLayout->setRight(16);
              m_gridLayout->setLeft(16);
              m_gridLayout->setTop(8);
              m_gridLayout->setBottom(8);
              m_gridLayout->setSpacer(4);

              m_gridLayout->setHorizontalAlignment(1,0,Layout::GridLayout::HRight);

              m_closeButton=new Widgets::Button("Close"); //initialize the UI elements on this dialog
              m_label=new Widgets::Label("I am a very very big Label in a Scroll Panel.");
              m_label->m_size.m_height=m_label->m_size.m_width=500;
              m_panel=new Widgets::ScrollPanel();
              m_panel->setContent(m_label); //add the label to the scroll panel

              setLayout(m_gridLayout); //let this dialog to use this layout
              add(m_panel); //add both the scroll panel and the close button to the dialog
              add(m_closeButton);

              pack(); //this function update the sizes and locations of internal UI elements
          }
          

Go back to the class definition, add a onClose() function to handle the mouse release event of the close button:


          class DemoDialog: public AssortedWidgets::Widgets::Dialog
          {
          private:
              Widgets::Button *m_closeButton;
              Widgets::Label *m_label;
              Widgets::ScrollPanel *m_panel;
              Layout::GridLayout *m_gridLayout;
          public:
              void onClose(const Event::MouseEvent &e);
              DemoDialog(void);
              ~DemoDialog(void);
          };
          

Register the onClose() function as the handle of the mouse release event of the close button:


          DemoDialog::DemoDialog(void):Dialog("Scroll Panel Test:",400,400,320,240)
          {
              ...

              //register the onClose function as the event handler of the close button's mouse release event
              m_closeButton->mouseReleasedHandlerList.push_back(MOUSE_DELEGATE(DemoDialog::onClose));
          }

          void DemoDialog::onClose(const Event::MouseEvent &)
          {
              //this is the event handler, it calls a predefined function Close() to shut the dialog
              Close();
          }