Container style

© Copyri ght 200 7 - 2009 ABB . All ri ghts res erved.

5.3.3. Container style

The container control of a FlexPendant application is 640x390 pixels, which is the exact size of the FlexPendant screen dedicated for a custom view. This section details the two different styles that can be used for a FlexPendant view: Empty and Form.

You select which one to use in the Style area of the FlexPendant SDK Project Wizard. To the left in the wizard, a preview helps you see the difference between the two styles.

6.2.2_1

Here Form is selected. The preview illustration shows a TpsForm. It has a CommandBar at the bottom and a TpsCtrlTitleBar at the top.

NOTE!

When adding a new view to an existing FlexPendant project, you choose which control to use in the Add New Item dialog box. See Adding a view to a custom application on page 99 for information on how to add a new view to an existing project.

Empty or Form?

Your choice in the wizard determines the type that your view class will inherit. If you change your mind about this, it is easy to make the change directly in the auto generated code.

Empty

This is a plain TpsControl. It has neither a CommandBar, nor a TpsCtrlTitleBar. The code definition of the class will look like this:

VB:

Public Class TpsViewMyApp Inherits TpsControl Implements ITpsViewSetup, ITpsViewActivation

5.3.3. Container style © Copyri ght 200 7 - 2009 ABB . All ri ghts res erved. Form

This is a TpsForm, which is a specialized TpsControl. The code definition of the class will look like this: VB:

Public Class TpsViewMyApp Inherits TpsForm Implements ITpsViewSetup, ITpsViewActivation

Continued

5.3.3. Container style © Copyri ght 200 7 - 2009 ABB . All ri ghts res erved. NOTE!

Often Empty is chosen as the first view of an FP SDK application. For any secondary view, which is to be opened from the first one, Form is the recommended container control.

NOTE!

When selecting Form you might wonder why the command bar is not visible in the designer. The answer is that it remains invisible until a MenuItem has been added to it. This is done in the Properties window of the TpsForm, by applying the property MainMenu.

TIP!

If you select the TitlePanel or the CommandBar of a TpsForm you will see that the

Properties window is disabled. If you want to change the text of the title panel, or add menu

items to the command bar, for example, you must select TpsForm by clicking somewhere in the middle and then modify its Text or MainMenu property.

How to build the command bar

The command bar is either ready-made, as for TpsForm, or used as a separate control available from the toolbox. If the command bar is ready-made, the design of it is done by modifying the MainMenu property of TpsForm. If used as a separate control, you design it by modifying its own properties. Apart from this, there is no difference in how you control the design.

An important thing to remember is that you have to manually add the code controlling what will happen when the user presses a menu item, as there are no event properties available in its Properties window.

See Command bar on page 101 for further information on how to implement the control and its event handlers.

CAUTION!

The command bar of the first view of a custom application should not have a Close button. The reason is that all custom application must be closed down by TAF, which happens when the user presses the close [ x ] button in the upper right corner of the FlexPendant display. (SeeDefinitions on page 18 for a definition of TAF or Understanding FlexPendant application life cycle on page 52 for further information on TAF.)

Adding a view to a custom application

To add another view to the FlexPendant project, you do not need to start a new project. This is how to proceed:

Step Action

1 Right-click the project node in the Solution Explorer, point to Add and select New Item.

2 Select one of the FlexPendant container controls available in the dialog box. Normally it will be a Form.

Note! If you select Empty the code you write to open it from the first view is a bit different than if you are using Form as a secondary view.

Continued

5.3.3. Container style © Copyri ght 200 7 - 2009 ABB . All ri ghts res erved.

This way all of your views make up a single dll, which is convenient. Most of the time there is no point in dividing the application into several dlls.

Launching the view

The code for launching the secondary view is simple. It may look like this:

//declare the secondary view as a private member private View2 _view2;

//create the view and add subscription to its closed event, then launch view

private void button1_Click(object sender, EventArgs e) {

this._view2 = new View2();

this._view2.Closed += new EventHandler(view2_Closed); this._view2.ShowMe(this);

}

//dispose of the view when it has been closed void view2_Closed(object sender, EventArgs e) {

this._view2.Closed -= new EventHandler(view2_Closed); this._view2.Dispose();

this._view2 = null; }

NOTE!

Make sure that there is a natural way for the user to get back to the preceding view. The most intuitive way of doing this is to press a Close button or an OK or Cancel button on the command bar. If the secondary view is a TpsForm, this event handler closes it:

void menuItem1_Click(object sender, EventArgs e){ this.CloseMe();}

NOTE!

If you are using Empty as a secondary container control the code you write to launch it is:

this._view2.Show();

It must be added to the first view’s control collection before it can be shown, just like an ordinary .NET control.

5.3.4. Command bar © Copyri ght 200 7 - 2009 ABB . All ri ghts res erved.

5.3.4. Command bar

For the end-user the command bar is a central FlexPendant control and an important means of interacting with the system. As described in How to build the command bar on page 99 it can be ready-made or added to the container control from the VS Toolbox.

How to add menu items

If you use the Form container a command bar is built-in, but not visible until you add a MenuItem collection to the MainMenu property of TpsForm. How to do this is shown in step 5 - 6 of Hands on - step 2 on page 89.

If you use Empty as container the command bar needs to be added from the Toolbox. In this case too, the commands are added as a collection of menu items.

6.3.4_1

The command bar in this figure has a collection of three menu items: Launch View, Close View and Close. Moreover, the Launch View menu item has its own collection of menu items: Rapid Data, Jogging and Backup Restore.

In the figure, as shown by the task bar, the Backup Restore view has been opened. It has been done by clicking the Backup Restore menu item. The user has then returned to the Hello

World application by using the task bar. If Close View is now pressed, the Backup Restore

view will close down. The next section shows how event handlers for this command bar can be implemented.