Autor Thema: Domino und Prototype/Scriptaculous (Gelesen 7121 mal)

flaite · « **am:** 22.01.08 - 13:26:33 »

Hi,

genervt über zunehmend schwer zu maintainende Domino Web Anwendungen bin ich jetzt dabei, für ein wenig Ordnung zu sorgen.

Die beliebten JavaScript-Libraries Prototype und Scriptaculous sollen in Domino Webanwendungen auf eine konsistente Weise genutzt werden. Ich verspreche mir davon ein mehr an Ordnung, schnellere Entwicklungszyklen und weniger Bug-Hunting.

Prototype ist mehr low level und mischt sich in JavaScript ein, um diese Programmiersprache besser händelbar zu machen. Scriptaculous ist mehr high level. Fokussiert auf visuelle Effekte und ein paar widgets.

Wichtig für einfacheres Ajax erscheint mir zunächst einmal typische Domino Idioms wie (hier heisst es) Transferfelder, in Prototype, JavaScript zu transkribieren.
Was sind Transferfelder?
Nun das ist, wenn man per DBLookup oder verwandtes auf ein anderes Dokument zugreift. Dann versucht man ja gerne aus Gründen geringerer Netzbelastung (Performance) mit EINEM DBLookup MEHRERE Daten zu holen. Die Daten werden dann in eine selbstgebastelten Struktur mit kreativen Trennzeichen gebracht. In Formelsprache läßt sich diese Struktur dann mit Listenoperationen oder den For-Schleifen und weiteren Erweiterungen in der Formelsprachen-Engine seit Release 6 parsen.

Im Browser kann man den DBLookup des Transferfeldes in ein benanntes div-Tag mit eindeutiger ID packen. Dies läßt sich dann auslesen und in ein JavaScript Objekt packen.

Hier ist es var data. Das Beispiel ist noch nicht optimal, aber ein Schritt in die richtige Richtung.

code s. u.

flaite · « **Antwort #1 am:** 22.01.08 - 15:23:12 »

Nun das ist viel klarer:
HINWEIS: UNTEN IST DAS WEITERGEMACHT.

Code


<html>
<head>
	<script type="text/javascript" src="prototype.js"></script>
	<script type="text/javascript">
		function processTransferin() {
			var valTransferin = $("transferin").childNodes[0].nodeValue;
			arrFieldNameValues = valTransferin.split("~~~");
			var data = new Object();
			var iterator = function(value, index) {
				//alert("element " + index + " is " + value);
				arrNameValue = value.split("°=°");
				if (arrNameValue[0] && arrNameValue.length > 1) {
					if (arrNameValue[1].indexOf("µ")) {
						arrNameValue[1] = arrNameValue[1].split("µ");
					}
					data[arrNameValue[0]] = arrNameValue[1];
					
				}
			}
			arrFieldNameValues.each(iterator);
			
		    for (name in data) {
				var value = data[name];
				if ($(name)) {
					var txtNode = document.createTextNode(value);
					$(name).appendChild(txtNode);
					//$(name).innerHTML = value;
				}
			} 
			 
		}
	</script>
	
</head>
 
<body onload="processTransferin();">
<!-- <body> -->
<div id="transferin">Category°=°Muppets Show~~~RequestAuthorsMailRecipients°=°CN=Kermit der Frosch/O=ozzµCN=/OU=Miss Piggy/O=ozz~~~RequestAuthors°=°CN=Waldorf/O=ozz~~~RequestReaders°=°CN=Statler/O=OzzµCN=Fozzy Bär/O=ozzµCN=Gonzo/O=ozz</div>
 
 
<hr />
<div>category:<span id="Category"/></div>
<div>requestauthormailrecipients:<span id="RequestAuthorsMailRecipients"/></div>
<div>requestauthors:<span id="RequestAuthors"></span></div>
<div>requestreaders:<span id="RequestReaders"></span></div>
 
	
</body>
</html>

Nur noch transferin wird als berechneter Text vom Server geholt. Die restlichen "Felder" werden auf dem Client und nicht mehr von Domino errechnet. Der Wert der Felder steht in den im Html leeren Span-Tags. Sie werden im onload event der Seite errechnet.

In der realen Anwendung steht der Inhalt von transferin in einem Feld von Category-Dokumenten. Will ich nun über AJAX die Kategorie ändern, muß ich nicht mehr die ganze Seite berechnen. Ich muß mir über ajax nur noch den neuen Wert von transferin besorgen und die JavaScript-Funktion processTransferin() aufrufen. Die Felder werden dann automatisch gesetzt.

Zur Zeit ist das weniger Prototype/Scriptaculous und mehr POJS (Plain Old JavaScript). Die Funktion $ (in $("transferin") ist Prototype. Ausserdem noch dieses var iterator Konstrukt. Man kann den Code
- so kopieren
- in eine html Datei pasten
- prototype.js aus dem Internet runterladen (try google).
- prototype.js in das selbe Verzeichnis wie die html Datei packen.
- html Datei mit dem browser öffnen.

flaite · « **Antwort #2 am:** 22.01.08 - 22:12:11 »

Und jetzt mit Ajax. Zugegeben ist das erstmal JSP/Servlet, weil das mit der Debug Unterstützung in Netbeans einfacher ist als in Domino.
Muß also die Ajax Komponente noch in LotusScript transkribieren und die Businesslogik da reinbringen. Kommt morgen

Hier also die JSP und das Servlet. Das Servlet wird per Ajax aus dem von der JSP generierten html aufgerufen. Und da beginnt Prototype zu glänzen. Wobei ichs noch nicht richtig beherrsche. Z.B. trau ich mich noch nicht richtig an die closures ran.
Die im Ajax ausgetauschten Daten sind in JSON. JSON ist gut.

JSP:

Code


<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%--
The taglib directive below imports the JSTL library. If you uncomment it,
you must also add the JSTL library to the project. The Add Library... action
on Libraries node in Projects view can be used to add the JSTL 1.1 library.
--%>
<%--
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 
--%>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    	<script type="text/javascript" src="prototype.js"></script>
	<script type="text/javascript">
                var ui = {}; // context stuff. 
		function processTransferin() {
                        ui.transferin = $("transferin");
			//var valTransferin = $("transferin").childNodes[0].nodeValue;
                        var valTransferin = $("transferin").innerHTML;
			arrFieldNameValues = valTransferin.split("~~~");
			var data = new Object();
			var iterator = function(value, index) {
				//alert("element " + index + " is " + value);
				arrNameValue = value.split("°=°");
				if (arrNameValue[0] && arrNameValue.length > 1) {
					if (arrNameValue[1].indexOf("µ")) {
						arrNameValue[1] = arrNameValue[1].split("µ");
					}
					data[arrNameValue[0]] = arrNameValue[1];
					
				}
			}
			arrFieldNameValues.each(iterator);
			
		    for (name in data) {
				var value = data[name];
				if ($(name)) {
					//var txtNode = document.createTextNode(value);
					//$(name).appendChild(txtNode);
					$(name).innerHTML = value;
				}
			} 
			 
		}
 
                function changeCat(newCat) {
// DER AJAX Code. 
                    var request = new Ajax.Request(
                        "AjaxServlet", 
                    {
                        method: 'get', 
                        parameters: "cat=" + newCat, 
                        onComplete: parseTransferin,
                        onFailure: showAjaxError
                    }
                    ); 
                   }              
 
// CALLBACK METHODE von ajax call                   
                   function parseTransferin(transport) {
 
		                    var response = transport.responseText;
		                    var jsonObj = eval("(" + response + ")"); 
		                    //$(transferin).innerHTML = jsonObj.transferout;
		                    //var children = $A(ui.transferin.childNodes);
		                    //children.each (
		                    // function(child){
		                    //    alert (child.text);
		                     //}
		                    //);
		                    
		                    
		                    ui.transferin.innerHTML = jsonObj.transferout;
		                    processTransferin();
		                    //alert ("transferout=" + jsonObj.transferout + "\nunid=" + jsonObj.unid);
		                 }
// NOCH NE CALLBACK METHODE VON AJAX.                    
                 function showAjaxError(request) {
                    alert("error"); 
                 }
	</script>
    
    </head>
    <body onload="processTransferin();">
 
<div id="transferin">Category°=°Muppets Show~~~RequestAuthorsMailRecipients°=°CN=Kermit der Frosch/O=ozzµCN=/OU=Miss Piggy/O=ozz~~~RequestAuthors°=°CN=Waldorf/O=ozz~~~RequestReaders°=°CN=Statler/O=OzzµCN=Fozzy Bär/O=ozzµCN=Gonzo/O=ozz</div>
 
 
<hr />
<div>category:<span id="Category"/></div>
<div>requestauthormailrecipients:<span id="RequestAuthorsMailRecipients"/></div>
<div>requestauthors:<span id="RequestAuthors"></span></div>
<div>requestreaders:<span id="RequestReaders"></span></div>
    <form>
        <input name="buttonChangeCat" type="button" value="buttonChangeCat" onclick="changeCat()"></button>
        
      <!--  <input name="buttonChangeCat" type="button" value="buttonChangeCat" onclick="processTransferin()"/></button>-->
      
        
    
    </form>
    
    </body>
</html>

SERVLET:

Code


package ajax;
 
import java.io.*;
import java.net.*;
 
import javax.servlet.*;
import javax.servlet.http.*;
 
/**
 *
 * @author ajanssen
 * @version
 */
public class AjaxServlet extends HttpServlet {
    
    /** Processes requests for both HTTP <code>GET</code> and <code>POST</code> methods.
     * @param request servlet request
     * @param response servlet response
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        response.setContentType("text/javascript;charset=UTF-8");
        PrintWriter out = response.getWriter();
        System.out.println("servlet run");
        out.println("{");
        out.println("transferout:\"Category°=°Presidentes~~~RequestAuthorsMailRecipients°=°CN=Michelle Bachelet/O=chileµCN=Ricardo Lagos/O=chile~~~RequestAuthors°=°CN=Pedro I/O=Brasil~~~RequestReaders°=°CN=Alan Garcia/O=PeruµCN=Irrigoyen/O=ArgentinienµCN=de Lozada/O=Bolivien\",");
        out.println("unid:111222333");
        out.println("}");
       
        out.close();
    }
    
  
    
    /** Returns a short description of the servlet.
     */
    public String getServletInfo() {
        return "Short description";
    }
    // </editor-fold>
}

Der Effekt ist jedenfalls, dass man auch bei Abhängigkeiten mehrerer Felder von einem "Transferfeld" (typisches Domino Idiom, ihr kennt es alle) Ajax angewendet werden kann.

flaite · « **Antwort #3 am:** 22.01.08 - 22:44:13 »

Also nochmal kurz zum architektürlichen.
Das Notes Dokument wird NICHT im Editmode geöffnet sondern im READ Mode (?openDocument, nicht ?editDocument).
Der Anwender kann in einer select-Box die Kategorie wählen.
Diese Auswahl wird asynchron per ajax an einen Agenten Domino Server gesandt.
DEr Agent schreibt im Backend in das Notes-Dokument (im Browser ist es ja im Read Mode) und speichert.
Ajax fängt die Rückgabe des Agenten auf und ändert dann die entsprechenden Felder. Von der Änderungen der Kategorie waren mehrere abhängige Felder betroffen.

Das ist grandios an dem eigentlichen Web Modell von Domino vorbeiprogrammiert, aber für Manageable Ajax in Domino (TM) macht es Sinn.

flaite · « **Antwort #4 am:** 23.01.08 - 16:29:30 »

Nun denn.
Ajax ist zwar eigentlich tendentiell eine Clienttechnologie, aber es redet eben auch mit dem Server.
Zwar wird der Server NICHT veranlaßt eine ganz neue Seite zu liefern, aber Informationen vom Server können mit Ajax abgefragt werden. Diese Informationen vom Server werden dann in die Webseite "reingemischt".

Oben ist diese Serverseitige Komponente als Servlet implementiert.
Wie kann ich das als Notes Agenten programmieren?

Erste konkrete Frage: Wie soll der Agent überhaupt angesprochen werden?
Antwort: so:

Code


var request = new Ajax.Request(
                        "AjaxServlet", 
                    {
                        method: 'get', 
                        parameters: "cat=" + newCat, 
                        onComplete: parseTransferin,
                        onFailure: showAjaxError
                    }
                    );

1. "AjaxServlet" ist die URL zu der Resource.
In Domino sollte das so aussehen:
"/<dbPath>/<agentName>?openAgent"
Wie geht der Path?
Das ist einfach eine JavaScript Funktion im HtmlHead Feld der Maske:

Code


"<script>" + @NewLine +
"function getBaseURL() {" + @NewLine +
"return \"/" + @WebDbName + "\";" + @NewLine +
"}" + @NewLine +
"</script>" + @NewLine +
@NewLine +

2. method: ist die http-Methode. Ich glaub bei Notes-Agenten müsste es 'post' heissen.
3. parameters: sind die url parameters. Das kann so bleiben. Wie das im Agenten ausgelesen wird, kommt später.
4. onComplete: ist die Methode, die im javaScript aufgerufen wird, wenn der Server etwas mit HTTP-State 2xx zurückliefert (wenn der Agent also erfolgreich etwas zurückliefert). Das kann so bleiben.
5. Auch onFailure ist rein JavaScript intern, kann so bleiben.

Der Ajax Aufruf hat sich also gegen das höchst wissenschaftliche Servlet kaum geändert:

Code


var baseURL = getBaseURL();
var request = new Ajax.Request(
                        baseURL + "/AjaxController?openAgent, 
                    {
                        method: 'post', 
                        parameters: "cat=" + newCat, 
                        onComplete: parseTransferin,
                        onFailure: showAjaxError
                    }
                    );

Der Agent heisst AjaxController. Den mach ich als nächstes.

flaite · « **Antwort #5 am:** 24.01.08 - 09:34:06 »

Hab bei der Entwicklung des serverseitigen Teils gemerkt, dass ich 2 Parameter beim Client vergessen habe. Einer ist sehr wichtig für Model View Controller (MVC).

Code


                       "AjaxServlet", 
                    {
                        method: 'get', 
                        parameters: "action=" + action + " unid=" + unid + " cat=" + newCat, 
                        onComplete: parseTransferin,
                        onFailure: showAjaxError
                    }

Vor allem das action= ist wichtig. Das MVC soll bewirken, dass ALLE Ajax Requests gegen eine serverseitige Anwendung von ein und demselben Agenten verarbeitet werden. Sonst müllt man die Anwendung mit Tonnen von kleinen Agenten voll.

Gut. Was passiert jetzt auf der Serverseite.
1. Die Serverseite nimmt eine Anfrage aus dem JavaScript entgegen.
2. verarbeitet diese
3. Schickt Daten im JSON Format zurück. XML ginge auch, aber JSON ist von JavaScript einfacher zu verarbeiten.

Wie verarbeitet der Notes Agent die Anfrage?
Das folgende hat übrigens noch kein fertiges Fehlerhandling.
Die Parameter werden als CGI Variablen an die URL des Agenten gehängt. Darum kümmert sich Prototype automatisch, wenn man parameters: wie oben schreibt.
Ein Agent sollte das so auslesen können:

Code


Set docContext = s.DocumentContext
queryStr = docContext.getItemValue("QUERY_STRING_DECODED")

ist halt ne CGI Variable.

In queryStr sollte dann sowas stehen wie:

Code


"?openAgent&action=changeCategory&cat=blueChips&unid_doc_cur=9093458034853045"

Die einzelnen name=wert Paare zwischen den & lassen sich durch diese einfache Funktion in eine leicht zu handhabende List-Struktur bringen:

Code


Function webParamsAsList (inVal As String) As Variant
	Dim firstAmper As Integer
	Dim ret List As String
	
	Dim arrNameValuePairs As Variant
	Dim elemNameValuePair As String	
	Dim arrNameValuePair As Variant
	Dim i As Integer
	
	
	firstAmper = Instr(inVal, "&")
	
	inVal = Right$(inVal, Len(inVal) - firstAmper)
	
	arrNameValuePairs = Split(inVal, "&")
	For i = 0 To Ubound(arrNameValuePairs)
		elemNameValuePair = arrNameValuePairs(i)
		arrNameValuePair = Split(arrNameValuePairs(i), "=") 
		ret(Lcase(arrNameValuePair(0))) = Lcase(arrNameValuePair(1))
		
	Next
	
	
	
	
	webParamsAsList = ret
	
	
	
End Function

Nun kommt der Kontroller. Da wird einfach nur der action-Parameter ausgelesen und in die entsprechende Funktion zur Weiterverarbeitung aufgerufen.

Code


webParams = webParamsAsList(inVal)
	resp = ""
	If Lcase(webParams("action")) = "changecategory" Then 
		resp = processChangeCategory(s, webParams)
		
	End If

Am Ende soll dann nur noch etwas an den Browser zurückgeliefert werden. Kommt später.

flaite · « **Antwort #6 am:** 24.01.08 - 15:58:07 »

Und das JSON Zeugs geht auf der Serverseite (also im lotusScript Agenten) so:

Man erzeugt aus den Variablen ein bischen JSON formatiertes Zeugs.

Code


processChangeCategory = "{" & strNL &_
	|"transferout":| & |"| & strTransferout & |",| & strNL &_
	|"unid":| & |"| &  strUnid & |"| & strNL &_
	"}"

Und das gibt man dann über print aus. Wichtig ist, dass vorher noch das Encoding des über http zurückgesendeten Streams auf text/javascript stellt und wohl auch das encoding auf dem in der Webseite (wo das ajax clients Zeugs drin ist) übereinstimmt.
Für Encoding gibts für LotusScript im Gegensatz zu jeder mir bekannten Webprorammierumgebung keine Methode. Man muß das als erstes Print Statement mit 1 Leerzeile dadrunter ausgeben.

Code


Print |Content-Type:text/javascript;charset=iso-8859-1| & Chr$(13) & Chr$(10) & Chr$(13) & Chr$(10)
	Print respBody

(respBody entspricht der obigen Variable processChangeCategory)

Ich hatte ein bischen zu kämpfen mit dem Encoding. Er schien Probleme zu haben, als ich das erst auf UTF-8 stehen hatte. Domino gibt zwar standardmässig UTF-8 aus, in der Webseite stand aber ISO-8859-1. Kann das aber jetzt nicht mehr reproduzieren. Leicht mysteriös.

JSON läßt sich in JavaScript viel einfacher verarbeiten als xml. Das ist einfach nur ein eval statement und ich hab das Objekt.

Code


function parseTransferin(transport) {
		                    var response = transport.responseText;
		                    var jsonObj = eval("(" + response + ")"); 
		                    
		                    alert ("jsonObj.uind=" + jsonObj.unid)
		                    alert("jsonObj.transferout=" + jsonObj.transferout)
		                    
		                    //ui.transferin.innerHTML = jsonObj.transferout;
		                    //processTransferin();
 
		                 }

Fazit soweit:
Die Prototype Bibliothek bringt Vorteile, die ich noch gar nicht alle ausereizt habe.
JSON ist voll in Ordnung und sollte XML vorgezogen werden.
Ajax sind eigentlich so eine Art Webservice zwischen einer JavaScript Komponente im Browser und einer serverseitigen Komponente.

Als nächstes kommt Scriptaculous.

Auf Notes Seite gibts ja zur Zeit diese Erweiterung von ext zu ext.nd mit speziellen Domino Erweiterungen. Will ich mir auch noch anschauen, aber zu Prototype gibts einfach die beste Literatur (Prototype and Scriptaculous in Practice von Manning) und ich traue sowieso keinem Bibliothekenschreiber, der mir erzählt, dass mit seiner library alles transparent geregelt ist. Mehr als oft wichtig auch das unter der Haube zu verstehen.

flaite · « **Antwort #7 am:** 25.01.08 - 14:35:47 »

Und jetzt hab ich noch was anderes gefixt:
Ein großes Problem von Domino Webanwendungen ist, dass der Code für ein feature sich leicht über verschiedene Stellen verstreut. Gerade die gerne verwendeten openSource DHTML widgets brauchen von sich schon 1 Stylesheet, 1 oder mehrere js Dateien und Initialisierungscode, der dann in Domino auch dadurch zur Zerstreuung neigt, da Leute das als passThru html in die Form posten, weil man da ja computed Text verwenden kann. Schwer zu maintainen.

Nun bestand mein bisheriger JavaScript Code auch aus mehreren Funktionen. Prototype unterstützt aber die Erstellung eigener Klassen, die in JavaScript-Pur recht hacklig ist. Jetzt der neue Code. Die Funktion processTransferin() hätte ich auch lieber in der Klasse. Ist mir aber zur Zeit noch nicht gelungen (ist nicht einfach).

Code


var CatManager = Class.create();   
 
	CatManager.prototype= {
    	initialize:function() {
    	    
                
 	},
 	
 
 
	changeCategory: function() {
  		ui.transferin = $("transferin");
  		var indexSelected = document.forms[0].category.selectedIndex;
  		var newCat = document.forms[0].category[indexSelected].text;
  		var url = getBaseURL() + "/" + "AjaxController?openAgent"
  		var params = "action=changeCategory&cat=" + newCat + "&unid_doc_cur=" + $("unid").innerHTML;
   
   		var request = new Ajax.Request(
              		url, 
  				{
                	method: 'get', 
                	parameters: params, 
                	onComplete: this.parseTransferin,
                	onFailure: this.showAjaxError
          		}
 		); 
	},            
                   
	parseTransferin: function(transport) {
		var response = transport.responseText;
		var jsonObj = eval("(" + response + ")"); 
		                    		                    
		//ui.transferin.innerHTML = jsonObj.transferout;
		$(transferin).innerHTML = jsonObj.transferout;
		processTransferin(jsonObj.transferout);
 
	}.bind(this),
                   
    showAjaxError: function(request) {
    	alert("error"); 
    }
 }
 
 var instCatManager = new CatManager()
 
 
function processTransferin(valTransferin) {
		//var valTransferin = $("transferin").innerHTML;
		arrFieldNameValues = valTransferin.split("~~~");
		var data = new Object();
		var iterator = function(value, index) {
			//alert("element " + index + " is " + value);
			arrNameValue = value.split("°=°");
			if (arrNameValue[0] && arrNameValue.length > 1) {
				if (arrNameValue[1].indexOf("µ")) {
					arrNameValue[1] = arrNameValue[1].split("µ");
				}
				data[arrNameValue[0]] = arrNameValue[1];
					
			}
		}
		arrFieldNameValues.each(iterator);
			
		for (name in data) {
			var value = data[name];
			if ($(name)) {
				$(name).innerHTML = value;
			}
		} 
	};

Zumindest ist es nur 1 Klasse und 1 Funktion und beide können in den JSHeader.

flaite · « **Antwort #8 am:** 25.01.08 - 16:24:51 »

Für javascript Entwicklung hat sich Aptana Studio Community definitiv bewährt.
Kostet nix.
Ist Eclipse basiert.
Bietet eine Menge hilfen beim programmieren wie das automatische Erkennen von Klammern, Unmittelbare Anzeige von Syntaxfehlern, schnelle Tests, Anzeige des Codes in übersichtlichen Strukturen, gute Suchfunktionen und auch Code completion und einen Browser für Funktionen und Klassen.
html und css Unterstützung

http://www.aptana.com/products/studio/community

flaite · « **Antwort #9 am:** 30.01.08 - 22:54:53 »

...trotzdem erzeugt das Ajax Abenteuer zur Zeit erstaunliche Mengen an Überstunden...
Scriptaculous hat einen sehr brauchbaren Wiki für Prototype: http://wiki.script.aculo.us/scriptaculous/show/Ajax.Request
Hingegen müssen die vielen deutschen Ajax-Exp3rten-Foren, die bei google aufpoppen noch ein bischen üben. Viel Unsinn. Reg mich nicht mehr drüber auf.
Auf der Domino Seite profitier ich von Zeugs, dens hier in der Firma gibt. Klassen, die serverseitig CGI-Variablen wie Content_Type und QUERY_STRING_DECODED richtig gut auslesen können machen Sinn, vor allem weil es da auf verschiedenen OS angeblich ein paar gotchas gibt.
Das Errorhandling wird durch die asynchronität ein bischen schwieriger. Wenn nachner Zeit vom Server nix zurückkommt, muss der Client irgendwie reagieren. Und wenn die Session des Users abgelaufen ist, sendet der Server die bekannte html Seite zurück, was sich natürlich schwer bis wirklich garnicht in JSon umwandeln läßt.

Ansonsten:
Libraries wie Prototype/Scriptaculous sind gut
Xml ist gut, aber JSON ist viel, viel besser (für Ajax)
Eine Controller Architektur auf dem Server macht Sinn, d.h. alle Ajax Calls gegen einen Agenten schicken und in dem Call ist ein parameter "action" und dieser Parameter sagt dem Agenten, was das jetzt für eine Anfrage ist. Sowas wird gerne Model-View-Controller genannt, aber das ist übertrieben, weil es kein Modell im eigentlichen Sinne gibt.

Autor Thema: Domino und Prototype/Scriptaculous (Gelesen 7121 mal)

flaite

Domino und Prototype/Scriptaculous

flaite

Re: Domino und Prototype/Scriptaculous

flaite

Re: Domino und Prototype/Scriptaculous

flaite

Re: Domino und Prototype/Scriptaculous

flaite

Re: Domino und Prototype/Scriptaculous

flaite

Re: Domino und Prototype/Scriptaculous

flaite

Re: Domino und Prototype/Scriptaculous

flaite

Re: Domino und Prototype/Scriptaculous

flaite

Re: Domino und Prototype/Scriptaculous

flaite

Re: Domino und Prototype/Scriptaculous

	<html>
	<head>
	<script type="text/javascript" src="prototype.js"></script>
	<script type="text/javascript">
	function processTransferin() {
	var valTransferin = $("transferin").childNodes[0].nodeValue;
	arrFieldNameValues = valTransferin.split("~~~");
	var data = new Object();
	var iterator = function(value, index) {
	//alert("element " + index + " is " + value);
	arrNameValue = value.split("°=°");
	if (arrNameValue[0] && arrNameValue.length > 1) {
	if (arrNameValue[1].indexOf("µ")) {
	arrNameValue[1] = arrNameValue[1].split("µ");
	}
	data[arrNameValue[0]] = arrNameValue[1];

	}
	}
	arrFieldNameValues.each(iterator);

	for (name in data) {
	var value = data[name];
	if ($(name)) {
	var txtNode = document.createTextNode(value);
	$(name).appendChild(txtNode);
	//$(name).innerHTML = value;
	}
	}

	}
	</script>

	</head>

	<body onload="processTransferin();">
	<!-- <body> -->
	<div id="transferin">Category°=°Muppets Show~~~RequestAuthorsMailRecipients°=°CN=Kermit der Frosch/O=ozzµCN=/OU=Miss Piggy/O=ozz~~~RequestAuthors°=°CN=Waldorf/O=ozz~~~RequestReaders°=°CN=Statler/O=OzzµCN=Fozzy Bär/O=ozzµCN=Gonzo/O=ozz</div>


	<hr />
	<div>category:<span id="Category"/></div>
	<div>requestauthormailrecipients:<span id="RequestAuthorsMailRecipients"/></div>
	<div>requestauthors:<span id="RequestAuthors"></span></div>
	<div>requestreaders:<span id="RequestReaders"></span></div>


	</body>
	</html>

	<%@page contentType="text/html"%>
	<%@page pageEncoding="UTF-8"%>
	<%--
	The taglib directive below imports the JSTL library. If you uncomment it,
	you must also add the JSTL library to the project. The Add Library... action
	on Libraries node in Projects view can be used to add the JSTL 1.1 library.
	--%>
	<%--
	<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
	--%>

	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">

	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>JSP Page</title>
	<script type="text/javascript" src="prototype.js"></script>
	<script type="text/javascript">
	var ui = {}; // context stuff.
	function processTransferin() {
	ui.transferin = $("transferin");
	//var valTransferin = $("transferin").childNodes[0].nodeValue;
	var valTransferin = $("transferin").innerHTML;
	arrFieldNameValues = valTransferin.split("~~~");
	var data = new Object();
	var iterator = function(value, index) {
	//alert("element " + index + " is " + value);
	arrNameValue = value.split("°=°");
	if (arrNameValue[0] && arrNameValue.length > 1) {
	if (arrNameValue[1].indexOf("µ")) {
	arrNameValue[1] = arrNameValue[1].split("µ");
	}
	data[arrNameValue[0]] = arrNameValue[1];

	}
	}
	arrFieldNameValues.each(iterator);

	for (name in data) {
	var value = data[name];
	if ($(name)) {
	//var txtNode = document.createTextNode(value);
	//$(name).appendChild(txtNode);
	$(name).innerHTML = value;
	}
	}

	}

	function changeCat(newCat) {
	// DER AJAX Code.
	var request = new Ajax.Request(
	"AjaxServlet",
	{
	method: 'get',
	parameters: "cat=" + newCat,
	onComplete: parseTransferin,
	onFailure: showAjaxError
	}
	);
	}

	// CALLBACK METHODE von ajax call
	function parseTransferin(transport) {

	var response = transport.responseText;
	var jsonObj = eval("(" + response + ")");
	//$(transferin).innerHTML = jsonObj.transferout;
	//var children = $A(ui.transferin.childNodes);
	//children.each (
	// function(child){
	// alert (child.text);
	//}
	//);


	ui.transferin.innerHTML = jsonObj.transferout;
	processTransferin();
	//alert ("transferout=" + jsonObj.transferout + "\nunid=" + jsonObj.unid);
	}
	// NOCH NE CALLBACK METHODE VON AJAX.
	function showAjaxError(request) {
	alert("error");
	}
	</script>

	</head>
	<body onload="processTransferin();">

	<div id="transferin">Category°=°Muppets Show~~~RequestAuthorsMailRecipients°=°CN=Kermit der Frosch/O=ozzµCN=/OU=Miss Piggy/O=ozz~~~RequestAuthors°=°CN=Waldorf/O=ozz~~~RequestReaders°=°CN=Statler/O=OzzµCN=Fozzy Bär/O=ozzµCN=Gonzo/O=ozz</div>


	<hr />
	<div>category:<span id="Category"/></div>
	<div>requestauthormailrecipients:<span id="RequestAuthorsMailRecipients"/></div>
	<div>requestauthors:<span id="RequestAuthors"></span></div>
	<div>requestreaders:<span id="RequestReaders"></span></div>
	<form>
	<input name="buttonChangeCat" type="button" value="buttonChangeCat" onclick="changeCat()"></button>

	<!-- <input name="buttonChangeCat" type="button" value="buttonChangeCat" onclick="processTransferin()"/></button>-->



	</form>

	</body>
	</html>

	package ajax;

	import java.io.*;
	import java.net.*;

	import javax.servlet.*;
	import javax.servlet.http.*;

	/**
	*
	* @author ajanssen
	* @version
	*/
	public class AjaxServlet extends HttpServlet {

	/** Processes requests for both HTTP <code>GET</code> and <code>POST</code> methods.
	* @param request servlet request
	* @param response servlet response
	*/
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
	throws ServletException, IOException {
	response.setContentType("text/javascript;charset=UTF-8");
	PrintWriter out = response.getWriter();
	System.out.println("servlet run");
	out.println("{");
	out.println("transferout:\"Category°=°Presidentes~~~RequestAuthorsMailRecipients°=°CN=Michelle Bachelet/O=chileµCN=Ricardo Lagos/O=chile~~~RequestAuthors°=°CN=Pedro I/O=Brasil~~~RequestReaders°=°CN=Alan Garcia/O=PeruµCN=Irrigoyen/O=ArgentinienµCN=de Lozada/O=Bolivien\",");
	out.println("unid:111222333");
	out.println("}");

	out.close();
	}



	/** Returns a short description of the servlet.
	*/
	public String getServletInfo() {
	return "Short description";
	}
	// </editor-fold>
	}

	"<script>" + @NewLine +
	"function getBaseURL() {" + @NewLine +
	"return \"/" + @WebDbName + "\";" + @NewLine +
	"}" + @NewLine +
	"</script>" + @NewLine +
	@NewLine +

	var baseURL = getBaseURL();
	var request = new Ajax.Request(
	baseURL + "/AjaxController?openAgent,
	{
	method: 'post',
	parameters: "cat=" + newCat,
	onComplete: parseTransferin,
	onFailure: showAjaxError
	}
	);

	"AjaxServlet",
	{
	method: 'get',
	parameters: "action=" + action + " unid=" + unid + " cat=" + newCat,
	onComplete: parseTransferin,
	onFailure: showAjaxError
	}

	Set docContext = s.DocumentContext
	queryStr = docContext.getItemValue("QUERY_STRING_DECODED")

	Function webParamsAsList (inVal As String) As Variant
	Dim firstAmper As Integer
	Dim ret List As String

	Dim arrNameValuePairs As Variant
	Dim elemNameValuePair As String
	Dim arrNameValuePair As Variant
	Dim i As Integer


	firstAmper = Instr(inVal, "&")

	inVal = Right$(inVal, Len(inVal) - firstAmper)

	arrNameValuePairs = Split(inVal, "&")
	For i = 0 To Ubound(arrNameValuePairs)
	elemNameValuePair = arrNameValuePairs(i)
	arrNameValuePair = Split(arrNameValuePairs(i), "=")
	ret(Lcase(arrNameValuePair(0))) = Lcase(arrNameValuePair(1))

	Next




	webParamsAsList = ret



	End Function

	webParams = webParamsAsList(inVal)
	resp = ""
	If Lcase(webParams("action")) = "changecategory" Then
	resp = processChangeCategory(s, webParams)

	End If

	processChangeCategory = "{" & strNL &_
	\|"transferout":\| & \|"\| & strTransferout & \|",\| & strNL &_
	\|"unid":\| & \|"\| & strUnid & \|"\| & strNL &_
	"}"

	Print \|Content-Type:text/javascript;charset=iso-8859-1\| & Chr$(13) & Chr$(10) & Chr$(13) & Chr$(10)
	Print respBody

	var CatManager = Class.create();

	CatManager.prototype= {
	initialize:function() {


	},



	changeCategory: function() {
	ui.transferin = $("transferin");
	var indexSelected = document.forms[0].category.selectedIndex;
	var newCat = document.forms[0].category[indexSelected].text;
	var url = getBaseURL() + "/" + "AjaxController?openAgent"
	var params = "action=changeCategory&cat=" + newCat + "&unid_doc_cur=" + $("unid").innerHTML;

	var request = new Ajax.Request(
	url,
	{
	method: 'get',
	parameters: params,
	onComplete: this.parseTransferin,
	onFailure: this.showAjaxError
	}
	);
	},

	parseTransferin: function(transport) {
	var response = transport.responseText;
	var jsonObj = eval("(" + response + ")");

	//ui.transferin.innerHTML = jsonObj.transferout;
	$(transferin).innerHTML = jsonObj.transferout;
	processTransferin(jsonObj.transferout);

	}.bind(this),

	showAjaxError: function(request) {
	alert("error");
	}
	}

	var instCatManager = new CatManager()


	function processTransferin(valTransferin) {
	//var valTransferin = $("transferin").innerHTML;
	arrFieldNameValues = valTransferin.split("~~~");
	var data = new Object();
	var iterator = function(value, index) {
	//alert("element " + index + " is " + value);
	arrNameValue = value.split("°=°");
	if (arrNameValue[0] && arrNameValue.length > 1) {
	if (arrNameValue[1].indexOf("µ")) {
	arrNameValue[1] = arrNameValue[1].split("µ");
	}
	data[arrNameValue[0]] = arrNameValue[1];

	}
	}
	arrFieldNameValues.each(iterator);

	for (name in data) {
	var value = data[name];
	if ($(name)) {
	$(name).innerHTML = value;
	}
	}
	};