Registreren

Create your own web pages

If you want to create dynamic behaviour you can create a webpage. This combines Velocity code that uses data defined in the Blueprint and webcode such as HTML and CSS. The following Velocity code is used to create an styled overview of the products in the database.

  • get table 'products' with: $session.getTable('product')
  • loop through the 'product' with #foreach($product in $products)
  • within the loop use the .get function to collect the product field values

Some html elements are used to style the overview such as <div>,<h2> and <p>.  The img src tag is used to write the images of the class to the screen. The css tags used for additional layout are placed between de <style> tags and the<div class="layout"> tag creates the connection to the style sheet. See first example below

 

<style>
.layout{
background-color: #ffffcc;
text-align: center;
}
</style>
 
#set($products = $session.getTable('product'))
<center><h2> Our products </h2></center>
 
#foreach($product in $products)
 <div class="layout">
 <h3>$product.get('name')</h3>
 
 #set($productImage = $product.getBlobUrl('image'))
 <img src="$productImage" alt="">
 <p>
 #set($productPrice = $product.get('price'))
 € $productPrice.format('en')
 </p>
 <p>
 $product.get('description')
 </p>
 <a href="/form/form2.vm?product=$product.getSingleKeyValue()">
 Get more information
 </a>
 </div>
#end

 

The next example has additional css style elements: padding, font-family and font-size. The CSS padding properties are used to generate space around an element's content, inside of any defined borders.

 

<style>
.layout{
background-color: #ffffcc;
text-align: center;
padding: 15px;
font-family: verdana;
font-size: 20px;
}
</style>

#set($products = $session.getTable('product'))
<center><h2> Our products </h2></center>

#foreach($product in $products)
<div class="layout">
<h3>$product.get('name')</h3>

#set($productImage = $product.getBlobUrl('image'))
<img src="$productImage" alt="">
<p>
#set($productPrice = $product.get('price'))
€ $productPrice.format('en')
</p>
<p>
$product.get('description')
</p>
<a href="/form/form2.vm?product=$product.getSingleKeyValue()">
Get more information
</a>
</div>
#end