LANSA Tour Of Heroes Pt 1

To start building the LANSA version of Tour Of Heroes we are going to start with the Application Shell and Layout.

When starting out and deciding on a layout, I like to break the page down into different "areas". These areas will contain different functionality of the app.

Mock up the app with a Header, Navigation Bar and Content area.

Layout mockup

Header Component

Now we can create individual components starting with the Header. Start by creating a new Resuable Part Panel. 

New rp

Give the part a Name and a Description. I like to manually create Identifiers using my own naming convention. Don't worry about the Framework option, just pick one (I made my own Framework called Tour of Heroes to make organization simpler). Do make sure that the Target Platform is Web Browser.

Header panel

Drag a label onto the designer. On the Layout Tab set the Alignment to Top Left, Size Fit Both, Flow Down.

Set the ThemeDrawStyle of of the label to "Title".

You should have something like this.

Header panel designer

Code the designer created for you. I tend to clean to clean it up some and add comments.

Navigation Bar 

Create another Reusable Part Panel as before. I named my NavigationBarPanel with TOHNAVP01 as the Identifier.

Drag two labels onto the designer. Set the Caption of one to be "Dashboard", set the Caption of the other to be "Heroes". Also give each a name; DashboardLabel and HeroesLabel respectively.

Set the ThemeDrawStyle to "NavBarButton". We don't have this defined yet, but will come back to it shortly.

On the Layout Tab, select the Dashboard label, then set the Alignment to be Top Center, Size Content Width,  Flow Right. I also added 5 for each side in the Item Margins. Set the same Alignment, Size, Flow and Margins for the Heroes Label.

You should have something looking like this.

Nav bar

If your Dashboard and Heroes labels are flipped, i.e. Heroes first, check the Display Position of each Label. Ensure Dashboard is 1 and Heroes is 2.

Switch to the Source tab and define a "Clicked" event with a PRIM_ALPH parameter. 

With the "Clicked" event we are signalling up to the parent that one of the buttons have been clicked. We are also using the ComponentTag of the label to store the View Identifier so we can include that in our Clicked event.

Web Page

Now that we have those two components, we can create the web page.

New page

Drag your Header Panel onto the designer.

Switch to the Layout Tab and with the Header Panel selected, set the Alignment to Top Left, Size Fit To Width, Flow Down. Add 10 to the left Item Margin.

In the Properties Window, Layout Category, change set the Height to be 65.

Drag the Navigation Bar onto the designer. Again, with the Navigation Bar selected, on the Layout Tab set the Alignment to Top Left, Size Fit To Width, Flow Down. Set the Left Item Margin to be 10 and adjust the height to be 50.

You should have something that looks like this

Designer web 1

 Now we need a place to put our Views. We don't have any Views right now, we are going to add a "Container" for them.

Drag a Panel onto the designer. Panels are notoriously hard to see the designer as they initially have no visible components to them. If you lose the Panel you can find and select it by using the Outline View. Select Home, Views Outline to bring up the Outline View.

Here is what the outline looks like at this point.


With the Panel selected, on the Layout Tab set the Alignment to be Top Left, Size Content Height Fit to Width, Flow Down. Set the Left Item Margin to 10. With Panels being hard to see in the designer, one easy trick to make them visible is to give them a colored border. With the Panel selected, select the Style tab, select Border. I like to select the ellipse button (...) to bring up a color picker. Select a color then hit Ok. Finally set the Panel name to ViewContainerPanel.

You should have something that looks like this.

Designer web ui

Before we move on, lets add a layout to the Panel. With the Panel selected, select the Layout tab, then click the Layouts button and select a 1x1 layout.

Container layout

This will add a 1x1 layout to the ViewContainerPanel. You should see a Layout 1 and 2 in the outline view. If you don't click the green layout button on the Outline window to make them visible. Layout2 should be the Layout for the Panel. You can confirm this by selecting the Panel and looking at the LayoutManager property. Change the name of Layout2 (the layout itself, not the Panel Layout Manager!) to ViewContainerPanelLayout. Change the name of Layout1 to something as well if you want. I typically use MainPanelLayout.

Now we need to create an item for that Layout. Drag a label onto the ViewContainerPanel. Then set the Alignment of the Label to TopLeft.

The Outline should now look something like this.

Outline 3

Select the LayoutItem, in my case LayoutItem4 and change its name to ViewContainerLayoutItem. The label we dragged onto the panel is inconsequential. It means/does nothing it was only a means to get the LayoutItem created. If you delete the Label from the designer, it will delete the LayoutItem. Typically this behavior is good, but right now we don't want that. So switch over to the Source view. Right click the label in the Outline window and select Go To Definition. That should highlight the label in the source. Now you can delete the label from the source, which will leave the LayoutItem in place.

Your source should look something like this. I've added the comments manually.


I am using a slightly tweeked version of the 2015Indigo theme. In the Navigation Bar, we used a NavBarButton ThemeDrawStyle. Create a new Theme using the Indigo base. Then select the Draw Styles tab, select New Draw Style and then you can tweek the style properties as you wish. 

Here is the source for my Theme.

Once you have your Theme in place, go back to your Web Page, in the Properties window, Style Category. Find the Theme property and select the ellipse button (...). Use that dialog to select your Theme and apply it to the page.


That's it for part 1. We have a Header, Nav Bar, Container Panel and Theme in place. If you compile all the components and run it, you will see the page does not do anything yet, but we can see our components. The line is our ViewContainerPanel. Remember that we set the Sizing to ContentHeightFitToWidth. Since we have no content, all we get is a line that spans across the page.


In part 2, we will add navigation and see how to present the different views.


You can follow this conversation by subscribing to the comment feed for this post.

The comments to this entry are closed.