Writing a Test Example
<!code> <%@extension name="htmlb" prefix="htmlb"%>
<!code> <%@extension name="phtmlb" prefix="phtmlb"%>
<!code>
<!code> <htmlb:content design="design2003">
<!code> <htmlb:page>
<!code> <htmlb:form>
<!code>
<!code> ...body comes here...
<!code>
<!code> <phtmlb:horizontalDivider hasRule = "TRUE"
<!code> separationHeight = "LARGE" />
<!code>
<!code> <phtmlb:matrix width = "100%" >
<!code>
<!code> <phtmlb:matrixCell hAlign = "RIGHT" />
<!code>
<!code> <htmlb:button text = "Page In-1"
<!code> design = "PREVIOUS"
<!code> onClick = "pageIn-1.htm" />
<!code>
<!code> <htmlb:button text = "Page In+1"
<!code> design = "NEXT"
<!code> onClick = "pageIn+1.htm" />
<!code>
<!code> </phtmlb:matrix>
<!code>
<!code> </htmlb:form>
<!code> </htmlb:page>
<!code>
Designing a New Composite Element
The goal is to replace this entire navigation rendering with one simple element. The expected code on each BSP page would be:
<!code> <%@extension name="htmlb" prefix="htmlb"%>
<!code> <%@extension name="bcm_sdn" prefix="sdn"%>
<!code>
<!code> <htmlb:content design="design2003">
<!code> <htmlb:page>
<!code> <htmlb:form>
<!code>
<!code> ...body comes here...
<!code>
<!code>
<!code> </htmlb:form>
<!code> </htmlb:page>
<!code> </htmlb:content>
<!code>
We want one element that takes a previous and/or next attribute with the text to display. As we are (slightly) lazy, we assume that pages are named
exactly the same as the descriptive text, just without spaces, and terminated with our typical ‘.bsp’ extension. (Note that most people use .htm as
the page extension. The use of .bsp is a trait mostly used in our small group.)
The definition in the workbench (transaction SE80) of the new BSP element is quickly done. It has only two string attributes. Once this BSP element
has been defined and activated, the above example BSP page will actually compile and run. It will just not yet render any output.
!https://weblogs.sdn.sap.com/weblogs/images/164/BP_WCE_002.GIF|height=0 width=488 height=268 |width=0 width=488 height=268 |src=https://weblogs.sdn.sap.com/weblogs/images/164/BP_WCE_002.GIF|border=0 width=488 height=268 !</body>
