Creating the Pattern

Now that we understand the power of this pattern, we will learn how to put it to use in our application. Up to this point, we have created all the components that are needed to create an email application, but we are missing the object that ties them together in some way. In this section, we will create an object named Email, which will perform all the duties that are necessary to gather data for each of the components. But rather than focus on the details of each method and the population of different components, we will focus on how to add the Data Reflection pattern to the object. Therefore, we will create all the methods, but we will not add code to them until Chapter 21, "Interacting with a Database: The Server-Side," when we connect the object to a database with PHP. So, let's get started by defining the methods we will need to populate the different components and make our application function.

We will start by identifying the actions you would typically associate with an email application. The first actions that come to mind are sending, receiving, and composing an email. Next, we will focus on how we would like to show email threads. I have chosen to use the accordion component that we built in Chapter 10, "Accordion," to display all the emails in a particular thread as a group. The first email in the group, which is the one that initiated the thread, is the email that will display in the inbox. The replies that came afterward will only display in the accordion as part of the thread, but we will focus more on this in Chapter 21. Since we are displaying emails in a thread, we will add a method that displays them as a threaded group. Last, we will create an initialize method to set the local variables, and we will also create a display method to be used as an access point to the object, which will fire the correct methods when the body of the application has loaded. Therefore, we have six methods we need to create, as follows:

• Email.initialize

• Email.display

• Email.showThread

• Email.getMail

• Email.sendMail

• Email.compose

Each method is prefixed with the Email object since this will be the name of the object that contains them. Now that we have these methods, we can move on to the focus of this section, which is adding the Data Reflection pattern to the Email object. The first thing we will do is add a method that creates a Data Reflection pattern. We will appropriately name the method dataReflection and it will receive two parameters: a callback method and a time delay. The callback method represents the method we want to be called each time the data is reflected. In our case, we will call back the display method because it is our access point and will naturally create a consistent loop for the pattern, which will continually reflect the database data. The time delay represents the amount of time in milliseconds in which we would like the method to be called. For example, if we would like to set it to reflect every minute, we would use 60,000 milliseconds. Within the dataReflection method is JavaScript's setTimeout method, which will take these two parameters and fire when the time delay has been reached. Following is the dataReflection method, which we will add to the Email object.

Email.dataReflection = function(callbackMethod, delay) {     setTimeout(callbackMethod, delay); }

Since the display method is the access point to our object, we will plant the first dataReflection pattern within this method and create a loop that continually does callbacks on the display method. The display method for our object will receive a username when we add the server-side code to it in Chapter 21 because we will need to have a value to check against in the database so that we can provide the appropriate email data back to the current user. This means that the callback method will need to have this value as well. Here is the code that we will add to the display method, with the username parameter as a value in the callback method.

Email.display = function(username) {     Email.dataReflection("Email.display('"+ username +"')", 60000); }

As you can see, calling this method is trivial because it is really just a wrapper for the setTimeout method. Although it is simple, this pattern is actually quite powerful when put to use with a database.