BSP-Tutorial: HTMLB -> F4-Hilfe Erstellen
Posted: 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:
Die Funktion, die wir beim inputField bei "onValueHelp" eingegeben haben erstellen wir jetzt auf der selben seite mit:
Seite: F4Help.htm
Nun erstellen wir die Seite, welche wir bei "document.open" als Zielseite angegeben haben.
Hierfür brauchen wir, der vollständigkeithalber, noch eine Typdefinition:
"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:
(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
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:
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
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:
was dann im endeffekt so aussieht:
So, und dann müsste es am ende Quasi so aussehen:
Seite F4Help.htm
Seite F4.htm
F4.htm->eventhandler->onCreate:
F4.htm->eventhandler->onInputProcessing
F4.htm->Typdefinition:
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
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)
- <htmlb:content design="design2003">
- <htmlb:page title = "F4ValueHelpTest ">
- <htmlb:form>
- <htmlb:inputField id = "ip_pernr"
- value = "00000000"
- <%--Wert bei Erstaufruf der Seite--%>
- showHelp = 'X'
- <%--muss auf 'X' gesetzt werden, dass F4-Hilfe aktiviert ist--%>
- onValueHelp = "getPernr()" />
- <%--Javascript-Funktion, welche bei F4 drücken aufgerufen wird--%>
- </htmlb:form>
- </htmlb:page>
- </htmlb:content>
- 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)
- <script language ="JavaScript" type="text/javascript">
- {
- document.open('f4.htm', 'Mitarbeiter', 'height=250 width=800 left=320 top=400 status=no');
- <%--document.open('Seite welche aufgerufen werden soll,Fenstername, Fenstereigenschaften--%>
- }
- </script>
- 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)
- GeSHi ©
"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)
- 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)
- <htmlb:content design="design2003">
- <htmlb:page title = " ">
- <htmlb:form>
- <htmlb:tableView id ="tv_mitarbeiter"
- table ="<%=gt_pa0002 %>"
- selectionMode = "SINGLESELECT"
- onRowSelection = "rowSelection"
- keyColumn = "pernr" >
- <htmlb:tableViewColumn columnName="pernr"></htmlb:tableViewColumn>
- <htmlb:tableViewColumn columnName="vorna"></htmlb:tableViewColumn>
- <htmlb:tableViewColumn columnName="nachn"></htmlb:tableViewColumn>
- </htmlb:tableView>
- <htmlb:button text = "Mitarbeiter auswählen"
- onClientClick = "getData()" />
- <%--Funktion, welche bei Klick auf Button ausgeführt wird--%>
- </htmlb:form>
- </htmlb:page>
- </htmlb:content>
- 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)
- <script language ="JavaScript" type="text/javascript">
- {
- <%--Damit F4-Hilfe-Fenster wieder geschlossen wird--%>
- opener.transf("<%=pernr %>");
- <%--mit dieser Funktion wird der Wert, den man wählt, in unser Textfeld auf der Anfangsseite(opener) übernommen--%>
- return true;
- }
- </script>
- 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)
- 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)
- {
- document.getElementById("ip_pernr").value = fval;
- }
- GeSHi ©
was dann im endeffekt so aussieht:
- Code: [Select all] [Expand/Collapse] [Download] (Untitled.txt)
- <script language ="JavaScript" type="text/javascript">
- {
- document.getElementById("ip_pernr").value = fval;
- }
- {
- document.open('f4.htm', 'Mitarbeiter', 'height=250 width=800 left=320 top=400 status=no');
- }
- </script>
- GeSHi ©
So, und dann müsste es am ende Quasi so aussehen:
Seite F4Help.htm
- Code: [Select all] [Expand/Collapse] [Download] (Untitled.txt)
- <%@page language="abap"%>
- <%@extension name="htmlb" prefix="htmlb"%>
- <script language ="JavaScript" type="text/javascript">
- {
- document.getElementById("ip_pernr").value = fval;
- }
- {
- document.open('f4.htm', 'Mitarbeiter', 'height=250 width=800 left=320 top=400 status=no');
- }
- </script>
- <htmlb:content design="design2003">
- <htmlb:page title = "F4ValueHelpTest ">
- <htmlb:form>
- <htmlb:inputField id = "ip_pernr"
- value = "test"
- showHelp = 'X'
- onValueHelp = "getPernr()" />
- </htmlb:form>
- </htmlb:page>
- </htmlb:content>
- GeSHi ©
Seite F4.htm
- Code: [Select all] [Expand/Collapse] [Download] (Untitled.txt)
- <%@page language="abap"%>
- <%@extension name="htmlb" prefix="htmlb"%>
- <script language ="JavaScript" type="text/javascript">
- {
- opener.transf("<%=pernr %>");
- return true;
- }
- </script>
- <htmlb:content design="design2003">
- <htmlb:page title = " ">
- <htmlb:form>
- <htmlb:tableView id ="tv_mitarbeiter"
- table ="<%=gt_pa0002 %>"
- selectionMode = "SINGLESELECT"
- onRowSelection = "rowSelection"
- keyColumn = "pernr" >
- <htmlb:tableViewColumn columnName="pernr"></htmlb:tableViewColumn>
- <htmlb:tableViewColumn columnName="vorna"></htmlb:tableViewColumn>
- <htmlb:tableViewColumn columnName="nachn"></htmlb:tableViewColumn>
- </htmlb:tableView>
- <htmlb:button text = "Mitarbeiter auswählen"
- onClientClick = "getData()" />
- </htmlb:form>
- </htmlb:page>
- </htmlb:content>
- GeSHi ©
F4.htm->eventhandler->onCreate:
- Code: [Select all] [Expand/Collapse] [Download] (Untitled.txt)
- GeSHi ©
F4.htm->eventhandler->onInputProcessing
- Code: [Select all] [Expand/Collapse] [Download] (Untitled.txt)
- GeSHi ©
F4.htm->Typdefinition:
- Code: [Select all] [Expand/Collapse] [Download] (Untitled.txt)
- 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