Skip to content

Notes App#

Example's page

This page describes an example listed in app category.

Note taking app that demonstrates usage of AListModel, AProperty, user data saving and loading.

The functionality includes loading, saving, creating and deleting notes, as well as marking the UI state as dirty when changes are made.

Models#

Note struct describes a note:

@dontinclude examples/app/notes/src/main.cpp @skip struct Note @until };

The JSON representation is described as follows:

@line AJSON

MainWindow class#

The MainWindow class is responsible for managing the overall view and logic related to notes.

Fields#

  • mNotes: a member that holds a list of notes.
  • mCurrentNote: a property holding a pointer to the currently selected note.
  • mDirty: a boolean property indicating whether there are unsaved changes in the application.

Methods#

  • load(): loads notes from a JSON file.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
void load() {
    try {
        if (!"notes.json"_path.isRegularFileExists()) {
            return;
        }
        aui::from_json(AJson::fromStream(AFileInputStream("notes.json")), mNotes);
    } catch (const AException& e) {
        ALogger::info(LOG_TAG) << "Can't load notes: " << e;
    }
}
  • save(): saves the current list of notes to a JSON file. Also resets the dirty state.
1
2
3
4
void save() {
    AFileOutputStream("notes.json") << aui::to_json(*mNotes);
    mDirty = false;
}
  • newNote(): creates a new note with a default title and adds it to the list of notes. Sets this note as the currently selected note.
1
2
3
4
5
void newNote() {
    auto note = aui::ptr::manage_shared(new Note { .title = "Untitled" });
    mNotes.writeScope()->push_back(note);
    mCurrentNote = std::move(note);
}
  • deleteCurrentNote(): deletes the current note, if one is selected. Prompts the user for confirmation before proceeding with deletion.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
void deleteCurrentNote() {
    if (mCurrentNote == nullptr) {
        return;
    }
    if (AMessageBox::show(
            this, "Do you really want to delete this note?",
            "{}\n\nThis operation is irreversible!"_format((*mCurrentNote)->title), AMessageBox::Icon::NONE,
            AMessageBox::Button::OK_CANCEL) != AMessageBox::ResultButton::OK) {
        return;
    }

    auto it = ranges::find(*mNotes, *mCurrentNote);
    it = mNotes.writeScope()->erase(it);
    mCurrentNote = it != mNotes->end() ? *it : nullptr;
}
  • markDirty(): marks the application state as dirty when changes made that require saving. Such a simple operation is extracted to a dedicated method, so the signals can be easily connected to. @skip markDirty() @until }

UI Components and Layout#

@dontinclude examples/app/notes/src/main.cpp - TitleTextArea: derivative of ATextArea that focuses next text area when Enter is pressed. @skip TitleTextArea @until }; - 'New note' button: creates a new note using newNote(). - 'Save' button: saves application data via save() method. It's enabled state is controlled by mDirty property. - 'Delete' button: deletes current note via deleteCurrentNote() method. It's enabled state is controlled by mCurrentNote property. - Previews: contains dynamically generated previews of all notes, allowing users to select the one they want to view or edit.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
AScrollArea::Builder()
    .withContents(
    AUI_DECLARATIVE_FOR(note, *mNotes, AVerticalLayout) {
        observeChangesForDirty(note);
        return notePreview(note) AUI_LET {
            connect(it->clicked, [this, note] { mCurrentNote = note; });
            it& mCurrentNote > [note](AView& view, const _<Note>& currentNote) {
                ALOG_DEBUG(LOG_TAG) << "currentNote == note " << currentNote << " == " << note;
                view.setAssName(".plain_bg", currentNote == note);
            };
        };
    })
    .build(),

notePreview() function generates a single preview for a note.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
_<AView> notePreview(const _<Note>& note) {
    struct StringOneLinePreview {
        AString operator()(const AString& s) const {
            if (s.empty()) {
                return "Empty";
            }
            return s.restrictLength(100, "").replacedAll('\n', ' ');
        }
    };

    return Vertical {
        Label {} AUI_WITH_STYLE { FontSize { 10_pt }, ATextOverflow::ELLIPSIS } &
            note->title.readProjected(StringOneLinePreview {}),
        Label {} AUI_WITH_STYLE {
                  ATextOverflow::ELLIPSIS,
                  Opacity { 0.7f },
                } &
            note->content.readProjected(StringOneLinePreview {}),
    } AUI_WITH_STYLE {
        Padding { 4_dp, 8_dp },
        BorderRadius { 8_dp },
        Margin { 4_dp, 8_dp },
    };
}
  • Main area of the application is occupied by note editor generated by noteEditor() function. noteEditor() consists of 2 text areas - one for title, one for contents.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
_<AView> noteEditor(const _<Note>& note) {
    if (note == nullptr) {
        return Centered { Label { "No note selected" } };
    }
    return AScrollArea::Builder().withContents(
        Vertical {
          _new<TitleTextArea>("Untitled") AUI_LET {
                  it->setCustomStyle({ FontSize { 14_pt }, Expanding { 1, 0 } });
                  AObject::biConnect(note->title, it->text());
                  if (note->content->empty()) {
                      it->focus();
                  }
              },
          _new<ATextArea>("Text") AUI_WITH_STYLE { Expanding() } && note->content,
        } AUI_WITH_STYLE {
          Padding { 8_dp, 16_dp },
        });
}

Source Code#

Repository

CMakeLists.txt#

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
cmake_minimum_required(VERSION 3.16)

# Uncomment this code to pull AUI:
#
# file(
#         DOWNLOAD
#         https://raw.githubusercontent.com/aui-framework/aui/master/aui.boot.cmake
#         ${CMAKE_CURRENT_BINARY_DIR}/aui.boot.cmake)
# include(${CMAKE_CURRENT_BINARY_DIR}/aui.boot.cmake)
#
# auib_import(aui https://github.com/aui-framework/aui
#             COMPONENTS core views json)

aui_executable(aui.example.notes)
aui_compile_assets(aui.example.notes)

aui_link(aui.example.notes PUBLIC aui::core aui::views aui::json)

src/main.cpp#

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
#include <range/v3/all.hpp>

#include <AUI/Platform/AWindow.h>
#include <AUI/Platform/Entry.h>
#include <AUI/Util/UIBuildingHelpers.h>
#include <AUI/View/AScrollArea.h>
#include <AUI/View/ASplitter.h>
#include <AUI/View/ATextArea.h>
#include <AUI/Model/AListModel.h>
#include "AUI/View/AButton.h"
#include "AUI/View/ADrawableView.h"
#include "AUI/Json/Conversion.h"
#include "AUI/IO/AFileInputStream.h"
#include "AUI/Reflect/for_each_field.h"
#include "AUI/Platform/AMessageBox.h"

#include <AUI/View/AForEachUI.h>
#include <AUI/Util/AWordWrappingEngineImpl.h>

static constexpr auto LOG_TAG = "Notes";

using namespace declarative;
using namespace ass;

struct Note {
    AProperty<AString> title;
    AProperty<AString> content;
};

AJSON_FIELDS(Note, AJSON_FIELDS_ENTRY(title) AJSON_FIELDS_ENTRY(content))

class TitleTextArea : public ATextArea {
public:
    using ATextArea::ATextArea;
    void onCharEntered(AChar c) override {
        if (c == '\r') {
            AWindow::current()->focusNextView();
            return;
        }
        ATextArea::onCharEntered(c);
    }
};

/// [notePreview]
_<AView> notePreview(const _<Note>& note) {
    struct StringOneLinePreview {
        AString operator()(const AString& s) const {
            if (s.empty()) {
                return "Empty";
            }
            return s.restrictLength(100, "").replacedAll('\n', ' ');
        }
    };

    return Vertical {
        Label {} AUI_WITH_STYLE { FontSize { 10_pt }, ATextOverflow::ELLIPSIS } &
            note->title.readProjected(StringOneLinePreview {}),
        Label {} AUI_WITH_STYLE {
                  ATextOverflow::ELLIPSIS,
                  Opacity { 0.7f },
                } &
            note->content.readProjected(StringOneLinePreview {}),
    } AUI_WITH_STYLE {
        Padding { 4_dp, 8_dp },
        BorderRadius { 8_dp },
        Margin { 4_dp, 8_dp },
    };
}
/// [notePreview]

/// [noteEditor]
_<AView> noteEditor(const _<Note>& note) {
    if (note == nullptr) {
        return Centered { Label { "No note selected" } };
    }
    return AScrollArea::Builder().withContents(
        Vertical {
          _new<TitleTextArea>("Untitled") AUI_LET {
                  it->setCustomStyle({ FontSize { 14_pt }, Expanding { 1, 0 } });
                  AObject::biConnect(note->title, it->text());
                  if (note->content->empty()) {
                      it->focus();
                  }
              },
          _new<ATextArea>("Text") AUI_WITH_STYLE { Expanding() } && note->content,
        } AUI_WITH_STYLE {
          Padding { 8_dp, 16_dp },
        });
}
/// [noteEditor]

class MainWindow : public AWindow {
public:
    MainWindow() : AWindow("Notes") {
        setExtraStylesheet(AStylesheet {
          {
            c(".plain_bg"),
            BackgroundSolid { AColor::WHITE },
          },
          {
            t<AWindow>(),
            Padding { 0 },
          },
        });
        load();

        connect(mNotes.changed, me::markDirty);

        setContents(Vertical {
          ASplitter::Horizontal()
                  .withItems({
                    Vertical {
                      Centered {
                        Horizontal {
                          Button { Icon { ":img/save.svg" }, Label { "Save" } }.connect(&AView::clicked, me::save) &
                              mDirty > &AView::setEnabled,
                          Button { Icon { ":img/new.svg" }, Label { "New Note" } }.connect(
                              &AView::clicked, me::newNote),
                        },
                      },
                      /// [scrollarea]
                      AScrollArea::Builder()
                          .withContents(
                          AUI_DECLARATIVE_FOR(note, *mNotes, AVerticalLayout) {
                              observeChangesForDirty(note);
                              return notePreview(note) AUI_LET {
                                  connect(it->clicked, [this, note] { mCurrentNote = note; });
                                  it& mCurrentNote > [note](AView& view, const _<Note>& currentNote) {
                                      ALOG_DEBUG(LOG_TAG) << "currentNote == note " << currentNote << " == " << note;
                                      view.setAssName(".plain_bg", currentNote == note);
                                  };
                              };
                          })
                          .build(),
                        /// [scrollarea]
                    } AUI_WITH_STYLE { MinSize { 200_dp } },

                    Vertical::Expanding {
                      Centered {
                        Button { Icon { ":img/trash.svg" }, Label { "Delete" } }.connect(
                            &AView::clicked, me::deleteCurrentNote) &
                            mCurrentNote.readProjected([](const _<Note>& n) {
                                return n != nullptr;
                            }) > &AView::setEnabled,
                      },
                      CustomLayout::Expanding {} & mCurrentNote.readProjected(noteEditor),
                    }<< ".plain_bg" AUI_WITH_STYLE { MinSize { 200_dp } },
                  })
                  .build() AUI_WITH_STYLE { Expanding() },
        });

        if (mNotes->empty()) {
            newNote();
        }
    }

    ~MainWindow() {
        if (mDirty) {
            save();
        }
    }

    /// [load]
    void load() {
        try {
            if (!"notes.json"_path.isRegularFileExists()) {
                return;
            }
            aui::from_json(AJson::fromStream(AFileInputStream("notes.json")), mNotes);
        } catch (const AException& e) {
            ALogger::info(LOG_TAG) << "Can't load notes: " << e;
        }
    }
    /// [load]

    /// [save]
    void save() {
        AFileOutputStream("notes.json") << aui::to_json(*mNotes);
        mDirty = false;
    }
    /// [save]

    /// [newNote]
    void newNote() {
        auto note = aui::ptr::manage_shared(new Note { .title = "Untitled" });
        mNotes.writeScope()->push_back(note);
        mCurrentNote = std::move(note);
    }
    /// [newNote]

    /// [deleteCurrentNote]
    void deleteCurrentNote() {
        if (mCurrentNote == nullptr) {
            return;
        }
        if (AMessageBox::show(
                this, "Do you really want to delete this note?",
                "{}\n\nThis operation is irreversible!"_format((*mCurrentNote)->title), AMessageBox::Icon::NONE,
                AMessageBox::Button::OK_CANCEL) != AMessageBox::ResultButton::OK) {
            return;
        }

        auto it = ranges::find(*mNotes, *mCurrentNote);
        it = mNotes.writeScope()->erase(it);
        mCurrentNote = it != mNotes->end() ? *it : nullptr;
    }
    /// [deleteCurrentNote]

    void markDirty() {
        mDirty = true;
    }

    void observeChangesForDirty(const _<Note>& note) {
        aui::reflect::for_each_field_value(
                *note,
                aui::lambda_overloaded {
                        [&](auto& field) {},
                        [&](APropertyReadable auto& field) {
                            ALOG_DEBUG(LOG_TAG) << "Observing for changes " << &field;
                            AObject::connect(field.changed, me::markDirty);
                        },
                });
    }

private:
    AProperty<AVector<_<Note>>> mNotes;
    AProperty<_<Note>> mCurrentNote;
    AProperty<bool> mDirty = false;
};

AUI_ENTRY {
    auto w = _new<MainWindow>();
    w->show();
    return 0;
}