This tutorial serves as a very basic introduction to Web Studio. It introduces concepts of page assembly and component bindings.
We'll begin with a 'starter site' which includes a few images, pre-stocked templates and pages. We'll load it up and begin to bind in a few images. We'll produce a basic mockup of the Green Energy site.
The following sections are to be followed in order. For the most part, the click paths are described but you should feel to experiment where appropriate.
To get started, access Web Studio using the following URL:
Be sure to specify a name for your new site and click Create.
Web Studio notifies you that it is creating your web site. It will create a Web Project inside of Alfresco WCM and then download the contents of the 'Green Energy' sample site from Alfresco Network. This will be installed into your web project, your user sandbox will be established, the cache will be refreshed and you will be taken to your web site.
If you click on the Start Editing option, you will tell Web Studio to bring up the in-context menus. These menus are overlays on top of your site which allow you to work with the site's pages, templates, components and content.
You will be greeted by a left-hand panel which appears as follows:
This panel provides access to resources within your site such as pages, templates and web components. It also provides a view into your Alfresco Repository resources such as web application content, document repository content and Alfresco Share collaboration sites.
In addition, you will have a menu along the top which provides immediate access to information and actions about the current web project and currently viewed page:
Your new web application is a web application in the purest sense. It contains files that were generated and will eventually may get deployed to a docroot somewhere. That said, at the present moment, they do not live on disk. They live inside of your Alfresco WCM web project.
In fact, all content, whether images, xml, video files, or anything else which you intend to be part of the web application deployed asset base live inside of your Alfresco WCM web project.
To be more specific, the content which you imported actually lives inside of your user sandbox. Other users working on the same web project will not see this content until you submit it to staging.
To see your content, go to the left-hand side and expand the Web Content slider:
This presents you with a tree view of your web content. You can expand nodes to dig down into your web application structure. Here, you will see folders, images or any other content that is contained in your sandbox.
Active Regions on the Page
When you expanded the Web Content slider, you may have noticed that the right side of your screen also changed colors. The unbound regions have taken on colors to indicate two things:
That you can bind components or content into them
Their scope (page, template or component)
We will explore template reuse later but essentially templates have varying levels of scope, so as to promote extensive reuse across your site. Page scoped regions will appear green whereas globally scoped regions will appear red.
Add the Header image
Within your web content panel, browse down to the '/images/home folder. Here you will see several images.
We will now bind an image into the site:
Click on the header.png image
Drag the header.png image to the header region on the page
When you mouse over the header region, you will notice that the region darkens to indicate that you can interact with it.
This will tell Web Studio that you wish to bind this image into that region. An 'Image Component' instance will be created and automatically configured for you. The region will refresh and reflect the update.
The Web Components shown are those which are included as stock or sample components along with Web Studio. They are standard Surf components which you may elect to use or discard. They may also serve as a reference for building your own.
In this case, they are fully usable and provide some useful, basic functionality. Here, we will binding in the navigation for our site.
Click on the Navigation component
Drag the Navigation component to the topnav region on the page
When you mouse over the topnav region, you will notice that the region darkens to indicate that you can interact with it.
This will tell Web Studio that you wish to bind a Navigation Component to that region. A new instance of a Navigation Component will be created and will be bound to the topnav region. The region will reload for you to reflect this update.
The region will reload for you to reflect this update. We have just told the navigation component to render using a different look and feel. This is updated automatically for the end user.
Keep on Building!
Using what we've learned here, it should now be possible for you to build out the rest of the Alfresco Green Energy home page. You can do this by simply experimenting with the dragging of images or components from the left-hand panels to the page.
If you are fortuitous, you should be able to build something that appears much like the following: