Open

Overview

Skins are sets of Layouts, CSS and images that define the look & feel of our projects. Skins enable a comprehensive and consistent structure for organizing assets while fostering reusability.

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.

In this lesson we are going to learn how to create a new skin and to assign it to the project we are working in, we also are going to see how to assign the layouts to our pages and how to modify the styles of the controls.

Preconditions

For this exercise we need to have a project with an active requirement and we need to have a Page on the project that contains a “Label” control.

Open

Before we start making the new skin, we are going to preview the page as it is now so we can compare it with the final result of our lesson.

To create a new skin, we need to click on the top right corner menu and select the “skins” option. We are going to select a previously created skin from the list.

We could search for any skin of our choice, for this exercise we are going to use the one called “XIGO_clm” and then access to its details.

We are going to download each of the zip files, one by one. We are doing this in order to have all these files in the right structure without having to create them one by one.

Take notice that CSS and Layouts are the most important files, these are the ones we are going to modify to create our new skin. Images, JavaScript and fonts are mandatory as well, so we do need to upload these files even if those are empty.
We are going to unzip layouts and css files.

Now we are going to delete both zip files, and rename the folders.

Next, we are going to access to the Layouts folder and let’s duplicate the popup.html file.

Rename this file as we want it to.

Now we are going to edit this file, we have to right click on it and select edit with Notepad ++.

As we can see this is plain html. It doesn’t have the html basic structure like html tag, opening and closing, header and body or anything like that. We just have to add the part for the content that we are going to be displaying. And the convention is we use the ID property and we prefix every place holder with uppercased “PH_” something else, so, whatever is after the underscore is going to be displayed as the place holder name in WayFast, so when we upload this file, WayFast is going to scan it, it will parse it and identify all these tokens with “PH_”, and identify the place holder name, so whenever it is trying to render the page, even in preview or running the app, is going to iterate over the list of controls, check what’s the place holder and the order and It will sort controls by the order field and it will replace these with the right content.
Now let’s modify these Place holders, with “PH_head”, “PH_body” and “PH_Foot”. We are going to use a div and an H1 with a new place holder called “PH_Title”. After modifications, it will look like the image below.

At last, we click on the “Save” button to save the changes.
Now we are going to access to the “CSS” folder.

Most of these files are mandatory. “Asignet-grid”, “Asignet-grid-export” and “jquery.pagination” are mandatory because those are used by the render engine. We have “DefaultStyleClasses” file to make sure that we can add new classes and those classes will be available in the editor.
So now we need to modify “DefaultStylesClasses.css” with Notepad ++.

At the bottom of the file we are going to add a new style called “MyNewStyle-header”. We are going to set its text-size to 20, and set its color to blue, then we are going to add another style called “MyNewStyle-bodysection” and we are going to set its background color to red. It will look like the image below.

Finally, we are going to save the file.
Now we need to create the new zip files. Once we have the zip files created, we need to make sure that the created zip files does not contains subfolders, we must not modify the file structure, otherwise they won’t be able to be properly processed by the system.

Back to Wayfast. Once we have these zip files downloaded and modified, we can create our new skin, we have to go back to the “Skins” menu.

Click on the Add button.

On the skin configuration window, we are going to denominate our skin and its “Friendly Name” as “My_New_Skin”. For this demo, we let the “By Database” checkbox marked before clicking on the “Add” button.

Now that we have our skin already created, we are going to upload the zip files we previously downloaded and modified. On the “skins” screen we are going to search “My_New_Skin” and access to its details.

Once inside we are going to upload each file, one by one, by clicking on the edit button and then we have to select the correct file and click submit.

We are going to repeat the process for each file.

Once we have all the five files properly uploaded, we are going to click on the “Save Skin” button.
Now we have our new skin and layout already created so the next thing we have to do is to associate them to our project. To do this we have to go back to the Pages submenu and click on the “General Option” button from the top menu. Once here we have to click on the “Change SKIN” button.

On the pop-up window we are going to select the skin we have created by clicking on the checkbox at the right side of the screen and then we are going to assign it.

Back in the “General Option” screen we have to click on the “Submit” button.
Now we need to click on the Layout Submenu and once here we need to click on the “Add Layout” button.

On the pop-up window, we are going to select our layout “MyNewSkin-popup” by clicking on the checkbox at the right of the screen and then clicking on the “Submit” button.

Now we are going to assign our layout to our page. We need to go back to the Pages submenu, and access to our page, once inside we need to expand the general information section and click on the “Layout” tab, on the “Name” dropdown menu, we are going to select our Layout: “MyNewSkin-popup.htm” and then click on the “Submit” button. We can see, after we have assigned the layout, that the list of place holders has been refreshed.

The next thing we need to do is to assign the new style we have previously created to the “Label” control we have on our Page. To do this we need to click on the “Label” control from the controls section.

Once in the pop-up window, we have to go to the “Layout” tab. On the “Placeholder” dropdown menu we can see all the custom place holders we created, we can choose one of them. Select the “Title” option.

We are able to search the new classes we added to this file called “DefaultSyleClasses”, so if we want to add new classes, we can add them in this file and we are able to select them from the Layout tab.
The “Container Style” field is for the div that contains the control, it gives us granularity to the actual control, or the html container that is created to hold that control, by the render. Like if we want to have borders, padding, etcetera. We can add it here in case we need it. And the “Item Style” field is for the actual control, generated in the html. We are going to select: “MyNewStyle-header” on both fields and click on the “Submit” button.

To prevent any kind of error with the new Skin, Layout and Style assignation, next thing we need to do is to remove the previous layout from our project. To do this we need to click on the “General Option” button from the top menu, then we have to go to the “Layout” submenu and on the layouts list we are going to delete “popup.htm” from the list.

At last, we need to configure the “Costumers”, so we have to go to “Costumers” submenu.

From the Costumers allocation list, we are going to delete the current Costumer.

Once it’s deleted from the list we have to click on the “New” button. On the Customer Assignation pop-up window, we are going to select the customer DBO, by clicking on the correspondent checkbox under the assign column and then we are going to click on the “Submit” button.

Once we are back in the “Customer Allocation” screen we are going to assign our skin by clicking on the number below the “Skin Q” column.

On the “Skin Relation” pop-up window we are going to click on the “New” button.

Now, on the “Skin” field we are going to select the skin we have created, “My_New_Skin” and then we are going to select the “Default” checkbox and click on the “Submit” button.

Back in the “Skin Relation” window, we are going to check if our skin has the “YES” status on the “Default” column and then click on the “Close” button.

Finally, we are going to do a preview to check if our changes to the skin have been applied, so we are going to get back to the Pages submenu, access to our page, and click the “Preview” button.

Now we can see the changes we’ve done to the skin and layout are properly applied, the font color changed to blue and its size is bigger than the original.