Using the ActionButton Template
Use
The wizard for the ActionButton template allows you to easily create a button, an action, an event handler, and the code for calling a method and triggering an event.
Procedure
To create a button using the ActionButton template, proceed as follows:
1. In the context menu for the group child of the outline view, choose Apply Template.
2. Choose the option ActionButton. Enter a name for the template or use the default.
3. Choose Next. In the next window, you define the button label, an action, and the events. Enter the label and action. You can also use the default name for the event, as it is automatically created to suit the action.
4. Choose Next to proceed to the wizard window for defining the methods and plugs. By setting the Fire Plug flag, you define the firing of the plug.
5. Close the wizard by choosing Finish and save your changes by choosing Save all Metadata.
6. In the outline window, choose your newly created button and move it to the superordinate container UI element (for example, TransparentButtonContainer or GroupChild).
You can edit the properties of the selected UI element in the View Designer using the Properties tab.
The following is an overview of the buttons and their properties that the views of this Web Dynpro application should contain.
Property |
Value |
Button StartQuizButton in the UI Element WelcomeViewGroup of the Question View |
|
Assigning Action Event |
StartPressed |
Triggering Outbound Plug |
StartQuizOut |
Properties of Button → text |
Start Quiz |
Properties of Button → imageSource |
start.jpg |
LayoutData → hAlign |
right |
LayoutData → paddingRight |
small |
LayoutData → width |
50% |
Button ExitButton in the UI Element WelcomeViewGroup of the Welcome View |
|
Assigning Action Event |
ExitPressed |
Properties of Button → text |
Exit Quiz |
Properties of Button → imageSource |
Exit.jpg |
LayoutData → width |
50% |
Button ShowAnserButton in the UI Element TransparentButtonContainer of the Question View |
|
Assigning Action Event |
ShowAnswerPressed |
Triggering Outbound Plug |
ShowAnswerOut |
Properties of Button → text |
Show Answer |
Properties of Button → imageSource |
answer.jpg |
Button NextQuestionButton in the UI Element TransparentButtonContainer of the Question View |
|
Assigning Action Event |
ShowNextQuestionPressed |
Triggering Outbound Plug |
ShowQuestionMarkOut |
Properties of Button → text |
Next Question |
Properties of Button → imageSource |
question.jpg |
LayoutData → paddingRight |
medium |
Button EndQuizButton in the UI Element AnswerViewGroup of the Answer View |
|
Assigning Action Event |
EndQuizPressed |
Triggering Outbound Plug |
EndQuizOut |
Properties of Button → text |
End Quiz |
Properties of Button → imageSource |
end.jpg |
LayoutData → colSpan |
2 |
LayoutData → hAlign |
center |
LayoutData → paddingBottom |
large |
LayoutData → paddingTop |
large |
The next step is to create the navigation
transitions.