This message indicates that your new site doesnâ€™t know how to render itself. In the next section, you will change that.
Associate a Presentation Template
For the new site home page to display, you must specify what kind of presentation template to use.
Web Studio allows you to have many presentation templates for a single page. The default format(default) corresponds to HTML output. However, you may also be interested in other formats such as:
In fact, we could have as many different â€œformatsâ€ as we would like for this page.
Thinking this way, we might reason that our home page could have a default HTML format for browsers. It might also have alternative formats for various types of consumer devices.
Letâ€™s keep it simple for now. Letâ€™s just try to set up a default template.
Click on Associate a Presentation Template to bring up the list of the presentation templates in use by this page. They will be listed and sorted by Format. There will be a single presentation template listed for each format.
Note that in this case, there are no template associations listed. We havenâ€™t defined any yet!
Under the Formats selector, you will be able to pick from the default out-of-the-box formats. These are Default, Print and Wireless (WAP). You can, of course, add additional ones if you would like. This is done through configuration but is not covered in this tutorial.
Click on Default to set up the template for the default (HTML) format.
Under the Templates selector, you will be able to pick which presentation template to use. There are several which are included with Web Studio but you are also free to create your own. A graphical editor is provided with Web Studio to help you do this and you can also build your own using Freemarker (FTL).
The default templates include:
Basic Home Page â€“ a simple home page layout with regions for header, navigation, body content (left, center and right) as well as a footer. Basic Landing Page â€“ a simple landing page layout with region sfor header, navigation body content (left and right) as well as a footer.
In this case, since weâ€™re putting together a â€œHomeâ€ page, weâ€™ll just use the basic home page template.
With Web Studio, we are able to drag â€œthingsâ€ from the sliders into our web pageâ€™s regions. For instance, if we drag a piece of content into a region, we create a relationship between that piece of content and that region on the page.
In fact, Web Studio handles a lot Surf wiring for us. Web Studio instantiates new component instances, configures the component instances to reference the content we are dragging and then associates the component instance to the region on the page.
In short, Web Studio automatically creates Alfresco Surf component bindings for us!
We can drag the following kinds of things into the page:
Files that are stored in our web application Folders that are part of our web application Documents from our Alfresco Spaces Repository Spaces from our Alfresco Spaces Repository Custom objects from our Alfresco Spaces Repository Content of various types from our Alfresco Share site Wiki articles Blog entries Document Library files More Component Definitions
These are dragged into a page region to establish component instances on the page. You can think of a component instance like a gadget or a portlet. You might use this to drop in any of the following:
An image display gadget which renders a company logo. An article list that shows the top headlines of the day. A thumbnail browser of popular video content. A breadcrumb trail A dynamic navigation selector
You can imagine many more situations.
Bind in a Header Component
Bring up the in-context editor and expand the Web Content slider.
The Web Content slider provides you with full access to your web application content.
When youâ€™re using Web Studio, all of your web application content actually resides inside of a web project in Alfresco WCM.
In fact, weâ€™re looking at the current userâ€™s sandbox.
Also, notice how the regions have responded. The regions become â€œactiveâ€ meaning that you can drop things onto them. Hovering your mouse over a region will cause the region to transition in color, suggesting that you can drop things onto the region.
Now select the â€œheader.jpgâ€ file from Web Site -> images - home.