Create a Style Project from a mockup

From Wiki

Category: Presentation
Level: Beginner
Topics: Style Project

This article aims at guiding you through the analisys process of a mockup found over the internet and shows you how to break down this mockup in order to create the page(s), frame(s) and unit(s) templates. With mockup is intended every HTML page saved from the Web browser as far as an entire Web template downloaded from specific websites. Take as example the "GoFlexible" mockup. Download and save it. After this operation you have a ZIP file on your file system in which are contained all the resources you are going to use in order to create the Style Project.

Let's start creating the Style Project.

Choose File -> New -> Style Project from the main menu and type "GoFlexible" as the name for the project.
Copy the "style.css" file contained in the ZIP file of the layout in the GoFlexible/css folder of the Style Project.
Copy the "img" folder contained in the ZIP file of the layout in the GoFlexible folder of the Style Project.

Now you have to break down the layout. First of all look carefully at the layout and search for the main elements. At this step it's important to understand the main page structure and the main frame for the contents in order to be able to write the page template. The image on the right highlights the main elements of this layout.

the Company Logo
the Company banner or custom image
the First Level Menu
the Page Title
the Second Level and Third Level Menu
the Current Third Level Menu link
the Unit(Cell) Title
the Frame

The Default Page Layout

The main template of a Style Project is the Page template. Let's see now how to create a new Page template and how to set it as the Default one.

Choose File -> New -> Layout Template from the main menu, choose "Page" as the template type, type "Default" as the template name and click on the Finish button.
Open the Layout.xml file of the Style Project, choose the Resources tab and add also the "style.css" to the list. Now choose the General tab and select in the Page Layout property the "GoFlexible/Default" page template. Press CTRL+S to save changes.
Open the index.html file contained in the ZIP file with a text editor.
Copy the "DOCTYPE" declaration and substitute it to the one in the template.
Copy the "xmlns" attribute of the HTML element and append it to the same element in the template.
Copy the code fragment contained the BODY tag and copy it into the <wr:PageForm> tag in the template.

Let's consider the HTML structure and see which parts you have to adjust in order to apply to any Web Project regardless its structure.

The Logo and the banner

The first part to consider is the header in which there are both the Company Logo and banner.

This is the related code fragment.


    <!-- HEADER -->
    <!-- Background -->
    <div id="header-section">
       <a href="#"><img id="header-background-left" src="./img/img_logo.jpg" alt=""/></a>
       <img id="header-background-right" src="./img/img_header.jpg" alt=""/>
    </div>

Change the "src" attribute of both images in order to retrieve the same images (or a custom one) from a folder (ex. "GoFlexible/img") included on the Style Project
Print in the "href" attribute the url to the Home page of the Web Project. First of all it's necessary to retrieve the Home Page element from the Web Project. Then, this element is used in a WR tag in order to print the correct link. This is the sample code



       [% def homePage = getById(page.selectSingleNode("ancestor::SiteView").valueOf("@homePage")) %]  
       <a href="<wr:URL context="homePage"/>"><img id="header-background-left" src="GoFlexible/img/img_logo.jpg" alt=""/></a>

For the Logo image print the Home Page name in the "alt" attribute.

 <img id="header-background-left" src="GoFlexible/img/img_logo.jpg" alt="<wr:Label context="homePage"/>"/>

For the other image it's possible to let the user decide the message through a Layout Parameter.

<wr:LayoutParameter name="banner-alt-text" label="Banner Alt Text" type="string" default="Example Text">
This is the text proposed in the alt attribute of the banner image.
</wr:LayoutParameter>
[%  def bannerText = params["banner-alt-text"] %]

To directly print the variable containing the message

 <img id="header-background-right" src="GoFlexible/img/img_header.jpg" alt="[%= bannerText %]"/>

If you want a localized message, then the variable is the message key

 <img id="header-background-right" src="GoFlexible/img/img_header.jpg" alt="<bean:message key="[%printJSPTagValue(bannerText)%]"/>"/>

The main menu

Let's see now how to manage the code related to the first level menu. The involved original code is the following


    <!-- Navigation -->
    <div id="header">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Menu Link 1</a></li>
        <li><a href="#">Menu Link 2</a></li>
        <li class="selected">Menu Link 3</li>
        <li><a href="#">Menu Link 4</a></li>  
        <li><a href="#">Menu Link 5</a></li>
      </ul>
    </div>

In particular you have to print a LI element for each landmark element which is directly child of the Site View. Note that a landmark element can be an area, a page or an operation, so let's choose the WR tag which allows to retrieve landmark elements disregarding their type (wr:LandmarkMenu). To specify that the tag must search only the "first level" landmarks, set the "level" attribute to 1. Moreover, to apply the "selected" class to the current selected link, let's use the <wr:Current> and <wr:NonCurrent> tags. Finally the <wr:Label/> tag prints the link name and the <wr:Url/> tag prints the link url. This is the final result.


    <!-- Navigation -->
    <div id="header">
      <ul>
        <wr:LandmarkMenu level="1">
          <wr:Current>
            <li class="selected"><wr:Label/></li>
          </wr:Current>
          <wr:NonCurrent>
            <li><a href="<wr:URL/>"><wr:Label/></a></li>
          </wr:NonCurrent>
        </wr:LandmarkMenu>
      </ul>
    </div>

If you do not want to print the home page link another time wrap the content of the <wr:LandmarkMenu> tag with this Groovy fragment


         <wr:LandmarkMenu level="1" var="link">
           [% if(link != homePage){ %]
              ....
           [% } %]
         </wr:LandmarkMenu>

N.B. If the page template prints the landmark link using the <wr:Link/> tag, the code fragment presented above is implicited contained in the tag and it does not have to be managed explicitely in the template.

The other menu

The same approach can be used to create the code for the second and third level menu. This is the starting point


    <!-- Navigation -->
    <div id="left-column">
      <ul>
        <li class="left-navheader-first">Menu 3</li>
        <li><a class="left-navheader" href="#">Menu link 3-1</a></li>
        <li><a href="#">Menu Link 3-1-1</a></li>
        <li><a href="#">Menu Link 3-1-2</a></li>
        <li><a href="#">Menu Link 3-1-3</a></li>
        <li><a class="left-navheader" href="#">Menu Link 3-2</a></li>
        <li><a href="#">Menu Link 3-2-1</a></li>
        <li><a href="#">Menu Link 3-2-2</a></li>
		    <li><a href="#">Menu Link 3-2-3</a></li>
        <li><a class="left-navheader" href="#">Menu Link 3-3</a></li>
        <li><a href="#">Menu Link 3-3-1</a></li>
		    <li class="selected">Menu Link 3-3-2</li>
        <li><a href="#">Menu Link 3-3-3</a></li>
        <li><a class="left-navheader" href="#">Menu Link 3-4</a></li>
        <li><a href="#">Menu Link 3-4-1</a></li>
        <li><a href="#">Menu Link 3-4-2</a></li>
        <li><a href="#">Menu Link 3-4-3</a></li>				
      </ul>
    </div>

The first LI element is the page title. It's possible to use the <wr:PageTitle/> tag in order to print this element


 <li class="left-navheader-first"><wr:PageTitle/></li>

The second LI element is the one that has to be printed for each second level menu element. Let's use the same tag seen before, just change the "level" attribute and write 2.


        <wr:LandmarkMenu level="2">
          <li><a class="left-navheader" href="<wr:URL/>"><wr:Label/></a></li>
        </wr:LandmarkMenu>

Let's add the code necessary to print the third level menu.


        <wr:LandmarkMenu level="2">
           <li><a class="left-navheader" href="<wr:URL/>"><wr:Label/></a></li>
	   <wr:LandmarkMenu level="3">
	      <li><a href="<wr:URL/>"><wr:Label/></a></li>
	   </wr:LandmarkMenu>  
        </wr:LandmarkMenu>

This code prints the third level menu only for the current second level menu element and not for the others. The original template does not make this distinction and prints always this menu. In order to do this it's necessary to add the manage of both the current and not current element.


        <wr:LandmarkMenu level="2">          
          <wr:Current>
               <li><a class="left-navheader" href="<wr:URL/>"><wr:Label/></a></li>
	           <wr:LandmarkMenu level="3">
	            <li><a href="<wr:URL/>"><wr:Label/></a></li>
	          </wr:LandmarkMenu>           
          </wr:Current>
          <wr:NonCurrent>
               <li><a class="left-navheader" href="<wr:URL/>"><wr:Label/></a></li>
	           <wr:LandmarkMenu level="3">
	            <li><a href="<wr:URL/>"><wr:Label/></a></li>
	          </wr:LandmarkMenu>           
          </wr:NonCurrent>
        </wr:LandmarkMenu>

Let's add the code to distinguish between current and not current third level menu element


     <wr:LandmarkMenu level="3">
       <wr:Current>
          <li class="selected"><wr:Label/></li>
       </wr:Current>
       <wr:NonCurrent>
          <li><a href="<wr:URL/>"><wr:Label/></a></li>
       </wr:NonCurrent>	  
     </wr:LandmarkMenu>

The page content

The page template is almost finished. Let's consider now the central and the right column. In the central column there are all the page contents, which correspond to the page Grid in the Web Model. In the right column there is other content, which can not be taken from the grid; it must be placed in some other location, in a custom location. The last step is to delete from the template the content of both column and write the <wr:Grid/> tag in the central column and the <wr:CustomLocation/> tag in the other one. This is the result of the operation


    <!-- RIGHT COLUMN -->
    <div id="right-column">		
	<wr:CustomLocation name="right-column"/>						
    </div>
    <!-- MIDDLE COLUMN -->
    <div id="middle-column">	 			
	<wr:Grid/>
     </div>

The Default Frame

Let'see now how to create the frame highlighted as seventh point in the list of the main elements.

Choose File -> New -> Layout Template from the main menu, choose "Frame" as the template type, type "Default" as the template name and click on the Finish button.
Open the Layout.xml file of the Style Project, choose the General tab and select in the Frame Layout property the "GoFlexible/Default" frame template. Press CTRL+S to save changes.
Copy the following code fragment in the template


  <div class="middle-column-box-title-grey">Grey title</div>

Substitute with the <wr:FrameTitle/> tag the "Grey title" string
Write the <wr:FrameContent/> tag at the end of the code


  <div class="middle-column-box-title-grey"><wr:FrameTitle/></div>
  <wr:FrameContent/>

If you open the style.css file you can see that there are different frame colors that can be applied. In order to add the chance to the user to choose the color, let's add a parameter to the frame.


  <wr:LayoutParameter name="color" label="Frame Color" type="enum" values="grey|blue|yellow|green|red"/>
  [%
	setHTMLOutput()
	def color = params["color"]
  %]
  <div class="middle-column-box-title-[%= color %]"><wr:FrameTitle/></div>
  <wr:FrameContent/>

The Right Column Frame

Using the same procedure let's create the right column frame.

Choose File -> New -> Layout Template from the main menu, choose "Frame" as the template type, type "Default" as the template name and click on the Finish button.
Open the Layout.xml file of the Style Project, choose the General tab and select in the Frame Layout property the "GoFlexible/Default" frame template. Press CTRL+S to save changes.
Copy the following code fragment in the template


   <div class="right-column-box-white">
     <div class="right-column-box-title-grey">Color options</div>
     <p>All boxes in the middle and right columns can vary colors for titles and backgrounds. See examples below. 
        The colors for titles and backgrounds can be chosen independently.</p>				
   </div>

Substitute with the <wr:FrameTitle/> tag the "Color options" string
Substitute with the <wr:FrameContent/> tag the
tag


   <div class="right-column-box-white">
      <div class="right-column-box-title-grey"><wr:FrameTitle/></div>
      <wr:FrameContent/>
   </div>

If you open the style.css file you can see that there are different frame colors and background colors that can be applied. In order to add the chance to the user to choose those colors, let's add two parameters to the frame.


<wr:LayoutParameter name="color" label="Frame Color" type="enum" values="grey|blue|yellow|green|red"/>
<wr:LayoutParameter name="bgcolor" label="Frame Background Color" type="enum" values="white|blue|yellow|green|red"/>
  [%
	setHTMLOutput()
	def color = params["color"]
	def bgcolor = params["bgcolor"]
  %]
  <div class="right-column-box-[%= color %]">
  <div class="right-column-box-title-[%= bgcolor %]"><wr:FrameTitle/></div>
  <wr:FrameContent/>
  </div>

The Default Grid template

Looking to the mockup structure it's also possible to create a Grid template.

Choose File -> New -> Layout Template from the main menu, choose "Grid" as the template type, type "Default" as the template name and click on the Finish button.
Open the Layout.xml file of the Style Project, choose the General tab and select in the Grid Layout property the "GoFlexible/Default" frame template. Press CTRL+S to save changes.
Open the "WRDefault/Default" Grid template and copy all the code. This template takes into account all the operations that a WebRatio user can do on the Grid, such as merging cells. The template must print only the "real" cells.
Paste the code in the "GoFlexible/Default" Grid template
Since the Grid of the mockup is based on DIV elements, it's not possible to consider some cell's information that the user can specify in the Properties View, such as "align" and "spacing". So you have to delete the following line of codes from the template


1) <wr:LayoutParameter label="Width" name="width">
     Defines the width of the cell of the grid.
   </wr:LayoutParameter>
2) def paramGridWidth = params["width"]
   def gridWidth= grid.attributeValue("width", paramGridWidth)
   def gridHeight=grid["height"]
   def gridCSSStyle=grid["cssStyle"]
   def gridAlign=grid["align"]
   def cellpadding=grid["padding"]
   def cellspacing=grid["spacing"]

Copy the following code fragment in the template at the end of the template


      <!-- Middle column full box -->
      <div class="middle-column-box-white">
      <div class="middle-column-box-title-grey">Grey title</div>
       <p><img src="./img/img_general.jpg" class="middle-column-img-left" width="100" alt="" />
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Aliquam at libero</a>. 
       Suspendisse non risus a diam convallis lobortis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
       Suspendisse non risus a diam convallis lobortis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
       Suspendisse non risus a diam convallis lobortis.</p>
       <p><a href="#">Read more</a></p>
      </div>
			
      <!-- Middle column left section -->
      <div class="middle-column-left">

        <!-- Middle column left box -->
        <div class="middle-column-box-left-white">
          <div class="middle-column-box-title-grey">Grey title</div>
          <p><img src="./img/img_general.jpg" class="middle-column-img-left" width="50"  alt="" />
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Aliquam at libero</a>. 
          Suspendisse non risus a diam convallis lobortis.</p>
          <p><a href="#">Read more</a></p>
        </div>
				
        <!-- Middle column left box -->
        <div class="middle-column-box-left-white">
          <div class="middle-column-box-title-grey">Grey title</div>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Aliquam at libero</a>. 
          Suspendisse non risus a diam convallis lobortis.</p>
          <p><a href="#">Read more</a></p>
        </div>
      </div>		
		
      <!-- Middle column right section -->		
      <div class="middle-column-right">

        <!-- Middle column right box -->
        <div class="middle-column-box-right-white">
          <div class="middle-column-box-title-grey">Grey title</div>
           <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Aliquam at libero</a>. 
           Suspendisse non risus a diam convallis lobortis.</p>
        </div>

        <!-- Middle column right box -->
        <div class="middle-column-box-right-white">
          <div class="middle-column-box-title-grey">Grey title</div>
          <p><img src="./img/img_general.jpg" class="middle-column-img-left" width="50"  alt=""/>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Aliquam at libero</a>. 
          Suspendisse non risus a diam convallis lobortis. Suspendisse non risus a diam convallis lobortis. 
          Suspendisse non risus a diam convallis lobortis</p>
        </div>				
      </div>

Delete the TABLE element from the template.
First of all you have to rearrange the code in order to calculate if a row contains one or two(or more) cells. This is necessary because in the first case the template has to print the "middle-column-box-white" DIV and its content; in the other case it has to print the "middle-column-left" DIV for the first cell and the "middle-column-right" DIV for the second cell. These is the final result


[% for (row in gridRows) { 	
	def containedCells = row.selectNodes("layout:Cell").findAll{!hiddenCells.contains(it)}
	def cellsCount = containedCells.size()
	if (cellsCount == 1){
%]
      <div class="middle-column-box-white">
	  <wr:Cell context="containedCells[0]"/>
      </div>	
[%	} else { %]
      <div class="middle-column-left">
        <div class="middle-column-box-left-white">
	   [% if (true ){ %]<wr:Cell context="containedCells[0]"/>[% } %]
        </div>
      </div>		
		
      <!-- Middle column right section -->		
      <div class="middle-column-right">
        <!-- Middle column right box -->
        <div class="middle-column-box-right-white">
           [% if (true ){ %]<wr:Cell context="containedCells[1]"/>[% } %]
        </div>		
      </div>
[%  }
 }
 %]

Note that the code above implies that the Grid for this template has at most two cells for each row. It's not possible to avoid that the WebRatio user adds more than two columns to a row, but these cells will be ignored by the template. It's possible to advise the user that some columns will be ignored.

Add the following function at the top of the template


	def throwGenerationException(message){
		throw new com.webratio.generator.GenerationException(null,message,[],null)	
	}

Add the following line of code just after the "cellsCount" variable definition. This code checks if the current row has more than two visible cells and generates an error with a custom message.


	if(cellsCount > 2){
		throwGenerationException("You can use at most two cells for each row")	
	}

The Data Unit Template

Let's see now how to create a simple template for the Data Unit. Suppose you want to realize a template like the figure on the right. In this case, the template manages a Data Unit having only one display attribute and one link. You can implement the trace of user mistake in the template usage as seen in the previous section.

Choose File -> New -> Layout Template from the main menu, choose "Unit" as the template type, choose the Data Unit and type "TextOnly" as the template name and click on the Finish button.
Copy the following code into the template


   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Aliquam at libero</a>. 
      Suspendisse non risus a diam   convallis lobortis.</p>
    <p><a href="#">Read more</a></p>

Add the two Groovy variables that extract the first layout attribute and the first layout link.


   def attribute = unit.selectSingleNode("layout:Attribute")
   def link = unit.selectSingleNode("layout:Link")

Substitute the content of the first P element with the <wr:Value context="attribute"/> tag
Substitute the content of the second P element with the <wr:Link context="link"/> tag
This is the final result


#?delimiters [%, %], [%=, %]
[%
	setHTMLOutput()
	def attribute = unit.selectSingleNode("layout:Attribute")
	def link = unit.selectSingleNode("layout:Link")
%]

<p><wr:Value context="attribute"/></p>
<p><wr:Link context="link"/></p>

Related articles:

	Category	Difficulty	Refers
Create a Style Project from a mockup	Presentation	Beginner	Style Project
Getting started with Visibility Conditions	Web Model	Beginner	Visibility Condition
Getting started with the Cell Templates	Presentation	Beginner	Template
Getting started with the Excel Style	Presentation	Beginner	Template
Getting started with the Style Project	Presentation	Beginner	Style Project
… further results

Create a Style Project from a mockup

From Wiki

Contents

The Default Page Layout

The Logo and the banner

The main menu

The other menu

The page content

The Default Frame

The Right Column Frame

The Default Grid template

The Data Unit Template

Views

Personal tools

Search

Navigation

Toolbox