P. 1
Using MySQL with the Dojo Toolkit

Using MySQL with the Dojo Toolkit

Views: 3,503|Likes:
Published by Best Tech Videos
The Dojo toolkit is a popular AJAX-based platform for building interactive web applications. This session will provide information on how to build some basic applications using a combination of Dojo and MySQL. The applications will be built from base principles to fully working system,showing both the interactive and database components.
The Dojo toolkit is a popular AJAX-based platform for building interactive web applications. This session will provide information on how to build some basic applications using a combination of Dojo and MySQL. The applications will be built from base principles to fully working system,showing both the interactive and database components.

More info:

Published by: Best Tech Videos on Apr 25, 2009
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

09/28/2013

pdf

text

original

Using MySQL with the Dojo Toolkit

Martin MC Brown, Sun Microsystems

Friday, 17 April 2009

AJAX
• Asynchronous Javascript And XML • Interactive webpages • Auto-forms, popups, etc • Fewer complete pageloads • Lower load on your database

Friday, 17 April 2009

Architecture
Web Page Dynamic Table CGI/JSP/ PHP

Database

Friday, 17 April 2009

Why use a Toolkit?
• Speed • Flexibility • Compatibility

Friday, 17 April 2009

Dojo Basics
• Heavily object based • Very configurable, via tags or objects • Built-in debug and console • Load basics:
• <script type="text/javascript" src="dojo/dojo.js" djConfig="isDebug: false, parseOnLoad: true"></ script> dojo.require("dojox.data.QueryReadStore");

Friday, 17 April 2009

Table Viewer

Friday, 17 April 2009

Dojo QueryReadStore
• Object-based interface to data • Keys using standard JavaScript notation • Interfaces to a back-end query URL • Parses JSON • Handles limit, range, offset, and more

Friday, 17 April 2009

QueryReadStore Creation
var tableurl = "table_autopage.cgi"; var store = null; dojo.addOnLoad(function() { store = new dojox.data.QueryReadStore({ url:tableurl, requestMethod:"get" }); grid1.setStore(store); grid1.setStructure(gridLayout); });

Friday, 17 April 2009

Dojo GridTable
• Like a standard HTML table • But configurable • Interactive • Uses a Dojo store for data • Handles interaction

Friday, 17 April 2009

GridTable With Tables
<table id="blogposts" jsId="blogposts" dojoType="dojox.grid.DataGrid" height="200px" query="{ id: '*' }" store="store" rowsPerPage="30"> <thead> <tr> <th field="id" width="5">ID</th> <th field="post_title" width="40">Title</th> <th field="post_date" width="15">Date</th> <th field="user_nicename" width="15">Author</th> </tr> </thead> </table>

Friday, 17 April 2009

GridTable With GridSpec
var gridLayout = [ new dojox.grid.cells.RowIndex({ name: "row #", width: 5, styles: "text-align: right;" }), { name: "ID", field: "id", styles: "text-align:right;", width:5 }, { name: "Title", field: "post_title", width:40 }, { name: "Date", field: "post_date", width:15 }, { name: "Author", field: "user_nicename", width:15 }, ];
Friday, 17 April 2009

Backend Script
my $sth = $dbh->prepare(sprintf("select wp_posts.ID,user_nicename,post_date,post_title from wp_posts join(wp_users) on (wp_posts.post_author = wp_users.ID) order by %s limit %d offset %d", $sortby,(param('count') || 100),(param('start') || 0))); $sth->execute(); print header(-type => "application/json",); my @lines; while (my $row = $sth->fetchrow_hashref()) { push(@lines,sprintf('{ %s}', join(',',map { $_ = sprintf('%s:"%s"', lc($_),$row->{$_}) } keys %{$row}))); } $sth->finish(); printf('{"numRows":%s,"items":[%s]}',$maxrowcount,join(',',@lines));

Friday, 17 April 2009

JSON Tabledata
{"numRows":1246, "items": [ { id:"86", post_title:"Linux Server", post_date:"2005-10-01 03:54:36", user_nicename:"martin-mc-brown"}, ...

Friday, 17 April 2009

Demo

Friday, 17 April 2009

Paging
• With large datasets, we don’t want everything • Paging Typically Involves Multiple Queries • Manual Paging Sucks • Making it work with sorting

Friday, 17 April 2009

Demo

Friday, 17 April 2009

Dojo Graphing
function makeCharts() { chart = new dojox.charting.Chart2D("simplechart"); chart.setTheme(dojox.charting.themes.PlotKit.orange); chart.addPlot("default", {type: "Lines"}); chart.addAxis("x", { majorLabels: true} ); chart.addAxis("y", { vertical: true }); chart.addPlot("grid", { type: "Grid", hMajorLines: true, vMajorLines: true,}); chart.addSeries('Series 1', [0,2]); updateChart(); return; }

Friday, 17 April 2009

Loading Graph Data
function updateChart() { var loadurl = 'graph_ajax.cgi?duration=' + document.getElementById('duration').value + '&symboltype=' + document.getElementById('symbol').value; document.getElementById('loadURL').innerHTML = loadurl; var response = dojo.xhrGet({ url: loadurl, handleAs: 'json', load: function(responseObject, ioArgs) { var datasetlength = responseObject.labels.length; document.getElementById('displaydescription').innerHTML = responseObject.type + ': ' + responseObject.symbol + ', ' + responseObject.duration + ' days ' + datasetlength; chart.axes.x.opt.labels = responseObject.labels;
Friday, 17 April 2009

Setting Label Params
if (datasetlength < 20) { chart.axes.x.opt.majorTickStep = 5; } else if (datasetlength < 100) { chart.axes.x.opt.majorTickStep = 16; } else { chart.axes.x.opt.majorTickStep = 50; }

Friday, 17 April 2009

Finalize Graph Params
chart.axes.x.opt.majorLabels = true; chart.axes.x.opt.minorLabels = false; chart.axes.x.opt.natural = false; chart.axes.x.opt.fixed = true; chart.axes.y.opt.fixUpper = "major"; chart.axes.y.opt.fixLower = "major"; document.getElementById('loadURL').innerHT ML = responseObject.starttime; chart.updateSeries("Series 1",responseObject.values); chart.render(); } } );
Friday, 17 April 2009

Demo

Friday, 17 April 2009

Adding Zooming
• Specify a viewport • Set scale/offset • Add events for moving the viewport • Done!

Friday, 17 April 2009

Demo

Friday, 17 April 2009

Questions?

Friday, 17 April 2009

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->