Skip to content

Commit 7778b3d

Browse files
rmorshearmorshea
committed
finish off creating-interfaces
1 parent 9e468e8 commit 7778b3d

File tree

3 files changed

+45
-16
lines changed

3 files changed

+45
-16
lines changed

‎docs/source/creating-interfaces/index.rst

Lines changed: 35 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,23 +15,24 @@ Creating Interfaces
1515

1616
.. grid:: 2
1717

18-
.. grid-item-card:: :octicon:`mortar-board` HTML with IDOM
18+
.. grid-item-card:: :octicon:`code-square` HTML with IDOM
1919
:link: html-with-idom
2020
:link-type: doc
2121

22-
Construct HTML layouts with IDOM.
22+
Construct HTML layouts from the basic units of user interface functionality.
2323

2424
.. grid-item-card:: :octicon:`package` Your First Components
2525
:link: your-first-components
2626
:link-type: doc
2727

28-
Define and use components.
28+
Define reusable building blocks that it easier to construct complex
29+
interfaces.
2930

30-
.. grid-item-card:: :octicon:`versions` Rendering Data
31+
.. grid-item-card:: :octicon:`database` Rendering Data
3132
:link: rendering-data
3233
:link-type: doc
3334

34-
Render HTML elements and components from raw data
35+
Use data to organize and render HTML elements and components.
3536

3637
IDOM is a Python package for making user interfaces (UI). These interfaces are built
3738
from small elements of functionality like buttons text and images. IDOM allows you to
@@ -80,8 +81,7 @@ To recreate the same thing in IDOM you would write:
8081
:octicon:`book` Read More
8182
^^^^^^^^^^^^^^^^^^^^^^^^^
8283

83-
Learn how to construct HTML layouts with IDOM and the underlying data structure we
84-
use to represent them.
84+
Construct HTML layouts from the basic units of user interface functionality.
8585

8686

8787
Section 2: Your First Components
@@ -97,6 +97,34 @@ practice we'll quickly make a ``Photo`` component:
9797
.. example:: creating_interfaces.simple_photo
9898
:activate-result:
9999

100+
.. card::
101+
:link: your-first-components
102+
:link-type: doc
103+
104+
:octicon:`book` Read More
105+
^^^^^^^^^^^^^^^^^^^^^^^^^
106+
107+
Define reusable building blocks that it easier to construct complex interfaces.
108+
100109

101110
Section 3: Rendering Data
102111
-------------------------
112+
113+
The last pillar of knowledge you need before you can start making :ref:`interactive
114+
interfaces <adding interactivity>` is the ability to render sections of the UI given a
115+
collection of data. This will require you to understand how elements which are derived
116+
from data in this way must be orgnized with :ref:`"keys" <Organizing Items With Keys>`.
117+
One case where we might want to do this is if items in a todo list come from a list of
118+
data that we want to sort and filter:
119+
120+
.. example:: creating_interfaces.todo_list_with_keys
121+
:activate-result:
122+
123+
.. card::
124+
:link: rendering-data
125+
:link-type: doc
126+
127+
:octicon:`book` Read More
128+
^^^^^^^^^^^^^^^^^^^^^^^^^
129+
130+
Use data to organize and render HTML elements and components.

‎docs/source/creating-interfaces/your-first-components.rst

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
Your First Component
2-
====================
1+
Your First Components
2+
=====================
33

44
As we learned :ref:`earlier <HTML with IDOM>` we can use IDOM to make rich structured
55
documents out of standard HTML elements. As these documents become larger and more

‎docs/source/index.rst

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -105,8 +105,8 @@ IDOM within a Jupyter Notebook, this is where you can learn how to do those thin
105105
:octicon:`book` Read More
106106
^^^^^^^^^^^^^^^^^^^^^^^^^
107107

108-
Learn how IDOM can be installed and run in a variety of different ways - with
109-
different web servers and frameworks as well as being embedded into existing apps.
108+
Install IDOM and run it in a variety of different ways - with different web servers
109+
and frameworks. You'll even embed IDOM into an existing app.
110110

111111

112112
Chapter 2 - :ref:`Creating Interfaces`
@@ -115,11 +115,12 @@ Chapter 2 - :ref:`Creating Interfaces`
115115
IDOM is a Python package for making user interfaces (UI). These interfaces are built
116116
from small elements of functionality like buttons text and images. IDOM allows you to
117117
combine these elements into reusable, nestable :ref:`"components" <your first
118-
component>`. In the sections that follow you'll learn how these UI elements are created
119-
and organized into components. Then, you'll use components to customize and
120-
conditionally display more complex UIs.
118+
components>`. In the sections that follow you'll learn how these UI elements are created
119+
and organized into components. Then, you'll use this knowledge to create interfaces from
120+
raw data:
121121

122-
Some sort of examples here...
122+
.. example:: creating_interfaces.todo_list_with_keys
123+
:activate-result:
123124

124125
.. card::
125126
:link: creating-interfaces/index
@@ -128,7 +129,7 @@ Some sort of examples here...
128129
:octicon:`book` Read More
129130
^^^^^^^^^^^^^^^^^^^^^^^^^
130131

131-
Learn stuff...
132+
Learn to construct user interfaces from basic HTML elements and reusable components.
132133

133134

134135
Chapter 3 - :ref:`Adding Interactivity`

0 commit comments

Comments
 (0)