8.4. The Markup

The index.htm file contains all the markup for this application, and it's at this point old hat since it only varies from the previous applications in two relatively minor ways. Have a look:

<html>
  <head>
    <title>Dueling Cards</title>

    <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
    <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="ext/ext-all.js"></script>

    <script src="js/gears_init.js"></script>

    <script>
      Ext.namespace("DuelingCards");
    </script>

    <link rel="stylesheet" type="text/css" href="css/styles.css">
    <script type="text/javascript" src="js/DuelingCards.js"></script>
    <script type="text/javascript" src="js/Data.js"></script>
    <script type="text/javascript" src="js/SetupCode.js"></script>
    <script type="text/javascript" src="js/MenuCode.js"></script>
    <script type="text/javascript" src="js/IndicatorsCode.js"></script>
    <script type="text/javascript" src="js/OpponentCode.js"></script>

    <script>
      Ext.onReady(DuelingCards.init);
    </script>

  </head>

  <body
    style="overflow:hidden;background-image:url("img/pageBacks/marble.gif");">
    <div id="divSource" class="cssSource"></div>
  </body>

</html>

The first difference is that the namespace, DuelingCards, is defined here rather than in one of the .js files. I did this to allow maximum flexibility in the order of .js imports. Otherwise, I'd have to ensure that either the one file that defines the namespace was imported first or that each .js file tries to create the namespace if it doesn't exist, which seemed like a bit too much work to me, work being something I desperately try to avoid at all costs! So, the namespace is defined and then all the .js files are imported.

The other difference is that there's basically no markup here! The only markup is in fact the divSource <div> that we're quite familiar with by now. Everything else you see on the screen is under programmatic control from the get-go. Also note that the page background is set inline with the <body> element. The CSS purists out there will want to slap me for that, since inlining styles is generally frowned upon, but it frankly doesn't hurt my head in this case.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.191.223.123