内容简介:This post will give you a quick intro to the basics of GUI programming forHello friends! Let’s cut to the chase and go straight to some code!The above program creates a
This post will give you a quick intro to the basics of GUI programming for SerenityOS .
Hello friends! Let’s cut to the chase and go straight to some code!
The smallest possible GUI program
#include <LibGUI/Application.h> int main(int argc, char** argv) { GUI::Application app(argc, argv); return app.exec(); }
The above program creates a GUI::Application
object and enters the main event loop. That’s it. It then does nothing until you interrupt it with ^C
.
Details: GUI::Application
is created on the stack in main()
and will exist throughout the program’s lifetime. It can be reached globally as GUI::Application::the()
.
Let’s add a window!
#include <LibGUI/Application.h> #include <LibGUI/Window.h> int main(int argc, char** argv) { GUI::Application app(argc, argv); auto window = GUI::Window::construct(); window->set_title("My window!"); window->set_rect(100, 100, 300, 200); window->show(); return app.exec(); }
The above program creates a window and sets its title, screen location and size. It then displays the window on screen and enters the main event loop.
Details: Windows are represented by GUI::Window
, which inherits from Core::Object
, a foundational building block of the Serenity userspace programming environment. Core::Object
is reference-counted, and is constructed using its construct()
helper. The value you get back is a reference-counting smart pointer, in this case a NonnullRefPtr<GUI::Window>
.
Let’s add a button!
#include <LibGUI/Application.h> #include <LibGUI/Button.h> #include <LibGUI/Window.h> int main(int argc, char** argv) { GUI::Application app(argc, argv); auto window = GUI::Window::construct(); window->set_title("My window!"); window->set_rect(100, 100, 300, 200); auto& button = window->set_main_widget<GUI::Button>("OK"); button.on_click = [&] { app.quit(); }; window->show(); return app.exec(); }
The above program creates a GUI::Button
widget and makes it the main widget of the window. We install a callback for the on_click
hook that calls GUI::Application::quit()
. Clicking the button exits the event loop and terminates the program.
Details: A window’s main widget is the root of its widget tree. It fills up all the space in the window (and follows along with resizing.) The main widget is owned by the window.
Let’s use a layout to have more than one widget!
#include <LibGUI/Application.h> #include <LibGUI/BoxLayout.h> #include <LibGUI/Button.h> #include <LibGUI/Label.h> #include <LibGUI/Widget.h> #include <LibGUI/Window.h> int main(int argc, char** argv) { GUI::Application app(argc, argv); auto window = GUI::Window::construct(); window->set_title("My window!"); window->set_rect(100, 100, 300, 200); window->show(); auto& widget = window->set_main_widget<GUI::Widget>(); widget.set_fill_with_background_color(true); widget.set_layout<GUI::VerticalBoxLayout>(); widget.add<GUI::Label>("Hello!"); widget.add<GUI::Button>("Friends!"); return app.exec(); }
The above program uses a generic GUI::Widget
as the window’s main widget, and assigns a layout to it. LibGUI currently offers two layouts: HorizontalBoxLayout
and VerticalBoxLayout
. Once a layout is assigned to a widget, it will manage the location and shape of that widget’s immediate children.
We add two children to the main widget, a label and button, causing them to get laid out vertically in insertion order, label up top, button down below.
Details: Using the layout system is optional (but preferred due to its simplicity.) It’s also possible to place and size children directly by calling `GUI::Widget::set_relative_rect(x, y, width, height) on them. To build complex user interfaces, layouts can be nested arbitrarily by adding layouts to the children of the main widget, etc. Widgets have size policies and preferred size that can be used to adjust layout. Widgets own their children.
Okay, let’s make a custom widget!
For our final example, let’s make something a little more advanced…
#include <LibGUI/Application.h> #include <LibGUI/Painter.h> #include <LibGUI/Widget.h> #include <LibGUI/Window.h> class MyWidget final : public GUI::Widget { C_OBJECT(MyWidget); private: MyWidget() {} virtual void paint_event(GUI::PaintEvent&) override; virtual void mousedown_event(GUI::MouseEvent&) override; Vector<Gfx::Point> m_points; }; void MyWidget::paint_event(GUI::PaintEvent&) { GUI::Painter painter(*this); painter.fill_rect(rect(), Gfx::Color::White); painter.draw_text(rect(), ":)", Gfx::TextAlignment::Center); Gfx::Point last_point; for (auto& point : m_points) { painter.draw_line(last_point, point, Gfx::Color::Red); last_point = point; } } void MyWidget::mousedown_event(GUI::MouseEvent& event) { m_points.append(event.position()); update(); } int main(int argc, char** argv) { GUI::Application app(argc, argv); auto window = GUI::Window::construct(); window->set_title("My window!"); window->set_rect(100, 100, 300, 200); window->show(); window->set_main_widget<MyWidget>(); return app.exec(); }
The above program defines a custom GUI::Widget
subclass called MyWidget
. It implements its own behavior for the mousedown
and paint
events. When you click somewhere in the window, it will draw a line from the last place you clicked to the new place you clicked.
The SerenityOS GUI is event-driven, and most of the logic is about widgets handling events. The following virtual functions from GUI::Widget
can be overridden to handle specific events:
virtual void change_event(GUI::Event&); virtual void child_event(Core::ChildEvent&); virtual void click_event(GUI::MouseEvent&); virtual void context_menu_event(GUI::ContextMenuEvent&); virtual void doubleclick_event(GUI::MouseEvent&); virtual void drag_move_event(GUI::DragEvent&); virtual void drop_event(GUI::DropEvent&); virtual void enter_event(Core::Event&); virtual void focusin_event(Core::Event&); virtual void focusout_event(Core::Event&); virtual void hide_event(GUI::HideEvent&); virtual void keydown_event(GUI::KeyEvent&); virtual void keyup_event(GUI::KeyEvent&); virtual void leave_event(Core::Event&); virtual void mousedown_event(GUI::MouseEvent&); virtual void mousemove_event(GUI::MouseEvent&); virtual void mouseup_event(GUI::MouseEvent&); virtual void mousewheel_event(GUI::MouseEvent&); virtual void paint_event(GUI::PaintEvent&); virtual void resize_event(GUI::ResizeEvent&); virtual void show_event(GUI::ShowEvent&);
Details: The C_OBJECT
macro is used in all Core::Object
subclasses to insert some shared functionality at the preprocessing stage. The call to GUI::Widget::update()
in mousedown_event
is what causes the widget to be repainted. Internally, this sends an invalidation rect to the WindowServer program, which will let us know when it’s time to paint. When the time comes, we get a call to paint_event
and can paint our widget however we like.
Conclusion
And that’s it for today! I hope this gave you some idea of how GUI programming is done on SerenityOS.
If you would like to know more, I recommend looking at some of the many applications , games and demos . It’s also handy to look at the LibGUI source code itself.
Note that the system and its various libraries are under constant development, so the above may no longer be accurate by the time you read this. Come talk to us in #serenityos
on the Freenode IRC network if you find bugs or have questions!
Thank you for stopping by! Until next time :^)
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
计算机是怎样跑起来的
[日] 矢泽久雄 / 胡屹 / 人民邮电出版社 / 2015-5 / 39.00元
本书倡导在计算机迅速发展、技术不断革新的今天,回归到计算机的基础知识上。通过探究计算机的本质,提升工程师对计算机的兴趣,在面对复杂的最新技术时,能够迅速掌握其要点并灵活运用。 本书以图配文,以计算机的三大原则为开端、相继介绍了计算机的结构、手工汇编、程序流程、算法、数据结构、面向对象编程、数据库、TCP/IP 网络、数据加密、XML、计算机系统开发以及SE 的相关知识。 图文并茂,通俗......一起来看看 《计算机是怎样跑起来的》 这本书的介绍吧!