5.1. What's This Application Do, Anyway?
A code cabinet, a virtual filing cabinet for our code snippets, should in many ways model an actual file cabinet. But what does that mean? Here are the bullet points:
Like a real file cabinet, ours needs drawers. we'll call them categories here. We should be able to create categories with any name so we then have a mechanism with which to categorize our snippets. Being a virtual file cabinet, it will be allowed an unlimited number of drawers. In terms of user interface, Let's use a Tree widget to display the categories (although we'll use it essentially like a list in that we won't allow for subcategories—and if you think that sounds like a hint for a suggested enhancement, you're right!).
Within each category, we can add snippets of code. Each snippet will have pieces of information stored about it, including name, description, author, e-mail address (of the author, presumably!), and URL reference (that is, if we found the snippet online and want to remember the site we got it from). We'll also be able to store notes about the snippet and associated keywords with the snippet to make searching possible. We should also let the code and notes be entered in a rich way, not just in plain text.
Speaking of searching, we want to be able to search for snippets based on several criteria, and in any combination of criteria. We'll include things like being able to search by name, description, author, keywords, and actual code content.
Clearly the snippets need to be stored in a persistent way, so Let's use Gears for this as we'll do throughout this book.
we'll need to be able to delete categories and snippets because, hey, we're human and we screw up sometimes!
By now we have seen two different approaches to architecting an Ext JS application, but why stop with just two? Let's look at a third way to structure things, a way that I for one feel is probably the best of the bunch.
The entire user interface should be flexible—that is, we should be able to resize sections of it as we wish. Let's also allow the user to collapse and expand most sections. Finally, Let's use Ext JS's state-saving capabilities so that the sizes they set persist across executions of the application.
All right, I think we've got enough here to get going, so off we go (if you're a child of the '80s feel free to start singing the theme to The Great Space Coaster[] right about now!) Before we dive into the code, though, let's get an initial glimpse of Code Cabinet Ext, shown in Figure 5-1.
[] The Great Space Coaster (http://en.wikipedia.org/wiki/The_Great_Space_Coaster) was a children's television show from the early '80s that many of us in our mid-thirties grew up with. Most people tend to remember two things: Knock-Knock the bird, who naturally enough told knock-knock jokes, and Gary Gnu, who did the fake news reports ("No gnews is good gnews with Gary Gnu"). Of course, the theme song tends to stick in our heads too: "...get onboard, step inside, slowly for a magic ride... roaring towards the other side where only rainbows hide..." Ah, the memories!
Figure 5.1. Code Cabinet Ext, in all its (initial) glorys
See, just as described! you'll find the code to be fairly terse, again owing to the power Ext JS provides. In fact, there are number of new capabilities that add to the lack of verbosity of the code... but not, apparently, to the lack of verbosity of my writing, so enough setup, Let's get to it, shall we?