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:

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. Insert excerpt
      _save _save nopanel true

       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. Insert excerpt
   _finish _finish nopanel true

    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 

   Insert excerpt
   _finish _finish nopanel true

    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 

      Insert excerpt
      _finish _finish nopanel true

       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 

   Insert excerpt
   _screen_toolbar _screen_toolbar nopanel true

   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 section, drag Close 2 onto the screen.
2. Use the layer section to position it above the Centre area.
3. When positioning items on a screen we use flex box and have the content flow on the screen, this is know as relative positioning. However on a rare occasion we will need to position an item in a specific position, this is known as Absolute Positioning. It is setup as follows:
4. In the properties of the Close 2 button, on the Styles tab in the Position Settings section set:
   1. Name, Close.
   2. Top, 0px
      1. Position the item x amount of pixels from the top.
   3. Right, 20px
      1. Position the item x amount of pixels from the right.

   4. Insert excerpt
      _save _save nopanel true

       your changes.

Add a Welcome Message

We will now add a welcome message that will get populated when the screen opens.

1. From the Palette, Headers section, drag a Tile Header onto the screen.
   1. We use a tile header as a starting point for our design.
2. Name the title Welcome.
3. In the properties of Welcome, on the Styles tab set
   1. Justify, Center.

   2. Insert excerpt
      _save _save nopanel true

       your changes.
4. There are two parts of the header, a static text and a dynamic text. 
5. Click on the static text, this is called Header 2 Static. Here we set the static part of the welcome message.
   1. Set the Display Text to be, Hello,

   2. Insert excerpt
      _save _save nopanel true

       your changes.
6. The Dynamic Text we will set using a Startup Action which we will cover in a later chapter.