Ajax XMod for Dummies

1
Ajax XMod for Dummies

• Building DNN Ajax Modules Without Programming

Dave McMullen SoCal DNN Users Group 2/7/07
dma_at_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 ""
• Required attribute "name"
• Steps
• Editor
• tag "wrapper" (container) for template

9
Ajax

• Uses XMLHttpRequest Javascript object
• Except IE, which uses an ActiveXObject
• therefore need a try/catch
• xmlHttpnew 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.onreadystatechangefunction()
• readyState status of server response
• not initialized
• set up
• sent
• in process
• complete
• responseText
• server data without reloading page

if(xmlHttp.readyState4) document.myForm.tim
e.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
func
tion ajaxFunction() name"myForm" Name onkeydown"ajaxFunction()" name"username" /
Time

• 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

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

var xmlHttptry // Firefox, Opera 8.0,
SafarixmlHttpnew XMLHttpRequest() catch (e)
xmlHttp.onreadystatechangefunction()
xmlHttp.open("GET","time.asp", true)
xmlHttp.send(null)
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

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
• form tag
• 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_at_dmcma.com