Ajax XMod for Dummies

1. Ajax XMod for Dummies Building DNN Ajax Modules Without Programming

2. Types of Sites Brochure site Dynamic data site Suitable Applications

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

4. XMod Forms List templates Detail templates

5. 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

6. 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

7. 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).

8. 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: "<xmod:field>" Required attribute: "name" Steps Editor <div> tag "wrapper" (container) for template

9. 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

10. 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

11. 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

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

13. Ajax Procedure Create an HTML page <script> 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

14. 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

15. 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 <table>

16. 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 <ajax> form tag <xmod:ajax> template tag

17. Demos XMod: User Profile Ajax: Landmarks InsertResult CustomFunction

18. Next Steps Do it! Go to www.dnndev.com Review DNN modules at www.webhost4life.com : Flatburger free license for a year Ajax/Javascript: www.w3schools.com Dave McMullen: dma@dmcma.com