9.2. Overall Structure and Files

The directory structure of Finance Master is not much different than previous applications, just with a few interesting JavaScript files, as you can see for yourself in Figure 9-3.

In the root, we have the usual index.htm, and license.txt files, and in the css directory we have the usual styles.css. There's also a portal.css file that is new, and this is the file that contains styles needed for the portal extension, which we'll get into as we examine the code in FinanceMaster.js.

In the img directory we have FinanceMaster.gif, which is the logo in the upper-left corner of the screen. We then have Add.gif, Cancel.gif, Delete.gif, New.gif, Ok.gif, and Open.gif, all of which are icons on various Buttons throughout the UI.

Figure 9.3. The application's directory structure and constituent files

The js directory contains FinanceMaster.js, our "main" JavaScript file, so to speak. We also find gears_init.js as always, and the StoresAndRecords.js file that we're pretty used to for our Ext.data.Store and Ext.data.Record definitions (although, as we'll see, in this application they aren't all in there). There's also DataAccess.js, which is basically like any of the DAO.js files we've dealt with before, but there is a reason it's named differently, as we'll see. There's also something called MessageBus.js, which is the source file that will give us our publish/subscribe architecture. Although we won't be looking at the contents of this file, on the grounds that looking at the code behind a given extension is beyond the scope of this book, we'll certainly see it get plenty of use, which is the big thing for us. The OpenPortfolioWindow.js is the code for the Window where a user opens (or creates, as it turns out) a portfolio. The PortalExtension.js contains an Ext JS extension providing a portal-based interface (we also won't be looking at the code in this file since I didn't write it, so it would be like looking at the Ext JS source code, which we haven't done either throughout this book). Finally, there are four other source files: AccountActivityPortlet.js, AccountHistoryPortlet.js, PortfolioDistributionPortlet.js, and PortfolioOverviewPortlet.js. If you said these files contain the code for a given portlet, then give yourself a pat on the back!