Ajax XMod for Dummies Building DNN Ajax Modules Without Programming Dave McMullen SoCal DNN Users Group 2/7/07 –

Types of Sites Brochure site Dynamic data site Suitable Applications Real Estate Listings Golf Course Listings Marina Listings College Course Listings Product Catalogs Product Reviews "What's New" Module Photo Album/Image Gallery Classified Ads Customer Support Request Form Customizable Feedback Form FAQ Module Links Module News Manager To-Do List Journal Dynamic Navigation Menu "Shadow" Module Replacement DNN User Information Page

Approaches Non-Programming –Lite: XMod FormViews –Heavy: XMod Templates Programming –Lite: Web Developer (DNN Templates) –Heavy duty: Visual Studio (DNN ASCX)

XMod Forms List templates Detail templates

Forms Auto-Layout –quick form creation –no HTML needed Custom HTML Layout –complete control over layout –greater ability to inject Javascript functionality ASCX-Based Form –XMod handles the data –can use 3rd party custom ASP.NET controls

Form Tools Form Settings and Permissions Form Editor –Controls (“Fields”) "ref" property - No other control on the form can have the same "ref" child tags – property tags –Format tool

Templates Optional: FormView does not use them. Create mini-web pages Two basic flavors –List View "headlines" describe how a single record should be displayed. XMod then repeats that layout for all the other records it displays in the list. mix HTML tags and special XMod tags to tell XMod how your data should be displayed. Has tags that apply to lists. Can create multiple templates, each with its own look and/or functionality, but all working from the same set of data. –Detail View "full story" temporarily hide the list view and replace it with the detail view intended to display only one record but could use a DetailView template in place of a ListView template (minus its list tags).

Creating Templates Add to HTML tags special XMod Template Tags –Begin with "xmod" –Most tags are "empty" tags (no closing tag). proper XHTML syntax: a closing "/>" –Used most: " " Required attribute: "name" Steps –Editor – tag "wrapper" (container) for template

Ajax Uses XMLHttpRequest Javascript object –Except IE, which uses an ActiveXObject therefore need a try/catch –xmlHttp=new XMLHttpRequest(); Vs. HTML GET or POST (which do postbacks) –HTTP request does not do a postback –Made popular by Google Suggest

Ajax Properties onreadystatechange stores the function that processes server response - xmlHttp.onreadystatechange=function() readyState – status of server response not initialized set up sent in process complete responseText server data without reloading page if(xmlHttp.readyState==4) { document.myForm.time.value= xmlHttp.responseText; }

Ajax Methods open() specifies server-side script (.asp) URL add querystring that contains the content to process send() sends request need an event to activate Javascript usually an onClick or onChange could be onKeyUp xmlHttp.open("GET","time.asp",true); xmlHttp.send(null);

Ajax Procedure Create an HTML page Create the Javascript file (.js) Create the server.asp page

Ajax Procedure Create an HTML page – tag for.js src –event handler to activate Ajax in.js onclick (button) onchange (dropdown onkeyup (text box) … –Id placeholder for Ajax output Create the Javascript file (.js) Create the server.asp page function ajaxFunction() … Name: Time:

Ajax Procedure Create an HTML page Create the Javascript file (.js) create function that calls Ajax Create XMLHTTP object Test that the browser did it create function to handle responseText tests the object's status inserts responseText into the page (innerHTML) assign a function to onreadystatechange that set up URL for open() send() Create the server.asp page var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) … xmlHttp.onreadystatechange= function() … { } xmlHttp.open("GET", "time.asp", true); xmlHttp.send(null);

Ajax Procedure Create an HTML page Create the Javascript file (.js) Create the server.asp page access data –hardcoded array –database connection connection object (e.g. ADODB) sql select connection provider (e.g. Jet) connection string/load path (e.g. mdb) recordset object (e.g. ADODB) –XML file –create XMLDOM object –set object load path get input request (parameters) – e.g. Xpath for XML nodes process request, e.g. loop through records or nodes output response, e.g. write response to a response.write(time)

Ajax with XMod handles internal Javascript “plumbing” sends receives data from your web server handy shortcuts Can insert data into an element on the page Can send data to a custom function form tag template tag

Demos XMod: User Profile Ajax: –Landmarks –InsertResult –CustomFunction

Next Steps Do it! Go to Review DNN modules at : Flatburger free license for a year Ajax/Javascript: Dave McMullen: