4.3 Interface-View
this is the front end layer to user. In this layer I use Velocity, I am new on this, there are few things that not working well yet. beside velocity, there is apache tiles+spring mvc theme and other techology that can be used on view layer.
With velocity we can divide our screen into few parts, and only change the content area wihtout change or rewrite the header, footer, or menu area. to do that use ‘$screen_content’, this command has same function with <iframe> on HTML.
total of view files is 13. here, I only show 4 files :
layout.vm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

#set( $stylesheet = 'layout/default.css' )

<link rel="stylesheet" href='$stylesheet' type="text/css" />
</head>
<body>
<div class="wrapper">
	<div class="header">
	    <div class="head">
	    <a href="home.do">
	            Bandwith Policy Portal
	    </a>
	    </div>
	</div>

	<div class="content">
        <div class="secondary">
            <ul class="nav">
                <li class="tittle">Subscriber Menu</li>
                <li class="list"><a href="subscriber.do">User Info</a></li>
                <li class="list"><a href="new-subscriber.do">Subscriber Activation</a></li>
                <li class="list"><a href="term-subscriber.do">Subscriber Termination</a></li>
                <li class="list"><a href="buy-product.do">Buy Product</a></li>
                <li class="list"><a href="term-product.do">Terminate Product</a></li>
                <li class="list"><a href="speed.do">Speed Request</a></li>
                <li class="tittle">Product Menu</li>
                <li class="list"><a href="product.do">Product Info</a></li>
                <li class="list"><a href="add-product.do">Add New Product</a></li>
                <li class="list"><a href="rem-product.do">Remove Product</a></li>
            </ul>
        </div>
        <div class="primary">
        	<center>
        	<div class="search">
        		#parse('searchTool.vm')
        	</div>
        	<div class="screen">
        		$screen_content
        	</div>
        	</center>
        </div>
    </div>
</div>
</body>
</html>

showSubscribers.vm

<table class="data">
	<caption class="caption">Daftar Subscriber</caption>
		<tr class="tittle">
		    <th>Subscriber Number</th>
		    <th>Subscriber Product</th>
		    <th>Remaining Quota</th>
		    <th>Product Normal Speed</th>
		    <th>Product Throttoled Speed</th>

		</tr>
	#set ($id=1)
	#foreach ($subscriber in $subscribers)
		#if ($id%2 != 0)
			<tr class="contentListWhite">
				<td class="contentListWhite">${subscriber.userNumber}</td>
				<td>${subscriber.productName}</td>
				#if (${subscriber.remainingBalance} <= 0)
					<td>	0 KB </td>
					<td class="dead">${subscriber.normalSpeed} Kbps</td>
					<td class="active">${subscriber.throttoledSpeed} Kbps</td>
				#{else}
					<td>	${subscriber.remainingBalance} KB </td>
					<td class="active">${subscriber.normalSpeed} Kbps</td>
					<td class="dead">${subscriber.throttoledSpeed} Kbps</td>
				#end

			</tr>
		#{else}
			<tr class="contentList">
				<td class="contentList">${subscriber.userNumber}</td>
				<td>${subscriber.productName}</td>
				#if (${subscriber.remainingBalance} <= 0)
					<td>	0 KB </td>
					<td class="dead">${subscriber.normalSpeed} Kbps</td>
					<td class="active">${subscriber.throttoledSpeed} Kbps</td>
				#{else}
					<td>	${subscriber.remainingBalance} KB </td>
					<td class="active">${subscriber.normalSpeed} Kbps</td>
					<td class="dead">${subscriber.throttoledSpeed} Kbps</td>
				#end
			</tr>
		#end
		#set ($id=$id+1)
	#end
</table>

newSubscriber.vm

<div class="caption"> Subscriber Activation </div>
	<form action="new-subscriber.do" method="POST">
		<div>
			<label for="subscriberNumber">Subscriber Number </label>
			<input name="subscriberNumber" id="subscriberNumber" type="text" />
		<div>

		<div>
		<button type="submit"> Activate >> </button>
		</div>
	</form>

termSubscriber.vm

<div class="caption"> Subscriber Termination </div>
	<form action="term-subscriber.do" method="POST">
		<div>
			<label for="subscriberNumber">Subscriber Number </label>
			<input name="subscriberNumber" id="subscriberNumber" type="text" />
		<div>

		<div>
		<button type="submit"> Terminate >> </button>
		</div>
	</form>

try to open from browser, and it will show you something like this :

home

user

product

Advertisements