180 likes | 274 Vues
Learn how to create DNN Ajax modules using XMod without needing programming skills. Explore Lite (XMod FormViews) and Heavy (XMod Templates) approaches, and master form creation, data handling, and template customization.
E N D
Ajax XMod for Dummies Building DNN Ajax Modules Without Programming Dave McMullen SoCal DNN Users Group 2/7/07 – dma@dmcma.com
Types of Sites • Brochure site • Dynamic data site Suitable Applications
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: "<xmod:field>" • Required attribute: "name" • Steps • Editor • <div> 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 • <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 <html><body> <script type="text/javascript">function ajaxFunction() …</script> <form name="myForm"> Name: <input type="text" onkeydown="ajaxFunction();" name="username" /> Time: <input type="text" name="time" /> </form> </body> </html>
Ajax Procedure var xmlHttp;try {// Firefox, Opera 8.0+, SafarixmlHttp=new XMLHttpRequest();} catch (e) …xmlHttp.onreadystatechange=function() …{}xmlHttp.open("GET","time.asp", true); xmlHttp.send(null); • 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
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> 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 • <ajax> form tag • <xmod:ajax> template tag
Demos • XMod: User Profile • Ajax: • Landmarks • InsertResult • CustomFunction
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