8/12/2019 Chapter 09_Graphical User Interface

1/17

IBM Global Services

2005 IBM CorporationGraphical User Interface | 6.09 March-2005

Graphical User Interface

8/12/2019 Chapter 09_Graphical User Interface

2/17

IBM Global Services

2005 IBM Corporation2 March-2005Graphical User Interface | 6.09

Objectives

The participants will be able to:

Create a GUI status for online programs.

Set the GUI status in the PBO event.

Check the function codes using the user-defined field OKCODE.

8/12/2019 Chapter 09_Graphical User Interface

3/17

IBM Global Services

2005 IBM Corporation3 March-2005Graphical User Interface | 6.09

Overview

Academy Awards

Year

Category

1994

PIC

Exit Edit Loop

Academy Awards

Year

Winner ForrestGump

Notes The Shawshank Redemption should have won.

Exit Update

Menu Painter

Using the Menu Painter, we can add

pushbuttons to the application toolbar

on both screens.

***Important Questions***

Where do you set the GUI status/title?

What type of GUI status is used?

How do you check the function code triggered?

What are the different function types?

1994

PICCategory

8/12/2019 Chapter 09_Graphical User Interface

4/17

IBM Global Services

2005 IBM Corporation4 March-2005Graphical User Interface | 6.09

Menu Painter

Menu Painter

Create function codes with a 20-character

(maximum) identifier.

Function Key

Assignments

Standard

Toolbar

Application

ToolbarMenu bar

8/12/2019 Chapter 09_Graphical User Interface

5/17

IBM Global Services

2005 IBM Corporation5 March-2005Graphical User Interface | 6.09

Set GUI Status/Title in PBO Module

** MZA05O01 - PBO Modules **

MODULE INITIALIZE OUTPUT.

IF SY-DYNNR = 9000.

SET PF-STATUS FIRST.

SET TITLEBAR ONE.

ELSE.

SET PF-STATUS

SECOND.

SET TITLEBAR TWO.

ENDIF.

ENDMODULE.

PROCESS BEFORE OUTPUT.

MODULE INITIALIZE.

Screen 9000

PROCESS BEFORE OUTPUT.

MODULE INITIALIZE.

Screen 9001

SY-DYNNR =

Current

screen

number

Notice that the call to module

INITIALIZE in the PBO of each

screen refers to the same ABAP

module.

8/12/2019 Chapter 09_Graphical User Interface

6/17

IBM Global Services

2005 IBM Corporation6 March-2005Graphical User Interface | 6.09

GUI Status Type

Screen type defined in

the Screen Attributes of

the Screen Painter.

GUI status type defined

in the Menu Painter.

Screen Type

Normal

GUI Status Type

Online Status

Screen Type

Modal Dialog Box

GUI Status Type

Dialog Box

8/12/2019 Chapter 09_Graphical User Interface

7/17

IBM Global Services

2005 IBM Corporation7 March-2005Graphical User Interface | 6.09

GUI Status Type (Contd.)

Screen type defined in

the Screen Attributes of

the Screen Painter.

GUI status type defined

in the Menu Painter.

Screen Type

Normal

GUI Status Type

Online Status

Screen Type

Modal Dialog Box

GUI Status Type

Dialog Box

8/12/2019 Chapter 09_Graphical User Interface

8/17

IBM Global Services

2005 IBM Corporation8 March-2005Graphical User Interface | 6.09

Checking Function Code Triggered

** MZA05TOP - Top Include **

PROGRAM SAPMZA05 MESSAGE-ID

ZA.

TABLES YMOVIE.

DATA OKCODE(4).

To check the OK Code of an online

program, you must define this fieldin both the screen (Field List) and the

program work area (Top Include).

Remember that these fields must be

given the same name.

8/12/2019 Chapter 09_Graphical User Interface

9/17

IBM Global Services

2005 IBM Corporation9 March-2005Graphical User Interface | 6.09

Checking Function Code Triggered (Contd.)

** MZA05TOP - Top Include **

PROGRAM SAPMZA05 MESSAGE-ID

ZA.

TABLES YMOVIE.

DATA OKCODE(4).

To check the OK Code of an online

program, you must define this fieldin both the screen (Field List) and the

program work area (Top Include).

Remember that these fields must be

given the same name.

8/12/2019 Chapter 09_Graphical User Interface

10/17

IBM Global Services

2005 IBM Corporation10 March-2005Graphical User Interface | 6.09

Using the OKCODE

** MZA05I01 - PAI Modules **

MODULE SELECT_LISTING INPUT.IF OKCODE = EDIT.

* code to select record from YMOVIE

ENDIF.

ENDMODULE.

** MZA05O01 - PBO Modules **

MODULE INITIALIZE OUTPUT.

* code to set GUI status/title

CLEAR OKCODE.

ENDMODULE.Academy Awards

Year

Category

1994

PIC

Exit Edit Loop

We only want to select a recordfrom YMOVIE if the user has

invoked the EDIT function code

(e.g., clicked on the Edit

pushbutton).

You should clear out the

OKCODE before a screen isso an old value does not remain

if the user presses Enter.

8/12/2019 Chapter 09_Graphical User Interface

11/17

IBM Global Services

2005 IBM Corporation11 March-2005Graphical User Interface | 6.09

Function Types

Function Code: Function codes of different types

can be created

Type

:Program

Function

Type E

: Exit

Command

Type S

: System

Function

Type T

:Start

Transaction

Type P

: Local GUI

Function

8/12/2019 Chapter 09_Graphical User Interface

12/17

IBM Global Services

2005 IBM Corporation12 March-2005Graphical User Interface | 6.09

Function Types (Contd.)

Function Code: Function codes of different types

can be created

Type

:Program

Function

Type E

: Exit

Command

Type S

: System

Function

Type T

:Start

Transaction

Type P

: Local GUI

Function

8/12/2019 Chapter 09_Graphical User Interface

13/17

IBM Global Services

2005 IBM Corporation13 March-2005Graphical User Interface | 6.09

Demonstration

Creation of an online program to display a academy awards screen.

Setting up the GUI status and title of the above screen.

Using OKCODE in the program to process the screen.

8/12/2019 Chapter 09_Graphical User Interface

14/17

IBM Global Services

2005 IBM Corporation14 March-2005Graphical User Interface | 6.09

Practice

Creation of an online program to display a academy awards screen.

Setting up the GUI status and title of the above screen.

Using OKCODE in the program to process the screen.

8/12/2019 Chapter 09_Graphical User Interface

15/17

IBM Global Services

2005 IBM Corporation15 March-2005Graphical User Interface | 6.09

Summary

A programs GUI is created in the Menu Painter.

Each program has a single GUI that contains the defined function codes.

A GUI is made up of one or many statuses. A GUI status can be one of four

types:

List Status,

List in the Dialog Box,

Online Status,

Dialog Box.

Another aspect of a GUI is the title bar. You can define any number of title bars

for a particular GUI.

8/12/2019 Chapter 09_Graphical User Interface

16/17

IBM Global Services

2005 IBM Corporation16 March-2005Graphical User Interface | 6.09

Summary (Contd.)

To determine what function code the user invoked during the execution of anonline program, you can check two fields: OK Code and SY-UCOMM. Both of

these fields are updated with the function code invoked by the user. However,

under certain circumstances, SY-UCOMM is not updated. For this

reason, in online programming you should always check the OK Code.

Function codes of different types can be created:

- Program function,

E - Exit command,

S - System function,

P - Local GUI function,

T - Start transaction.

8/12/2019 Chapter 09_Graphical User Interface

17/17

IBM Global Services

2005 IBM Corporation17 March-2005Graphical User Interface | 6.09

Questions

What is the use of the Menu Painter ?

What is a Function Code ?

What are the different types of function codes that can be created ?