Module 4: Rich Output
The widgets in Modules 2 and 3 deal with input and data — text fields, lists, grids, file dialogs. This module is about output: displaying information in ways that go beyond plain text.
wxRuby3 provides several overlapping tools for rich output, each with a different sweet spot. Understanding which tool to reach for — and why — is the main lesson of this module.
What this module covers
Lesson 4.1 — Drawing with device contexts introduces wxRuby3’s 2D drawing API. A device context (DC) is an abstract drawing surface: the same code works whether you are painting to a panel on screen, composing a bitmap in memory, or writing to an SVG file. You will learn pens, brushes, fonts, text measurement, and coordinate arithmetic, ending with a resizable bar chart that adapts to any window size.
Lesson 4.2 — Images and bitmaps covers the two image classes in wxRuby3 — Wx::Image for loading, transforming, and saving, and Wx::Bitmap for display. You will learn the correct pattern for resizable image display (never Wx::StaticBitmap), how to scale images with aspect ratio preservation, and how to compose bitmaps off-screen using Wx::MemoryDC.
Lesson 4.3 — Rich text introduces Wx::RTC::RichTextCtrl — a full formatted text editor with inline bold, italic, font sizes, colours, and paragraph alignment. You will learn to populate it programmatically and wire up a simple formatting toolbar.
Lesson 4.4 — HtmlWindow covers Wx::HTML::HtmlWindow, a lightweight HTML renderer that handles headings, lists, tables, code blocks, and links without requiring a full browser engine. You will learn when it is appropriate and what its limitations are compared to WebView.
Lesson 4.5 — Project: Markdown editor brings the module together in a practical app: a side-by-side markdown editor and live preview. The editor panel is a Wx::TextCtrl; the preview is a Wx::HTML::HtmlWindow fed by kramdown. The app handles file open, save, and HTML export. Module 5 will replace the HtmlWindow preview with a WebView and you will see exactly what improves.
Choosing the right tool
| Need | Tool |
|---|---|
| Custom shapes, charts, diagrams | Device context (evt_paint) |
| Displaying photos or images | Wx::Image + Wx::Bitmap via evt_paint |
| Composing images programmatically | Wx::MemoryDC.draw_on |
| Editable formatted text | Wx::RTC::RichTextCtrl |
| Displaying formatted HTML you control | Wx::HTML::HtmlWindow |
| Full web content, CSS, JavaScript | Wx::WebView (Module 5) |
Prerequisites
This module assumes you have completed Module 3. The project uses the multi-file app structure from lesson 3.2, the file I/O pattern from lesson 3.4, and the callback communication pattern throughout.
The capstone requires two gems:
|
|
Or with Bundler: bundle install from the project folder.
Previous: Module 3 — Patterns and Architecture | Next: Drawing with device contexts