BSP-Tutorial: HTMLB -> F4-Hilfe Erstellen

Posten Sie hier Tutorials & Cookbooks.

BSP-Tutorial: HTMLB -> F4-Hilfe Erstellen

Postby Kimberley3834 » Mon Dec 20, 2010 4:53 pm

So, jetzt wage ich mich hier auch mal her ein kleines Tutorial für HTMLB zu schreiben, vllt hilfts ja doch mal wem... denn die Tipps, die man so im Internet bekommt sind teilweise etwas schwammig formuliert usw...

Also, ich zeige euch hier jetzt quasi, wie man in einer BSP-Applikation mit Hilfe von HTMLB eine F4-Hilfe erstellen kann am Beispiel von Personalnummern aus der PA0002.
Da ich selbst erst kurz mit BSP und HTMLB arbeite, gebe ich keine Garantie auf performance usw...

Zuersteinmal erstellen wir uns eine kleine Seite, auf welcher wir ein Textfeld haben, wo man mit F4 die Wertehilfe aufrufen kann:

Seite1 = f4help.htm
Seite2 = f4.htm


Seite: F4help.htm:
Code: [Select all] [Expand/Collapse] [Download] (Untitled.txt)
  1. <htmlb:content design="design2003">
  2.   <htmlb:page title = "F4ValueHelpTest ">
  3.     <htmlb:form>
  4.  
  5.       <htmlb:inputField   id          = "ip_pernr"
  6.                           value       = "00000000"
  7. <%--Wert bei Erstaufruf der Seite--%>
  8.                           showHelp    = 'X'
  9. <%--muss auf 'X' gesetzt werden, dass F4-Hilfe aktiviert ist--%>
  10.                           onValueHelp = "getPernr&#40;&#41;" />
  11. <%--Javascript-Funktion, welche bei F4 drücken aufgerufen wird--%>
  12.  
  13.     </htmlb:form>
  14.   </htmlb:page>
  15. </htmlb:content>
  16.  
GeSHi ©


Die Funktion, die wir beim inputField bei "onValueHelp" eingegeben haben erstellen wir jetzt auf der selben seite mit:

Seite: F4Help.htm
Code: [Select all] [Expand/Collapse] [Download] (Untitled.txt)
  1. <script language ="JavaScript" type="text/javascript">
  2.  
  3.     function getPernr&#40;&#41;
  4.     &#123;
  5.         document.open&#40;'f4.htm', 'Mitarbeiter', 'height=250 width=800 left=320 top=400 status=no'&#41;;
  6. <%--document.open&#40;'Seite welche aufgerufen werden soll,Fenstername, Fenstereigenschaften--%>
  7.    &#125;
  8.  
  9. </script>
  10.  
GeSHi ©


Nun erstellen wir die Seite, welche wir bei "document.open" als Zielseite angegeben haben.
Hierfür brauchen wir, der vollständigkeithalber, noch eine Typdefinition:
Code: [Select all] [Expand/Collapse] [Download] (Untitled.txt)
  1. types: gty_pa0002 TYPE STANDARD TABLE OF pa0002.
GeSHi ©
um eine interne Tabelle in den 'Seitenattributen' definieren zu können:
"gt_pa0002 type gty_pa0002"

Und wenn wir grad schon hier sind, erstellen wir auch gleich noch die Übergabevariable: "pernr type pa0002-pernr"

Damit die Tabelle gt_pa0002 gefüllt wird, machen wir auf der 2. Seite (F4.htm) einen EventHandler "onCreate" und schreiben hier folgendes rein:
Code: [Select all] [Expand/Collapse] [Download] (Untitled.txt)
  1. select * from pa0002 into table gt_pa0002 UP TO 10 rows.
GeSHi ©

(UP TO 10 ROWS hier nur, dass es fürs testen erstmal nicht so lange dauert.)

Jetzt können wir mit diesen Daten das Design der Seite erstellen:

Seite: F4.htm
Code: [Select all] [Expand/Collapse] [Download] (Untitled.txt)
  1. <htmlb:content design="design2003">
  2.   <htmlb:page title = " ">
  3.     <htmlb:form>
  4.  
  5.          <htmlb:tableView id             ="tv_mitarbeiter"
  6.                           table          ="<%=gt_pa0002 %>"
  7.                           selectionMode  = "SINGLESELECT"
  8.                           onRowSelection = "rowSelection"
  9.                           keyColumn      = "pernr" >
  10.  
  11.                  <htmlb:tableViewColumn columnName="pernr"></htmlb:tableViewColumn>
  12.                  <htmlb:tableViewColumn columnName="vorna"></htmlb:tableViewColumn>
  13.                  <htmlb:tableViewColumn columnName="nachn"></htmlb:tableViewColumn>
  14.  
  15.          </htmlb:tableView>
  16.  
  17.         <htmlb:button     text           = "Mitarbeiter auswählen"
  18.                           onClientClick  = "getData&#40;&#41;" />
  19. <%--Funktion, welche bei Klick auf Button ausgeführt wird--%>
  20.  
  21.     </htmlb:form>
  22.   </htmlb:page>
  23. </htmlb:content>
  24.  
GeSHi ©



Nun brauchen wir noch die Funktion, welche wir bei "onClientClick" aufrufen noch für diese Seite (dass die Funktionen auf beiden Seiten den gleichen Namen haben ist nicht notwendig, da die Funktionen der versch. Seiten voneinander gekapselt sind.)

Die Funktion erstellen wir auf der Seite "F4.htm" mit:
Code: [Select all] [Expand/Collapse] [Download] (Untitled.txt)
  1. <script language ="JavaScript" type="text/javascript">
  2.  
  3.     function getData&#40;&#41;
  4.     &#123;
  5.         window.close&#40;&#41;;
  6. <%--Damit F4-Hilfe-Fenster wieder geschlossen wird--%>
  7.         opener.transf&#40;"<%=pernr %>"&#41;;
  8. <%--mit dieser Funktion wird der Wert, den man wählt, in unser Textfeld auf der Anfangsseite&#40;opener&#41; übernommen--%>
  9.         return true;
  10.     &#125;
  11.  
  12. </script>
  13.  
GeSHi ©


Außerdem brauchen wir jetzt noch einen Eventhandler "onInputProcessing", der bei Auswahl der Zeile im TableView den Wert ausliest, den man haben will:

Seite: F4.htm
Code: [Select all] [Expand/Collapse] [Download] (Untitled.txt)
  1. data: tv      type ref to cl_htmlb_tableview,
  2.       tv_data type ref to cl_htmlb_event_tableview,
  3.       event   type ref to cl_htmlb_event.
  4.  
  5. tv ?= cl_htmlb_manager=>get_Data&#40;
  6.         request = runtime->server->request
  7.         name    = 'tableView'
  8.         id      = 'tv_mitarbeiter' &#41;.
  9.  
  10. tv_data = tv->data.
  11.  
  12. pernr = tv_data->row_key.
  13.  
GeSHi ©


So, nun brauchen wir noch die Funktion transf auf der Startseite (F4Help.htm), welche auf der Seite F4.htm mit "opener.transf("<%=pernr %>");" aufgerufen wird.

Dazu erweitern wir das Script auf der SEite F4Help.htm einfach um:
Code: [Select all] [Expand/Collapse] [Download] (Untitled.txt)
  1.     function transf &#40;fval&#41;
  2.     &#123;
  3.         document.getElementById&#40;"ip_pernr"&#41;.value = fval;
  4.     &#125;
  5.  
GeSHi ©


was dann im endeffekt so aussieht:
Code: [Select all] [Expand/Collapse] [Download] (Untitled.txt)
  1. <script language ="JavaScript" type="text/javascript">
  2.  
  3.     function transf &#40;fval&#41;
  4.     &#123;
  5.         document.getElementById&#40;"ip_pernr"&#41;.value = fval;
  6.     &#125;
  7.  
  8.     function getPernr&#40;&#41;
  9.     &#123;
  10.         document.open&#40;'f4.htm', 'Mitarbeiter', 'height=250 width=800 left=320 top=400 status=no'&#41;;
  11.     &#125;
  12.  
  13. </script>
  14.  
GeSHi ©



So, und dann müsste es am ende Quasi so aussehen:

Seite F4Help.htm
Code: [Select all] [Expand/Collapse] [Download] (Untitled.txt)
  1. <%@page language="abap"%>
  2. <%@extension name="htmlb" prefix="htmlb"%>
  3. <script language ="JavaScript" type="text/javascript">
  4.  
  5.     function transf &#40;fval&#41;
  6.     &#123;
  7.         document.getElementById&#40;"ip_pernr"&#41;.value = fval;
  8.     &#125;
  9.  
  10.     function getPernr&#40;&#41;
  11.     &#123;
  12.         document.open&#40;'f4.htm', 'Mitarbeiter', 'height=250 width=800 left=320 top=400 status=no'&#41;;
  13.     &#125;
  14.  
  15. </script>
  16.  
  17.  
  18. <htmlb:content design="design2003">
  19.   <htmlb:page title = "F4ValueHelpTest ">
  20.     <htmlb:form>
  21.  
  22.       <htmlb:inputField   id          = "ip_pernr"
  23.                           value       = "test"
  24.                           showHelp    = 'X'
  25.                           onValueHelp = "getPernr&#40;&#41;" />
  26.  
  27.     </htmlb:form>
  28.   </htmlb:page>
  29. </htmlb:content>
  30.  
GeSHi ©


Seite F4.htm
Code: [Select all] [Expand/Collapse] [Download] (Untitled.txt)
  1. <%@page language="abap"%>
  2. <%@extension name="htmlb" prefix="htmlb"%>
  3.  
  4. <script language ="JavaScript" type="text/javascript">
  5.  
  6.     function getData&#40;&#41;
  7.     &#123;
  8.         window.close&#40;&#41;;
  9.         opener.transf&#40;"<%=pernr %>"&#41;;
  10.         return true;
  11.     &#125;
  12.  
  13. </script>
  14.  
  15. <htmlb:content design="design2003">
  16.   <htmlb:page title = " ">
  17.     <htmlb:form>
  18.  
  19.          <htmlb:tableView id             ="tv_mitarbeiter"
  20.                           table          ="<%=gt_pa0002 %>"
  21.                           selectionMode  = "SINGLESELECT"
  22.                           onRowSelection = "rowSelection"
  23.                           keyColumn      = "pernr" >
  24.  
  25.                  <htmlb:tableViewColumn columnName="pernr"></htmlb:tableViewColumn>
  26.                  <htmlb:tableViewColumn columnName="vorna"></htmlb:tableViewColumn>
  27.                  <htmlb:tableViewColumn columnName="nachn"></htmlb:tableViewColumn>
  28.  
  29.          </htmlb:tableView>
  30.  
  31.         <htmlb:button     text           = "Mitarbeiter auswählen"
  32.                           onClientClick  = "getData&#40;&#41;" />
  33.  
  34.     </htmlb:form>
  35.   </htmlb:page>
  36. </htmlb:content>
  37.  
GeSHi ©


F4.htm->eventhandler->onCreate:
Code: [Select all] [Expand/Collapse] [Download] (Untitled.txt)
  1. select * from pa0002 into table gt_pa0002 UP TO 10 rows.
  2.  
GeSHi ©


F4.htm->eventhandler->onInputProcessing
Code: [Select all] [Expand/Collapse] [Download] (Untitled.txt)
  1. data: tv      type ref to cl_htmlb_tableview,
  2.       tv_data type ref to cl_htmlb_event_tableview,
  3.       event   type ref to cl_htmlb_event.
  4.  
  5. tv ?= cl_htmlb_manager=>get_Data&#40;
  6.         request = runtime->server->request
  7.         name    = 'tableView'
  8.         id      = 'tv_mitarbeiter' &#41;.
  9.  
  10. tv_data = tv->data.
  11.  
  12. pernr = tv_data->row_key.
  13.  
GeSHi ©


F4.htm->Typdefinition:
Code: [Select all] [Expand/Collapse] [Download] (Untitled.txt)
  1. types: gty_pa0002 TYPE STANDARD TABLE OF pa0002.
  2.  
GeSHi ©


F4.htm->Seitenattribute:
gt_pa0002 type GTY_pa0002
pernr type pa0002-pernr


und das war dann hoffentlich alles^^

Leider ist das ganze etwas Konfus geworden... aber ich hoffe, es hilft euch trotzdem, wenn ihr es mal brauchen solltet... wenigstens ein bisschen...
Ich hoffe, dass ich jetzt nichts vergessen habe, ansonsten werde ich es sofort, wenn ich es bemerke, nachtragen.

Viel Spaß noch mit BSP und HTMLB.

MfG
Pyro
Kimberley3834
..
..
 
Posts: 96
Joined: Wed Nov 17, 2010 8:38 am

Return to Tutorials & Cookbooks

Who is online

Users browsing this forum: No registered users and 2 guests

cron