Part 3 - Componentization¶
Our List of Pyroes can be displayed and individual Pyroes can be edited, but it is all an amalgam.
Since we are already doing it with our main application component,
AppComponent, and the listing component,
PyroesComponent and how it is
better done when creating large applications, we can separate the listing and
top2 folder to
top3 and enter it. For example, with:
cp -r top2 top3 cd top3
Under Windows and unless you have a proper shell installed (Cygwin, MSYS, GitBash, …) you are probably better off using the Windows Explorer to make a copy of the directory)
Just as we did before to create
PyroesComponent, we can do it for
PyroDetailComponent. From inside the app directory create the skeleton for
The view of the project layout is now
We’ll now move the details part from the html content of
the html content of
PyroDetailComponent. Both html files.
Things to notice:
pyroes_component.htmlwe added a new tag:<pyro-detail></pyro-detail>
This is where the
PyroDetailComponentwill be auto-rendered.
To make sure this is the case, we will define the
selectorto have this specific value in
The html in
pyro_detail_component.htmlstill references the observable
selected_. Recall that this was defined in
PyroesComponentand in fact: it will still be.
Let’s see the Python counterparts before delivering the full explanation
As mentioned above, the observable
selected_ is defined as a binding in
PyroesComponent. It is nowhere to be seen in
the associated html content uses it. A
Component-SubComponent relationship is responsible.
Remember the html content for
<h2>My Pyroes</h2> <ul class="pyroes"> </ul> <pyro-detail></pyro-detail>
... class PyroDetailComponent(Component): selector = 'pyro-detail' ...
<pyro-detail> tag and the
selector = 'pyro-detail' are the
keys. Because it happens inside the html code for
PyroesComponent, when the
associated component for the tag is instantiated (namely
PyroDetailComponent) it will become a child of the component in which
is being created.
Being a child, it can access the bindings from the parent. Hence the
capability to use the
As done with
PyroesComponent, which is instantiated inside
AppComponent, we could have done the same with
In this case and to show an alternative, we have chosen to instantiate using a tag and defining a selector
You may have noticed that we also shown
app_component.py in the code
samples above. And this is to show this
PyroDetailComponent needs to be imported somewhere. It can be done in
this module or it could for example be done in
app_component.py or even in
pyroes_component.py: the choice is yours.
But if not imported: it will be just a file being idle in your file structure. Importing it, makes the component be part of the arsenal you can use in your app.
We haven’t changed the functionality, simply how we distribute the functionality across components. The results are the same as in the previous example.
And go the browser
And our list of Pyroes will be displayed
Clicking on one of the Pyroes will:
- Show the editor
- Change the class of the selected Pyro so that it becomes highlighted
And making changes in the editor is automatically reflected not only in the
input field, but also in the uppercased name in the editor and in the list
Now that things have been broken down in different components, we can move on.