Ki ne hallott volna még a HTML-ről? Most azért mégis ejtenék pár szót róla bevezetésként, hiszen a HTMLB is ezen alapul. A HTML (HyperText Markup Language) egy leíró nyelv, melyet weboldalak készítéséhez fejlesztettek ki. Általában szöveges állományokban található meg, olyan számítógépeken, melyek az internethez kapcsolódnak. Ezek az állományok tartalmazzák azokat a szimbólumokat, amelyek a megjelenítő programnak leírják, hogyan is kell megjeleníteni illetve feldolgozni az adott állomány tartalmát. A HTMLB-t (HTML – Business for Java) a SAP Portal framework-kel együtt elérhető és használható WEB alkalmazások és iView-k fejlesztésére lehet használni. A HTMLB egy teljes készlet easy-to-use WEB control-t biztosít.

1. ábra  Dropdown list box

Minden control-hoz tartozik egy általános oldal, amely leírja a használatát, típusokat és a design-hoz tartozó attribútumokat. Egy másik oldal több technikai adatot mutat be, mint a böngésző kompatibilitás, szerkesztési lehetőségek a Style Editorban és elérhetőségi témák. Végül a Control API oldal biztosítja a fejlesztés-orientált nézetet a control-ról az attribútumok és paraméterek részletes leírásával. Továbbá vannak oldalak, amelyek olyanok, mint az oldal szerkezete, helyes használata a bizonyos „gyakran-használt” control-oknak, valamint ötletek, hogy hogyan találjuk meg egy adott tervhez tartozó megfelelő control-okat.

Alapötlet

A HTMLB engedélyezi a design-orientált lapszerkezetet. Azért készítették, hogy bizonyos servlet problémákat kiküszöböljön, mint például:

• Nem független az üzleti logika és a vizualizáció egymástól
• Magasan kvalifikált emberi erőforrást igénye. HTML, CSS, JavaScript és még sok más nyelv ismeretét igényli.
• A fejlesztésnek ügyelni kell a különböző web kliensekre és – verziókra.

Hogyan működik?

HTML-Business for Java hatékony control eszközkészletet biztosít a felhasználónak  – hasonlóan a Swing/AWT-hez. A Swing egy widget eszközrendszer a Java-hoz. Része a Sun Microsystems Java Foundation Classes - nek (JFC) — egy API a grafikus felhasználói interfész (GUI) biztosításához a Java programokhoz. A control-ok servleteken és JSP oldalakon alapulnak. A fordító osztályok végül lefordítják a komponenseket HTML-elemekké.

Form

Tulajdonképpen ez az oldalunk “csomagoló papírja”. Lényeges az adat átvitelhez a web kliensből a web böngészőbe, továbbá az esemény kezeléshez. Minden control-t egyedi névvel kell ellátni a form-ban, mely neveket a HTML-Business for Java fordító generál.

Control-ok

A control-ok olyan GUI elemek, melyeket egy alkalmazás felépítéséhez használnak és a form-ban helyezkednek el. Minden control-nak különböző attribútumai vannak, melyek a control “kinézetét” határozzák meg. Control például a checkbox, radio button, grid stb.

2. ábra

Példa

Most lássunk egy egyszerű HTMLB komponenseken alapuló BSP alkalmazást.
Első lépésként a SE80-as tranzakcióban hozzunk létre egy ZRADIODROPDOWN elnevezésű BSP alkalmazást , és hozzunk létre hozzá egy ‘dropdown.bsp’ elnevezésű oldalt. Ezután ellenőrizzük és aktiváljuk az alkalmazásunkat.

KEPKEPKEPKEP

A BSP oldal Layout füléhez másoljuk be az alábbi kódot: 

<%@page language="abap"%>

<%@page language="abap" forceEncode="html"%>

<%@extension name="htmlb" prefix="htmlb"%>

<%@extension name="bsp"   prefix="bsp"%>

 

<htmlb:content id="content" design="classic+design2002+design2003" controlRendering="sap"

               rtlAutoSwitch    = "true">

  <htmlb:page title = "BSP Extension: HTMLB / Element: radioButtonGroup & radioButton">

    <htmlb:form>

    <htmlb:radioButtonGroup id = "myRadioButtonGroup1" >

    <htmlb:radioButton id = "activate"  text = "activate = onClick" onClick="myClick"  />

    <htmlb:radioButton id = "deactivate" text = "deactivate = onClick" onClick="myClick" />

       </htmlb:radioButtonGroup>

       <br>

      <br>

         <htmlb:dropdownListBox    id          = "mydropdownListBox1" >

        <htmlb:listBoxItem      key         = "key_vbak" value = "vbak" />

       </htmlb:dropdownListBox>

<%  if it_vbak is not initial.%>

<htmlb:tableView id="tv_vbak" table="<%= it_vbak%>">

</htmlb:tableView>

<%endif.%>

    </htmlb:form>

  </htmlb:page>

</htmlb:content>

 

A Page Attributes fülön töltsük fel a táblázatot a következő attribútumokkal:

 
Majd az Event Handler fülhöz másoljuk be az alábbi kódot:

 

* event handler for checking and processing user input and

* for defining navigation

 DATA: radioButtongroup TYPE REF TO CL_HTMLB_RADIOBUTTONGROUP.

     radioButtonGroup ?= CL_HTMLB_MANAGER=>GET_DATA(

                         request      = runtime->server->request

                         name         = 'radioButtonGroup'

                         id           = 'myRadioButtonGroup1' ).

 

 DATA: data1 TYPE REF TO CL_HTMLB_DROPDOWNLISTBOX.

data1 ?= CL_HTMLB_MANAGER=>GET_DATA( request = runtime->server->request

                                      name    = 'dropdownlistbox'

                                      id      = 'mydropdownListBox1').

   selection1 = radioButtongroup->selection.

   case selection1.

   when 'activate'.

**   IF data1 IS NOT INITIAL.

  selection2 = data1->selection.

  case selection2 .

  when 'key_vbak'.

  select single * from CRMD_ORDERADM_H into it_vbak where OBJECT_ID = 8000000001.

 

endcase.

 

**  ENDIF.

  when 'deactivate'.

  data1->disabled = 'TRUE'.

  endcase.

** ENDIF.

 

Mentés, ellenőrzés és aktiválás után hajtsuk végre az alkalmazást. Az eredményben tehát láthatjuk a radio button-t és a dropdown list-et ("lenyíló listát").

 
Tehát a HTML – Business for Java és SAP Portal framework segítségével könnyedén létrehozhatunk különböző checkbox-okat, radio button-oket, különböző listákat és sok egyéb control-t ezzel segítve a fejlesztők dolgát, valamint a felhasználók kényelmét.