1. jQuery DAP Objects
Why?
• Rich front-end functionality to improve user experience
• Use appropriate languages for appropriate parts of the system
• JavaScript for browser functionality
• CSS for styling
• Perl for server functionality
• Avoid server-side work than can be done (quicker!) on the client
• Avoid re-loading pages ‘in the middle of a task’, e.g.:
• Validating input values
• Changing configurations, values, etc.
• Retrieving ‘choice-making’ information
• Tailing logs, etc.

2. jQuery DAP Objects
Why?
Appropriate in JavaScript Inappropriate in JavaScript
• Rich front-end functionality to
• Check an input field has a value improve user experience
• Rounding corners mathematically
• Add a class to an element • Data storage
• Show or hide elements
• Use appropriate languages for appropriate parts of the system
Inappropriate in Perl
• JavaScript
Appropriate in Perl for browser functionality Sorting a table where the data
•
• CSS to database
• Read/write forastyling hasn't changed
• Perl for
• File handling server functionality • Re-loading a page with an error
• Setting element colours directly
Appropriate in CSS
• Avoid server-side work than can Inappropriate in CSS on the client
• Rounded corners using a background
be done (quicker!)
image • Sizing images
• Avoid re-loading pages ‘in the middle of a task’, e.g.:
• Class –based colours, etc. • Conditional statements
• Validating input values
• Changing configurations, values, etc.
• Retrieving ‘choice-making’ information
• Tailing logs, etc.

3. jQuery DAP Objects
So?...
We are no longer just We need to engineer
adding a bit of
JavaScript to do simple
things via ‘onclick’
=> front-end code the
same as we do back-
end code - OO
functions, etc. JavaScript

4. jQuery DAP Objects
What Benefit?
Almost - No
• Simple and effective code re-use inheritance
• All the benefits of OO-code – encapsulation,
name-spacing, simple interface, etc.
• Remove the pain of writing JavaScript – concentrate
on writing the functionality, not coding up visuals and
behaviour
• Respect styling and design

5. jQuery DAP Objects
DapTable
Auto-sort
Auto-filter
Auto-styled
CSV/TSV downloadable

6. jQuery DAP Objects
DapTable: Features
• All styling defined 1. All done client side
2. Respects sorting and filter
• striped
• collapsable Currently:
• By file size (KB,
• tsv_downloadable, csv_downloadable MB, etc.)
• By node (webd2.dd.com < webd12.db.com
• tsv_downloadable_custom, csv_downloadable_custom
• url_downloadable
• Sorting, and custom sorting
• Keys
• Auto-highlighting of rows on rollover
• Fix width

7. jQuery DAP Objects
Popup
Suggestions
Expander

8. jQuery DAP Objects
Popup: Features
• Works on any element
• Can use AJAX to populate
• Optional offset from element
• Custom close methods
Suggestions: Features
• Can use list on page, or get results by AJAX
Expander: Features
• Works on element
Audit
• Refreshes audit history

9. jQuery DAP Objects
JavaScript Objects
var Object = function() {
this.function = function() {
Looks less like JavaScript
var self = this and more like an object in
C++, Java, Perl?
function code (Maybe…)
}
}
var obj = new Object()

10. jQuery DAP Objects
Generic DAP Objects
var Object = function() {
this.includedObject = new IncludedObject()
this.init = function() {
var self = this
initialisation code
self.includedObject.init() // if necessary
...
}
}

11. jQuery DAP Objects
Example use: Cluster
var Cluster = function() { Object variables
this.dragged = 0 Included objects
this.audit = new Audit()
this.expander = new Expander()
this.input = new Input()
this.suggestions = new Suggestions()
this.popup = new Popup()
this.table = new DapTable()
this.init = function() { Scope self
var self = this
Standard jQuery
self.table.init($('#server_table'))
Call object method
$('#node_div').draggable({ stop: function() { self.dragged = 1 } })
$('#node_div_close').click( function() { self.deselect_node() })

12. jQuery DAP Objects
DapTable: Usage
In Template
<link rel="stylesheet" type="text/css" href="/css/common.css" />
<link rel="stylesheet" type="text/css" href="/css/common/daptable.css" />
<script type="text/javascript" src="/javascript/jquery/jquery.js"></script>
<script type="text/javascript" src="/javascript/table/table.js"></script>
<script type="text/javascript" src="/javascript/common/DapTable.js"></script>
<script type='text/javascript'>
$(document).ready(
function() {
var cluster = new Cluster()
cluster.init()
Will ultimately be:
}
) a) one compressed JS script, and
</script> one compressed CSS file
b) CSS at the top, JavaScript at the
bottom
<table class=‘dap_table table-autosort cvs_downloadable’>
…

13. jQuery DAP Objects
DapTable: Usage
In Javascript
var Cluster = function() {
this.table = new DapTable()
this.init = function() {
var self = this
self.table.init($('#server_table'))
self.table.init('#server_table')
…
}
}

14. jQuery DAP Objects
TableKey
In Javascript
self.key = new TableKey('#toggle_key', 65, 17)

15. jQuery DAP Objects
Generic jQuery Objects: Thickbox
Just add a class
‘thickbox’ to a <a> tag

16. jQuery DAP Objects
More Generic Objects:
• Cookie
• Format
• Input
• StringFuns
• Url
Future Suggestions:
• Client-side Validation
• Generic ‘COMET’

17. jQuery DAP Objects
Client-side Validation
function validate() {
valid = 1
<div>
$(‘.mandatory’).each(
function() {id="rtsub" type="text" class="mandatory“ name="rtsub" value=“" />
<input
if ($(this).val() == ‘’)) {
</div>
$(this).addClass(‘invalid’)
<div>
<input=id="rtenv" type="text“ name="rtenv" value=“" />
valid 0
</div> Note: Don’t do this! Do (e.g.):
})
if (! valid) { $(‘#element .mandatory’)
...
alert(‘Please complete all mandatory fields’)
return 0
}
return 1
}

18. jQuery DAP Objects
“Rich front-end functionality to improve user experience”

19. jQuery 1.4.2
FYI:
• “Wow, the performance improvements are overwhelming.”
• “1.4.2 is blazing fast http://j.mp/9yUNZ9 ...”
• “There has been a great increase in performance.”
• “Great work, great performance increases.”
http://blog.jquery.com/2010/02/19/jquery-142-released/

20. jQuery 1.4.2
My Own Tests:
• N Elements, all same class
• 3 handlers per element
jQuery Bind Times
250000
for (var i = 0; i < 10000; i++) {
$('body').append("<div class='a_div'></div>")
200000
} 150000
$('.a_div').click( function() { $(this).hide() }) 1.3.2
ms
$('.a_div').mouseover( function() { $(this).hide() })
100000 1.4.2
$('.a_div').mouseout( function() { $(this).hide() })
50000
0
1000 3000 10000 30000