Dit formulier maakt gebruik van de web 2.0 toolkit om met de server te communiceren. De classes [of singletonobjecten ] communiceren met elkaar via een event broker en topics [loose coupling], zie ook Message Broker.
Eventueel kunnen de classes ook in afzonderlijke files op de server worden opgeslagen om meer gestructureerd te kunnen werken.

Dit is ook een goed voorbeeld van de werking van de logger/ debugger die in de utils.js class zit.

Download :

• googleCode

naam:
adres:
plaats:
land:
postcode:
telefoon:
e-mail:
mening : ja nee weet niet geen interesse
lid :

 ->Geef aan in de code welke velden niet gesubmit moeten worden [btn_exept]

 ->Geef aan in de code welke velden gesubmit moeten worden [btn_submit]

 ->De dummy stuurt een message. UpdaterOne en Frm zijn subscribers op het topic "dummy_message"

Codesnippet :

if(t.name == 'btn_exept') { 
    o.frmSubmit({   "naam"          : false,
                    "adres"         : false
								
	});
}
if(t.name == 'btn_include') { 
    o.frmSubmit({   "inclusion"     : true,
                    "naam"          : true,
                    "adres"         : true
	});
}
		

XHR call :

doSubmit : function(obj){
				
    $.getForm(oForm,obj);//serialize form voor submit
        $.submit({
            type            : "post",
            url             : oForm.action,
            onsuccess       : this.submitSuccessResult,
            onfailure       : this.submitFailureResult,
            scope           : o //callbackscope
			
         });
     },
		

Tip : bekijk de XHR requests in de Firebug console.

Via polling wordt periodiek het formulier naar de server gestuurd, eventueel kan clientside gecontroleerd worden of er data gewijzigd word voordat er gepolled wordt [auto-update] De resultaten worden weer afgehandeld door een extern object (widget), dat via een event broker en een topic messages ontvangt

		addPollUpdater:function() {
					
					$.getForm(oForm);//sla element op voor submit
					$.addPoll({
						type 			: "post",
						url 			: 'xhr/getpolldata.php',
						onsuccess 		: this.pollSuccessResult,
						onfailure 		: this.pollFailureResult,
						scope			: o //callbackscope
				
					});
				},
				
				pollSuccessResult : function(oResponse) {
					this.publish( {//publish event met  message object
						type		: 'poll_update',
						sender		: oForm.id,
						results		: oResponse,
						success		: true
					});
				},
			
				pollFailureResult : function(oResponse) {
					this.publish( {//publish event met message object
						type		: 'poll_update',
						sender		: oForm.id,
						results		: oResponse,
						success		: false
					});
				},
		

Een voorbeeld van een externe module : (functionaliteit is naar behoefte uit te breiden)

		var PollUpdater = (function(){
			var o = {
				receiver : 'POLLUPDATER',
				subscriber	: function(event){
					message.process(event);
				}
			};
			return o;
		})();
		

Het is mogelijk het formulier te submitten met inclusie of exclusie van velden,
zie hieronder een voorbeeld :

		if(t.name == 'btn_exept') { o.frmSubmit({
			//exclude elements
			"naam"			: false,
			"adres"			: false
								
		});}
		if(t.name == 'btn_include') { o.frmSubmit({
			//include elements
			"inclusion"		: true,
			"naam"			: true,
			"adres"			: true
		});}
		

De functie $.getForm kan een form serializen, als er een element-id ,een element-name of objectreferentie wordt meegegeven als tweede argument zal alleen dat element naar de server gestuurd worden. De callback-scope wordt op de module zelf ingesteld zodat de events ook aan de module worden gekoppeld. Hierdoor kan de module met custom events communiceren met andere modules [lees : objecten] Zie ook het voorbeeld hierna

		doSave:function(t) {
					
			var elemId=t.getAttribute('rel');
			bRequestActive=true;
			$.getForm(oForm,elemId);//sla element op voor submit
			$.submit({
				type 			: "post",
				url 			: 'xhr/element_save.php',
				onsuccess 		: this.saveSuccessResult,
				onfailure 		: this.saveFailureResult,
				scope			: o //callbackscope
				
			});
		},
		

Hier wordt het gehele formulier gesubmit door serialization. Als het formulier succesvol is ontvangen door de server wordt er een custom event getriggerd vanuit de module. In een initieële interface wordt dit event aan een andere module gekoppeld. Aan het custom eventobject wordt een datobject gekoppeld, het type event en een sender-property voor verdere verwerking

		doSubmit : function(obj){
				
			$.getForm(oForm,obj);//serialize form voor submit
			$.submit({
				type 			: "post",
				url 			: oForm.action,
				onsuccess 		: this.submitSuccessResult,
				onfailure 		: this.submitFailureResult,
				scope			: o //callbackscope
						
			});
		},
				
		submitSuccessResult : function(oResponse) {
			this.publish( {//publish custom event met message object voor loose coupling aan andere module via event broker
				type		: 'frm_submit',
				sender		: oForm.id,
				results		: oResponse	
			});
			//interne verwerking van results
			output.setResult(oResponse, MSG_SUCCESS);
		},
			
		submitFailureResult : function(oResponse) {
			//doError(); //acties onerror
			output.setResult(oResponse, MSG_ERROR);
		},
		

Initieële event topic broker configurer die waarin publishers en subscribers worden gedefinieerd:

		var BrokerContext = (function(){
		
		var self = {
			startConnection :  function(){
    			//many to many
    			frm.addPublisher('frm_submit', DataProcessor.subscriber);
    			frm.addPublisher('frmfield_save', UpdaterOne.subscriber);
    			frm.addPublisher('frmfield_save', UpdaterTwo.subscriber);
    			frm.addPublisher('poll_update', PollUpdater.subscriber);
    			dummy.addPublisher('dummy_message', UpdaterOne.subscriber);
    			dummy.addPublisher('dummy_message', frm.subscriber);
    			}
			
    		};
    		return self;
	
        })();
		

Iedere Widget kan als publisher en /of subscriber worden aangemeld bij een topic,, en binnen de connectie messages verzenden en / of ontvangen.
Format:

		THIS_WIDGET.addPublisher(TOPIC_NAME, OTHER_WIDGET.subscriber);