Skip to content

Commit fcf8682

Browse files
Hofer-JulianHofer-Julian
committed
book: Adapt todo_3 chapter to reflect latest changes in the listings
1 parent 7cfedd2 commit fcf8682

File tree

4 files changed

+43
-166
lines changed

4 files changed

+43
-166
lines changed

‎book/src/img/src/todo_change_5_6.svg

-72
This file was deleted.

‎book/src/img/todo_6.png

59.1 KB
Loading

‎book/src/img/todo_change_5_6.png

-57.4 KB
Binary file not shown.

‎book/src/todo_3.md

+43-94
Original file line numberDiff line numberDiff line change
@@ -35,19 +35,13 @@ Your browser does not support the video tag.
3535
</div>
3636

3737

38-
## Start using Libadwaita widgets
38+
## Boxed lists
3939

4040
Of course Libadwaita is more than just a couple of stylesheets and a [`StyleManager`](https://world.pages.gitlab.gnome.org/Rust/libadwaita-rs/stable/latest/docs/libadwaita/struct.StyleManager.html).
4141
But before we get to the interesting stuff, we will make our lives easier for the future by replacing all occurrences of `gtk::prelude` and `gtk::subclass::prelude` with [`adw::prelude`](https://world.pages.gitlab.gnome.org/Rust/libadwaita-rs/stable/latest/docs/libadwaita/prelude/index.html) and [`adw::subclass::prelude`](https://world.pages.gitlab.gnome.org/Rust/libadwaita-rs/stable/latest/docs/libadwaita/subclass/prelude/index.html).
4242
This works because the `adw` preludes, in addition to the Libadwaita-specific traits, re-export the corresponding `gtk` preludes.
4343

44-
In the remainder of this chapter we are going to follow a couple of patterns of GNOME's HIG.
45-
Let's start by [adapting](https://developer.gnome.org/hig/patterns/containers/header-bars.html) the header bar.
46-
We do that by replacing [`gtk::ApplicationWindow`](../docs/gtk4/struct.ApplicationWindow.html) with [`adw::ApplicationWindow`](https://world.pages.gitlab.gnome.org/Rust/libadwaita-rs/stable/latest/docs/libadwaita/struct.ApplicationWindow.html).
47-
We also use [`adw::HeaderBar`](https://world.pages.gitlab.gnome.org/Rust/libadwaita-rs/stable/latest/docs/libadwaita/struct.HeaderBar.html) as the title bar.
48-
Finally, we add [tooltips](https://developer.gnome.org/hig/patterns/feedback/tooltips.html).
49-
50-
The second pattern we are going to follow are [boxed lists](https://developer.gnome.org/hig/patterns/containers/boxed-lists.html).
44+
Now we are going let our tasks follow the [boxed lists pattern](https://developer.gnome.org/hig/patterns/containers/boxed-lists.html).
5145
The HIG does not require us to use this style and there's a good reason for that: it is incompatible with recycling lists.
5246
This means they cannot be used with [list views](https://developer.gnome.org/hig/patterns/containers/list-column-views.html) and are therefore only appropriate for relatively small lists.
5347

@@ -58,110 +52,65 @@ We can use boxed lists by using [`gtk::ListBox`](../docs/gtk4/struct.ListBox.htm
5852
We will also add the [`boxed-list`](https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/boxed-lists.html) style class provided by Libadwaita.
5953

6054
Let's implement all these changes in the `window.ui` file.
61-
You can find the relevant subset of the diff below.
62-
To see the complete file, just click on the link after "Filename:".
55+
All of the changes are confined within the second child of the `ApplicationWindow`.
56+
To see the complete file, just click on the link after "Filename".
6357

6458
Filename: <a class=file-link href="https://github.com/gtk-rs/gtk4-rs/blob/master/book/listings/todo/6/resources/window.ui">listings/todo/6/resources/window.ui</a>
6559

6660

67-
```diff
68-
- <template class="TodoWindow" parent="GtkApplicationWindow">
69-
+ <template class="TodoWindow" parent="AdwApplicationWindow">
70-
<property name="width-request">360</property>
71-
<property name="title" translatable="yes">To-Do</property>
72-
+ <property name="content">
73-
<object class="GtkBox">
74-
<property name="orientation">vertical</property>
75-
+ <property name="hexpand">True</property>
76-
<child>
77-
+ <object class="AdwHeaderBar">
78-
+ <child type="end">
79-
+ <object class="GtkMenuButton">
80-
+ <property name="icon-name">open-menu-symbolic</property>
81-
+ <property name="menu-model">main-menu</property>
82-
+ </object>
83-
+ </child>
84-
+ </object>
85-
</child>
86-
<child>
87-
<object class="GtkScrolledWindow">
88-
<property name="hscrollbar-policy">never</property>
89-
<property name="min-content-height">420</property>
90-
- <child>
91-
- <object class="GtkListView" id="tasks_list" />
92-
- </child>
93-
+ <property name="child">
94-
+ <object class="GtkViewport">
95-
+ <property name="scroll-to-focus">True</property>
96-
+ <property name="child">
97-
+ <object class="AdwClamp">
98-
+ <property name="child">
99-
+ <object class="GtkBox">
100-
+ <property name="orientation">vertical</property>
101-
+ <property name="spacing">18</property>
102-
+ <property name="margin-top">24</property>
103-
+ <property name="margin-bottom">24</property>
104-
+ <property name="margin-start">12</property>
105-
+ <property name="margin-end">12</property>
106-
+ <child>
107-
+ <object class="GtkEntry" id="entry">
108-
+ <property name="placeholder-text" translatable="yes">Enter a Task…</property>
109-
+ <property name="secondary-icon-name">list-add-symbolic</property>
110-
+ </object>
111-
+ </child>
112-
+ <child>
113-
+ <object class="GtkListBox" id="tasks_list">
114-
+ <property name="visible">False</property>
115-
+ <property name="selection-mode">none</property>
116-
+ <style>
117-
+ <class name="boxed-list" />
118-
+ </style>
119-
+ </object>
120-
+ </child>
121-
+ </object>
122-
+ </property>
123-
+ </object>
124-
+ </property>
125-
+ </object>
126-
+ </property>
127-
</object>
128-
</child>
129-
</object>
130-
+ </property>
131-
</template>
132-
</interface>
61+
```xml
62+
<child>
63+
<object class="GtkScrolledWindow">
64+
<property name="hscrollbar-policy">never</property>
65+
<property name="min-content-height">420</property>
66+
<property name="vexpand">True</property>
67+
<property name="child">
68+
<object class="AdwClamp">
69+
<property name="child">
70+
<object class="GtkBox">
71+
<property name="orientation">vertical</property>
72+
<property name="spacing">18</property>
73+
<property name="margin-top">24</property>
74+
<property name="margin-bottom">24</property>
75+
<property name="margin-start">12</property>
76+
<property name="margin-end">12</property>
77+
<child>
78+
<object class="GtkEntry" id="entry">
79+
<property name="placeholder-text" translatable="yes">Enter a Task…</property>
80+
<property name="secondary-icon-name">list-add-symbolic</property>
81+
</object>
82+
</child>
83+
<child>
84+
<object class="GtkListBox" id="tasks_list">
85+
<property name="visible">False</property>
86+
<property name="selection-mode">none</property>
87+
<style>
88+
<class name="boxed-list" />
89+
</style>
90+
</object>
91+
</child>
92+
</object>
93+
</property>
94+
</object>
95+
</property>
96+
</object>
97+
</child>
13398
```
13499

135-
We've replaced the `gtk::ApplicationWindow` with `adw::ApplicationWindow` and added an `adw::HeaderBar` to it.
136100
In order to follow the boxed list pattern, we switched to [`gtk::ListBox`](../docs/gtk4/struct.ListBox.html), set its property "selection-mode" to "none" and added the `boxed-list` style class.
137101

138102
Let's continue with `window/imp.rs`.
139103
The member variable `tasks_list` now describes a `ListBox` rather than a `ListView`.
140-
We also need to change the `ParentType` from `gtk::ApplicationWindow` to `adw::ApplicationWindow`.
141104

142105
Filename: <a class=file-link href="https://github.com/gtk-rs/gtk4-rs/blob/master/book/listings/todo/6/window/imp.rs">listings/todo/6/window/imp.rs</a>
143106

144107
```rust,no_run,noplayground
145108
{{#rustdoc_include ../listings/todo/6/window/imp.rs:window}}
146109
```
147110

148-
We don't override any function of `adw::ApplicationWindow`, but we still have to add the empty `impl`.
149-
150-
Filename: <a class=file-link href="https://github.com/gtk-rs/gtk4-rs/blob/master/book/listings/todo/6/window/imp.rs">listings/todo/6/window/imp.rs</a>
151111

152-
```rust,no_run,noplayground
153-
{{#rustdoc_include ../listings/todo/6/window/imp.rs:AdwApplicationWindowImpl}}
154-
```
155112

156113
We now move on to `window/mod.rs`.
157-
First, we add `adw::ApplicationWindow` to our list of derived classes.
158-
159-
Filename: <a class=file-link href="https://github.com/gtk-rs/gtk4-rs/blob/master/book/listings/todo/6/window/mod.rs">listings/todo/6/window/mod.rs</a>
160-
161-
```rust,no_run,noplayground
162-
{{#rustdoc_include ../listings/todo/6/window/mod.rs:glib_wrapper}}
163-
```
164-
165114
`ListBox` supports models just fine, but without any widget recycling we don't need factories anymore.
166115
`setup_factory` can therefore be safely deleted.
167116
To setup the `ListBox`, we call `bind_model` in `setup_tasks`.
@@ -200,6 +149,6 @@ Filename: <a class=file-link href="https://github.com/gtk-rs/gtk4-rs/blob/master
200149
{{#rustdoc_include ../listings/todo/6/window/mod.rs:set_task_list_visible}}
201150
```
202151

203-
Here you can see how this version of the todo app compares to the last iteration.
152+
This is how the boxed list style looks like in our app.
204153

205-
<div style="text-align:center"><img src="img/todo_change_5_6.png"/></div>
154+
<div style="text-align:center"><img src="img/todo_6.png"/></div>

0 commit comments

Comments
 (0)