Ajax XMod for Dummies - PowerPoint PPT Presentation

1 / 18
About This Presentation
Title:

Ajax XMod for Dummies

Description:

Real Estate Listings. Golf Course Listings. Marina Listings. College Course Listings ... 'ref' property - No other control on the form can have the same 'ref' ... – PowerPoint PPT presentation

Number of Views:86
Avg rating:3.0/5.0
Slides: 19
Provided by: dmc4
Category:

less

Transcript and Presenter's Notes

Title: 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
Write a Comment
User Comments (0)
About PowerShow.com