Add screenshorts to the first steps document

This commit is contained in:
Markus Gans 2020-02-04 00:09:06 +01:00
parent 057c295af6
commit 9221703a40
11 changed files with 64 additions and 7 deletions

View File

@ -1,3 +1,6 @@
2020-02-04 Markus Gans <guru.mail@muenster.de>
* Add screenshorts to the first steps document
2020-02-02 Markus Gans <guru.mail@muenster.de> 2020-02-02 Markus Gans <guru.mail@muenster.de>
* The methods clear() and remove() were added to FListView * The methods clear() and remove() were added to FListView
* Add some const type qualifiers * Add some const type qualifiers

View File

@ -50,6 +50,12 @@ int main (int argc, char* argv[])
return app.exec(); return app.exec();
} }
``` ```
<figure class="image">
<img src="first-steps_dialog.cpp.png" alt="dialog.cpp">
<figcaption>Figure 1. A blank dialog</figcaption>
</figure>
<br />
*(Note: You can close the dialog with the mouse, *(Note: You can close the dialog with the mouse,
<kbd>Shift</kbd>+<kbd>F10</kbd> or <kbd>Ctrl</kbd>+<kbd>^</kbd>)* <kbd>Shift</kbd>+<kbd>F10</kbd> or <kbd>Ctrl</kbd>+<kbd>^</kbd>)*
@ -191,6 +197,12 @@ int main (int argc, char* argv[])
return app.exec(); return app.exec();
} }
``` ```
<figure class="image">
<img src="first-steps_memory.cpp.png" alt="memory.cpp">
<figcaption>Figure 2. FObject manages its child objects</figcaption>
</figure>
<br />
*(Note: You can close the window with the mouse, *(Note: You can close the window with the mouse,
<kbd>Shift</kbd>+<kbd>F10</kbd> or <kbd>Ctrl</kbd>+<kbd>^</kbd>)* <kbd>Shift</kbd>+<kbd>F10</kbd> or <kbd>Ctrl</kbd>+<kbd>^</kbd>)*
@ -319,6 +331,12 @@ int main (int argc, char* argv[])
return app.exec(); return app.exec();
} }
``` ```
<figure class="image">
<img src="first-steps_timer.cpp.png" alt="timer.cpp">
<figcaption>Figure 3. FObject::onTimer event handler</figcaption>
</figure>
<br />
*(Note: You can close the window with the mouse, *(Note: You can close the window with the mouse,
<kbd>Shift</kbd>+<kbd>F10</kbd> or <kbd>Ctrl</kbd>+<kbd>^</kbd>)* <kbd>Shift</kbd>+<kbd>F10</kbd> or <kbd>Ctrl</kbd>+<kbd>^</kbd>)*
@ -477,6 +495,12 @@ int main (int argc, char* argv[])
return app.exec(); return app.exec();
} }
``` ```
<figure class="image">
<img src="first-steps_callback-function.cpp.png" alt="callback-function.cpp">
<figcaption>Figure 4. Button with a callback function</figcaption>
</figure>
<br />
*(Note: You can close the dialog with the mouse, *(Note: You can close the dialog with the mouse,
<kbd>Shift</kbd>+<kbd>F10</kbd> or <kbd>Ctrl</kbd>+<kbd>^</kbd>)* <kbd>Shift</kbd>+<kbd>F10</kbd> or <kbd>Ctrl</kbd>+<kbd>^</kbd>)*
@ -535,6 +559,12 @@ int main (int argc, char* argv[])
return app.exec(); return app.exec();
} }
``` ```
<figure class="image">
<img src="first-steps_callback-lambda.cpp.png" alt="callback-lambda.cpp">
<figcaption>Figure 5. Button with lambda expression callback.</figcaption>
</figure>
<br />
*(Note: You can close the dialog with the mouse, *(Note: You can close the dialog with the mouse,
<kbd>Shift</kbd>+<kbd>F10</kbd> or <kbd>Ctrl</kbd>+<kbd>^</kbd>)* <kbd>Shift</kbd>+<kbd>F10</kbd> or <kbd>Ctrl</kbd>+<kbd>^</kbd>)*
@ -587,6 +617,12 @@ int main (int argc, char* argv[])
return app.exec(); return app.exec();
} }
``` ```
<figure class="image">
<img src="first-steps_callback-method.cpp.png" alt="callback-method.cpp">
<figcaption>Figure 6. Button with a callback method</figcaption>
</figure>
<br />
*(Note: You can close the window with the mouse, *(Note: You can close the window with the mouse,
<kbd>Shift</kbd>+<kbd>F10</kbd> or <kbd>Ctrl</kbd>+<kbd>^</kbd>)* <kbd>Shift</kbd>+<kbd>F10</kbd> or <kbd>Ctrl</kbd>+<kbd>^</kbd>)*
@ -619,7 +655,7 @@ class dialogWidget : public FDialog
{ {
setGeometry (FPoint(25, 5), FSize(22, 7)); setGeometry (FPoint(25, 5), FSize(22, 7));
setText ("Emit signal"); setText ("Emit signal");
FSize size(5, 1); const FSize size(5, 1);
label.setGeometry (FPoint(8, 1), size); label.setGeometry (FPoint(8, 1), size);
label.setAlignment (fc::alignRight); label.setAlignment (fc::alignRight);
label.setForegroundColor (fc::Black); label.setForegroundColor (fc::Black);
@ -725,6 +761,12 @@ int main (int argc, char* argv[])
return app.exec(); return app.exec();
} }
``` ```
<figure class="image">
<img src="first-steps_emit-signal.cpp.png" alt="emit-signal.cpp">
<figcaption>Figure 7. Callbacks with custom signals</figcaption>
</figure>
<br />
*(Note: You can close the window with the mouse, *(Note: You can close the window with the mouse,
<kbd>Shift</kbd>+<kbd>F10</kbd> or <kbd>Ctrl</kbd>+<kbd>^</kbd>)* <kbd>Shift</kbd>+<kbd>F10</kbd> or <kbd>Ctrl</kbd>+<kbd>^</kbd>)*
@ -762,7 +804,7 @@ If you want to ignore padding spaces, you must force this with the
<figure class="image"> <figure class="image">
<img src="widget-coordinates.svg" alt="widget-coordinates"> <img src="widget-coordinates.svg" alt="widget-coordinates">
<figcaption>Figure 1. Widget coordinates</figcaption> <figcaption>Figure 8. Widget coordinates</figcaption>
</figure> </figure>
<br /><br /> <br /><br />
@ -812,7 +854,7 @@ methods.
<figure class="image"> <figure class="image">
<img src="widget-lengths.svg" alt="widget-lengths"> <img src="widget-lengths.svg" alt="widget-lengths">
<figcaption>Figure 2. Width and height of a widget</figcaption> <figcaption>Figure 9. Width and height of a widget</figcaption>
</figure> </figure>
<br /><br /> <br /><br />
@ -865,7 +907,7 @@ absolute geometry values as a `FRect` object, you can call the method
<figure class="image"> <figure class="image">
<img src="widget-geometry.svg" alt="widget-geometry"> <img src="widget-geometry.svg" alt="widget-geometry">
<figcaption>Figure 3. Geometry of widgets</figcaption> <figcaption>Figure 10. Geometry of widgets</figcaption>
</figure> </figure>
<br /><br /> <br /><br />
@ -946,11 +988,11 @@ class dialogWidget : public FDialog
void adjustWidgets() void adjustWidgets()
{ {
auto bx = int(getWidth() - button.getWidth() - 3); const auto bx = int(getWidth() - button.getWidth() - 3);
auto by = int(getHeight() - 4); const auto by = int(getHeight() - 4);
button.setPos (FPoint(bx, by), false); button.setPos (FPoint(bx, by), false);
input.setWidth (getWidth() - 4); input.setWidth (getWidth() - 4);
auto ly = int(getHeight() / 2) - 1; const auto ly = int(getHeight() / 2) - 1;
input.setY (ly, false); input.setY (ly, false);
} }
@ -996,6 +1038,12 @@ int main (int argc, char* argv[])
return app.exec(); return app.exec();
} }
``` ```
<figure class="image">
<img src="first-steps_size-adjustment.cpp.png" alt="size-adjustment.cpp">
<figcaption>Figure 11. Dynamic layout</figcaption>
</figure>
<br />
*(Note: You can close the window with the mouse, *(Note: You can close the window with the mouse,
<kbd>Shift</kbd>+<kbd>F10</kbd> or <kbd>Ctrl</kbd>+<kbd>^</kbd>)* <kbd>Shift</kbd>+<kbd>F10</kbd> or <kbd>Ctrl</kbd>+<kbd>^</kbd>)*
@ -1118,6 +1166,12 @@ int main (int argc, char* argv[])
return app.exec(); return app.exec();
} }
``` ```
<figure class="image">
<img src="first-steps_scrollview.cpp.png" alt="scrollview.cpp">
<figcaption>Figure 12. Dialog with a scrolling viewport</figcaption>
</figure>
<br />
*(Note: You can close the window with the mouse, *(Note: You can close the window with the mouse,
<kbd>Shift</kbd>+<kbd>F10</kbd> or <kbd>Ctrl</kbd>+<kbd>^</kbd>)* <kbd>Shift</kbd>+<kbd>F10</kbd> or <kbd>Ctrl</kbd>+<kbd>^</kbd>)*

Binary file not shown.

After

Width:  |  Height:  |  Size: 873 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 633 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 469 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 390 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 491 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 863 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 908 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 723 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 405 B