Merge pull request #29 from kas-gui/push-rvxupnyqrsql

Update tutorials for kas 0.17

Author: dhardy

.github/workflows/test.yml

@@ -23,7 +23,9 @@ jobs:
           override: true
           components: rustfmt
       - name: Install dependencies
-        run: sudo apt-get install -y libxkbcommon-dev libxcb-shape0-dev libxcb-xfixes0-dev
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y libfontconfig1-dev
       - name: Test examples
         run: |
           cargo fmt -- --check

Cargo.toml

@@ -8,5 +8,5 @@ publish = false
 
 [dependencies]
 env_logger = "0.11"
-kas = "0.16"
-kas-wgpu = "0.16"
+kas = { version = "0.17.0", features = ["view"] }
+kas-wgpu = "0.17.1"

book.toml

@@ -1,5 +1,3 @@
 [book]
 authors = ["Diggory Hardy"]
-multilingual = false
-src = "src"
 title = "Kas Tutorials"

examples/calculator.rs

@@ -3,13 +3,14 @@ use std::str::FromStr;
 
 use kas::event::NamedKey;
 use kas::prelude::*;
-use kas::widgets::{AccessLabel, Adapt, Button, EditBox, column, grid};
+use kas::theme::FrameStyle;
+use kas::widgets::{AccessLabel, Adapt, Button, EditBox, Frame, column, grid};
 
 type Key = kas::event::Key<kas::event::SmolStr>;
 
 fn key_button(label: &str) -> Button<AccessLabel> {
     let string = AccessString::from(label);
-    let key = string.key().unwrap().clone();
+    let key = string.key().unwrap().0.clone();
     Button::label_msg(string, key)
 }
 fn key_button_with(label: &str, key: Key) -> Button<AccessLabel> {
@@ -21,9 +22,9 @@ fn calc_ui() -> Window<()> {
     let display = EditBox::string(|calc: &Calculator| calc.display())
         .with_multi_line(true)
         .with_lines(3.0, 3.0)
-        .with_width_em(5.0, 10.0);
+        .with_width_em(5.0, 10.0)
+        .with_margin_style(kas::theme::MarginStyle::None);
 
-    // We use map_any to avoid passing input data (not wanted by buttons):
     let buttons = grid! {
         // Key bindings: C, Del
         (0, 0) => Button::label_msg("&clear", Key::Named(NamedKey::Clear))
@@ -37,18 +38,19 @@ fn calc_ui() -> Window<()> {
         (0, 1) => key_button("&7"),
         (1, 1) => key_button("&8"),
         (2, 1) => key_button("&9"),
-        (3, 1..3) => key_button("&+"),
+        (3, 1..=2) => key_button("&+"),
         (0, 2) => key_button("&4"),
         (1, 2) => key_button("&5"),
         (2, 2) => key_button("&6"),
         (0, 3) => key_button("&1"),
         (1, 3) => key_button("&2"),
         (2, 3) => key_button("&3"),
-        (3, 3..5) => key_button_with("&=", NamedKey::Enter.into()),
-        (0..2, 4) => key_button("&0"),
+        (3, 3..=4) => key_button_with("&=", NamedKey::Enter.into()),
+        (0..=1, 4) => key_button("&0"),
         (2, 4) => key_button("&."),
-    }
-    .map_any();
+    };
+    // We use map_any to avoid passing input data (not wanted by buttons):
+    let buttons = Frame::new(buttons).with_style(FrameStyle::None).map_any();
 
     let ui = Adapt::new(column![display, buttons], Calculator::new())
         .on_message(|_, calc, key| calc.handle(key));

examples/counter.rs

@@ -1,17 +1,17 @@
 use kas::prelude::*;
-use kas::widgets::{Button, column, format_value, row};
+use kas::widgets::{Button, column, format_label, row};
 
 #[derive(Clone, Debug)]
 struct Increment(i32);
 
 fn counter() -> impl Widget<Data = ()> {
-    let buttons = row![
-        Button::label_msg("−", Increment(-1)),
-        Button::label_msg("+", Increment(1)),
-    ];
     let tree = column![
-        format_value!("{}").align(AlignHints::CENTER),
-        buttons.map_any(),
+        format_label!("{}").align(AlignHints::CENTER),
+        row![
+            Button::label_msg("−", Increment(-1)),
+            Button::label_msg("+", Increment(1)),
+        ]
+        .map_any(),
     ];
 
     tree.with_state(0)

examples/custom-widget.rs

@@ -1,5 +1,5 @@
 use kas::prelude::*;
-use kas::widgets::{AccessLabel, Button, Row, Text, format_value};
+use kas::widgets::{AccessLabel, Button, Row, Text, format_label};
 
 #[derive(Clone, Debug)]
 struct Increment(i32);
@@ -23,7 +23,7 @@ mod Counter {
         fn new(count: i32) -> Self {
             Counter {
                 core: Default::default(),
-                display: format_value!("{}"),
+                display: format_label!("{}"),
                 buttons: Row::new([
                     Button::label_msg("-", Increment(-1)),
                     Button::label_msg("+", Increment(1)),

examples/data-list-view.rs

@@ -1,7 +1,8 @@
 use kas::prelude::*;
-use kas::view::{DataGenerator, DataLen, GeneratorChanges, GeneratorClerk};
+use kas::view::clerk::{Clerk, GeneratorChanges, IndexedGenerator, Len};
 use kas::view::{Driver, ListView};
-use kas::widgets::{column, *};
+use kas::widgets::edit::{EditBox, EditGuard, Editor};
+use kas::widgets::{Label, RadioButton, ScrollRegion, Separator, Text, column};
 use std::collections::HashMap;
 
 #[derive(Clone, Debug)]
@@ -43,7 +44,7 @@ impl MyData {
                 self.last_key = self.last_key.max(index);
                 self.strings.insert(index, text);
             }
-        };
+        }
     }
 }
 
@@ -54,19 +55,17 @@ struct ListEntryGuard(usize);
 impl EditGuard for ListEntryGuard {
     type Data = MyItem;
 
-    fn update(edit: &mut EditField<Self>, cx: &mut ConfigCx, data: &MyItem) {
-        if !edit.has_edit_focus() {
-            edit.set_string(cx, data.1.to_string());
-        }
+    fn update(&mut self, edit: &mut Editor, cx: &mut ConfigCx, data: &MyItem) {
+        edit.set_string(cx, data.1.to_string());
     }
 
-    fn activate(edit: &mut EditField<Self>, cx: &mut EventCx, _: &MyItem) -> IsUsed {
-        cx.push(Control::Select(edit.guard.0));
+    fn activate(&mut self, _: &mut Editor, cx: &mut EventCx, _: &MyItem) -> IsUsed {
+        cx.push(Control::Select(self.0));
         Used
     }
 
-    fn edit(edit: &mut EditField<Self>, cx: &mut EventCx, _: &MyItem) {
-        cx.push(Control::Update(edit.guard.0, edit.clone_string()));
+    fn edit(&mut self, edit: &mut Editor, cx: &mut EventCx, _: &MyItem) {
+        cx.push(Control::Update(self.0, edit.clone_string()));
     }
 }
 
@@ -95,6 +94,8 @@ mod ListEntry {
 
 struct ListEntryDriver;
 impl Driver<usize, MyItem> for ListEntryDriver {
+    const TAB_NAVIGABLE: bool = true;
+
     type Widget = ListEntry;
 
     fn make(&mut self, key: &usize) -> Self::Widget {
@@ -107,7 +108,7 @@ impl Driver<usize, MyItem> for ListEntryDriver {
                 move |_, data: &MyItem| data.0 == n,
                 move || Control::Select(n),
             ),
-            edit: EditBox::new(ListEntryGuard(n)).with_width_em(18.0, 30.0),
+            edit: EditBox::new(ListEntryGuard(n)),
         }
     }
 
@@ -118,40 +119,36 @@ impl Driver<usize, MyItem> for ListEntryDriver {
 
 #[derive(Default)]
 struct Generator;
-impl DataGenerator<usize> for Generator {
+impl Clerk<usize> for Generator {
     type Data = MyData;
-    type Key = usize;
     type Item = MyItem;
 
+    fn len(&self, data: &Self::Data, lbound: usize) -> Len<usize> {
+        Len::LBound((data.active.max(data.last_key) + 1).max(lbound))
+    }
+}
+impl IndexedGenerator<usize> for Generator {
     fn update(&mut self, data: &Self::Data) -> GeneratorChanges<usize> {
         // We assume that `MyData::handle` has only been called once since this
         // method was last called.
         data.last_change.clone()
     }
 
-    fn len(&self, data: &Self::Data, lbound: usize) -> DataLen<usize> {
-        DataLen::LBound((data.active.max(data.last_key) + 1).max(lbound))
-    }
-
-    fn key(&self, _: &Self::Data, index: usize) -> Option<Self::Key> {
-        Some(index)
-    }
-
-    fn generate(&self, data: &Self::Data, key: &usize) -> Self::Item {
-        (data.active, data.get_string(*key))
+    fn generate(&self, data: &Self::Data, index: usize) -> Self::Item {
+        (data.active, data.get_string(index))
     }
 }
 
 fn main() -> kas::runner::Result<()> {
     env_logger::init();
 
-    let clerk = GeneratorClerk::new(Generator::default());
+    let clerk = Generator::default();
     let list = ListView::down(clerk, ListEntryDriver);
     let tree = column![
         "Contents of selected entry:",
-        Text::new(|_, data: &MyData| data.get_string(data.active)),
+        Text::new_gen(|_, data: &MyData| data.get_string(data.active)),
         Separator::new(),
-        ScrollBars::new(list).with_fixed_bars(false, true),
+        ScrollRegion::new_viewport(list).with_fixed_bars(false, true),
     ];
 
     let ui = tree

examples/sync-counter.rs

@@ -1,4 +1,4 @@
-use kas::widgets::{AdaptWidget, Button, Label, Slider, column, format_data, row};
+use kas::widgets::{AdaptWidget, Button, Label, Slider, column, format_label, row};
 use kas::window::Window;
 
 #[derive(Clone, Debug)]
@@ -7,7 +7,7 @@ struct Increment(i32);
 #[derive(Clone, Copy, Debug)]
 struct Count(i32);
 impl kas::runner::AppData for Count {
-    fn handle_messages(&mut self, messages: &mut kas::runner::MessageStack) {
+    fn handle_message(&mut self, messages: &mut impl kas::runner::ReadMessage) {
         if let Some(Increment(add)) = messages.try_pop() {
             self.0 += add;
         }
@@ -24,8 +24,8 @@ fn counter(title: &str) -> Window<Count> {
 
     let slider = Slider::right(1..=10, |_, data: &Data| data.1).with_msg(SetValue);
     let ui = column![
-        format_data!(data: &Data, "Count: {}", data.0.0),
-        row![slider, format_data!(data: &Data, "{}", data.1)],
+        format_label!(data: &Data, "Count: {}", data.0.0),
+        row![slider, format_label!(data: &Data, "{}", data.1)],
         row![
             Button::new(Label::new_any("Sub")).with(|cx, data: &Data| cx.push(Increment(-data.1))),
             Button::new(Label::new_any("Add")).with(|cx, data: &Data| cx.push(Increment(data.1))),
@@ -34,7 +34,7 @@ fn counter(title: &str) -> Window<Count> {
 
     let ui = ui
         .with_state(initial)
-        .on_update(|_, state, count| state.0 = *count)
+        .on_update(|_, _, state, count| state.0 = *count)
         .on_message(|_, state, SetValue(v)| state.1 = v);
     Window::new(ui, title).escapable()
 }

src/calculator.md

@@ -5,19 +5,19 @@
 ![Calculator](screenshots/calculator.png)
 
 ```rust
-# extern crate kas;
 use std::num::ParseFloatError;
 use std::str::FromStr;
 
 use kas::event::NamedKey;
 use kas::prelude::*;
-use kas::widgets::{AccessLabel, Adapt, Button, EditBox, column, grid};
+use kas::theme::FrameStyle;
+use kas::widgets::{AccessLabel, Adapt, Button, EditBox, Frame, column, grid};
 
 type Key = kas::event::Key<kas::event::SmolStr>;
 
 fn key_button(label: &str) -> Button<AccessLabel> {
     let string = AccessString::from(label);
-    let key = string.key().unwrap().clone();
+    let key = string.key().unwrap().0.clone();
     Button::label_msg(string, key)
 }
 fn key_button_with(label: &str, key: Key) -> Button<AccessLabel> {
@@ -29,7 +29,8 @@ fn calc_ui() -> Window<()> {
     let display = EditBox::string(|calc: &Calculator| calc.display())
         .with_multi_line(true)
         .with_lines(3.0, 3.0)
-        .with_width_em(5.0, 10.0);
+        .with_width_em(5.0, 10.0)
+        .with_margin_style(kas::theme::MarginStyle::None);
 
     let buttons = grid! {
         // Key bindings: C, Del
@@ -44,18 +45,19 @@ fn calc_ui() -> Window<()> {
         (0, 1) => key_button("&7"),
         (1, 1) => key_button("&8"),
         (2, 1) => key_button("&9"),
-        (3, 1..3) => key_button("&+"),
+        (3, 1..=2) => key_button("&+"),
         (0, 2) => key_button("&4"),
         (1, 2) => key_button("&5"),
         (2, 2) => key_button("&6"),
         (0, 3) => key_button("&1"),
         (1, 3) => key_button("&2"),
         (2, 3) => key_button("&3"),
-        (3, 3..5) => key_button_with("&=", NamedKey::Enter.into()),
-        (0..2, 4) => key_button("&0"),
+        (3, 3..=4) => key_button_with("&=", NamedKey::Enter.into()),
+        (0..=1, 4) => key_button("&0"),
         (2, 4) => key_button("&."),
-    }
-    .map_any();
+    };
+    // We use map_any to avoid passing input data (not wanted by buttons):
+    let buttons = Frame::new(buttons).with_style(FrameStyle::None).map_any();
 
     let ui = Adapt::new(column![display, buttons], Calculator::new())
         .on_message(|_, calc, key| calc.handle(key));
@@ -123,7 +125,6 @@ To make the calculator keyboard-accessible, we'll use *access keys* (see more on
 
 To make constructing buttons easier, we define some helper functions. (These facilitate defining the button *message* more than they do the *access keys*.)
 ```rust
-# extern crate kas;
 # use kas::text::AccessString;
 # use kas::widgets::{AccessLabel, Button};
 # type Key = kas::event::Key<kas::event::SmolStr>;
@@ -141,7 +142,6 @@ fn key_button_with(label: &str, key: Key) -> Button<AccessLabel> {
 
 Normally, access keys are only active while holding <kbd>Alt</kbd>. To avoid this requirement we call [`with_alt_bypass`]. Further, we disable <kbd>Tab</kbd> key navigation with [`without_nav_focus`] and ensure that the window can be closed with the <kbd>Esc</kbd> key.
 ```rust
-# extern crate kas;
 # use kas::{Widget, widgets::{Label, Adapt}, window::Window};
 # #[derive(Debug)]
 # struct Calculator;
@@ -163,10 +163,10 @@ Normally, access keys are only active while holding <kbd>Alt</kbd>. To avoid thi
 
 We already saw column and row layouts. This time, we'll use [`grid!`] for layout.
 ```rust
-# extern crate kas;
 # use kas::event::NamedKey;
 # use kas::prelude::*;
-# use kas::widgets::{AccessLabel, Button, grid};
+# use kas::widgets::{AccessLabel, Button, Frame, grid};
+# use kas::theme::FrameStyle;
 # type Key = kas::event::Key<kas::event::SmolStr>;
 # fn key_button(label: &str) -> Button<AccessLabel> {
 #     let string = AccessString::from(label);
@@ -190,18 +190,19 @@ We already saw column and row layouts. This time, we'll use [`grid!`] for layout
         (0, 1) => key_button("&7"),
         (1, 1) => key_button("&8"),
         (2, 1) => key_button("&9"),
-        (3, 1..3) => key_button("&+"),
+        (3, 1..=2) => key_button("&+"),
         (0, 2) => key_button("&4"),
         (1, 2) => key_button("&5"),
         (2, 2) => key_button("&6"),
         (0, 3) => key_button("&1"),
         (1, 3) => key_button("&2"),
         (2, 3) => key_button("&3"),
-        (3, 3..5) => key_button_with("&=", NamedKey::Enter.into()),
-        (0..2, 4) => key_button("&0"),
+        (3, 3..=4) => key_button_with("&=", NamedKey::Enter.into()),
+        (0..=1, 4) => key_button("&0"),
         (2, 4) => key_button("&."),
-    }
-    .map_any();
+    };
+    // We use map_any to avoid passing input data (not wanted by buttons):
+    let buttons = Frame::new(buttons).with_style(FrameStyle::None).map_any();
 # buttons
 # }
 ```