docs/tutorial/series/part_2.md

   1 # Part 2: Event and Template Listeners
   2
   3 In the [first part](part_1.md) of this tutorial series, we have created the base structure of our people management package.
   4 In further parts, we will use the package of the first part as a basis to directly add new features.
   5 In order to explain how event listeners and template works, however, we will not directly adding a new feature to the package by altering it in this part, but we will assume that somebody else created the package and that we want to extend it the “correct” way by creating a plugin.
   6
   7 The goal of the small plugin that will be created in this part is to add the birthday of the managed people.
   8 As in the first part, we will not bother with careful validation of the entered date but just make sure that it is a valid date.
   9
  10
  11 ## Package Functionality
  12
  13 The package should provide the following possibilities/functions:
  14
  15 - List person’s birthday (if set) in people list in the ACP
  16 - Sort people list by birthday in the ACP
  17 - Add or remove birthday when adding or editing person
  18 - List person’s birthday (if set) in people list in the front end
  19 - Sort people list by birthday in the front end
  20
  21
  22 ## Used Components
  23
  24 We will use the following package installation plugins:
  25
  26 - [database package installation plugin](../../package/pip/database.md),
  27 - [eventListener package installation plugin](../../package/pip/event-listener.md),
  28 - [file package installation plugin](../../package/pip/file.md),
  29 - [language package installation plugin](../../package/pip/language.md),
  30 - [template package installation plugin](../../package/pip/template.md),
  31 - [templateListener package installation plugin](../../package/pip/template-listener.md).
  32
  33 For more information about the event system, please refer to the [dedicated page on events](../../php/api/events.md).
  34
  35
  36 ## Package Structure
  37
  38 The package will have the following file structure:
  39
  40 ```
  41 ├── eventListener.xml
  42 ├── files
  43 │   ├── acp
  44 │   │   └── database
  45 │   │       └── install_com.woltlab.wcf.people.birthday.php
  46 │   └── lib
  47 │       └── system
  48 │           └── event
  49 │               └── listener
  50 │                   ├── BirthdayPersonAddFormListener.class.php
  51 │                   └── BirthdaySortFieldPersonListPageListener.class.php
  52 ├── language
  53 │   ├── de.xml
  54 │   └── en.xml
  55 ├── package.xml
  56 ├── templateListener.xml
  57 └── templates
  58     ├── __personListBirthday.tpl
  59     └── __personListBirthdaySortField.tpl
  60 ```
  61
  62
  63 ## Extending Person Model
  64
  65 The existing model of a person only contains the person’s first name and their last name (in additional to the id used to identify created people).
  66 To add the birthday to the model, we need to create an additional database table column using the [`database` package installation plugin](../../package/pip/database.md):
  67
  68 ```sql
  69 --8<-- "tutorial/tutorial-series/part-2/files/acp/database/install_com.woltlab.wcf.people.birthday.php"
  70 ```
  71
  72 If we have a [`Person` object](part_1.md#person), this new property can be accessed the same way as the `personID` property, the `firstName` property, or the `lastName` property from the base package: `$person->birthday`.
  73
  74
  75 ## Setting Birthday in ACP
  76
  77 To set the birthday of a person, we only have to add another form field with an event listener:
  78
  79 ```php
  80 --8<-- "tutorial/tutorial-series/part-2/files/lib/system/event/listener/BirthdayPersonAddFormListener.class.php"
  81 ```
  82
  83 registered via
  84
  85 ```xml
  86 <eventlistener name="createForm@wcf\acp\form\PersonAddForm">
  87   <environment>admin</environment>
  88   <eventclassname>wcf\acp\form\PersonAddForm</eventclassname>
  89   <eventname>createForm</eventname>
  90   <listenerclassname>wcf\system\event\listener\BirthdayPersonAddFormListener</listenerclassname>
  91   <inherit>1</inherit>
  92 </eventlistener>
  93 ```
  94
  95 in `eventListener.xml`, [see below](#eventlistenerxml).
  96
  97 As `BirthdayPersonAddFormListener` extends `AbstractEventListener` and as the name of relevant event is `createForm`, `AbstractEventListener` internally automatically calls `onCreateForm()` with the event object as the parameter.
  98 It is important to set `<inherit>1</inherit>` so that the event listener is also executed for `PersonEditForm`, which extends `PersonAddForm`.
  99
 100 The language item `wcf.person.birthday` used in the label is the only new one for this package:
 101
 102 ```sql
 103 --8<-- "tutorial/tutorial-series/part-2/language/de.xml"
 104 ```
 105
 106 ```sql
 107 --8<-- "tutorial/tutorial-series/part-2/language/en.xml"
 108 ```
 109
 110
 111 ## Adding Birthday Table Column in ACP
 112
 113 To add a birthday column to the person list page in the ACP, we need three parts:
 114
 115 1. an event listener that makes the `birthday` database table column a valid sort field,
 116 1. a template listener that adds the birthday column to the table’s head, and
 117 1. a template listener that adds the birthday column to the table’s rows.
 118
 119 The first part is a very simple class:
 120
 121 ```php
 122 --8<-- "tutorial/tutorial-series/part-2/files/lib/system/event/listener/BirthdaySortFieldPersonListPageListener.class.php"
 123 ```
 124
 125 !!! info "We use `SortablePage` as a type hint instead of `wcf\acp\page\PersonListPage` because we will be using the same event listener class in the front end to also allow sorting that list by birthday."
 126
 127 As the relevant template codes are only one line each, we will simply put them directly in the `templateListener.xml` file that will be shown [later on](#templatelistenerxml).
 128 The code for the table head is similar to the other `th` elements:
 129
 130 ```smarty
 131 <th class="columnDate columnBirthday{if $sortField == 'birthday'} active {@$sortOrder}{/if}"><a href="{link controller='PersonList'}pageNo={@$pageNo}&sortField=birthday&sortOrder={if $sortField == 'birthday' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}wcf.person.birthday{/lang}</a></th>
 132 ```
 133
 134 For the table body’s column, we need to make sure that the birthday is only show if it is actually set:
 135
 136 ```smarty
 137 <td class="columnDate columnBirthday">{if $person->birthday}{@$person->birthday|strtotime|date}{/if}</td>
 138 ```
 139
 140
 141 ## Adding Birthday in Front End
 142
 143 In the front end, we also want to make the list sortable by birthday and show the birthday as part of each person’s “statistics”.
 144
 145 To add the birthday as a valid sort field, we use `BirthdaySortFieldPersonListPageListener` just as in the ACP.
 146 In the front end, we will now use a template (`__personListBirthdaySortField.tpl`) instead of a directly putting the template code in the `templateListener.xml` file:
 147
 148 ```smarty
 149 --8<-- "tutorial/tutorial-series/part-2/templates/__personListBirthdaySortField.tpl"
 150 ```
 151
 152 !!! info "You might have noticed the two underscores at the beginning of the template file. For templates that are included via template listeners, this is the naming convention we use."
 153
 154 Putting the template code into a file has the advantage that in the administrator is able to edit the code directly via a custom template group, even though in this case this might not be very probable.
 155
 156 To show the birthday, we use the following template code for the `personStatistics` template event, which again makes sure that the birthday is only shown if it is actually set:
 157
 158 ```smarty
 159 --8<-- "tutorial/tutorial-series/part-2/templates/__personListBirthday.tpl"
 160 ```
 161
 162
 163 ## `templateListener.xml`
 164
 165 The following code shows the `templateListener.xml` file used to install all mentioned template listeners:
 166
 167 ```xml
 168 --8<-- "tutorial/tutorial-series/part-2/templateListener.xml"
 169 ```
 170
 171 In cases where a template is used, we simply use the `include` syntax to load the template.
 172
 173
 174 ## `eventListener.xml`
 175
 176 There are two event listeners that make `birthday` a valid sort field in the ACP and the front end, respectively, and the third event listener takes care of setting the birthday.
 177
 178 ```xml
 179 --8<-- "tutorial/tutorial-series/part-2/eventListener.xml"
 180 ```
 181
 182
 183 ## `package.xml`
 184
 185 The only relevant difference between the `package.xml` file of the base page from part 1 and the `package.xml` file of this package is that this package requires the base package `com.woltlab.wcf.people` (see `<requiredpackages>`):
 186
 187 ```xml
 188 --8<-- "tutorial/tutorial-series/part-2/package.xml"
 189 ```
 190
 191 ---
 192
 193 This concludes the second part of our tutorial series after which you now have extended the base package using event listeners and template listeners that allow you to enter the birthday of the people.
 194
 195 The complete source code of this part can be found on [GitHub]({jinja{ config.repo_url }}tree/{jinja{ config.edit_uri.split("/")[1] }}/snippets/tutorial/tutorial-series/part-2).