...
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 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 providing unleashing a wide range of extensibility. Layouts contain placeholders.
...
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 “How to create Skins and Layouts” “Skin and Layout Editor”.
How to select Skin on a new Project?
Precondition
Now that we have the main structure created (Solution), we can click on “Project” button and build the first element to initiate an Application.
...
A popup is displayed to select the main settings for your new application.
...
Click on “Accept” button, the “Select Skin” popup will offer different templates to apply in your application’s interface. Design selected under this step will be the default when the different pages are going to be created. Also the buttons and popups are going to be defined by this Skin selected.
...
Click on “Submit” button and the skin is saved for this Project.
...
Enter to the Project and click on 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.
Just click on the Project name and then click on the “General Options” icon at the top menu,
...
Observe that In the “Skin” field is remaining you will see the option we selected when starting the new Project from the scratch. Wayfast allows the possibility to change skin if it’s needed.
How to change the skin in existing projects?
In previous lessons, we explained how we can select an skin under the “New Project” creation. At “Modify Project” page, Wayfast allows us to edit this selection.
...
Click on “Change Skin” button
...
A popup displays different templates to apply in application’s interface. The layout we select in this step will be used by default on the pages we create in the future. Also the buttons and popups are going to be defined by this skin selected.
Scroll down and select the new skin. Confirm by clicking on “Assign” buttonwe 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.
| Info |
|---|
NOTE: We can check how the |
...
skin looks like by |
...
clicking the preview button on any page |
...
in the Project. |
How to select
...
Layouts for a Project?
Another feature to build the Front-End basic controls at newly Projects are the Layouts. We can select this predefined options that Wayfast provide at any time.
Click 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 “Layout” the “Lay-out” tab.
...
It’s important that the Layouts are selected before the team initiate the development. Otherwise, the Pages that you create can’t have any default layout options to start.Click on Now Click on the “Add Layout” button.
...
A popup is will be displayed with all the available Layouts given by Wayfast. Select the ones that are going to be used in the Application and click on “Accept” button
...
To confirm that the Layouts are saved, . 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 . Then and then click on “New Page” button and you will find the Layouts displayed in the dropdown and available for Application.
...
.
The “New Page” form will be displayed and the selected Layouts will be available in the Layout field.
...
Recap
In the first partsection, we learnt about what are Skins and Layouts, how to select the Skin that will be our Application’s User Interface and how they can be changed from General Options. In the second part, we selected the default Layouts for the Application that Wayfast provide under General Options-Layout and finally we went through the Page’s creation steps to verify that these Layouts were correctly associated and ready to be selected in the application developmentSkins 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.