Open

Overview

In this lesson we are going to review how to set a Skin and Layouts for our Project. In the Wayfast world Skins are sets of CSS and images that define the look & feel of our projects. Skins enable a comprehensive and consistent structure for organizing assets while fostering reusability.

On the other hand Layouts are HTML templates that allow us to design our Pages structure. Layouts can contain Javascript code to provide transitions and visual effects unleashing a wide range of extensibility. Layouts contain placeholders.

Placeholders are nothing but names you give to html containers or layout regions. Placeholders let Wayfast know where to place controls so you can have fine-grained control over the User Interface.

We can create new Skins and Layouts or reuse existing one from Wayfast Library. In this lesson we are going to reuse existing one but we will cover how to create a Skin and Layouts from scratch in the section “Skin and Layout Editor”.

How to select Skin on a new Project?

Preconditions

For this exercise we are going to assume we already have a Solution and a Project.

Selecting a Skin

As we’ve seen in the last lesson, after we create a Project, Wayfast immediately prompts the Skin selection screen.

You can always select a different skin if you decide to restyle your app.

Open

Just click on the Project name and then click on the “General Options” icon at the top menu,

In the “Skin” field you will see the option we selected when we created the project.

By clicking on the “Change Skin” button we will be able to select another skin from the library.

Once we click on the “Submit” button, the skin will be associated to the Project.

How to select Layouts for a Project?

Now we are ready to select one or multiple layouts from Wayfast library. A Layout  must be associated to the project before creating the first page. Otherwise, Wayfast wouldn’t know where to place controls within pages. So let’s get to it.

First click on “General Options” and then click on the “Lay-out” tab.

Now Click on the “Add Layout” button.

A popup will be displayed with all the available Layouts. We can select all the layouts we want. For this sample we are going to choose “Popup” and “Simple-base” and click on the “Submit” button.

Now we are ready to create pages using the selected layouts.

Just click on “Project pages” icon at the top menu and then click on “New Page” button.

The “New Page” form will be displayed and the selected Layouts will be available in the Layout field.

Recap

In the first section, we learnt what are Skins and Layouts, how to select Skins and Layouts from Wayfast library and how to select a Layout in a page. In the next section we will dig deeper into how Layouts define Look & Feels design when creating a page.