1 / 18

Building Dynamic DNN Ajax Modules Without Programming

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.

step
Télécharger la présentation

Building Dynamic DNN Ajax Modules Without Programming

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Ajax XMod for Dummies Building DNN Ajax Modules Without Programming Dave McMullen SoCal DNN Users Group 2/7/07 – dma@dmcma.com

  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 if(xmlHttp.readyState==4) { document.myForm.time.value= xmlHttp.responseText; }

  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 xmlHttp.open("GET","time.asp",true); xmlHttp.send(null);

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

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

  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> response.write(time)

  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

More Related