[Creating a B4J Project]

Start B4J.
Click File > New > SithasoIONIC7 BlankAD.
Type in the Project Name and click Ok.
This project has 2 layouts, the indexlayout and the blank layout.
The indexlayout has 'maincontent', 'mainpage', 'mainmenu' components.
If these are referred in the instructions below, update them in the 'indexlayout' layout or recreate them.

[Things to remember]

1. In the B4J IDE, click the 'Designer' menu option.
2. Click 'Open Internal Designer'.
3. Close the 'Form (WYSIWYG Designer)' if its open.
4. Right click on the layout and click 'Add View'.
5. Select 'Custom View'. This is the menu item that you will use to add the components defined below. Clicking an item will place the component in the layout.
6. When adding components to the layout designer, you might need to resize them to fit or shrink. Usually the first item should be enlarged to fit the area where more components will be added.
7. Now, let's start adding the components to the layout. To add each component, you will use 'Add View' > 'Custom View' and then select the component from the menu.
8. NB: It's not compulsory to specify the 'ParentID' property. It has been added for very specific few cases.

********** 1 **********

Right click 'Add View' > 'Custom View' > 'SHIonContent'.
Change the Name property of this component to 'maincontent'
Change the following properties for the 'SHIonContent.maincontent' component.
Name -> maincontent
Ion Page -> false

********** 2 **********

Right click 'Add View', then 'Custom View', then click 'SHIonPage'.
Drag & Drop this newly added component and place it inside the 'maincontent' component. Ensure it's placed INSIDE the edges of the parent component and resize it according to your needs.
Change the following properties for the 'SHIonPage.mainpage' component.
Name -> mainpage
ParentID -> maincontent
Router Name -> 
URL Path -> 
Has Tabs -> true

********** 3 **********

Click Project > Add New Module > Code Module. Type in 'pghome' as a module name and click Ok.
Copy and paste the code in the 'pgblank' code module to 'pghome' code module.
Replace 'blanklayout' on line 22 with 'homelayout'.
In the B4J IDE menu, click the 'Designer' > 'Open Internal Designer'.
Close the 'Form (WYSIWYG Designer)' if its open.
Click File > Save As, enter the layout name as 'homelayout' and click Ok
Right click on the layout and click 'Add View' > 'Custom View' > 'SHIonTab'.
Resize the component to fit the whole working area.
Change the Name property of this component to 'home'
Change the following properties for the 'SHIonTab.home' component.
Name -> home
null -> false
Header / Page Title -> Newsfeed
Tab -> home
Has Header -> true
Header No Border -> true
Toolbar Color -> dark
Has Menu Button -> true
Menu Button Auto Hide -> false
Content Color -> dark


Open 'pgIndex' code module, find the 'AddPages' sub-routine.
Add the following code line 'pghome.Initialize(app)'.
********** 4 **********

Right click 'Add View', then 'Custom View', then click 'SHIonButton'.
Drag & Drop this newly added component and place it inside the 'homeendbuttons' component. Ensure it's placed INSIDE the edges of the parent component and resize it according to your needs.
Change the following properties for the 'SHIonButton.btnsearch' component.
Name -> btnsearch
null -> false
ParentID -> homeendbuttons
Text -> 
Has Icon -> true
Icon Name -> search-outline

********** 5 **********

Right click 'Add View', then 'Custom View', then click 'SHIonFab'.
Drag & Drop this newly added component and place it inside the 'homecontent' component. Ensure it's placed INSIDE the edges of the parent component and resize it according to your needs.
Change the following properties for the 'SHIonFab.fab1' component.
Name -> fab1
null -> false
ParentID -> homecontent
Color -> danger

********** 6 **********

Right click 'Add View', then 'Custom View', then click 'SHIonSegment'.
Drag & Drop this newly added component and place it inside the 'homecontent' component. Ensure it's placed INSIDE the edges of the parent component and resize it according to your needs.
Change the following properties for the 'SHIonSegment.segment1' component.
Name -> segment1
null -> false
ParentID -> homecontent
Background -> var(--ion-color-dark)
Scrollable -> true
Scroll Bar Height -> 1px
Scroll Bar Width -> 1px
Scrollbar Thumb Background Color -> var(--ion-color-dark)
Scrollbar Thumb Hover Background Color -> var(--ion-color-dark)
Scrollbar Track Background Color -> var(--ion-color-dark)
Value -> topnews
Styles (JSON) -> margin-top:10px

********** 7 **********

Right click 'Add View', then 'Custom View', then click 'SHIonSegmentButton'.
Drag & Drop this newly added component and place it inside the 'segment1' component. Ensure it's placed INSIDE the edges of the parent component and resize it according to your needs.
Change the following properties for the 'SHIonSegmentButton.segmentbutton1' component.
Name -> segmentbutton1
null -> false
ParentID -> segment1
Value -> recentnews
Text -> Recent News
Layout -> label-only
Classes (;) -> segmentbutton

********** 8 **********

Right click 'Add View', then 'Custom View', then click 'SHIonSegmentButton'.
Drag & Drop this newly added component and place it inside the 'segment1' component. Ensure it's placed INSIDE the edges of the parent component and resize it according to your needs.
Change the following properties for the 'SHIonSegmentButton.segmentbutton2' component.
Name -> segmentbutton2
null -> false
ParentID -> segment1
Value -> topnews
Text -> Top News
Layout -> label-only
Classes (;) -> segmentbutton

********** 9 **********

Right click 'Add View', then 'Custom View', then click 'SHIonSegmentButton'.
Drag & Drop this newly added component and place it inside the 'segment1' component. Ensure it's placed INSIDE the edges of the parent component and resize it according to your needs.
Change the following properties for the 'SHIonSegmentButton.segmentbutton3' component.
Name -> segmentbutton3
null -> false
ParentID -> segment1
Value -> aroundnews
Text -> Around News
Layout -> label-only
Classes (;) -> segmentbutton

********** 10 **********

Right click 'Add View', then 'Custom View', then click 'SHIonCard'.
Drag & Drop this newly added component and place it inside the 'homecontent' component. Ensure it's placed INSIDE the edges of the parent component and resize it according to your needs.
Change the following properties for the 'SHIonCard.card1' component.
Name -> card1
null -> false
ParentID -> homecontent
Styles (JSON) -> height:20vh;margin:10px 16px;border-radius:0

********** 11 **********

Right click 'Add View', then 'Custom View', then click 'SHIonImg'.
Drag & Drop this newly added component and place it inside the 'card1' component. Ensure it's placed INSIDE the edges of the parent component and resize it according to your needs.
Change the following properties for the 'SHIonImg.img1' component.
Name -> img1
null -> false
ParentID -> card1
Src -> ./assets/tranding-food-6.png
Width -> 100%
Height -> 100%
Object Fit -> cover
Elevation -> 

********** 12 **********

Right click 'Add View', then 'Custom View', then click 'SHLabel'.
Drag & Drop this newly added component and place it inside the 'card1' component. Ensure it's placed INSIDE the edges of the parent component and resize it according to your needs.
Change the following properties for the 'SHLabel.imageoverlay' component.
Name -> imageoverlay
null -> false
ParentID -> card1
Size -> div
Elevation -> 
Styles (JSON) -> background-color:rgba(0, 0, 0, 0.3);height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%

********** 13 **********

Right click 'Add View', then 'Custom View', then click 'SHIonCardContent'.
Drag & Drop this newly added component and place it inside the 'card1' component. Ensure it's placed INSIDE the edges of the parent component and resize it according to your needs.
Change the following properties for the 'SHIonCardContent.cardcontent1' component.
Name -> cardcontent1
null -> false
ParentID -> card1
Styles (JSON) -> bottom:5%;left:50%;padding-bottom:0;transform:translatex(-50%);width:100%;z-index:2;position:absolute

********** 14 **********

Right click 'Add View', then 'Custom View', then click 'SHIonCardTitle'.
Drag & Drop this newly added component and place it inside the 'cardcontent1' component. Ensure it's placed INSIDE the edges of the parent component and resize it according to your needs.
Change the following properties for the 'SHIonCardTitle.cardtitle1' component.
Name -> cardtitle1
null -> false
ParentID -> cardcontent1
Text -> Advancements in Virtual and Augmented Reality
Styles (JSON) -> color:#fff;font-size:0.9rem

********** 15 **********

Right click 'Add View', then 'Custom View', then click 'SHLabel'.
Drag & Drop this newly added component and place it inside the 'cardcontent1' component. Ensure it's placed INSIDE the edges of the parent component and resize it according to your needs.
Change the following properties for the 'SHLabel.parag1' component.
Name -> parag1
null -> false
ParentID -> cardcontent1
Elevation -> 

********** 16 **********

Right click 'Add View', then 'Custom View', then click 'SHIonText'.
Drag & Drop this newly added component and place it inside the 'parag1' component. Ensure it's placed INSIDE the edges of the parent component and resize it according to your needs.
Change the following properties for the 'SHIonText.authorname' component.
Name -> authorname
null -> false
ParentID -> parag1
Text -> by Anele Mbanga (Mashy)
Styles (JSON) -> color:lightgray;font-size:0.7rem;font-weight:bold

********** 17 **********

Right click 'Add View', then 'Custom View', then click 'SithasoStyle'.
Drag & Drop this newly added component and place it inside the 'homecontent' component. Ensure it's placed INSIDE the edges of the parent component and resize it according to your needs.
Change the following properties for the 'SithasoStyle.segment1style' component.
Name -> segment1style
null -> false
Target Id (.;) -> .segmentbutton
Styles (JSON) -> --background:var(--ion-color-dark);--color-checked:#fff;--color:var(--ion-color-medium);--indicator-box-shadow:var(--ion-color-dark);--indicator-color:var(--ion-color-dark);padding-left:3.5vh;padding-right:3.5vh
null -> homecontent

