Designing a View Layout 
Prerequisites
You are in the SAP NetWeaver Developer Studio and have created empty views.
Procedure
Used MIME Objects
The following images are used in the quiz application. Save them locally in directory src/mimes/Components/com.sap.tc.webdynpro.tutorials.quiz.Quiz.
File Name |
Image |
File Name |
Image |
a.png |
|
q.png |
|
questionmark.png |
|
question.png |
|
answer.png |
|
exit.png |
|
start.png |
|
end.png |
|
You can now create UI elements for these empty views.
1. Double-click the view in Web Dynpro Explorer to start editing in View Designer, and select the Layout tab. In the Outline area, you now see a hierarchical overview of all UI elements in the view. The top node of this structure is always RootUIElementContainer.
UI elements are always embedded in a superordinate container UI element (for example, the transparent container or a group).
2. You create the UI elements in the Outline area. In this area, choose Insert Child in the context menu of the superordinate UI element where you want to insert the new UI element.
3. You can edit the properties of the selected UI element in View Designer using the Properties tab.
The following overview lists the UI elements that need to be defined for the views in this Web Dynpro application.
Welcome View
Insert the UI elements listed in the table into the Welcome view. Create the UI elements according to their order in the table. You can delete the default UI element DefaultTextView.
View Layout in the Web Dynpro View Designer |
|
|
|
Property |
Value |
Group WelcomeViewGroup of type Group in RootUIElementContainer |
|
Properties of Group ® design |
sapcolor |
Properties of Group ® layout |
GridLayout |
Properties of Group ® width |
100% |
Layout ® colCount |
2 |
Caption
WelcomeViewGroup_Header of type Caption in UI element WelcomeViewGroup |
|
Properties of Caption ® text |
Web Dynpro Quiz |
Text TextMessage of type TextView in UI element WelcomeViewGroup |
|
Properties of TextView ® design |
Emphasized |
Properties of TextView ® text |
Welcome Text |
LayoutData ® colSpan |
2 |
LayoutData ® hAlign |
Center |
LayoutData ® paddingBottom |
Medium |
Pushbutton StartQuizButton of type Button in UI element WelcomeViewGroup |
|
Properties of Button ® text |
Start Quiz |
Properties of Button ® imageSource |
start.jpg |
LayoutData ® hAlign |
right |
LayoutData ® paddingRight |
small |
LayoutData ® width |
50% |
Pushbutton ExitButton of type Button in UI element WelcomeViewGroup |
|
Properties of Button ® text |
Exit Quiz |
Properties of Button ® imageSource |
exit.jpg |
LayoutData ® width |
50% |
QuestionView
Insert the following UI elements into the Question view (and delete DefaultTextView):
View Layout in the Web Dynpro View Designer |
|
|
|
Property |
Value |
Group QuestionViewGroup of type Group in RootUIElementContainer |
|
Properties of Group ® design |
Sapcolor |
Properties of Group ® layout |
GridLayout |
Properties of Group ® width |
100% |
Layout ® colCount |
2 |
Caption QuestionViewGroup_header of type Caption in UI element QuestionViewGroup |
|
Properties of Caption ® text |
Question View |
Image QImage of type Image in UI element QuestionViewGroup |
|
Properties of Image ® source |
q.jpg |
Properties of Image ® tooltip |
Question |
LayoutData ® hAlign |
center |
LayoutData ® paddingTop |
large |
Text QuestionText of type TextView in UI element QuestionViewGroup |
|
Properties of TextView ® design |
header4 |
Properties of TextView ® text |
A Question |
Properties of TextView ® wrapping |
true |
LayoutData ® hAlign |
center |
LayoutData ® vAlign |
middle |
Text QuestionCounter of type TextView in UI element QuestionViewGroup |
|
Properties of TextView ® design |
header2 |
Properties of TextView ® text |
Counter Info |
LayoutData ® paddingTop |
large |
LayoutData ® paddingBottom |
large |
Container TransparentButtonContainer of type TransparentContainer in UI element QuestionViewGroup |
|
LayoutData ® hAlign |
Center |
Pushbutton ShowAnswerButton of type Button in UI element TransparentButtonContainer |
|
Properties of Button ® text |
Show Answer |
Properties of Button ® imageSource |
answer.jpg |
Pushbutton NextQuestionButton of type Button in UI element TransparentButtonContainer |
|
Properties of Button ® text |
Next Question |
Properties of Button ® imageSource |
question.jpg |
LayoutData ® paddingLeft |
medium |
Answer View
Insert the following UI elements into the Answer view (and delete DefaultTextView):
View Layout in the Web Dynpro View Designer |
|
|
|
Property |
Value |
Container
RootUIElementContainer of type TransparentContainer |
|
Properties ® layout |
GridLayout |
Group AnswerViewGroup of type Group in UI element RootUIElementContainer |
|
Properties of Group ® design |
Sapcolor |
Properties of Group ® layout |
GridLayout |
Properties of Group ® width |
100% |
Layout ® colCount |
2 |
LayoutData ® paddingLeft |
Medium |
Caption AnswerViewGroup _header of type Caption in UI element AnswerViewGroup |
|
Properties of Caption ® text |
Answer View |
Image AImage of type Image in UI element AnswerViewGroup |
|
Properties of Image ® source |
a.jpg |
Properties of Image ® tooltip |
Answer |
LayoutData ® hAlign |
center |
LayoutData ® paddingTop |
large |
Text AnswerText of type TextView in UI element AnswerViewGroup |
|
Properties of TextView ® design |
header4 |
Properties of TextView ® text |
An Answer |
Properties of TextView ® wrapping |
True |
LayoutData ® hAlign |
Center |
LayoutData ® vAlign |
middle |
Pushbutton EndQuizButton of type Button in UI element AnswerViewGroup |
|
Properties of Button ® text |
End Quiz |
Properties of Button ® imageSource |
end.jpg |
LayoutData ® colSpan |
2 |
LayoutData ® hAlign |
center |
LayoutData ® paddingBotton |
large |
LayoutData ® paddingTop |
large |
QuestionMarkView
Insert the following UI elements into the QuestionMark view:
View Layout in the Web Dynpro View Designer |
|
|
|
Property |
Value |
Container RootUIElementContainer of type TransparentContainer |
|
Properties ® layout |
GridLayout |
LayoutData ® colCount |
1 |
Image QuestionMarkImage of type Image in UI element RootUIElementContainer |
|
Properties ® source |
questionmark.jpg |
Properties ® tooltip |
question mark |
LayoutData ® hAlign |
center |
LayoutData ® vAlign |
middle |
using the ActionButton template.