Chapter 11

.gitignore

@@ -160,4 +160,5 @@ cython_debug/
 #.idea/
 .mypy_cache
 .vscode
+.zed
 TODO.md

README.md

@@ -11,19 +11,26 @@ The code here is slightly different from the book, as I try to use types where I
 ## Running an Example
 
 Clone the repo...
+
 ```bash
 git clone https://github.com/juliojimenez/hypermedia.systems
 cd hypermedia.systems
 ```
+
 Install dependencies...
+
 ```bash
 pip3 install -r requirements.txt
 ```
+
 Go to an example...
+
 ```bash
 cd chapter-3/1-simple-hello-world/
 ```
+
 And run it...
+
 ```bash
 python3 app.py
 ```
@@ -50,12 +57,12 @@ Each example runs on a different port. Run multiple examples simultaneously and
 - [Targeting Other Elements](./chapter-4/4-targeting-other-elements/)
 - [Swap Styles](./chapter-4/5-swap-styles/)
 - Using Events
-    - [mouseenter](./chapter-4/6-using-events-mouseenter/)
-    - [click and keyup](./chapter-4/7-using-events-click-and-keyup/)
+  - [mouseenter](./chapter-4/6-using-events-mouseenter/)
+  - [click and keyup](./chapter-4/7-using-events-click-and-keyup/)
 - Passing Request Parameters
-    - [Enclosing Forms](./chapter-4/8-passing-request-parameters-enclosing-forms/)
-    - [Including Inputs](./chapter-4/9-passing-request-parameters-including-inputs/)
-    - [Inline Values](./chapter-4/10-passing-request-parameters-inline-values/)
+  - [Enclosing Forms](./chapter-4/8-passing-request-parameters-enclosing-forms/)
+  - [Including Inputs](./chapter-4/9-passing-request-parameters-including-inputs/)
+  - [Inline Values](./chapter-4/10-passing-request-parameters-inline-values/)
 - [History Support](./chapter-4/11-history-support/)
 
 ### Chapter 5
@@ -64,38 +71,38 @@ Each example runs on a different port. Run multiple examples simultaneously and
 - [Adding hx-boost to Contacts.app](./chapter-5/2-adding-hx-boost-to-contact-app/)
 - [A Second Step: Deleting Contacts With HTTP DELETE](./chapter-5/3-a-second-step-deleting-contacts-with-http-delete/)
 - Next Steps: Validating Contact Emails
-    - [Update Our Input Type](./chapter-5/4-next-steps-validating-contact-emails-update-our-input-type/)
-    - [Inline Validation](./chapter-5/5-next-steps-validating-contact-emails-inline-validation/)
-    - [Validating Emails Server-Side](./chapter-5/6-next-steps-validating-contact-emails-validating-emails-server-side/)
-    - [Taking The User Experience Further](./chapter-5/7-next-steps-validating-contact-emails-taking-the-user-experience-further/)
-    - [Debouncing Our Validation Requests](./chapter-5/8-next-steps-validating-contact-emails-debouncing-our-validation-requests/)
-    - [Ignoring Non-Mutating Keys](./chapter-5/9-next-steps-validating-contact-emails-ignoring-non-mutating-keys/)
+  - [Update Our Input Type](./chapter-5/4-next-steps-validating-contact-emails-update-our-input-type/)
+  - [Inline Validation](./chapter-5/5-next-steps-validating-contact-emails-inline-validation/)
+  - [Validating Emails Server-Side](./chapter-5/6-next-steps-validating-contact-emails-validating-emails-server-side/)
+  - [Taking The User Experience Further](./chapter-5/7-next-steps-validating-contact-emails-taking-the-user-experience-further/)
+  - [Debouncing Our Validation Requests](./chapter-5/8-next-steps-validating-contact-emails-debouncing-our-validation-requests/)
+  - [Ignoring Non-Mutating Keys](./chapter-5/9-next-steps-validating-contact-emails-ignoring-non-mutating-keys/)
 - Another Application Improvement: Paging
-    - [Adding Paging Widgets](./chapter-5/10-another-application-improvement-paging-adding-paging-widgets/)
-    - [Click To Load](./chapter-5/11-another-application-improvement-paging-click-to-load/)
-    - [Infinite Scroll](./chapter-5/12-another-application-improvement-paging-infinite-scroll/)
+  - [Adding Paging Widgets](./chapter-5/10-another-application-improvement-paging-adding-paging-widgets/)
+  - [Click To Load](./chapter-5/11-another-application-improvement-paging-click-to-load/)
+  - [Infinite Scroll](./chapter-5/12-another-application-improvement-paging-infinite-scroll/)
 
 ### Chapter 6
 
 - [Adding Active Search](./chapter-6/1-adding-active-search/)
-    - [Targeting The Correct Element](./chapter-6/2-targeting-the-correct-element/)
-    - [Paring Down Our Content](./chapter-6/3-paring-down-our-content/)
-    - [HTTP Headers In HTMX](./chapter-6/4-http-headers-in-htmx/)
-    - [Factoring Your Templates](./chapter-6/4-http-headers-in-htmx/)
-    - [Using Our New Template](./chapter-6/4-http-headers-in-htmx/)
-    - [Updating The Navigation Bar With "hx-push-url"](./chapter-6/5-updating-the-navigation-bar-with-hx-push-url/)
-    - [Adding A Request Indicator](./chapter-6/6-adding-a-request-indicator/)
+  - [Targeting The Correct Element](./chapter-6/2-targeting-the-correct-element/)
+  - [Paring Down Our Content](./chapter-6/3-paring-down-our-content/)
+  - [HTTP Headers In HTMX](./chapter-6/4-http-headers-in-htmx/)
+  - [Factoring Your Templates](./chapter-6/4-http-headers-in-htmx/)
+  - [Using Our New Template](./chapter-6/4-http-headers-in-htmx/)
+  - [Updating The Navigation Bar With "hx-push-url"](./chapter-6/5-updating-the-navigation-bar-with-hx-push-url/)
+  - [Adding A Request Indicator](./chapter-6/6-adding-a-request-indicator/)
 - [Lazy Loading](./chapter-6/7-lazy-loading/)
-    - [Pulling Out The Expensive Code](./chapter-6/8-pulling-out-the-expensive-code/)
-    - [Adding An Indicator](./chapter-6/9-adding-an-indicator/)
-    - [But That's Not Lazy!](./chapter-6/10-but-thats-not-lazy/)
+  - [Pulling Out The Expensive Code](./chapter-6/8-pulling-out-the-expensive-code/)
+  - [Adding An Indicator](./chapter-6/9-adding-an-indicator/)
+  - [But That's Not Lazy!](./chapter-6/10-but-thats-not-lazy/)
 - [Inline Delete](./chapter-6/11-inline-delete/)
-    - [Narrowing Our Target](./chapter-6/12-narrowing-our-target/)
-    - [Updating The Server Side](./chapter-6/13-updating-the-server-side/)
-    - [Taking Advantage of "htmx-swapping"](./chapter-6/14-taking-advantage-of-htmx-swapping/)
+  - [Narrowing Our Target](./chapter-6/12-narrowing-our-target/)
+  - [Updating The Server Side](./chapter-6/13-updating-the-server-side/)
+  - [Taking Advantage of "htmx-swapping"](./chapter-6/14-taking-advantage-of-htmx-swapping/)
 - [Bulk Delete](./chapter-6/15-bulk-delete/)
-    - [The "Delete Selected Contacts" Button](./chapter-6/16-the-delete-selected-contacts-button/)
-    - [The Server Side for Delete Selected Contacts](./chapter-6/17-the-server-side-for-delete-selected-contacts/)
+  - [The "Delete Selected Contacts" Button](./chapter-6/16-the-delete-selected-contacts-button/)
+  - [The Server Side for Delete Selected Contacts](./chapter-6/17-the-server-side-for-delete-selected-contacts/)
 
 ### Chapter 7
 
@@ -113,7 +120,7 @@ Each example runs on a different port. Run multiple examples simultaneously and
 
 - [VanillaJS in Action: An Overflow Menu](./chapter-9/1-vanillajs-in-action-an-overflow-menu)
 - [Alpine.js](./chapter-9/2-alpine.js)
-- [_hyperscript](./chapter-9/3-hyperscript)
+- [\_hyperscript](./chapter-9/3-hyperscript)
 - [Integrating Using Callbacks](./chapter-9/4-integrating-using-callbacks)
 - [Integrating Using Events](./chapter-9/5-integrating-using-events)
 
@@ -124,6 +131,20 @@ Each example runs on a different port. Run multiple examples simultaneously and
 - [Viewing Contact Details](./chapter-10/3-viewing-contact-details)
 - [Updating & Deleting Contacts](./chapter-10/4-updating-and-deleting-contacts)
 
+### Chapter 11
+
+- Introduction To HXML
+  - [Hello World](./chapter-11/1-hello-world)
+  - UI Elements
+    - [Lists](./chapter-11/2-ui-elements-lists)
+    - [Images](./chapter-11/3-ui-elements-images)
+  - [Inputs](./chapter-11/4-inputs)
+  - [Styling](./chapter-11/5-styling)
+  - [Custom Elements](./chapter-11/6-custom-elements)
+  - [Behaviors](./chapter-11/7-behaviors)
+    - [Navigation Actions](./chapter-11/8-navigation-actions)
+    - [Update Actions](./chapter-11/9-update-actions)
+
 ## Support
 
 Python 3.11+
@@ -132,5 +153,5 @@ Python 3.11+
 
 - [HTMX v1.9.5](https://htmx.org)
 - [missing.css v1.0.10](https://missing.style)
-    - Not sure what's going on with the package hosting for this, but I had to grab the artifact from the latest tag in the [repo](https://github.com/bigskysoftware/missing).
-    - It was working fine when I started this repository. If it starts working again, please submit an issue or hit me up on [X](https://twitter.com/LispDev).
+  - Not sure what's going on with the package hosting for this, but I had to grab the artifact from the latest tag in the [repo](https://github.com/bigskysoftware/missing).
+  - It was working fine when I started this repository. If it starts working again, please submit an issue or hit me up on [X](https://twitter.com/LispDev).

chapter-11/1-hello-world/index.xml

@@ -0,0 +1,13 @@
+<doc xmlns="https://hyperview.org/hyperview">
+  <screen>
+    <styles />
+    <body>
+      <header>
+        <text>My first app</text>
+      </header>
+      <view>
+        <text>Hello World!</text>
+      </view>
+    </body>
+  </screen>
+</doc>

chapter-11/2-ui-elements-lists/index.xml

@@ -0,0 +1,42 @@
+<doc xmlns="https://hyperview.org/hyperview">
+  <screen>
+    <styles />
+    <body>
+      <header>
+        <text>My first app</text>
+      </header>
+      <view>
+        <text>Hello World!</text>
+        <list>
+            <item key="item1">
+                <text>My first item</text>
+            </item>
+            <item key="item2">
+                <text>My second item</text>
+            </item>
+        </list>
+        <section-list>
+            <section>
+                <section-title>
+                    <text>Appetizers</text>
+                </section-title>
+                <item key="1">
+                    <text>French Fries</text>
+                </item>
+                <item key="2">
+                    <text>Onion Rings</text>
+                </item>
+            </section>
+            <section>
+                <section-title>
+                    <text>Entrees</text>
+                </section-title>
+                <item key="3">
+                    <text>Burger</text>
+                </item>
+            </section>
+        </section-list>
+      </view>
+    </body>
+  </screen>
+</doc>

chapter-11/3-ui-elements-images/index.xml

@@ -0,0 +1,44 @@
+<doc xmlns="https://hyperview.org/hyperview">
+  <screen>
+    <styles />
+    <body>
+      <header>
+        <text>My first app</text>
+      </header>
+      <view>
+        <text>Hello World!</text>
+        <list>
+            <item key="item1">
+                <text>My first item</text>
+            </item>
+            <item key="item2">
+                <text>My second item</text>
+            </item>
+        </list>
+        <section-list>
+            <section>
+                <section-title>
+                    <text>Appetizers</text>
+                </section-title>
+                <item key="1">
+                    <text>French Fries</text>
+                </item>
+                <item key="2">
+                    <text>Onion Rings</text>
+                </item>
+            </section>
+            <section>
+                <section-title>
+                    <text>Entrees</text>
+                </section-title>
+                <item key="3">
+                    <text>Burger</text>
+                </item>
+            </section>
+        </section-list>
+        <image source="/profiles/1.jpg" style="avatar" />
+        <image source="./logo.png" style="logo" />
+      </view>
+    </body>
+  </screen>
+</doc>

chapter-11/4-inputs/index.xml

@@ -0,0 +1,58 @@
+<doc xmlns="https://hyperview.org/hyperview">
+  <screen>
+    <styles />
+    <body>
+      <header>
+        <text>My first app</text>
+      </header>
+      <view>
+        <text>Hello World!</text>
+        <list>
+            <item key="item1">
+                <text>My first item</text>
+            </item>
+            <item key="item2">
+                <text>My second item</text>
+            </item>
+        </list>
+        <section-list>
+            <section>
+                <section-title>
+                    <text>Appetizers</text>
+                </section-title>
+                <item key="1">
+                    <text>French Fries</text>
+                </item>
+                <item key="2">
+                    <text>Onion Rings</text>
+                </item>
+            </section>
+            <section>
+                <section-title>
+                    <text>Entrees</text>
+                </section-title>
+                <item key="3">
+                    <text>Burger</text>
+                </item>
+            </section>
+        </section-list>
+        <image source="/profiles/1.jpg" style="avatar" />
+        <image source="./logo.png" style="logo" />
+        <text-field
+            name="first_name"
+            style="input"
+            value="Adam"
+            placeholder="First name"
+        />
+        <select-single name="choice">
+            <option value="option1">
+                <text>Option 1</text>
+            </option>
+            <option value="option2">
+                <text>Option 2</text>
+            </option>
+        </select-single>
+      </view>
+    </body>
+  </screen>
+</doc>

chapter-11/5-styling/index.xml

@@ -0,0 +1,64 @@
+<doc xmlns="https://hyperview.org/hyperview">
+  <screen>
+    <styles>
+      <style class="body" flex="1" flexDirection="column" />
+      <style class="header" borderBottomWidth="1" borderBottomColor="#ccc" />
+      <style class="main" margin="24" />
+      <style class="h1" fontSize="32" />
+      <style class="info" color="blue" />
+    </styles>
+    <body style="body">
+      <header style="header">
+        <text style="info">My first app</text>
+      </header>
+      <view style="main">
+        <text style="h1 info">Hello World!</text>
+        <list>
+            <item key="item1">
+                <text>My first item</text>
+            </item>
+            <item key="item2">
+                <text>My second item</text>
+            </item>
+        </list>
+        <section-list>
+            <section>
+                <section-title>
+                    <text>Appetizers</text>
+                </section-title>
+                <item key="1">
+                    <text>French Fries</text>
+                </item>
+                <item key="2">
+                    <text>Onion Rings</text>
+                </item>
+            </section>
+            <section>
+                <section-title>
+                    <text>Entrees</text>
+                </section-title>
+                <item key="3">
+                    <text>Burger</text>
+                </item>
+            </section>
+        </section-list>
+        <image source="/profiles/1.jpg" style="avatar" />
+        <image source="./logo.png" style="logo" />
+        <text-field
+            name="first_name"
+            style="input"
+            value="Adam"
+            placeholder="First name"
+        />
+        <select-single name="choice">
+            <option value="option1">
+                <text>Option 1</text>
+            </option>
+            <option value="option2">
+                <text>Option 2</text>
+            </option>
+        </select-single>
+      </view>
+    </body>
+  </screen>
+</doc>