Designing a View Layout (SAP Library

Designing a View Layout

Prerequisites

You are in the SAP NetWeaver Developer Studio and have created empty views.

Procedure

You now create the appropriate UI elements for the empty views. For detailed information, refer to Creating and Designing a View.

1. Double-click the view in the Web Dynpro Explorer to start editing in the View Designer and select the Layout tab.

You see a hierarchical overview of all UI elements of the view in the Outline area. The top node of this structure is always RootUIElementContainer.

Note

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 into which you want to insert the new UI element.

3. You can edit the properties of the selected UI element in the View Designer using the Properties tab.

The following overview lists the UI elements that the views of this Web Dynpro application should have.

Welcome View

Insert the UI elements of the table into the Welcome view. Create the UI elements according to their order in the table. You can delete the existing UI element DefaultTextView provided by default.

View Layout in the View Designer of the Web Dynpro Tools

Type	Name	Superordinate UI Element	Property	Value
Group	WelcomeViewGroup	RootUIElementContainer	Properties of Group ® design	sapcolor
			Properties of Group ® layout	GridLayout
			Properties of Group ® width	100%
			Layout ® colCount	2
Caption	WelcomeViewGroup_Header “created automatically	WelcomeViewGroup	Properties of Caption ® text	Web Dynpro Quiz
TextView	TextMessage	WelcomeViewGroup	Properties of TextView ® design	emphasized
			Properties of TextView ® text	Welcome Text
			LayoutData ® colSpan	2
			LayoutData ® hAlign	center
			LayoutData ® paddingBottom	medium
Button	StartQuizButton	WelcomeViewGroup	Properties of Button ® text	Start Quiz
			Properties of Button ® imageSource	start.jpg
			LayoutData ® hAlign	right
			LayoutData ® paddingRight	small
			LayoutData ® width	50%
Button	ExitButton	WelcomeViewGroup	Properties of Button ® text	Exit Quiz
			Properties of Button ® imageSource	exit.jpg
			LayoutData ® width	50%

Question View

Insert the following UI elements into the Question view (delete DefaultTextView):

View Layout in the View Designer of the Web Dynpro Tools

Type	Name	Superordinate UI Element	Property	Value
Group	QuestionViewGroup	RootUIElementContainer	Properties of Group ® design	sapcolor
			Properties of Group ® layout	GridLayout
			Properties of Group ® width	100%
			Layout ® colCount	2
Caption	QuestionViewGroup _header	QuestionViewGroup	Properties of Caption ® text	Question View
Image	QImage	QuestionViewGroup	Properties of Image ® source	q.jpg
			Properties of Image ® alt	Question
			LayoutData ® hAlign	center
			LayoutData ® paddingTop	large
TextView	QuestionText	QuestionViewGroup	Properties of TextView ® design	header4
			Properties of TextView ® text	A Question
			Properties of TextView ® wrapping	true
			LayoutData ® hAlign	center
			LayoutData ® vAlign	middle
TextView	QuestionCounter	QuestionViewGroup	Properties of TextView ® design	header2
			Properties of TextView ® text	Counter Info
			LayoutData ® paddingTop	large
			LayoutData ® paddingBottom	large
Transparent Container	TransparentButton Container	QuestionViewGroup	LayoutData ® hAlign	center
Button	ShowAnswerButton	TransparentButton Container	Properties of Button ® text	Show Answer
Button	ShowAnswerButton	TransparentButton Container	Properties of Button ® imageSource	answer.jpg
Button	NextQuestionButton	TransparentButton Container	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 (delete DefaultTextView):

View Layout in the View Designer of the Web Dynpro Tools

Type	Name	Superordinate UI Element	Property	Value
Transparent Container	RootUIElementContainer		Properties ® layout	GridLayout
Group	AnswerViewGroup	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	AnswerViewGroup	Properties of Caption ® text	Answer View
Image	AImage	AnswerViewGroup	Properties of Image ® source	a.jpg
			Properties of Image ® alt	Answer
			LayoutData ® hAlign	center
			LayoutData ® paddingTop	large
TextView	AnswerText	AnswerViewGroup	Properties of TextView ® design	header4
			Properties of TextView ® text	An Answer
			Properties of TextView ® wrapping	true
			LayoutData ® hAlign	center
			LayoutData ® vAlign	middle
Button	EndQuizButton	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

Note

The property text of the Button UI element is only set until the binding of onAction events is declared. Alternatively, a button automatically displays the text that is contained in the action event to which the onAction even of the button is bound. The declaration of these action events is described in the next step.

QuestionMark View

Insert the following UI elements into the QuestionMark view:

View Layout in the View Designer of the Web Dynpro Tools

Type	Name	Superordinate UI Element	Property	Value
Trans-parent-Container	RootUIElement Container		Properties ® layout	GridLayout
			Layout ® colCount	1
Image	QuestionMarkImage	RootUIElementContainer	Properties ® source	questionmark.jpg
			LayoutData ® hAlign	center
			LayoutData ® vAlign	middle

Use of MIME Objects

The following pictures are used in the quiz application. Save them locally in the directory src/mimes/Components/com.sap.tc.webdynpro.tutorials.quiz.Quiz.

File name	Picture	File name	Picture
a.jpg		q.jpg
questionmark.jpg		question.jpg
answer.jpg		exit.jpg
start.jpg		end.jpg

This graphic is explained in the accompanying text Create programmatic navigation changes.