Create a new PodFilter in the PodLoader

Now that we have created our filter all that remains is to invoke it in our PodLoader and use the saved value to filter our list of Movies. Appendix A.6 contains the updated version of the createPod(...) method. The code extract below shows the specific code that creates our text filter and adds it to the Pod.

Figure 1. Adding the Pod Text filter

009      // Create the configuration for the filter renderer.
010      RendererConfig titleFilterRenderer = 
011        new RendererConfig(RendererConfigType.STYLE, "pod-text-filter");
012      
013      // Create the filter.
014      PodFilter titleFilter = 
015        new PodFilter("title", document, titleFilterRenderer);
016      titleFilter.addFilterLabel("Title");
017      
018      // Retrieve the saved filter value and extract to an array
019      Node titleTextNode = 
020        getPodFilterById(PODTYPE.MYFAVMOVIES, "title", document);
021      ArrayList<String> titleTextArray = 
022        PodFilter.convertSelectionsNodeToArrayList(titleTextNode);
023
024      // Create the Node that the filter Renderer expects and add the
025      // saved filter text to it.
026      String titleFilterText = "";
027      if (!titleTextArray.isEmpty()) {
028        titleFilterText = titleTextArray.get(0);
029      }
030      Element titleFilterNode = document.createElement("text-filter");
031      titleTextNode = document.createTextNode(titleFilterText);
032      titleFilterNode.appendChild(titleTextNode);
033      titleFilter.addFilter(titleFilterNode);
034
035      // Add the title filter to the Pod
036      moviesPod.addFilter(titleFilter);

Create a new filter

In lines 10-11 we create the configuration for our new filter by referencing the style we created in the StylesConfig.xml. We pass this to the PodFilter constuctor along with the id of our filter, 'title' in this case.

Retrieve saved filter values

In lines 19-22 we use the utility functions to return the saved values for our 'title' filter and convert them to an array for ease of use.

Create input to Renderer

In lines 19-33 we create the text Node that will passed to our Renderer. The Renderer is expecting a Node named "text-filter" so we create this and add the filter text to it. We add the Node to our PodFilter object using the addFilter(...) method.

Add the filter to the Pod

Finally we pass our PodFilter object to the addFilter(...) method of our PodBuilder object.

When we iterate over the movies we only select movies whose title contains the substring that was returned from the filter. When we put it all together we can load our Pod, select the pen icon to open the filter, choose a genre and click save. The page will re-draw with the new filtered list.