D Creating custom UI controls
In chapter 11, you learned how to create more consistent and professional-looking apps by creating a tablet-specific version of the Pet Scrapbook. The tablet-specific pages of the Pet Scrapbook rely on copying and pasting a lot of code. For a small app, copying and pasting some code isn’t that bad, but as apps grow larger and share UI and JavaScript code between pages, it’s important to centralize the code you write.
In this appendix, we’ll take you on a journey of creating reusable UI components that incorporate data binding. We’ll continue to use the Pet Scrapbook in our examples. If you’d like to follow-along, go back to the Pet Scrapbook version we had at the end of chapter 11.
NOTE
Before you begin, delete the contents of the tablet-specific page files (scrapbook-page.land.minWH600.xml and scrapbook-page.land.minHW600.js).
D.1 Introducing reusable, custom UI controls
Before we jump into creating our first reusable custom UI control, let’s slow down. You may be wondering what a reusable UI control is and how it works.
DEFINITION
Reusable UI controls are portions of XML and/or JavaScript code that are written once and bundled together. Once bundled together, they act just like the UI elements you’ve learned about (labels, text fields, buttons, and so on) and can be added to the XML code of pages.