Screen Painter is an ABAP Editor tools allowed us to create dialog screen. Dialog screen usually created as a screen to catch user input. It can be accessed by tcode SE51.
Screen Painter Architecture:
1. Screen Attributes
Define screen title, define its type (normal, subscreen).
2. Flow logic
Flow logic control flow of program. The event block is introduced by the corresponding keyword statement, and it concludes either when the next block is introduced, or at the end of the program.
There are four event blocks, each of which is introduced with the screen keyword PROCESS:
PROCESS BEFORE OUTPUT.
...
PROCESS AFTER INPUT.
...
PROCESS ON HELP-REQUEST.
...
PROCESS ON VALUE-REQUEST.
A simple sample of flow logic.
PROCESS BEFORE OUTPUT.
MODULE PBO_module1.
MODULE PBO_module2.
PROCESS AFTER INPUT.
MODULE PAI_module1.
MODULE PAI_module2.
Flow logic structured on event, in above example we can see there are two event involved, "process before output" (PBO) and "process after input" (PAI).
PBO processed before the screen is displayed. It allow us to define toolbar and title, positioning the cursor, showing and hiding fields and changing field attributes dynamically.
PAI processed after user command (double click, push button). It is allow us to validate user input, and determine next process based on user command.
In flow logic, we only define module name to define program flow, to create "real code", double click on module name to create it, then write program in it.
3. Layout Editor
We use layout editor to place screen element in screen layout. There are two modes in editing layout: Graphical and alphanumeric. Both modes offer the same functions but use different interfaces. In graphical mode, you use a drag and drop interface similar to a drawing tool. In alphanumeric mode, you use your keyboard and menus. It is easier to work in graphical mode, to toggle beetween this mode, in SE51 go to: Utilities->Settings: in screen painter tabs check graphical layout editor.

Layout editor containing this tools:
i. Element pallete
On left screen you will find list of element (textbox, label, checkbox) you can use. Drag and drog element to put it on screen.
ii. Name & Text
Aftef put element on screen, write its name and text (in textbox, text will set default value).
iii. Attributes Window
Double click the element to display its attributes, or select it then click :Goto->Secondary window->attributes. For example, in textbox element, we can set its length, read only mode, in this window.
iv. Dictionary/program field.
If we want to create a field refer to field in data dictionay or field already declared in program, use this menu to create text field with the same type compared to its referral.
4. Element list.
Element list shown all element in screen. We rarely use this menu, because it easier to maintain element in layout editor.
Read More......