Ah, sorry - completely failed to answer that part! 
The sample site delivered with WQS is built using Spring MVC with the Surf presentation framework. You don't have to use Surf (or, indeed, Spring MVC) if you would prefer to roll your own app. The WQS API is delivered as a separate JAR file if you want to use it differently.
To explain a little more about the sample app, however, in case you want to start there, it is, as you say, packaged as a standard JEE WAR file. Inside this file, below the WEB-INF folder, are the folders that contain the Surf presentation elements: templates, components, and pages. These can seem a little daunting to start with, but are actually quite simple.
A "template" is often a Freemarker template that normally comprises HTML with holes in it. These holes are called regions and are uniquely named in the template. A snippet of a template from the WQS app is:
There are nine named holes in that template ("bellyband", "left1", "left2", etc).
The regions (holes) are filled in with "components". These, oddly, are located in a folder named "webscripts" below the WEB-INF folder. Each component is like a little implementation of the MVC pattern - it optionally has a Controller (normally a little piece of javascript that is run on the server) that builds up a Model as an associative array (map) which is then rendered by a View which is often implemented using Freemarker. An example of a component from the sample site that has a little controller as well as a view is the slideshow that is shown on the home page. Its controller is a single line:
and its view is a piece of Freemarker that iterates over the articles found by the controller:
The last concept to describe are the "pages". A Surf page is basically a populated instance of a Surf template - that is to say that a page points at a template and defines which component should be placed in each of its regions. In the WQS system, when you set up "template mappings" on a section you are actually naming Surf pages rather than Surf templates. Sorry if that's confusing, but Surf pages are actually more like templates in most presentation frameworks, and, as I mentioned before, WQS is not tied to Surf. So, to take the example of the homepage in the WQS sample site, this is a Surf page named "homepage". This page is described with an XML document:
This page points at the template named "five-block" which happens to be the template that I showed a snippet from above. As you can see, this page maps different components into the regions defined by that template. For example, it maps the slideshow component into the "bellyband" region.
You may find that you can take the templates and some of the components that we've provided, wire them together differently with your own page definitions, and then adjust the CSS to do the rest. Without knowing what your target look is, it's hard to know how difficult that would be. Hopefully this has given you some ideas, anyway.
The sample site delivered with WQS is built using Spring MVC with the Surf presentation framework. You don't have to use Surf (or, indeed, Spring MVC) if you would prefer to roll your own app. The WQS API is delivered as a separate JAR file if you want to use it differently.
To explain a little more about the sample app, however, in case you want to start there, it is, as you say, packaged as a standard JEE WAR file. Inside this file, below the WEB-INF folder, are the folders that contain the Surf presentation elements: templates, components, and pages. These can seem a little daunting to start with, but are actually quite simple.
A "template" is often a Freemarker template that normally comprises HTML with holes in it. These holes are called regions and are uniquely named in the template. A snippet of a template from the WQS app is:
<@region id="bellyband" scope="page"/>
<div id="left">
<@region id="left1" scope="page"/>
<@region id="left2" scope="page"/>
<@region id="left3" scope="page"/>
<div class="h-box-1">
<@region id="bottom-left" scope="page"/>
</div>
<div class="h-box-2">
<@region id="bottom-right" scope="page"/>
</div>
</div>
<div id="right">
<@region id="right1" scope="page"/>
<@region id="right2" scope="page"/>
<@region id="right3" scope="page"/>
</div>
There are nine named holes in that template ("bellyband", "left1", "left2", etc).
The regions (holes) are filled in with "components". These, oddly, are located in a folder named "webscripts" below the WEB-INF folder. Each component is like a little implementation of the MVC pattern - it optionally has a Controller (normally a little piece of javascript that is run on the server) that builds up a Model as an associative array (map) which is then rendered by a View which is often implemented using Freemarker. An example of a component from the sample site that has a little controller as well as a view is the slideshow that is shown on the home page. Its controller is a single line:
model.articles = collectionService.getCollection(context.properties.section.id, args.collection);
and its view is a piece of Freemarker that iterates over the articles found by the controller:
<#if (articles.assets?size > 0)>
<script type="text/javascript" src="${url.context}/js/slideswitch.js"></script>
<div id="slideshow-wrapper">
<ul id="slideshow">
<#list articles.assets as article>
<li <#if article_index == 1>class="active"</#if>>
<#if article.relatedAssets['ws:primaryImage']??>
<#assign image=article.relatedAssets['ws:primaryImage'][0]>
<a href="<@makeurl asset=article/>"><img src="<@makeurl asset=image rendition='featuredNewsThumbnail'/>" alt="${image.title!image.name}" class="slide-1-img" /></a>
</#if>
<div class="slide-1-desc">
<h1>${article.title!article.name}</h1>
<p>${article.description!''}</p>
<div class="slideshow-rm"><a href="<@makeurl asset=article/>">${msg('read.more')}</a></div>
</div>
</li>
</#list>
</ul>
</div>
</#if>
The last concept to describe are the "pages". A Surf page is basically a populated instance of a Surf template - that is to say that a page points at a template and defines which component should be placed in each of its regions. In the WQS system, when you set up "template mappings" on a section you are actually naming Surf pages rather than Surf templates. Sorry if that's confusing, but Surf pages are actually more like templates in most presentation frameworks, and, as I mentioned before, WQS is not tied to Surf. So, to take the example of the homepage in the WQS sample site, this is a Surf page named "homepage". This page is described with an XML document:
<?xml version="1.0" encoding="UTF-8"?>
<page>
<id>homepage</id>
<description>page with 5 main configurable blocks, ideal for site home page</description>
<template-instance>five-block</template-instance>
<authentication>none</authentication>
<components>
<component>
<region-id>bellyband</region-id>
<url>/carousel/slideshow</url>
<properties>
<collection>news.featured</collection>
</properties>
</component>
<component>
<region-id>left1</region-id>
<url>/list/wide</url>
<properties>
<collection>news.top</collection>
</properties>
</component>
<component>
<region-id>right1</region-id>
<url>/list/narrow</url>
<properties>
<collection>blogs.latest</collection>
</properties>
</component>
<component>
<region-id>bottom-left</region-id>
<url>/list/links</url>
<properties>
<collection>featured.links</collection>
</properties>
</component>
<component>
<region-id>bottom-right</region-id>
<url>/content/named</url>
<properties>
<asset>feature.html</asset>
</properties>
</component>
</components>
</page>
This page points at the template named "five-block" which happens to be the template that I showed a snippet from above. As you can see, this page maps different components into the regions defined by that template. For example, it maps the slideshow component into the "bellyband" region.
You may find that you can take the templates and some of the components that we've provided, wire them together differently with your own page definitions, and then adjust the CSS to do the rest. Without knowing what your target look is, it's hard to know how difficult that would be. Hopefully this has given you some ideas, anyway.
