Skip to content

Commit

Permalink
deploy: 9d62ab8
Browse files Browse the repository at this point in the history
  • Loading branch information
hecrj committed Mar 18, 2024
1 parent be2a0f7 commit cfc522f
Show file tree
Hide file tree
Showing 3 changed files with 44 additions and 44 deletions.
28 changes: 14 additions & 14 deletions first-steps.html
Original file line number Diff line number Diff line change
Expand Up @@ -224,7 +224,7 @@ <h2 id="update-logic"><a class="header" href="#update-logic">Update Logic</a></h
and most idiomatic way to express this logic in Rust is by defining a method named <code>update</code> in our application state.</p>
<p>For our counter interface, we only need to properly increment or decrement the <code>value</code> of our <code>Counter</code> struct based on the <code>Message</code>
we just defined:</p>
<pre><code class="language-rust">impl Counter {
<pre><code class="language-rust ignore">impl Counter {
fn update(&amp;mut self, message: Message) {
match message {
Message::Increment =&gt; {
Expand All @@ -237,16 +237,16 @@ <h2 id="update-logic"><a class="header" href="#update-logic">Update Logic</a></h
}
}</code></pre>
<p>Great! Now we are ready to process user interactions. For instance, imagine we initialized our counter like this:</p>
<pre><code class="language-rust">let mut counter = Counter { value: 0 };</code></pre>
<pre><code class="language-rust ignore">let mut counter = Counter { value: 0 };</code></pre>
<p>And let's say we wanted to simulate a user playing with our interface for a bit—pressing the increment button twice
and then the decrement button once. We could easily compute the final state of our counter with our <strong>update logic</strong>:</p>
<pre><code class="language-rust">counter.update(Message::Increment);
<pre><code class="language-rust ignore">counter.update(Message::Increment);
counter.update(Message::Increment);
counter.update(Message::Decrement);</code></pre>
<p>This would cause our <code>Counter</code> to end up with a <code>value</code> of <code>1</code>:</p>
<pre><code class="language-rust">assert_eq!(counter.value, 1);</code></pre>
<pre><code class="language-rust ignore">assert_eq!(counter.value, 1);</code></pre>
<p>In fact, we have just written a simple test for our application logic:</p>
<pre><code class="language-rust">#[test]
<pre><code class="language-rust ignore">#[test]
fn it_counts_properly() {
let mut counter = Counter { value: 0 };

Expand Down Expand Up @@ -280,7 +280,7 @@ <h3 id="the-buttons"><a class="header" href="#the-buttons">The Buttons</a></h3>
<p>In iced, widgets are independent values. The same way you can have an integer in a variable, you can have a widget as well.
These values are normally created using a <em>helper function</em> from the <code>widget</code> module.</p>
<p>For our buttons, we can use the <code>button</code> helper:</p>
<pre><code class="language-rust">use iced::widget::button;
<pre><code class="language-rust ignore">use iced::widget::button;

let increment = button("+");
let decrement = button("-");</code></pre>
Expand All @@ -292,7 +292,7 @@ <h3 id="the-number"><a class="header" href="#the-number">The Number</a></h3>
for our counter value?</p>
<p>While iced does not really have a <code>number</code> widget, it does have a more generic <code>text</code> widget that can be used
to display any kind of text—numbers included:</p>
<pre><code class="language-rust">use iced::widget::text;
<pre><code class="language-rust ignore">use iced::widget::text;

let counter = text(15);</code></pre>
<p>Sweet! Like <code>button</code>, <code>text</code> also takes an argument used to describe its contents. Since we are just getting started, let's
Expand All @@ -302,14 +302,14 @@ <h3 id="the-layout"><a class="header" href="#the-layout">The Layout</a></h3>
<p>Not so fast! The widgets in our counter interface are displayed in a specific <strong>order</strong>. Given our three widgets, there is a total of
<strong>six</strong> different ways to order them! However, the order we want is: <code>increment</code>, <code>counter</code>, and <code>decrement</code>.</p>
<p>A very simple way of describing this order is to create a list with our widgets:</p>
<pre><code class="language-rust">let interface = vec![increment, counter, decrement];</code></pre>
<pre><code class="language-rust ignore">let interface = vec![increment, counter, decrement];</code></pre>
<p>But we are still missing something! It's not only the order that is specific, our interface also has a specific visual <strong>layout</strong>.</p>
<p>The widgets are positioned on top of each other, but they could very well be positioned from left to right instead. There is nothing
in our description so far that talks about the <strong>layout</strong> of our widgets.</p>
<p>In iced, layout is described using... well, more widgets! That's right. Not all widgets produce visual results directly; some may simply
manage the position of existing widgets. And since widgets are just values, they can be nested and composed nicely!</p>
<p>The kind of vertical layout that we need for our counter can be achieved with the <code>column</code> widget:</p>
<pre><code class="language-rust">use iced::widget::column;
<pre><code class="language-rust ignore">use iced::widget::column;

let interface = column![increment, counter, decrement];</code></pre>
<p>This is very similar to our previous snippet! iced provides a <code>column!</code> macro for creating a <code>column</code> out of some widgets in a particular
Expand All @@ -323,7 +323,7 @@ <h3 id="the-interactions"><a class="header" href="#the-interactions">The Interac
<p>In iced, every widget has a specific type that enables further configuration using simple builder methods. The <code>button</code>
helper returns an instance of <a href="https://docs.rs/iced/0.12.1/iced/widget/struct.Button.html">the <code>Button</code> type</a>, which has an <code>on_press</code> method we can use to define the message it must
<strong>produce</strong> when a user presses the button:</p>
<pre><code class="language-rust">use iced::widget::button;
<pre><code class="language-rust ignore">use iced::widget::button;

let increment = button("+").on_press(Message::Increment);
let decrement = button("-").on_press(Message::Decrement);</code></pre>
Expand All @@ -340,7 +340,7 @@ <h3 id="the-interactions"><a class="header" href="#the-interactions">The Interac
<h3 id="the-view"><a class="header" href="#the-view">The View</a></h3>
<p>We are almost there! There is only one thing left to do: connecting our application <strong>state</strong> to the view logic.</p>
<p>Let's bring together all the view logic we have written so far:</p>
<pre><code class="language-rust">use iced::widget::{button, column, text};
<pre><code class="language-rust ignore">use iced::widget::{button, column, text};

// The buttons
let increment = button("+").on_press(Message::Increment);
Expand All @@ -357,7 +357,7 @@ <h3 id="the-view"><a class="header" href="#the-view">The View</a></h3>
we want is to actually display the <code>value</code> field of our <code>Counter</code> state. This way, when a button is pressed and
our update logic is triggered, the text widget will display the new <code>value</code>.</p>
<p>We can easily do this by running our view logic in a method of our <code>Counter</code>—just like we did with our update logic:</p>
<pre><code class="language-rust">use iced::widget::{button, column, text};
<pre><code class="language-rust ignore">use iced::widget::{button, column, text};

impl Counter {
fn view(&amp;self) {
Expand All @@ -382,7 +382,7 @@ <h3 id="the-view"><a class="header" href="#the-view">The View</a></h3>
<p>Instead of throwing the <code>interface</code> away, we need to return it. Remember, the purpose of our <strong>view logic</strong> is
to dictate the widgets of our user interface; and the content of the <code>interface</code> variable is precisely the
description of the interface we want:</p>
<pre><code class="language-rust">use iced::widget::{button, column, text, Column};
<pre><code class="language-rust ignore">use iced::widget::{button, column, text, Column};

impl Counter {
fn view(&amp;self) -&gt; Column&lt;Message&gt; {
Expand Down Expand Up @@ -413,7 +413,7 @@ <h3 id="the-view"><a class="header" href="#the-view">The View</a></h3>
<div align="center" class="right">
<img alt="A classical counter interface" src="resources/counter-interface.svg" width="50%">
</div>
<pre><code class="language-rust">use iced::widget::{button, column, text, Column};
<pre><code class="language-rust ignore">use iced::widget::{button, column, text, Column};

impl Counter {
fn view(&amp;self) -&gt; Column&lt;Message&gt; {
Expand Down
Loading

0 comments on commit cfc522f

Please sign in to comment.