AssortedWidgets -- OpenGL GUI in WASM

Datetime:2017-04-08 05:22:48         Topic: OpenGL  Andrew Development          Share        Original >>
Here to See The Original Article!!!

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::GirdLayout *m_girdLayout; //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_girdLayout=new Layout::GirdLayout(2,1); //initialize the grid layout, set its margin
              m_girdLayout->setRight(16);
              m_girdLayout->setLeft(16);
              m_girdLayout->setTop(8);
              m_girdLayout->setBottom(8);
              m_girdLayout->setSpacer(4);

              m_girdLayout->setHorizontalAlignment(1,0,Layout::GirdLayout::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_girdLayout); //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::GirdLayout *m_girdLayout;
          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();
          }







New

Put your ads here, just $200 per month.