You are on page 1of 4

Creating Page before.

htm
Use
On this page, implement the output using HTMBL.

Prerequisites
You have created a BSP application (see also BSP_TUT_COMPLEX. Creating BSP Applications). In our example, this has the name

Procedure
1. In your BSP application, create page before.htm as a page with flow logic
(see also Creating Pages). 2. Define three page attributes for the three input fields:

Attribute name password email


open in browser PRO version

Auto x x x

Typing Type TYPE TYPE TYPE

Reference Type STRING STRING STRING


pdfcrowd.com

Are you a developer? Try out the HTML to PDF API

3. Create the page layout with HTMBL elements:

<%@page language="abap"%> <%@extension name = "HTMLB" prefix = "htmlb" %> <htmlb:content> <htmlb:page> <htmlb:form> <htmlb:gridLayout cellSpacing = "2" cellPadding = "0" width = "100%" rowSize = "3" columnSize = "2"> <%-- name --%> <htmlb:gridLayoutCell columnIndex = "1" rowIndex = "1" > <htmlb:label id = "name_label" text = "Name:" for = "name" /> </htmlb:gridLayoutCell> <htmlb:gridLayoutCell columnIndex = "2" rowIndex = "1"> <htmlb:inputField id = "name" value = "<%=name%>"/> </htmlb:gridLayoutCell> <%-- password --%> <htmlb:gridLayoutCell columnIndex = "1" rowIndex = "2" > <htmlb:label id = "password_label" text = "Password:"
open in browser PRO version
Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

for = "password" /> </htmlb:gridLayoutCell> <htmlb:gridLayoutCell columnIndex = "2" rowIndex = "2"> <htmlb:inputField id = "password" value = "<%=password%>" password = "TRUE" /> </htmlb:gridLayoutCell> <%-- email --%> <htmlb:gridLayoutCell columnIndex = "1" rowIndex = "3" > <htmlb:label id = "email_label" text = "Email:" for = "email" /> </htmlb:gridLayoutCell> <htmlb:gridLayoutCell columnIndex = "2" rowIndex = "3"> <htmlb:inputField id = "email" value = "<%=email%>" /> </htmlb:gridLayoutCell> </htmlb:gridLayout> </htmlb:form> </htmlb:page> </htmlb:content>
4. Save and activate your page and the BSP application.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

Result
The generated output is as follows:

Analysis
You need more than 40 lines coding to code the simple three input fields. Also, because of the <htmlb:gridLayout> element, you cannot always immediately recognize at a glance the coding structure. This element is not absolutely necessary for our example, although it makes sense to use it with more complex layouts. For these flow-type layouts, most attributes can now be calculated automatically, especially counters for rows and columns. It is exactly the same when you connect <htmlb:label> to <htmlb:inputField>. Many of the attributes can also be hard-coded in a set of wrapper elements.
It is therefore recommended that you design a BSP extension library that also contains inherent information (that is, hard-coded elements) for the layout of a specific BSP application or a group of BSP applications. Ideally, the individual BSP extensions in this library will be "slim" and easy to create. These can be used to create "toolboxes" that encapsulate the appearance and the whole layout centrally. As a result, you can also make changes to the whole application very quickly.

You can do all this using the Design Solution.

open in browser PRO version

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

You might also like