1. Programming ModelThe following documentation describes the BSP programming model:BSP ApplicationsBSPsBSP DirectivesCentral Classes and InterfacesImportant Global ObjectsBSP ExtensionsModel View Controller (MVC)Stateful and StatelessControl Flow and LifetimeCachingPage DesignAccessibilityFor SAP Web AS 6.20, the BSP programming model was enhanced with the MVC design patternas well as the paradigm of the BSP extensions.What is a BSP Application?OverviewA Business Server Page (BSP) application is a complete functional application, like aclassic SAP transaction. However, this application is executed in a Web browser ratherthan in the SAPGUI. HTTP or HTTPS is the protocol used to access the applicationacross the network, thus allowing the use of standard products like firewalls and proxyservers.The Business Server Pages programming model is similar to the server page technology.The focus of the BSP programming model are points that ensure optimum structure ininterfaces and business logic.For more information about BSP applications, see:● The components of a BSP application and how they interact, see Structure of a BSPApplication.● How to call an existing BSP application from a Web browser, see Accessing a BSPApplication.● How to open and close a BSP application, see Starting and Ending a BSP Application.● How a BSP application is processed, see Processing a BSP Application● How to create a BSP application, see Creating a BSP Application.● The URL parameters you can use to access the BSP runtime environment and BSPapplications, see System-Specific URL Parameters.● The concept of an application class for encapsulating the business logic of a BSPapplication, see Application Class of a BSP Application
2. Structure of a BSP ApplicationA Business Server Page (BSP) application is an independent development project that iscreated and edited in the SAP development environment (transaction SE80). Externaldesign tools, such as Adobe GoLive, Dreamweaver, or Microsoft FrontPage 2000 can beused to design the BSP application, as well as BSP extensions.Analog to a classic transaction, a BSP application consists of a user interface andbusiness logic that is assigned to a logical unit, in this case the BSP application.The user interface of a BSP applications includes:• Static Web sites• Dynamically generated Web sites, which are BSPs or templates that contain server-sidescripting that is executed dynamically at runtime to generate a static Web site BSPs caneither be pages with flow logic or views.There can also be controllers if the MVC design pattern is used• Various MIME objects, such as pictures, icons, sound files, style sheets, and so on, thatare parts of a typical Web application
4. These are created in the same way as normal BSPs, but are then marked as pagefragments. Other BSPs can also include these fragments using theincludedirective (see Include Directive).• Navigation structuresThe navigation structure determines which navigation request is used to direct thenavigation process from which page to which subsequent page.• Application classThe business logic of a BSP application is encapsulated in an application class. This classis realized by means of a global ABAP class which implements the access to business datausing BAPI calls, for example. Every page of a BSP application can directly reference thecomponents of this class (attributes, methods, and so on) using the predefined Objectapplication.You can also assign several BSP applications to an application class.For more information, see Applications Class of a BSP Application.• MIME objectsIn the SAP system, all MIMEs, such as graphics, style sheets (used to define formattingproperties of individual HTML tags), audio files, video files, and so on, are stored andadministered in a central repository, the MIME repository.For every new BSP application, a directory of the same name is created in the MIMErepository. This directory is used as a storage location for all application-specific MIMEs.See also:Accessing a BSP ApplicationStarting and Ending a BSP ApplicationBuilding a BSPAccessing a BSP ApplicationAs explained previously, you access BSP applications using the HTTP or HTTPS (SecureHTTP) protocol. The BSP runtime environment uses the HTTP framework of the SAPWeb Application Server (compare Interaction Model). In the Internet CommunicationFramework (ICF), for a BSP application to function smoothly you need a node, that is, aservice in the service tree (see also Creating a BSP Application).Ensure that after a SAP Web AS has been installed, that all services are inactive and thatthey must be activated accordingly. You can find further information about activationunder Activating and Deactivating an ICF Service and in Business Server PagesAdministration.The node is activated in the service tree only with BSP applications that were newlycreated for SAP Web AS 6.20 as part of automatically creating the corresponding node.A BSP application is addressed and executed through HTTP using a Uniform ResourceLocator (URL). The URL of a BSP application has the following structure (defaultconfiguration):<Prot>://<Host>.<domain>.<extension>:<Port>/sap/bc/bsp/<namespace>/<applicationname>Protocol Prot is httpor https (if configured). Host is the name of the applicationserver that should execute the application. The domainwith the extension
5. encompasses several hosts under a common name. These can either be part of anindividual host or a network. The Port number can be omitted if the default port 80(http) or 443 (https) is used.For SAP Web Application Server, the default port number is 1080 (HTTP) or 1443(HTTPS). The namespace is the namespace ID of the BSP application. SAP applicationsare delivered in the sap namespace. If you create your BSP application in a separatenamespace, it must be used in the URL. The application name is the name of the BSPapplication as defined in the development environment.Here is an example of a URL for BSP test application IT00:http://myServer.sap-ag.de:1080/sap/bc/bsp/sap/it00
6. The full name of the server is specified, including the network domain (here: sap-ag.de). If this is not done, the BSP runtime environment returns an error. The fulldomain must be entered, as there may otherwise be problems with HTTP cookies(such as Single Sign On).If the BSP that you start by calling Transaction SE80 contains a shortened URL(excluding the host name), proceed as described in Note 434918.When this URL is started in the Web browser, the BSP application is started, and theinitial page is displayed (by default this is default.htm).To determine the URL of a BSP or BSP application in the SAP developmentenvironment, select the Properties tab to the right of the SAP GUI screen.Example of page default.htm of BSP application IT00:
7. For more information:Starting and Closing a BSP ApplicationCache Key
8. Starting and Ending a BSP ApplicationUseURL parameters can be used to inform the BSP runtime environment to start or end aBSP application (corresponds to the OK code “/n” in SAP GUI) To do this, the QueryString parameter sap-sessioncmd is added to the URL and the HTTP request is sent tothe server.To be compatible with SAP Internet Transaction Server (ITS) and the SAPEnterprise Portal (SAP EP), you can also use ~SAPSessionCmd.For a list of all system-specific URL parameters that have a special use in the BSPapplication environment, see System-Specific URL Parameters.ProcedureThe following commands are supported:• open: Restarts a BSP application that is running. The application is started up if it is notcurrently running.http://myServer.sap.corp:1080/sap/bc/bsp/sap/it00?sap-sessioncmd=open• close: Ends a running BSP application and either tells the system to display a blank pageor go to a specific Web site (exit URL). The exit URL is specified using an additional URLparameter,This parameter is calledsap-exiturl,and must contain a full HTTP URL.To be compatible with SAP Internet Transaction Server (ITS) and the SAPEnterprise Portal (SAP EP), you can also use ~exitURL.Example1. • Restart of BSP test application IT00:http://myServer.sap.corp:1080/sap/bc/bsp/sap/it00?sapsessioncmd=open1. • Ending the application externally:http://myServer.sap.corp:1080/sap/bc/bsp/sap/it00?sapsessioncmd=close&sapexiturl=http%3a%2f%2fwww.sap.comPay attention to the spelling of the URL - all URI parameters, that is everythingfollowing the ?, must be URL-encoded.System-Specific URL ParametersTo control the BSP runtime environment and the BSP application, you can use thefollowing URL query string parameters in a request URL.URLParameterValue Description
9. sap-sessioncmd open: Restarts the BSP application named in the URLclose: Ends the BSP application named in the URL and sends thebrowser, if specified, to the Web site defined by sap-exiturl. If you want the user to be able to end theapplication, this option should be available in a BSPapplication as part of the user interface (as a pushbutton orhyperlink).sap-exiturl * Specifies the URL to which the browser is directed whenthe BSP application ends (for example,http://www.sap.com)sap-theme * Overrides the theme for a BSP application to use otherMIME objects, such as pictures and Stylesheets forvisualization.sap-themeRoot * Used to handle paths to other locations from wherestylesheets are taken.See also:Changing Stylesheets for HTMLB and XHTMLBThis parameter is available from SAP Web AS 6.20Support Package 7.sap-client * Specifies the client for a logon to the SAP Web ApplicationServer; can be used in the URL or in HTML forms tooverride the default client.sap-user * Specifies the user for a logon to the SAP Web ApplicationServer; can be used in the URL or in HTML for forms.sap-password * Specifies the password for logon; can be used in HTMLforms.Do not enter this directly in the URL as Web browserURLs are stored in a History list and the password wouldbe visible in plain text, even after the browser is closed.sap-language * Specifies the language (ISO language ID, such as EN orDE) for a logon to the SAP Web Application Server; can beused in the URL or in HTML forms to override the defaultlogon language.sap-htmlb-design* Dynamic switching of the different default design variants,without using the attribute design of <htmlb: content>.Possible values are CLASSIC, DESIGN2002 andDESIGN2003.For SAP Enterprise Portal 5, DESIGN2002 is supported.
10. For SAP Enterprise Portal 6, both DESIGN2002 andDESIGN2003 are supported.sap-domainRelaxoff |min |maxMaximum domain relaxing, see also Domain Relaxingsap-accessibility X | Specification for the accessibilitySee also Configuration SettingsTo activate this indicator, an activated checkbox is placedon the logon screen for input help.sap-rtl True |FalseDetails of the RTL supportThe family of <HTMLB> libraries supports RTL (right-to-left) rendering for design2003. You can activate RTLrendering using the URL parameter sap-rtl=true (but onlyfor the first call before the BSP URL finds out about theURL mangling). Use attribute rtlAutoSwitch from<htmlb:content> to activate the RTL modeautomatically, depending on the currently active language(SY-LANGU). The decision about activating RTL isdelegated to the function module NLS_RTL_DISPLAY.Parameter names and parameter values are not case sensitive (exception: sap-exiturl is case-sensitive, if the link is to a case-sensitive server). You can combineseveral parameters in one URL.Here is an example of how to restart a BSP application in client 800 with logonlanguage English.http://myServer.sap.com:1080/bc/bsp/sap/it00?sap-sessioncmd=open&sap-language=en&sap-client=800Processing a BSP ApplicationUsesWhen a BSP application is being processed, the individual BSPs and their components are run,and the corresponding processing steps are executed according to the code.ProcessIf an HTTP request is sent to a BSP, that is, if a page (in stateless case: for the first time) iscalled, the page in instantiated in OnCreate. Next, OnRequest is called.The handler is then run that is most appropriate for the request, that is, OnInitialization for URLinput, OnInputProcessing for HTML input, or another individual event handler if controls are used.
11. If it hasn’t already, OnInitialization is run, so that the initialization phase data is assessed. Data inthe SAP system, such as table contents or BAPIs, can be accessed in this phase. Then, thelayout part (the hidden part of the event handler OnLayout) is processed, which determines thedesign and presentation logic of a page. This code consist of static parts (for example, HTML)and scripting code. To ensure clean programming, no business logic or data retrieval is carriedout in the layout part. The manipulation part becomes important if the HTTP data stream shouldbe modified later. The manipulation code should likewise contain no business logic or statementsfor data retrieval functionality. If there are no subsequent changes, the manipulation part is notrequired.On the basis of all this data, the first page is built and sent to the user.Next comes the user interaction phase, in which the user inputs data. The user input is sent backto the BSP. This input triggers an additional HTTP request.You can specify for every page whether stateful or stateless mode is required. This is done in theinput processing part. For example, incorrect input can be checked, data can be read from thedatabase, and the succeeding page can be determined.The subsequent page for the navigation request is determined in the navigation part of theapplication. If no succeeding page is set, the first page is reprocessed.Then, processing of the initialization part continues.For more information, see Control Flow of BSPsCreating a BSP ApplicationYou create your Web application in the form of a BSP application.For information about the procedure for creating BSP applications, see the documentationon Web Application Builder in the sections under Basic Functions..Extending Security Aspects with BSP ApplicationsSo that a BSP application can function correctly, there must be a node that corresponds toeach BSP application in the service tree (Transaction SICF) of the InternetCommunication Framework (ICF).When you create a BSP application in the Web Application Builder in SAP Web AS 6.20and higher, this type of node is created and activated in the appropriate part of the ICFservice tree (see Creating an ICF Service). If necessary, you can define permissions forthis node (see Maintaining Service Data).For BSP applications that were created before SAP Web AS 6.20 and which therefore donot have any nodes in the ICF service tree, this node is generated automatically by thesystem as soon as you branch to the corresponding BSP application in change mode.There may be conflict with old BSP applications with names that are longer than 15characters. Before SAP Web AS 6.20, you could create BSP applications whosenames could exceed the length of the service name in Transaction SICF. In thiscase, we recommend that you copy all of the old BSP application to a new BSPapplication with a shorter name, so that the node is automatically created.
12. Application Class of a BSP ApplicationOverviewA BSP application comprises a number of different development objects. One of theseobjects is the application class of the BSP application.The application class is a regular ABAP Objects class. As such, the application class caninclude any methods, attributes and events that the developers wish to have.The application class is usually used to store data and make it available across BSPpages. This data is stored as attributes. The application class also encapsulates BSPapplication logic in methods. This allows several BSP applications to use the sameapplication class and provide one business application that contains different interfaces,such as for various devices, without having to replicate the business or application logic.This also means the global Object application can be used in the BSP application toaccess the attributes and methods of the application class.You do not have to use an application class in your BSP application. Rather, it is anoptional way for application developers to structure their BSP application.You use the Web Application Builder in transaction SE80to assign an application class toa BSP application.A simple example of where an application class could be useful would be a class forcontrolling dialog logic and maintaining data consistency in a BSP application forshopping. This application class would include a shopping basket (internal table orother object) as an attribute. There would also be methods for changing andprocessing the shopping basket, such as to add, change, or delete articles. Methodsfor determining prices, creating offers, and posting orders would also be helpful.In many cases, the application class is only used to encapsulate existing applicationfunctions, such as from SAP Customer Relationship Management (SAP CRM), andthen access the function through BAPI interfaces. Using an application class to
13. encapsulate the functions ensures that the BSP application functions are stored in acentral location (in the application class) and that both implementation anddistribution are transparent (local method call but remote BAPI call internally). If acustomer or developer wants to change or adapt a BSP application or use theapplication for an additional device, they have the full functions of the original BSPapplication available in the interface of the application class.Runtime BehaviorAny ABAP Objects class can potentially be used as an application class of a BSPapplication. However, the BSP runtime environment must treat the class as a singleton,that is, a class for which there is only one instance per session.The lifetime of an application class depends on the state model of the BSP application. ABSP application can be stateful or stateless.Stateful BSP ApplicationIn Stateful BSP Applications, the only instance of the application class, the applicationobject, is generated at the first request sent to the BSP application. The object is thenavailable for the entire lifetime of the session. The end lifetime of the application objectends when the session ends.In stateful mode, the application class provides local buffering for data sets that aredifficult to determine.Stateless BSP ApplicationIn Stateless BSP Applications, the application context (roll area) is only available for thelifetime of a single request and is released at the end of the request. When the applicationcontext is released, all data and objects held by the session on the application server arealso released. This includes the application object.This means the lifetime of the application object starts when the request is received andends when a response is sent. The application object is not available across several pages.Each page and each request interacts with a different instance of the application class.In stateless mode, the application object cannot hold data across requests. For statelessapplications, application classes are usually used to store the business logic in methods,but do not buffer data.Accessing the Application ObjectTo access the application object, you use a typed object reference that is stored as theparameter application in all event handlers of a BSP. Of course, you must ensure,however, that the parameter only exists if an application class is defined for a BSPapplication.Requirements for an Application ClassThe only real requirement for an application is that the constructor must be parameterless.Otherwise, the application class cannot be generically instantiated by the BSP runtimeenvironment.Apart from this, there are no other restrictions. You do need to ensure that the internalimplementation of methods is chosen correctly, depending on the state mode where theclass is implemented. For stateless applications, for example, it would be useless toimplement expensive data gathering routines as these would be lost after every request.
14. Instead, just get the exact data you need at that time. In stateful applications, you canimplement an initialization phase where you get a large amount of data at one time,which can improve performance.Application Events: The IF_BSP_APPLICATION_EVENTSInterfaceIn stateless BSP applications, an application often needs centralized control at certaintimes in the lifetime of the application. The BSP model provides this function for theapplication class in the predefined interface IF_BSP_APPLICATION_EVENTS.When an application class implements the optional interfaceIF_BSP_APPLICATION_EVENTS, the BSP runtime environment calls the interfacemethods at the relevant times. The following describes the methods and times:IF_BSP_APPLICATION_EVENTS~ON_START This method is called by theBSP runtime environmentwhen the corresponding BSPapplication is first started atthe start of the BSP session.This applies to both statelessand stateful applications.Typically, this time point isused to carry outauthorization checks thatapply to the entireapplication, or forpreliminary data retrieval (instateful applications).IF_BSP_APPLICATION_EVENTS~ON_STOP This method is called by theBSP runtime environmentwhen the corresponding BSPapplication is explicitlyended. This applies for bothstateless and statefulapplications.Note that this time is notavailable after every requestin stateless BSP applications.This time is not evaluatedeither if the session isimplicitly terminated by atimeout. In this method, it isonly possible therefore to
15. execute optional operationsthat are non-critical.Typically, this is a good timefor cleanup operations suchas deleting browser cookiesor server-side cookies, if theapplication generated them.IF_BSP_APPLICATION_EVENTS~ON_REQUEST This method is called by theBSP runtime environment forevery incoming request to aBSP before the BSP is givencontrol (in the OnRequestevent handler).This time can be used by theapplication class, forexample, to restore attributesthat were rescued in client-or server-side cookies in aprevious request.IF_BSP_APPLICATION_EVENTS~ON_RESPONSE This method is called by theBSP runtime for everyoutgoing response of a BSPafter the BSP has beenprocessed (after theOnManipulation eventhandler).This time can be used by astateless application classfor tasks such as rescuingattributes in client-side orserver-side cookies.See also:You can find details of interface IF_BSP_APPLICATION_EVENTSin the referencedocumentation Interface IF_BSP_APPLICATION_EVENTS:Application Base Class CL_BSP_APPLICATIONIf an application class does not already have a super class, it can be derived from thepredefined base class CL_BSP_APPLICATION. This class provides methods that aretypically required by a BSP application for embedding in a Web environment. This ishow information about the current BSP application (such as session timeout, current URLof BSP application, state mode, and so on) can be called or set.
16. As the application object is an application attribute in every BSP event handler, themethods of the CL_BSP_APPLICATION class are also available with the correspondinginheritance. This makes it easy to provide the relevant functionality to lower applicationlevels using a single object reference.See also:You can find information about base class CL_BSP_APPLICATION in the referencedocumentation Class CL_BSP_APPLICATION:BSP ComponentsBusiness Server Pages (BSPs) are HTML pages that contain the actual application logic andpresentation logic. BSPs define the Web user interface and determine the elements of userinteraction.BSPs consist of the following components:Server-side scripting determines the presentation logic as part of layout processing. In thepreview, you can check the appearance of your pages, without having to call up the browser.Page attributes are visible in the layout processing as well as in the event handlers of a page.They can be used to store data obtained in the standard handler OnInitialization, and to make thisdata accessible for the layout processing and the other event handlers.Predefined event handlers are available for the different events.
17. You can use type definitions to define local types.Similar to every object in the SAP System, BSPs also have different administration attributes.PropertiesBSPs have a number of general properties or attributes. For example, each BSP is assigned to apackage in the SAP system, and each BSP has a URL used to call up the BSP in a Web browser.The following describes the most important additional properties.Page TypeYou can find additional information about the different features of a page in Structure of a BSPApplication.Error HandlingFor more information see Creating Error Pages.StatusA BSP can be stateful or stateless. For more information see Stateful and Stateless.CachingFor more information see Caching BSPs.Transmission OptionsYou can set the flags Compression and HTTPS as the transmission options.• CompressingIf you set this flat, the page is sent compressed to the browser, provided that thebrowser supports compression.Note that it only makes sense to activate compression for large pages. It isconsiderably more efficient to send small pages uncompressed.It is considerably more efficient to send small pages uncompressed.• HTTPSBy selecting this flag, you can determine that a BSP should be accessed usingHTTPS, that is, a secure connection. The BSP runtime then checks the URL. Inthe case of http://... it redirects the browser immediately to https://... .Not the following browser-specific feature: As soon as you activateHTTPs, all other BSPs of your BSP application are accessed usingHTTPS.
18. It is considerably more efficient to send small pages uncompressed.LayoutUseYou determine the presentation logic for your BSP using server-side scripting in the layout.To ensure clean development, layout and presentation must be separated from processing logic.Therefore, scripting for the static details of a page is part of layout processing, while the dynamicprocessing steps are set in the different event handlers (see Event Handlers).The layout can also be regarded as an internal event handler for the presentation.You can create your own stylesheets or use predefined ones.FunctionsYou can access the following objects in the implementation:Object Reference Type DescriptionAPPLICATION type ref to application class Application class reapplication or appliBSP application. Ifin the BSP applicatobject application isRUNTIME type ref to IF_BSP_RUNTIME The runtime objectIF_BSP_RUNTIMEREQUEST type ref to IF_HTTP_REQUEST The request objectIF_HTTP_REQUESRESPONSE type ref to IF_HTTP_RESPONSE The response objeIF_HTTP_RESPONPAGE type ref to IF_BSP_PAGE Page object is definIF_BSP_PAGE.PAGE_CONTEXT type ref to IF_BSP_PAGE_CONTEXT Page context objecIF_BSP_PAGE_COExampleBSP only with Layout
19. Event HandlerEvent handlers allow the separation of static and dynamic code in a page. The layout processingdeals with the static data, while the event handlers deal with the dynamic data.The following predefined event handlers are available in the SAP system:Event Handler DescriptionOnCreate OnCreate is called once when the page is first created (statefulmode), and performs a once-off data initialization or objectcreation.OnRequest OnRequest is called whenever a request is made for aparticular page and is used to restore the internal datastructures from the request. This is important when working instateless mode.OnInitialization This event handler is mainly used for data retrieval. Forexample, it allows data required for displaying the BSP to beread from the database. It can also execute any program.OnInputProcessing This event handler checks and processes user input. It can alsodefine navigation, that is, whether the user should be taken tothe same page or another when the BSP is called.OnManipulation You can use this event handler to manipulate the HTTP datastream later.OnDestroy This event handler is available for special functions.The ABAP syntax checks that apply in the context of ABAP Objects alsoapply to event handlers.Read and modify access to page attributes is available in all handlers. Global objects are alsoavailable.Global objects and their signatures for individual event handlers aredisplayed if you choose in the Web Application Builder.The use of the individual event handlers is explained in more detail in the individual sections ofthe documentation.See also:
20. Control Flow of BSPsPage AttributesPage attributes are parameters that are declared explicitly for one page. You can access pageattributes from the layout and from all event handlers. You use page attributes to store data that isdetermined in the event handler OnInitialization, and you can use the page attributes to make thedata accessible to layout processing and the remaining event handlers.Access to the contents of the page attribute is not, however, given automatically at any time. If,for example, you fill an internal table in OnIntialization that you have defined as a page attribute,although this definition is known in OnInputProcessing, the table contents is not known if you areworking in stateless mode. Additional information is described below.There are two types of page attributes:• Automatic page attributes• Non-automatic page attributesAutomatic Page AttributesIf you mark a page attribute as ‘automatic’ (auto in the system), the attribute automatically gets itsvalues via the calling URL or via the navigation process from other pages. This kind of attributeonly has to be declared for one page. It is identified by its name equivalence. If another pageuses a parameter with the same name, at runtime that parameter automatically gets the samevalues as the attribute.navigation -> set_parameter(name = FLIGHT value =LH )Let us assume that you have defined FLIGHT as an automatic pageattribute and assigned it a value from the navigation process.If you then use a parameter of the same name on another page, thisparameter will automatically get the value LH (Lufthansa) at runtime.Possible Types for Automatic Page AttributesBefore SAP Web Application Server 6.10, auto page attributes could only have the type STRING.Now, other types are available:• Elementary types except for XSTRING• Structures• TablesIf firstname is a field in a structure called myaddress of the typeaddress, and myaddresses is a table of addresses, you can accessfirstname in the layout as follows:<input type=text name="myaddress.firstname">myadresses[i].firstname allows you to specify the first name inquestion in the line of the table represented by ‘i’, that is, if i=6, the firstname used in line 6 of the table is being referred to.Non-automatic page attributesIf you flag a page attribute as non-automatic, the attribute gets its values from the class attribute.
21. Transferring Parameters Between Pages: Visibility of PageAttributesThe visibility of page attributes when parameters are transferred between BSP pages depends onwhether the navigation is explicit or implicit.• Explicit navigationFor example, if navigation->goto_page(page.htm) is called, this is explicitnavigation. It does not matter if the navigation takes you to the same page fromwhich you came.In explicit navigation, the page object is always reinstantiated. When the pageobject is being reinstantiated, in both stateful and stateless mode, the attributeswith navigation->set_parameter must be transferred to auto pageattributes of the same name, so that the values that were set are not lost.• Implicit navigationUser input triggers the sending of a request. Because no explicit navigation hasbeen provided, the same page is run again.With implicit navigation, the page attributes are transferred automatically fromOnInputProcessing to OnInitialization, both in stateful and stateless mode.The auto page attributes are refilled by the request, both in stateful and statelessmode.The difference is that, in stateful mode, any non-auto page attributes that mayhave changed retain the changed value, whereas in stateless mode, the valuesare reset to the original values. This is because the page instance stays ‘alive’ instateful mode, but is reinstantiated in stateless mode.Lifetime of Page AttributesWhen you navigate between pages, there are the following cases of different lifetimes forautomatic and non-automatic page attributes:• Lifetime of attributes remaining on the same page• Lifetime of attributes with navigation to the same page• Lifetime of attributes with navigation to a different pageLifetime of attributes remaining on the same pageNo navigation takes place.Attribute Type Value inRequest(ExampleValue)Value inOnInputProcessingExplicitTransferValue inOnInitializationautomatic SAP SAP No SAPautomatic SAP SAP Yes SAPNon-automatic SAP No SAP
22. Non-automatic SAP Yes SAPLifetime of attributes with navigation to the same pageThe navigation object is used (navigation->goto_page(samepage.htm)) to navigate to thesame page.Attribute Type Value inRequest(ExampleValue)Value inOnInputProcessingExplicitTransferValue inOnInitializationautomatic SAP SAP Noautomatic SAP SAP Yes SAPNon-automatic SAP NoNon-automatic SAP YesLifetime of attributes with navigation to a different pageThe navigation object is used (navigation->goto_page(otherpage.htm)) to navigate to adifferent page.Attribute Type Value inRequest(ExampleValue)Value inOnInputProcessingExplicitTransferValue inOnInitializationautomatic SAP SAP Noautomatic SAP SAP Yes SAPNon-automatic SAP NoNon-automatic SAP YesType DefinitionsYou can create type definitions for pages with flow logic. Type definitions are not available forviews, however.If you want to use a page attribute that should only be used within a page and in the differentmethods of the page (event handler and layout), you can create a local type for this. Typedefinitions are therefore local types visible in all event handlers of a BSP and the BSP itself.Type definitions are also relevant when BAPIs are used (see BAPI Explorer). In the page editor,you call the BAPI browser through which you cut & paste the type definitions and a template forthe requested BAPI call to the Type Definition and Event Handler tabs in your BSP.
23. You define local types only for those objects that are necessary within aBSP for the processing process. Types that are used several times orthat can be implemented universally should be defined in the DataDictionary.BSP DirectivesOverviewBSP directives are enclosed in tags: <% Directive %>The directives described in the following sections are supported by Business Server Pages(BSP). The syntax is compatible with the familiar server page technology.The following BSP directives are available:• Page Directive• Inline Code• Comments• Include Directive• OTR Directives• Extension DirectiveYou use the Tag Library to add BSP directives to your code using Drag &Drop.For more information see Transferring Variables.Special Programming FeaturesThe following code sections for the layout of a BSP are not equivalent:<% read table itab index lv_index. %><% if sy-subrc ne 0. clear workarea. endif. %>and:<% read table itab index lv_index.if sy-subrc ne 0. clear workarea. endif. %>The first code extract above contains a function module call between the two ABAP commands.The second code extract does not:....* BSP SCRIPT sourceread table itab index lv_index.* BSP STATIC source* HTML begin: #### ######CALL METHOD %_IF_PM->ADD_STATIC_REFexportingencoding = 0source = %_HTML_POOLoffset = 0000018407 length = 0000000039 .
24. * BSP SCRIPT sourceif sy-subrc ne 0. clear workarea. endif.....This means that the sy-subrc set when the internal table is read is overwritten by the functionmodule call. The two pieces of code therefore behave differently.Control Flow of BSPsOverviewThe control flow of a page is displayed in the following graphic:You do not have to use all event handlers, for example a BSP can consist of justthe layout, or it only contains the layout, OnInitialization and OnInputProcessing.Since event handler OnDestroy is used infrequently, it is irrelevant here.The following cases should be distinguished:• stateless BSPs• stateful BSPsSee also:
25. Interface IF_BSP_PAGEStatelessIn the stateless case, the context is created each time that a request is received. The context isalways destroyed when the response is sent.For the BSP runtime stateless means: runtime->keep_context = 0When creating the output of a page, processing is the same as described in the following graphic.Output of a BSP (Stateless)When creating the input for a page, processing is the same as described in the following graphic.Input for a BSP (Stateless)
26. With stateless BSPs (the default is stateless), the navigation can be executed either on the samepage or on other pages.Navigation Within the BSPWhen the page is called, the system first checks if there is already a page object for this BSP. Ifthis is not the case, the event handler OnCreate runs, which creates the page object or aninstance of it. The event handler OnRequest then follows. If a page object already exists (ingeneral, this does not happen with the first call, just as little as in stateless BSPs), the systembranches directly to the event handler OnRequest. There then follows either OnInitialization, ifthere is no user interaction, and OnInputProcessing if there is user interaction. FromOnInputProcessing, there is no further navigation to OnInitialization. Processing continues withthe layout and then possibly with OnManipulation, although this event handler is usedinfrequently. The requested page is then displayed in the browser. User action can now takeplace, and then processing begins again.Navigating to Other BSPsThe processing process is very similar to when you navigate within a BSP. If you now navigatefrom the OnRequest to a different page, event handler OnInputProcessing is called andevaluated. The follows OnInitialization, and then the layout and so on.StatefulIn the stateful case, the context is held by gone request to the next.For the BSP runtime stateful means: runtime->keep_context = 1When creating the output of a page, processing is the same as described in the following graphic.Output of a BSP (Stateful)When creating the input for a page, processing is the same as described in the following graphic.Input for a BSP (Stateful)
27. With stateful BSPs, there can be three different variants of lifetime:• Up to the page change (lifetime_page)The page is destroyed if a different page is used.• For the duration of the request (lifetime_request)The page is destroyed after each individual request, that is, is only available for theduration of each request.• For the duration of the session (lifetime_session)The page is destroyed at the end of the session.Examples• BSP only with Layout• BSP with Layout and Initialization• BSPs with Layout, Initialization and Navigation• BSPs with Layout, Initialization and Input ProcessingClasses and InterfacesThe following classes and interfaces are central components of the BSP programmingmodel.Classes:● Class CL_BSP_APPLICATION
28. ● Class CL_BSP_MESSAGES● Class CL_BSP_SERVER_SIDE_COOKIE● Class CL_BSP_GET_TEXT_BY_ALIAS● Class CL_BSP_CONTROLLER2Interfaces:● Interface IF_BSP_APPLICATION● Interface IF_BSP_APPLICATION_EVENTS● Interface IF_BSP_NAVIGATION● Interface IF_BSP_PAGE● Interface IF_BSP_RUNTIME● Interface IF_BSP_PAGE_CONTEXT● Interface IF_HTMLB_TABLEVIEW_ITERATORMany of these classes and interfaces are the basis for their associated global objects.Global ObjectsCertain global objects can be accessed from all parts of a BSP (initialization, layout, inputprocessing). For example, the request and response object, the application object (if anapplication class was defined for the BSP application), the navigation object, and the runtimeobject, can be accessed.The following global objects are available:• Object application• Object navigation• Object messages• Object runtime• Object request• Object response• Object page• Object page contextThis is described in more detail below.The objects and their signatures for the individual event handlers aredisplayed if you choose in the Web Application Builder.Example:
29. BSP ExtensionsIntroductionThe BSP programming model, which is based on the server pages technology, providesdevelopers with additional scope regarding the HTML coding that they can create, froman empty page right up to complex applications. However, repeatedly creating complexHTML coding is often a lengthy process that can easily result in errors. For example, asimple HTML pushbutton can be implemented thus:<input id=btn type=submit>: If you now start to use additional styles and otherattributes for the size and the status of the button, the original simple HTML codingbecomes considerably more complex and unclear. An abstraction technology can be usedhere to express more simply both the syntax and the semantics of a specific section ofHTML coding. This mechanism is structured so that it can also be used by other types ofBSPs, XML, WML and so on. This technology is known as BSP extensions.A BSP extension contains a collection of BSP elements. In the BSP context, eachelement is assigned to an ABAP class to represent the element functionality, which thegeneration of the HTML coding usually contains. Defining the elements and mappingthem to the ABAP classes is so flexible that you can use this technology to solve manyadditional problems and difficulties.SAP provides an infrastructure that developers can use to implement BSP extensionswithin BSP applications. SAP delivers a set of predefined extensions, such as HTMLBusiness for BSP (HTMLB), XHTMLB and PHTMLB that are available and can be used inevery SAP Web Application Server 6.20 system. You can also define your own extensionsto meet specific requirements. You can create these using an editor integrated in thedevelopment environment (transaction SE80).You include an extension in a BSP using the extension directive.
30. For more information see Creating Your Own BSP Extensions.You can also create composite elements in order to facilitate layout changes withcomplicated BSP applications.BSP Extensions and BSP ElementsEach BSP extension consists of a collection of BSP elements. Each element has specificattributes and is assigned to an ABAP class. The usual notation for XML elements is usedwhen elements are written to BSPs. The attributes available in the element are used asinput parameters for the ABAP class that is assigned to the element.You can define a simple pushbutton on a BSP as follows:<htmlb:button id=”btn1” text=“Hit Me!” />Here “htmlb” is the XML namespace, “button” is the element and “id” and “text” areattributes. When the BSP compiler sees the element, it generates the followingpseudocode.data: btn1 type ref to CL_HTMLBL_BUTTON.create object btn1.btn1->writer = current_output_writer.btn1->id = ‘btn1’.btn1->text = ‘Hit Me!’.btn1->begin_tag( ).btn1->end_tag( ).The element class writes the HTML to the HTML output stream based on thefunctionality that the element provides. This is based on the assumption that allelements in an extension support a common output style.In the sample pushbutton above, the start tag is followed immediately by the end tag. Nobody components whatsoever are available or required (by the pushbutton). For otherexamples, it may be useful to manipulate the body or to process more detailed input.A typical element, for example, could be an HTML link for creating a small textsegment. In this case, the element has a body, which is first rendered in a string andthen passed as a parameter to the element for further processing.<htmlb:link id=”link1” reference=“http://www.sap.com”>Homepage of the e-company!</htmlb:link>This results in:The link element takes the Internet address as the reference. The link element alsoprovides formatting based on the style that is provided by the BSP extension. Thebody is used as input for the element.Even if using elements and their resulting ABAP class calls seems to be fairly complexfor this type of simple HTML element, using and supporting BSP extensions providesseveral advantages that should not be underestimated:
31. ● The standard XML syntax that is used can be parsed and checked during the BSP compiletime.● The returned HTML coding need only be generated once (by an expert) in the ABAPelement class, thereby ensuring that the coding is correct.● The element class can contain additional logic for generating browser-dependent HTMLcode.● The HTML coding that is generated contains correct references to the style sheets that areavailable.In addition to a BSP extension for standard HTML elements such as pushbuttons, inputfields, dropdown lists and so on, you can also implement highly specialized extensions.For example, you could develop an extension to map a company’s corporate identityto an HTML page. In this case, the user’s coding for this extension, for example,could be as follows:<%@extension name=”SAP_Corporate_Identity_Extension” prefix=”corp”%><corp:logo/><corp:stock_ticker/>This could look as follows on the HTML page:ExamplesThe system contains various examples of BSP applications that use BSP extensions. Youcan find simple examples of using BSP extensions HTMLB, XHTMLB and PHTMLB in theBSP applications SBSPEXT_HTMLB, SBSPEXT_XHTMLB and SBSPEXT_PHTMLB,and further examples in BSP extension HTMLB_SAMPLES.The following sections provide two simple examples of the HTMLB elements buttonand tableView:ButtonTableViewButtonYou can find this example in the system under BSP application SBSPEXT_HTMLB, pagebutton.bsp (package SBSPEXT_HTMLB).Layout<%@page language="abap"%><%@ extension name="htmlb" prefix="htmlb"%>
33. width = "300"/></htmlb:form></htmlb:page></htmlb:content>OnInputProcessingCLASS CL_HTMLB_MANAGER DEFINITION LOAD.* Optional: test that this is an event from HTMLB library.IF event_id = CL_HTMLB_MANAGER=>EVENT_ID.* Scenario 1: Read event from manager.DATA: event TYPE REF TO CL_HTMLB_EVENT.event = CL_HTMLB_MANAGER=>get_event( runtime->server->request ).IF event->name = button AND event->event_type = click.DATA: button_event TYPE REF TO CL_HTMLB_EVENT_BUTTON.button_event ?= event.ENDIF.* Scenario 2: Dispatch event directly onto event classDATA: event_handler TYPE REF TO CL_HTMLB_EVENT_EXAMPLE.
34. CREATE OBJECT event_handler.CL_HTMLB_MANAGER=>dispatch_event(request = runtime->server->requestevent_handler = event_handlerpage_context = page_context).ENDIF.OutputTableViewYou can find this example in the system under BSP application SBSPEXT_HTMLB, pageTableView.bsp (package SBSPEXT_HTMLB).Layout<%@page language="abap"%><%@ extension name="htmlb" prefix="htmlb"%><htmlb:content><htmlb:page title = "BSP Extension: HTMLB / Element: tableView"><htmlb:form><htmlb:tableView id = "tv1"headerText = "Connections"headerVisible = "true"design = "alternating"visibleRowCount = "8"fillUpEmptyRows = "true"onHeaderClick = "MyEventHeaderClick"onRowSelection = "MyEventRowSelection"
37. AttributesAttribute Auto Typing Type Reference TyperowSelection TYPE STRINGrowSelectionEvent TYPE STRINGsflight TYPE MYSFLIGHTOnInitialization* event handler for data retrievaldata: wa like line of sflight,name type string,value type string,str type string,scol type string,srow type string,id type string,mod type i,sytabix type sytabix,sflightlink type table of sflightlink.field-symbols: <wa> like line of sflight,<waLink> type sflightlink.select * from sflight into corresponding fieldsof table sflight.select * from sflightlink into table sflightlink.loop at sflight assigning <wa>.sytabix = sy-tabix.read table sflightlink assigning <waLink> with key carrid = <wa>-carrid.<wa>-LINKCARRID = <waLink>-HTTPLINK.
39. when 6. <wa>-myicon = ICON_WF_WORKITEM_ERROR.when 7. <wa>-myicon = ICON_WF_WORKITEM_CANCEL.endcase.mod = sytabix mod 5.case mod.when 0. <wa>-invalid = X.<wa>-disabled = X.when 1. <wa>-disabled = X.when 2. <wa>-invalid = X.endcase.mod = sytabix mod 3.case mod.when 0. <wa>-design = STANDARD.when 1. <wa>-design = EMPHASIZED.when 2. <wa>-design = SMALL.endcase.endloop.OnInputProcessing* event handler for checking and processing user input and* for defining navigationCLASS CL_HTMLB_MANAGER DEFINITION LOAD.
40. * Optional: test that this is an event from HTMLB library.IF event_id = CL_HTMLB_MANAGER=>EVENT_ID.* Scenario 1: Read event from manager.DATA: event TYPE REF TO CL_HTMLB_EVENT.event = CL_HTMLB_MANAGER=>get_event( runtime->server->request ).IF event->name = tableView.DATA: tableview_event TYPE REF TO CL_HTMLB_EVENT_TABLEVIEW.tableview_event ?= event.ENDIF.* Scenario 2: Dispatch event directly onto event classDATA: event_handler TYPE REF TO CL_HTMLB_EVENT_EXAMPLE.CREATE OBJECT event_handler.CL_HTMLB_MANAGER=>dispatch_event(request = runtime->server->requestevent_handler = event_handlerpage_context = page_context).ENDIF.Output
41. Defining Your Own BSP ExtensionBSP Extensions and BSP ElementsWith the BSP extension concept, you can develop your own tags for dynamic pages of BSPapplications.A BSP extension is represented by means of a special development object in the workbench. Thisobject includes a record of related BSP elements with the corresponding attributes, and it alsocovers references to the appropriate element handler classes. Each BSP element has an elementhandler class assigned to it that implements its specific functions.The figure below explains these connections with a relatively simpleexample.
42. Advantages for Using BSP Elements• Reduces the complexity of the BSP pages.The encapsulation of the functions into BSP elements can contribute greatly toreducing the script part in BSP pages.• ReuseGenerally speaking, a BSP element can be used by each BSP page.• Clear-cut role distributionAs a developer, you define the BSP extensions and implement the respectiveelement handler classes; as a designer, on the other hand, you use the BSPelements in the page layout of BSP applications.• Tool support within the workbench by the BSP extension editorTool SupportIn addition to the usual infrastructure (transport, where-used list, and so on), the workbenchprovides the following functions in order to ensure efficient processing of BSP extensions:• Creating and editing BSP extensionsIn the Object Navigator (SE80), you first create a BSP extension as a newdevelopment object. Then you create one or several BSP elements and declarethe individual element attributes.• Generating the element handler classFor each BSP element, you can generate a corresponding element handler classand its basis class in the Class Builder.• Integration in the Tag BrowserThrough activation, each new BSP extension is copied, without additional effort,as an entry into the Tag Browser in SE80. On the BSP application pages, youcan then place the corresponding tags and their attributes wherever you wantthem in the editor using Drag&Drop. See also: Using BSP Extensions.Process FlowComplete implementation of a BSP extension takes place in the following steps:1. Creating a BSP Extension2. Defining the Corresponding BSP Elements3. Implementing the Element Handler Class4. Activating the BSP Extension5. Entering Documentation
43. Defining BSP ElementsUseYou create individual elements for a BSP extension and these are inserted later on as tags inBSP pages. Each BSP element has a handler class assigned to it that implements its specificfunctions. Also, you can create and declare attributes for each BSP element.PrerequisitesThe BSP extension already exists.ProcedureCreating BSP Elements1. Choose the required BSP extension from the object list.2. Choose the function Create → BSP Element from the context menu.The system displays the Create BSP Element dialog box.3. Enter the name of the BSP element, a valid name for the Element Handler Class, and ameaningful description for the BSP extension as a short text.You can specify an existing, valid ABAP class as the element handler class. A valid classmust support the interface IF_BSP_ELEMENT.We recommend that you derive this class from the automatically-generated basisclass(Z)CLG_<name of BSP extension>_<name of BSP elements>. This basisclass already contains a standard implementation of the interface methods and isautomatically updated whenever changes are made to the element data.As a rule, you enter the name of a non-existing class as the element handler class intothe respective input field. Then you have this generated, together with the correspondingbasis class.4. Choose Continue to confirm your entries.The properties of the created BSP element are displayed in the editor.Defining Attributes of the BSP ElementYou can enhance the definition of a BSP element with a series of attributes. On the one hand, youcan change the element content from the standard value. On the other hand, it is possible toaccess the element content through Further Options for the element and change it, thusinfluencing the flow logic.For more details, refer to the section:
44. • Defining Element Content.Furthermore, you have the following options available to you:• User-Defined Validation• Iteration Through Element Content• Manipulation of the Element ContentDeclaring Attributes for a BSP ElementTo create attributes for a BSP element, choose the Attributes tab in the element view and, ifnecessary, switch to change mode.To create and declare an attribute, make the following specifications:Attribute X In this column, enter a name that uniquely identifies theattribute.After you have activated the BSP extension , the systemgenerates a public attribute with the same name in thebasis class (CLG_* or ZCLG_*).Required By setting this flag, you define that the attribute must bedefined whenever the BSP element is used in a BSPpage.Dynamic value allowed By setting this flag, you define that the value of theattribute in a BSP page may also be specifieddynamically through a BSP expression (<%= ...%>).Otherwise, only static values are possible in the form ofa string.Pass by reference By setting this flag, you define that the attribute ispassed to the event handler class as a reference.Otherwise, no value is passed.For more information, refer to the section Pass byReference for Attributes.Kind of typing X You have at your disposal the two types TYPE andTYPE REF TO, depending on whether you have data orobject references.Note that the selection TYPE REF TO is onlyappropriate in combination with the active optionDynamic Value Allowed. The reason for this is thatobject references in BSP pages can only be passed withthe help of BSP expressions, not statically in the form ofa string.Reference type X As reference type, you can use the elementary ABAPtypes (however, no generic types) or object types(classes and interfaces). Generic types such as C, N, X,P, and so on are not allowed because generically-typedattributes are not allowed in ABAP classes either. There
45. is a 1:1 relationship between the attributes of the BSPelement and the class attributes.Default value Here you always enter a value if the attribute is to bepredefined with a value. This value is copied from theTag Browser into the BSP page when you insert theattribute or the entire BSP element.Description Here you enter an explanatory attribute description.The specifications marked with X are absolutely mandatory for each attribute.ResultThe new BSP element is assigned as a subobject to the BSP extension and copied inactive intothe object list.With the new BSP element, the basis class (Z)CLG_<name of BSP extension>_<name ofBSP elements> is automatically created itself, and possibly also the specified element handlerclass, provided this does not yet exist.Also, you have specified the BSP element behavior at runtime through further properties, andhave also declared the corresponding attributes. In the next workstep, you can activate the BSPextensionActivating the BSP ExtensionUseYou use this standard function of the Workbench in order to put the entire BSP extension,including its elements, into the active version. If necessary, the system will generate the basisclass (CLG_* or ZCLG_*) again upon activation. This renewed generation always tales placeduring activation in the following cases:• If generation-relevant element data has been changed because, for example, elementattributes have been created, deleted, or changed.• If a basis class for a particular element does not exist at all because, for example, it wasdeleted manually, or was not transported by mistake.PrerequisitesYou have either created a BSP extension or processed one that already exists.Activation does not take place for the individual BSP elements alone, butis always done for the entire extension.Procedure1. Choose the required BSP extension from the object list.2. Select the Activate function from the context menu or through the respective icon inthe application toolbar.The system displays a list of all inactive objects. The selected BSP extension is marked.3. Confirm the selection by clicking Continue.
46. ResultWhen you activate, you create a runtime version of the BSP extension. If necessary, the systemwill also regenerate the element handler classes and your basis classes. Newly-created classesare automatically written to the same transport request as the BSP extension.Now the active version of the BSP extension appears in the Tag Browser under the entry BSPExtensions. There it is assigned to the selection Transportable or Local, depending on the objectcatalog entry.Note that activating the extension can invalidate all the BSP pages thatuse this extension. Calling the respective BSP pages again means theywill be regenerated if changes have been made.Implementing Element Handler ClassesUseThe element handler class is the central class of a BSP element. It implements the specificfunctions of an element and thus influences the flow logic of the BSP page that uses this element.Through the type of implementation of certain methods belonging to this class, you can controlwhether data is updated in the HTML data stream and whether the content of a BSP element isprocessed or discarded.Element handler classes are instantiated during the processing of a BSP page and called atdefined points in time using certain class methods.PrerequisitesA valid element handler class must implement the interface IF_BSP_ELEMENT. We thereforerecommend that you derive this class from the generated superclass(Z)CLG_<EXTENSION>_<ELEMENT> because it already contains the standard implementationsfor the interface methods.Process FlowThe flow during implementation of the specific functions of a BSP element is divided up into thefollowing three steps:1. Creating the attributes for the BSP element See also Defining BSP Elements.In this way, you make sure that the new attributes are added as attributes of the elementhandler classes after activation of the BSP extension.2. Overwriting certain interface methods of the element handler class3. Creating further methods or attributes that enhance the element functionsEntering DocumentationUse
47. You can create a long text documentation both for a BSP extension as well as for each BSPelement in the system that is contained in this extension. This document is of particularimportance for the productive usage of the extension in BSP pages because you can includespecial aspects of the individual BSP elements here.If you store the documentation in the system, it is then available to users through the contextmenu in the Tag Browser and also through insertion of the tag into a BSP page – also by pressingF1 in the layout editor.Prerequisites• The BSP extension and the elements to be documented have already been created.• There are two different templates available for the BSP extension and the BSP elements.The procedure for creating the documentation is the same, however.ProcedureTo create documentation for a BSP element in SE80:1. Select the BSP extension in the Repository Browser.2. Double-click the required BSP element in the object list.The system displays the element editor.3. Go to Change mode.4. Click the Documentation pushbutton in the toolbar.The SAPScript Editor is called up and displays an empty template with predefinedparagraphs.5. Write your text into the predefined paragraphs.6. Save the SAPScript document as a raw version first.7. Test the documentation and make whatever corrections are necessary.8. Save the document as active version.ResultYou have created a SAPScript document for the long text documentation of a BSP element andhave assigned a transport request to it.If you have saved the document as an active version as well, this will be transported to thetranslation worklist.ExampleThe documentation for all BSP elements is available for the BSP extension HTMLB.Using BSP ElementsUse
48. All delivered or newly created BSP extensions are available in the Tag Browser of the ObjectNavigator. You can use these in BSP application pages in order to create flexible Web userinterfaces.You enter the individual BSP elements and their attributes as tags or tag attributes from the TagBrowser into the layout source text of the BSP pages.Prerequisites• The switch button Tab Browser is available in the navigation area of the Object Navigator.If this is not the case, change the corresponding user settings.• So that the BSP extension is displayed with the required elements in the Tab Browser, theextension must already be activated.ProcedureTo insert BSP elements or their attributes into a BSP page, proceed as follows:1. Choose the Layout view for the required BSP page.2. Switch to Change mode.3. Click the switch button Tag Browser in the navigation area of the Object Navigator.4. Under BSP Extensions, choose the appropriate extension.5. Expand the tree display and click the required BSP element.6. Double-click the selected entry in order to display the documentation for the BSPelement.7. Using Drag and Drop, drag the selected element or element attribute to the appropriateposition in the layout editor.Multiple selection within the tree display is currently not supported.ResultWhen you select an element in the tree display, the corresponding start tag and end tag, includingall the obligatory element attributes, are inserted at the selected cursor position in the BSP page.If you enter an element attribute, the system takes the predefined standard value.With the first element of a BSP extension, the extension directive for the page is automaticallycreated. The system adopts as prefix the default prefix that was specified when you created theBSP extension. By typing over the prefix value in the extension directive, however, you canrename the prefix. This means that all tags entered subsequently from the Tag Browser alreadycontain the new prefix.If documentation was created for a BSP element, you can call this bypressing F1 in the layout editor of the BSP page.ExampleThe following example demonstrates the usage of the BSP extension HTMLB in a BSPapplication.Example: Using Extensions in BSP Pages
49. The following example shows the realization of a simple Web user interface for a BSP applicationusing the HTMLB library HTMLB. This library is available in each SAP Web Application ServerSystem and can be imported within the workbench from the Tag Browser into any BSP page.This example contains a label, input, and pushbutton element – in addition to the content, page,and form elements - for simple selection of flight data. The flight data is displayed using aTableView element.<%@page language="abap"%><%@ extension name="htmlb" prefix="ui" %><ui:content><ui:page><ui:form><ui:label id = "myLabel"for = "carrier"text = "Airline"design = "LABEL"width = "65" /><ui:inputField id = "carrier"type = "String"value = "<%=carrier%>"size = "3"design = "standard" /><ui:button id = "myButton"text = "Find Flights"onClick = "FIND"design = "STANDARD" /><br><br>
50. <ui:tableView id = "myTable"table = "<%=flights%>"headerVisible = "true"footerVisible = "true"fillUpEmptyRows= "true"selectionMode = "MULTISELECT"design = "ALTERNATING" /></ui:form></ui:page></ui:content>Note on the prefix:The BSP extension HTMLB is imported into the BSP page through the extension directive (2ndline). A prefix serves as a unique identification of this extension within the page. This directive isautomatically crated after you have inserted the first BSP element for the page. In the standardversion, the default prefix is taken. However, you can rename the prefix by overwriting thecorresponding value in the extension directive (in our example: ui).Composite ElementsUseWhen you create BSP applications with BSP extensions, it may not be easy to use elements thatare essentially simple BSP elements. To generate the layout you require, you often need anumber of special elements. In such cases, you can create composite BSP elements to facilitatehandling several special elements, and to minimize the amount of work required to develop BSPapplications and their layouts.The following uses a complex, typical task to display possible solutions. A simple BSP extensionis presented and implemented.Although the example is restricted to three simple input fields, thecomposite element solution is intended for cases where a number ofvariable input fields should be displayed, including labels and table-format displays.
51. TaskThree input fields with labels should be displayed on a screen. Users should enter their name,password and e-mail address in these input fields. The three fields should be arranged undereach other.You should use BSP extension HTMLB to solve this task, with the following predefined layoutelements:• <htmlb:gridLayout>• <htmlb:label>• <htmlb:inputField>Process1. Create a test BSP application.2. First use the already existing BSP extension HTMLB on page before.htm.3. Then create the composite element and use it on page after.htm.IntegrationComposite BSP elements use other, already existing BSP elements to generate the output withinthe layout framework by including and wrapping the BSP elements that already exist.PrerequisitesYou already understand the concept of BSP extensions and their implementation.ActivitiesCreate page before.htmDesign solutionCreate a new BSP extension with elementsCreate page after.htmDynamically process BSP elementsCreate a new BSP extension with composite elementsStep 1 a) Implement <sf:SimpleFormItem>Step 1 b) Use <htmlb:SimpleFormItem>Step 2: Create <sf:SimpleForm>Step 3: Changes to the Look and FeelDesign SolutionAfter analyzing the page before.htm, you need a set of elements that are easy to use and whichcan be used for the outlined task area. As a result, this is not a universal solution, but a solutionfor a clearly delimited application area.Starting with the example, the initial situation is as follows:• All row and index counters are calculated automatically• All values for the layout (such as width, style, and so on) are hard-coded
52. • Elements <htmlb:label> and <htmlb:inputField> are linked to each other.• The flexibility of the <htmlb:inputField> is still available, so that you can carry outfunctions such as password handling without any problemsThe format of the layout can be specified with BSP elements as follows:<sf:SimpleForm id = "sf" ><sf:SimpleFormItem id = "name"label = "Name:"value = "<%=name%>" /><sf:SimpleFormItem id = "password"label = "Password:"value = "<%=password%>"password = "TRUE" /><sf:SimpleFormItem id = "email"label = "Email:"value = "<%=email%>" /></sf:SimpleForm>Here you require a new BSP extension, which contains all of the necessary elements. You alsoneed a test page, of course. Finally, you also need to implement the elements.ProcedureThe following describes the procedure for implementing this solution:1. Create the new BSP extension2. Create the elements for the new BSP extensiona. Element <SimpleForm>b. Element <SimpleFormItem>1. Generate your new BSP extension2. Create the page after.htm3. Specify that the BSP elements are processed dynamically