Web Studio Tutorial - Green Energy Starter

[resplin]

Obsolete Pages{{Obsolete}}

The official documentation is at: http://docs.alfresco.com

Labs 3Web Studio3.0

NOTE:  Web Studio is no longer part of the Alfresco Community build.  The Surf framework that Web Studio utilised has been committed to Spring Source http://www.springsource.org/extension.../se-surf.  Spring Surf is the underlying framework used by Alfresco Share.

The Web Editor Framework is the recommended platform for developing rich in-context WCM capabilities.

Back to Web Studio Tutorials.

Table of Contents

• 1 Overview


• 2 Tutorial
  
  
  
  • 2.1 Getting Started
  
  
  • 2.2 Using the In-Context Floating Menu
  
  
  • 2.3 Browse Virtualized Web Content
  
  
  • 2.4 Active Regions on the Page
  
  
  • 2.5 Add the Header image
  
  
  • 2.6 Inspect the Header image
  
  
  • 2.7 Add the Navigation Component
  
  
  • 2.8 Configure the Navigation Component
  
  
  • 2.9 Keep on Building!
  
  

Overview

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.

Tutorial

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.

Getting Started

To get started, access Web Studio using the following URL:

• http://localhost:8080/studio
  
• Note: This assumes that Alfresco Web Studio is installed on your local machine.
  

Since you are not yet authenticated to Web Studio, you will be prompted to log in:

alfresco-web-studio-tutorial-login.png

You can log in using your Alfresco credentials. However, for this walkthrough, log in using the administrator credentials:

• Login Name: admin
  
• Password: admin
  

The next step of the wizard offers the option create a new web site or import an existing web site from Alfresco Network or from any web template repository your administrator has set up for you.

alfresco-web-studio-tutorial-site-wizard-2.png

• Expand the Create Web Site option
  
• Under Based on the following, select Green Energy
  
• Provide a name for your web site
  

alfresco-web-studio-tutorial-create-green-energy-2.png

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.

You should then see something like the following:

640px

The dotted regions represent Alfresco Surf regions which do not have any components in them.  One of the things we will do in this tutorial is set about binding components into these regions.

Using the In-Context Floating Menu

At the bottom-left of the screen, you'll notice that a handy little floating menu has appeared.  This fellow tells you the name of your web project as well as the site which is currently being viewed.

alfresco-web-studio-tutorial-floating-menu.png

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:

alfresco-web-studio-tutorial-left-hand.png

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:

alfresco-web-studio-tutorial-top-menu.png

Browse Virtualized Web Content

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:

alfresco-web-studio-tutorial-expanded-web-content-slider.png

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.

640px

That's about it.

Inspect the Header image

Now that the header image is in place, we may want to configure properties about this component binding.

• Click on the header region
  

This will bring up the web component's back panel.  From the back panel, we can inspect basic properties about the component as well as take actions against it.

Three icons will appear:

alfresco-web-studio-tutorial-green-energy-3.png

These icons allow you to edit component properties, execute the component in standalone mode and remove the component, respectively.

Click on the 'edit component properties' icon. This will bring up a component editor form.  Using this form, we can change properties about the component binding.

640px

Feel free to make changes here if you wish.  Press Save to save your changes or Cancel to avoid saving any changes.

Add the Navigation Component

We'll now look at using one of the other sliders from the left-hand side.

• Open the Components slider
  
• Expand the tree to show the list of Web Components available to you
  

236px

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.

400px

The look-and-feel used by the navigation is the default setting.

Configure the Navigation Component

Now that the navigation component is in place, we may want to configure properties about this component binding.

• Click on the topnav region
  

This will bring up the navigation component's back panel.  From the back panel we can inspect basic properties about the component as well as take actions against it.

Three icons will appear:

alfresco-web-studio-tutorial-green-energy-7.png

These icons allow you to edit component properties, execute the component in standalone mode and remove the component, respectively.

• Click on the 'edit properties' icon. This will bring up a component editor form.  Using this form, we can change properties about the navigation component binding.
  

640px

• Set the style to gray
  
• Save your changes
  

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:

640px

That completes this tutorial.

To continue with another tutorial, please visit the Web Studio Tutorials page.

For more information about Web Studio, please visit the Web Studio project page.