The release of SB/XA 6.0.0 introduces two entirely new application clients based on Windows® Presentation Foundation (WPF) and Windows® Communication Foundation (WCF) to present your SB+ developed applications to users.
One of the major changes in SB/XA, enabled by the use of WPF for the client presentation components, is the separation of the client presentation layer from the business logic in your applications. This gives developers the ability to completely change the applications presentation layer through the use of client presentation code written in eXtensible Application Markup Language (XAML) without having to change the business logic of your application.
In many cases, a developer can determine how they can change aspects of the presentation layer by referencing standard documentation for the various controls provided in the .NET framework. However, in some cases, a more in-depth knowledge of how certain elements of the presentation layer have been implemented is required in order for developers to modify those presentation elements.
This article provides developers with the knowledge required to change the presentation of menus within their applications and display them as a tree view instead of one of the standard menu types provided within SB/XA.
There are three main tasks you need to complete in order to display a tree view menu:
- Modify the layout of the Main SB/XA application window.
- Create a tree view menu from the menu data provided by the SB/XA server.
- Apply the elements you have created to the SB/XA application server using themes and styles.
Requirements:
- Tree view menus can only be displayed for Type 5 menus on the SB/XA server. The reason that tree view menus are only supported for Type 5 menus is that a tree view menu needs to have all of the options and sub menus available at the time of loading the menu. Data for other menu type structures is stored in multiple records on the server and would require a large number of reads to build the tree structure.
- The modified layout implemented in this article only allows for the use of a tree view menu when using the client in window mode.
Changing the layout of the SB/XA application window
Before you start looking at the code used to modify the layout of the main application window, it helps to know what the different components of the window are and to know how you want the window to look once you are finished.
The following diagrams give you an idea of what you are trying to achieve and provide a reference for the development of the XAML code:
Figure 1 shows the default layout of the major components in the main application window.
Figure 1. Standard base layout of the main SB/XA presentation window
In order to display a tree view menu, you need to change the SB/XA window layout to accommodate the different appearance and behavior of the tree view object.
Figure 2 illustrates the new layout that you are going to create in order to implement a tree view menu.
Figure 2. Modified window layout to incorporate a tree view object
Window and page modes are two different modes of presentation that can be chosen via /USER.FLAGS in the SB/XA application. The new SB/XA presentation layout defined in this article can only be applied to clients running in the window mode.
Figure 3 shows a detailed nesting of containers referenced in the XAML code to modify the layout.
Figure 3. Specific containers used within the standard layout
Component layout of SB/XA main window
This diagram shows the XAML containers used in the main SB/XA Window and the names used. The presentation element with the name "PART_SBMenuPresenter" and all of the nested element names under PART_SBMenuPresenter must be present.
This diagram can be used as a reference when reviewing the first section of XAML style code below.
Changing the SB/XA window layout using XAML
Each of the next 3 samples of XAML code can be found in the downloads section in the TreeViewWindowLayout.xaml file.
Figure 4 shows the TreeViewMenuPresenter style which defines the layout of the menu and toolbar inside PART_SBMenuPresenter.
Figure 4. TreeViewWindowLayout.xaml - Section 1
Figure 5 shows the TreeViewLayoutTemplate which implements the window background, status bar and ThreeViewMenuPresenter in PART_MainSBPlusContainer.
Figure 5. TreeViewWindowLayout.xaml - Section 2
Figure 6 shows the TreeViewLayoutStyle which defines the Style key to be added to the SB/XA server to affect the layout change.
Figure 6. TreeViewWindowLayout.xaml - Section 3
The code sample presented in this section can be found in the download section under the TreeViewMenu.xaml file name. Figure 7 is the code section that enables individual menu items to invoke processes on the server.
Figure 7. TreeViewMenu.xaml -- Section 1
Figure 8 creates the hierarchical structure required for a tree view from the menu data provided by the SB/XA server.
Figure 8. TreeViewMenu.xaml - Section 2
Figure 9 creates the tree view from the hierarchical data structure defined in figure 8 and applies the behaviour defined in Figure 7.
Figure 9. TreeViewMenu.xaml - Section 3
Figure 10 applies the template defined in figure 9. The style key TreeMenuStyle is then applied to a type 5 menu on the SB/XA server.
Figure 10. TreeViewMenu.xaml - Section 4
Applying XAML styles to your SB/XA application
Now that you have created the XAML code to change the layout of the main window and display menus as a Tree View, you need to add this to your application. This can be achieved using the steps below. The code reviewed in this article is stored in 2 XAML files (TreeViewWindowLayout.xaml and TreeViewMenu.xaml) both of which can be found in the download section of the article.
Figure 11 shows what it looks like to add the XAML files to the XDTHEMES file. XD is the System Id of the application where the tree view menu is being implemented in.
The XXTHEMES File is a DIR type file in UniData and a Type 1 or Type 19 file in UniVerse.
Figure 11. Add the XAML code files to XXTHEMES
Step 2. Create a theme and add references to the XAML code files in Step 1
Themes are collections of styles that you want to be available in an application. The TreeViewTheme created here is only intended to apply the styles required for a tree view menu and therefore only references 2 XAML files.
The syntax used to include other files in a theme is very similar to an INCLUDE statement in UniBasic. When the theme is compiled, the contents from the include statements are included in the code to be compiled.
Once you have created the theme, it should be filed in the XXTHEMES directory file also.
Listing 1. Create a theme and add references to the XAML code files in Step 1
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid"
xmlns:sbc="http://schemas.IBM.SBPLUS.com/winfxControls"
xmlns:sbsd="clr-namespace:IBM.SBPlus.Shared.Definitions;assembly=IBM.SBPlusShared"
xmlns:sbp="clr-namespace:IBM.SBPlus.Runtime;assembly=IBM.SBPlusRuntime"
xmlns:mwtluna="clr-namespace:Microsoft.Windows.Themes;assembly=
PresentationFramework.Luna"
>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/IBM.SBPlusWinFxControls;component/Themes/
DefaultStyles.xaml" />
</ResourceDictionary.MergedDictionaries>
<!-- Menu Tree Style -->
<!-- INCLUDE TreeViewMenu.xaml -->
<!-- INCLUDE TreeViewWindowLayout.xaml -->
</ResourceDictionary>
|
Step 3. Add the name of the theme to the list of available themes in the system control record
For a theme to be available to users, it must be added to the list of available themes for that system. The list of available themes is stored in the system control record and can be accessed from the HK.CONTROL process.
Once in the control record, you should navigate to the screen shown in Figure 13 by following these steps:
- Press the F7 function key or the button XUI.
- Press the F5 function key or the button Themes.
- Add the required theme name to the Available Themes field.
Figure 12. Add the name of the theme to the list of available themes in the system control record
Step 4. Compile the theme to ensure the XAML code is correct
Any code that you write needs to be compiled at some point before it is executed. Because the code written here is XAML, you need to compile and validate the code in the .NET environment before you allow users to run the applications that implement the code. To do this, you need to use one of the new SB/XA clients, either the Rich or the Browser client, and execute the CT process. The syntax of the CT process is as follows: CT,ThemeName,SystemID.
SystemID is an optional parameter for cases where you want to compile a theme from another SB/XA system.
The CT process performs the following actions:
- Reads the theme from the XXTHEMES file.
- Parses the theme and inserts XAML code from any INCLUDE files.
- Writes the complete theme to the file XXDRIVERS (where XX is the System Id) with the Key SystemID * ThemeName.
- The theme is then passed to the .NET framework on the client and compiled.
Figure 13. Compile the theme to ensure the XAML code is correct
If the theme is compiled successfully, without any errors, you will be presented with a screen similar to the one in Figure 15. If errors are encountered while compiling the theme, you will be presented with the error messages from the .NET framework.
Figure 14. Successfully compiled theme
Step 5. Add the layout style name to the SBPlus style field in the system control record
Now that you have added your code to the SB/XA application server and compiled the code in the .Net framework to validate it, you need to tell the application where it should apply the code that you have added.
In this step, you tell the server what style should be applied to the main SB/XA application window. As this is a system-wide setting, you do this in the System Control record accessed by the HK.CONTROL process (Function Key F7-XUI). To apply a style to the main SB/XA application window, you need to add the name of the style to the SBPlus field as Figure 16 illustrates.
Figure 15. Add the layout style name to the SBPlus style field in the system control record.
Step 6. Add the TreeView style name to the Type 5 menu you want to display as a tree view
The final step is to add TreeMenuStyle, the style that implements Tree View, to any Type 5 menus you want to present as Tree View menus.
You can do this from the Menu Definition tool accessed from the MD process.
Figure 16. Add the TreeView style name to the type 5 menu we want to display as a tree view.
Once you access the menu to have the style applied, as shown above, you need to press the F6 function key or Addit to access the screen shown in Figure 18.
Figure17. Add the TreeView Menu style name to the XAML Style Name field
Add the TreeView Menu style name to the field XAML Style Name.
The new window layout and tree view menu
This article demonstrates how to use XAML code to change the layout of the main window used for SB/XA applications and present the application menu as a tree view menu. The image below shows the result of applying the tree view menu theme from this article in the car rental system within the SB Demo application.
Figure 18. Applied tree view menu
This is merely one example of how you might modify the presentation of the main application window and menu. This article doesn't even touch the toolbar, background or status bar.
The point is, with the introduction on the new application architecture for SB/XA, the possibilities for modifying the presentation of your applications is limited only by your imagination!
| Description | Name | Size | Download method |
|---|---|---|---|
| XAML Style to Modify Window Layout1 | TreeViewMenu.zip | 2KB | HTTP |
| XAML Style to Display a Tree View Manu2 | TreeViewWindowLayout.zip | 2KB | HTTP |
Information about download methods
Notes
- File containing XAML style code to change the Window layout
- File containing XAML style code to produce a TreeView menu
Learn
- Visit the
SB/XA Product Page to get an
overview of the product.
- Check out the
U2 Library
to get documentation and manuals about SB/XA.
Get products and technologies
- Download
IBM U2 product evaluation versions
and get your hands on application development tools and middleware products from U2.
Discuss
- Participate in the discussion forum.
- Check out developerWorksblogs
and get involved in the developerWorks community
Stuart Mackenzie is an Advanced Technical Support Engineer for SystemBuilder products with over 17 years of experience with MultiValue databases and development tools. He has held a variety of roles including application development, training and customer support. Stuart joined System Builder in 1995 and spent 8 years as a consultant in U2 Professional Services before joining the IBM U2 Client Support group.
Table of contents
Local resources
My developerWorks community
Tags
Use the slider bar to see more or fewer tags.
Popular tags shows the top tags for this particular content zone (for example, Java technology, Linux, WebSphere).
My tags shows your tags for this particular content zone (for example, Java technology, Linux, WebSphere).
Popular article tags |
My article tagsSkip to tags list
Popular article tags |
My article tags
