Introduction

In this chapter we will bring together the knowledge we have gained on this course, along with some new techniques, to create a landing screen for our application. The screen will look like the following:

HERE

Create a Blank Screen

There are templates for application home screens available when creating a screen, however in this exercise we will build a screen from scratch to help us practice what we have learnt. 

1. Create a new screen from the Screen home page.
   1. Name, Home.
   2. Description, Application home screen
   3. Template, Blank.
      1. Scroll to the right and select Blank.
   4. Click Create Screen
2. Click in the middle to open the properties.
   1. Click the Styles tab.
   2. Scroll down to direction and set the following:
      1. Justify, Center
      2. Align, Center
   3.  Apply your changes.

Build Up the Centre Tile

1. Add a Tile
   1. From the Palette drag a Blank - Row tile onto the screen.
   2. Name, Centre.
   3. Click Confirm.
2. Open the properties for Centre.
   1. Click the Style tab.
   2. Untick Auto Size.
   3. Add the following CSS Properties:
      1. Width, 75%.
      2. Height, 50%.
      3. minWidth, 350px.
      4. minHeght, 480px.

3.  Apply and Close to save your changes.

   1. This invokes a screen update. If you do not see the changes you make, close and reopen the screen.
4. Add the centre areas. We will use simple areas to build up our screen structure:
   1. From the Palette in the basic layouts, click on Area - Column and holding shift drag it onto the screen.
      1. Name, Left.
   2. Add a second Area - Column onto the screen.
      1. Name, Right.

5. By default the areas have a simple style applied so they can be seen easily.

   1. Click on the area Left.
   2. In the properties click the Styles tab.
      1. Tick Auto Size.
      2. Scroll down to the Position Settings section.
         1. Remove the Width and Height.
   3. Click the area Right and repeat the steps above.
   4. Both areas will now be the same size and we are ready to move on.

Check Point

Your screen will look like the following:

Construct the Left Area

1. Click the area Left.
2. Add the following CSS Properties.
   1. margin, 20px
      1. This is short hand for placing 20px on all sides of the area. 
   2. minWidth, 320px.
   3. maxWidth, 350px.
   4. minHeight, 130px.
3. Click  Apply and Close to save your changes.
4. For the following items from the palette to the screen use Shift+Drag:
   1. From the Headers section, add a Screen - Header to the Left area.
      1. Name, Title.
   2. From the Buttons - Additional section, add a Landing - Primary to the Left area.
      1. Name, Option 1.
   3. From the Buttons - Additional section, add a second Landing - Primary to the Left area.
      1. Name, Option 2.
   4. It may be necessary to move your new items into a different location or order, use the layers section to achieved this and remember you only need to hold shift when moving an item into or out of an area.

Checkpoint

Your screen should look like this:

Configure the Title

We have selected a Screen Header for our title, lets edit this to make it more suitable for our home screen.

1. In the Layers section click on the Left area which is under Tile Body.
   1. From the properties remove the background colour.
2. In the Layers section, find your Title.
   1.  In its style settings, change Justify to Center.
   2. Back in the Layer, expand Title and click on the Left area,
      1. Click on the Icon.
         1. Click the Styles tab. 
         2. In the Position Settings set the Width and Height to both be 40px.
      2. Click on Header1Dynamic and in its properties:
         1. Change the Default Value to Companies List.
         2. Click on the Styles tab:
            1. Font Size, 24.
            2. Font Weight, Lighter.
   3. In the Layers section delete the Right area under Title.
      1. Right click on it in the Layers and select Permanently delete. Ensure you are deleting the Right area under the Title.
   4. Click  Apply and Close to save your changes. Changes may not show until we close and reopen the screen.

Configure the button Icons and Actions

1. In the layers section click on Option 1.
   1. On the Styles tab set the background image to be, CompanyIcon.
   2. Using the Layers section click on its Label and set Display Text to Companies List.
2. In the layers section click on Option 2.
   1. On the Styles tab set the background image to be, IconFinance.
   2. Using the Layers section click on its Label and set Display Text to Company Orders.
3. From the Screens Toolbar, click  Screen
   1. From the screen list which appears on the right, drag Companies List onto the Companies List button.
   2. From the screen list on the right, drag Invoicing onto the Company Orders button.
4. Close and reopen the screen to ensure all changes are displayed.

Configure the Right Area

1. In Layers under TileBody, click the Right area, .
2. In the properties remove the background colour.
3. Set Background Image to PSG_ImageSplashScreen.
4. Set Background Repeat to no-repeat.
5. Set Background Size to Cover.
6. We need to set a min height and width. Best practice would be to create a shared style with the following settings and use it on both the Left and Right areas.
   1. Create shared style and set:
      1. minWidth, 300px.
      2. minHeight, 130px.
   2. Add the shared style to the Right area.
   3. Add the shared style to the Left area and remove the CSS properties we are replacing.

Tile Tidy Up

1. In Layers click on Tile Body.
2. In Properties click the Style tab.
3. Set the following:
   1. Wrap, Wrap Reverse.
      1. We use this as it will cause the image to go above the buttons. We ould use Wrap if we wanted it to go below.
   2. Justify, Centre. 

Check Point

Your screen will look and behave as follows:

Add a Close Button

1. From the Palette, Buttons - Additional

Add a Welcome Message