9.3. The Markup
The index.htm file is, as usual, our starting point, and it's at this point I think pretty boilerplate. Here it is, in its entirety:
<html> <head> <title>Finance Master</title>
<link rel="stylesheet" type="text/css"
href="../../ext/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css"
href="../../ext/resources/css/xtheme-gray-extend.css">
<script type="text/javascript"
src="../../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="css/portal.css">
<script src="js/PortalExtension.js"></script>
<script src="js/MessageBus.js"></script>
<script src="js/gears_init.js"></script>
<script>
Ext.namespace("FinanceMaster");
Ext.namespace("FinanceMaster.Portlets");
Ext.namespace("FinanceMaster.Data");
</script>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="js/FinanceMaster.js"></script>
<script src="js/DataAccess.js"></script>
<script src="js/StoresAndRecords.js"></script>
<script src="js/OpenPortfolioWindow.js"></script>
<script src="js/PortfolioOverviewPortlet.js"></script>
<script src="js/PortfolioDistributionPortlet.js"></script>
<script src="js/AccountActivityPortlet.js"></script>
<script src="js/AccountHistoryPortlet.js"></script>
<script>Ext.onReady(FinanceMaster.init);</script>
</head>
<body><div id="divSource" class="cssSource"></div></body>
</html>The usual Ext JS imports are present, but there's a surprise here. Remember earlier I mentioned that theme we're using to give us a gray UI look? There's just a single thing we need to do to activate that: import the appropriate style sheet, xtheme-gray-extend.css in this case. You're good to go, assuming you've put the files for the theme in the right place—which means you've put that style sheet file in resources/css under the ext directory, and also put the corresponding images directory containing all the graphic resources for the theme under ext/resources/images. As usual, things that would otherwise be complex are made exceedingly simple by Ext JS.
After that are a couple of imports for the portal extension: its portal.css and PortalExtension.js files. The MessageBus.js file is also imported, providing our publish/subscribe model, and of course things wouldn't be complete without gears_init.js being brought in.
Next, a couple of namespaces are created. I put these here because they must be present before the rest of the application code is loaded, so this seemed like a good place. Remember that the browser interprets things in the order they appear on the page, so these namespaces will be created before anything that needs them is.
After that comes a bunch of JavaScript imports that comprise the application code. Once all that is done, we have the typical Ext.onReady() call to bootstrap the application.
We also have the divSource <div> that we've seen numerous times, but as we'll see in a bit, I've managed to slightly change the way this is used this time around.