ActiveWAFL Crash Course

The WAFL Cones Ice Cream Shop, Version 1.0

4.1 Create a Presentation Template

We'll need a Presentation Template for each page in our application.
First, we'll change the default page header.

We'll need a new logo.
Download the Wafl Cones logo here, and save it to Public/Resources/Images/IceCreamCone.png.

Now we'll edit the header's contents, which can be found in a Master Presentation Template file named WaflCones/Presentation/Templates/Master/MainLayout.tpl.

Replace the file's contents with the following.

  1. {extends file="./MainHead.tpl"}
  2. {block "HTML_BODY"}
  3.     <!DOCTYPE html>
  4.     <body>
  5.         <header class="Top Dock">
  6.             <div class="Auto Layout Grid">
  7.                 <div class="Row">
  8.                     <div class="Spans1">
  9.                         <a href="/"><img src="/Resources/Images/IceCreamCone.png" /></a>
  10.                     </div>
  11.                     <div class="Spans10">
  12.                         <hgroup>
  13.                             <h1>{$SITE_DISPLAY_TITLE}</h1>
  14.                             <h5>Just gimme just one more lick!</h5>
  15.                         </hgroup>
  16.                     </div>             
  17.                 </div>
  18.             </div>
  19.         </header>
  20.         <main id="MainLayoutPageContents">
  21.             {nocache}
  22.                 {if count($GLOBAL_ERRORS)>0}
  23.                     {include file="Parts/GeneralErrors.tpl"}
  24.                 {/if}
  25.                 {include file="Parts/GeneralInfo.tpl"}
  26.             {/nocache}
  27.             {block name="PAGE_CONTENT"}Page Contents Go Here{/block}
  28.         </main>
  29.         <footer class="Bottom Dock">
  30.             <div class="Auto Layout Grid">
  31.                 <div class="Row">
  32.                     <div class="Spans12 Align Center">
  33.                         (c) 2014 Wafl Cones Inc.
  34.                     </div>
  35.                 </div>
  36.             </div>
  37.         </footer>
  38.     </body>
  39. {/block}

Next, we'll take care of the default landing page.

We'll modify the sample landing page that was generated when we created the application.

Edit the file WaflCones/Presentation/Templates/LandingPage.tpl and replace it's contents with the following.

WaflCones/Presentation/Templates/LandingPage.tpl
  1. {extends file="Master/MainLayout.tpl"}
  2. {block name="PAGE_CONTENT" nocache}
  3.     {if $CURRENT_USER->Get_UserId() != null}
  4.     <div id="MainMenu">
  5.         <a id="NewSaleButton" class="Button" href="/Sale">New Sale</a><br>
  6.         <a id="AdministrationButton" class="Button" href="/Administration/">Administration</a>
  7.         <a id="SignoutButton" class="Button" href="/?UserAuthAction=Logout">Sign Out</a>
  8.     </div>
  9.     {else}
  10.     <form id="LoginForm" method="post" action="/">
  11.         <div class="Auto Grid Layout">
  12.             <div class="Row">
  13.                 <div class="Spans6"><label>Employee Full Name</label></div>
  14.                 <div class="Spans6"><input type="text" name="FullName" id="FullName" /></div>
  15.             </div>
  16.             <div class="Row">
  17.                 <div class="Spans6"><label>Employee Id</label></div>
  18.                 <div class="Spans6"><input type="text" name="EmployeeId" id="EmployeeId" /></div>
  19.             </div>
  20.             <div class="Row">
  21.                 <div class="Spans12"><button>Sign In</button></div>
  22.             </div>
  23.         </div>
  24.         <input type="hidden" name="UserAuthAction" value="Login" />
  25.     </form>
  26.     {/if}
  27. {/block}

We'll also create the Presentation Templates for the new sale page and the administration menu.
Their code follows. Note that you'll need to create the WaflCones/Presentation/Templates/Administration directory.

WaflCones/Presentation/Templates/Sale.tpl
  1. {extends file="Master/MainLayout.tpl"}
  2. {block name="PAGE_CONTENT"}
  3. <h2>Sale Screen</h2>
  4. <div class="Auto Layout Grid">
  5.     <form action="Sale" method="post" id="SaleForm">
  6.         <div style="text-align: center;">
  7.             <button type="button" id="AddItemButton"><i class="IconPlus"></i> Add Item</button>
  8.             <a style="float: right;" class="Button" href="/">Cancel Sale</a>
  9.         </div>
  10.         <div id="SaleItems">
  11.             <template id="SaleItemTemplate">
  12.                 <div class="Row SaleItem">
  13.                     <div class="Spans6">
  14.                         <label>Flavor</label>
  15.                         <div id="FlavorButtons">
  16.                         {foreach $MODEL->GetFieldValue("Flavors") as $FLAVOR}
  17.                             <label class="FlavorButtonLabel" data-sale-item-number="[SaleItemNumber]" style="background-color: #{$FLAVOR->Get_Color()};" for="FlavorButton_[SaleItemNumber]_{$FLAVOR->Get_FlavorId()}" onclick="$('Ounces_[SaleItemNumber]').Enable();">
  18.                                 <input
  19.                                   type="radio" class="FlavorButton"
  20.                                   name="Flavor[[SaleItemNumber]]"
  21.                                   data-sale-item-number="[SaleItemNumber]"
  22.                                   id="FlavorButton_[SaleItemNumber]_{$FLAVOR->Get_FlavorId()}"
  23.                                    value="{$FLAVOR->Get_FlavorId()}"
  24.                                    data-price-per-ounce="{$FLAVOR->Get_PricePerOunce()}" />
  25.                                 {$FLAVOR->Get_Title()}
  26.                             </label> &nbsp;&nbsp;
  27.                         {/foreach}
  28.                         </div>
  29.                     </div>
  30.                     <div class="Spans1">
  31.                         per oz<br>
  32.                         $<span id="PricePerOunce_[SaleItemNumber]">0.00</span>
  33.                     </div>
  34.                     <div class="Spans1">
  35.                         <label>Wt (oz)</label>
  36.                         <input type="text" class="ItemWeight" name="Ounces[[SaleItemNumber]]" id="Ounces_[SaleItemNumber]" data-sale-item-number="[SaleItemNumber]" required disabled />
  37.                     </div>
  38.                     <div class="Spans2 Price">
  39.                         <label>Item Total</label>
  40.                         $<span id="SaleItemPrice_[SaleItemNumber]">0.00</span>
  41.                     </div>
  42.                 </div>
  43.             </template>
  44.         </div>
  45.         <div class="Row">
  46.             <div class="Skips6 Spans2 Price">
  47.                 Total
  48.             </div>
  49.             <div class="Spans2 Price">
  50.                 $<span id="TotalPrice">0.00</span>
  51.             </div>
  52.         </div>
  53.         <div class="Row">
  54.             <div class="Skips6 Spans2 Price">
  55.                 <label>Amount Tendered</label>
  56.             </div>
  57.             <div class="Spans2">
  58.                 <input type="text" class="Price" name="AmountTendered" id="AmountTendered" required /><br>
  59.             </div>
  60.             <div class="Spans2">
  61.                 <button id="ProcessSaleButton"><i class="IconCashRegister"></i> Process Sale</button>
  62.             </div>
  63.         </div>
  64.     </form>
  65. </div>
  66. <div id="PostSalePopup" hidden>
  67.     Change Due: $<b id="ChangeDue">5.00</b><br>
  68.     <a id="SaleCompletedButton" class="Button" href="/">Sale Complete</a>
  69. </div>
  70. {/block}
WaflCones/Presentation/Templates/Administration/LandingPage.tpl
  1. {extends file="Master/MainLayout.tpl"}
  2. {block name="PAGE_CONTENT"}
  3.     <div style="text-align: center;">
  4.         <a class="Button" href="/Administration/Flavors">Flavors</a>
  5.         <a class="Button" href="/Administration/Employees">Employees</a>
  6.         <a class="Button" href="/Administration/Reports/">Reports</a>
  7.         <a class="Button" href="/">Main Menu</a>
  8.     </div>
  9. {/block}
Now that we have setup a few Presentation Templates, let's style them.
We'll repeat this process later for the other pages.