A Simple GUI Library

Let us design a classical GUI library using our new knowledge of traits and trait objects.

We will have a number of widgets in our library:

  • Window: has a title and contains other widgets.
  • Button: has a label and a callback function which is invoked when the button is pressed.
  • Label: has a label.

The widgets will implement a Widget trait, see below.

Copy the code below to https://play.rust-lang.org/, fill in the missing draw_into methods so that you implement the Widget trait:

  1. // TODO: remove this when you're done with your implementation.
  2. #![allow(unused_imports, unused_variables, dead_code)]
  4. pub trait Widget {
  5.     /// Natural width of `self`.
  6.     fn width(&self) -> usize;
  8.     /// Draw the widget into a buffer.
  9.     fn draw_into(&self, buffer: &mut dyn std::fmt::Write);
  11.     /// Draw the widget on standard output.
  12.     fn draw(&self) {
  13.         let mut buffer = String::new();
  14.         self.draw_into(&mut buffer);
  15.         println!("{buffer}");
  16.     }
  17. }
  19. pub struct Label {
  20.     label: String,
  21. }
  23. impl Label {
  24.     fn new(label: &str) -> Label {
  25.         Label {
  26.             label: label.to_owned(),
  27.         }
  28.     }
  29. }
  31. pub struct Button {
  32.     label: Label,
  33.     callback: Box<dyn FnMut()>,
  34. }
  36. impl Button {
  37.     fn new(label: &str, callback: Box<dyn FnMut()>) -> Button {
  38.         Button {
  39.             label: Label::new(label),
  40.             callback,
  41.         }
  42.     }
  43. }
  45. pub struct Window {
  46.     title: String,
  47.     widgets: Vec<Box<dyn Widget>>,
  48. }
  50. impl Window {
  51.     fn new(title: &str) -> Window {
  52.         Window {
  53.             title: title.to_owned(),
  54.             widgets: Vec::new(),
  55.         }
  56.     }
  58.     fn add_widget(&mut self, widget: Box<dyn Widget>) {
  59.         self.widgets.push(widget);
  60.     }
  61. }
  64. impl Widget for Label {
  65.     fn width(&self) -> usize {
  66.         unimplemented!()
  67.     }
  69.     fn draw_into(&self, buffer: &mut dyn std::fmt::Write) {
  70.         unimplemented!()
  71.     }
  72. }
  74. impl Widget for Button {
  75.     fn width(&self) -> usize {
  76.         unimplemented!()
  77.     }
  79.     fn draw_into(&self, buffer: &mut dyn std::fmt::Write) {
  80.         unimplemented!()
  81.     }
  82. }
  84. impl Widget for Window {
  85.     fn width(&self) -> usize {
  86.         unimplemented!()
  87.     }
  89.     fn draw_into(&self, buffer: &mut dyn std::fmt::Write) {
  90.         unimplemented!()
  91.     }
  92. }
  94. fn main() {
  95.     let mut window = Window::new("Rust GUI Demo 1.23");
  96.     window.add_widget(Box::new(Label::new("This is a small text GUI demo.")));
  97.     window.add_widget(Box::new(Button::new(
  98.         "Click me!",
  99.         Box::new(|| println!("You clicked the button!")),
  100.     )));
  101.     window.draw();
  102. }

The output of the above program can be something simple like this:

======== Rust GUI Demo 1.23 ======== This is a small text GUI demo. | Click me! |

If you want to draw aligned text, you can use the fill/alignment formatting operators. In particular, notice how you can pad with different characters (here a '/') and how you can control alignment:

  1. fn main() {
  2.     let width = 10;
  3.     println!("left aligned:  |{:/<width$}|", "foo");
  4.     println!("centered:      |{:/^width$}|", "foo");
  5.     println!("right aligned: |{:/>width$}|", "foo");
  6. }

Using such alignment tricks, you can for example produce output like this:

+--------------------------------+ | Rust GUI Demo 1.23 | +================================+ | This is a small text GUI demo. | | +-----------+ | | | Click me! | | | +-----------+ | +--------------------------------+