boolean operators
// TODO: for global ajax object, do not allow requests to override the current one.
// This can happen, for example, if the user types too quickly.
// Check quirksmode for example. Do they protect the request() function?
- good explanation of what is boolean false and true
[Prototype http://prototypejs.org] documentation:
- use initialize to easily instantiate classes and extend them
What MSXML version to use:
- MSDN
- forum
- I couldn't get 6.0 or 3.0 to work. 3.0 is worse because it passes the exceptions but doesn't have the proper functionality. I stuck with 2.0 and the old style. With IE7 becoming more prevalent, we can rely on native XMLHttpRequest.
notes on JavaScript - The Definitive Guide
Functions
- it contains all functions arguments, including references to the named arguments; hence, change arguments[0] and you change the first named argument
- arguments is a variable within a function
- arguments is an Array-like object
- calling a function without required arguments will set the arguments to undefined
Prototype
- prototype is an object, a single instance exists for all instances of its associated class
- the prototype object is created from the constructor's prototype
- define instance methods and properties for a class in the prototype
- define class methods and properties (esp constants) as properties of the constructor
- prototype fakes inheritance by providing common properties or methods to all instances of a class; in this way, one can extend new or existing classes such as built-in types
Objects
- objects are similar to Java
- objects have equals(), compareTo(), toString(), etc.
- since functions are objects, they too have the same methods and properties
- Object is the super object of all objects
- to inherit from an object, call the superclass' constructor like so: MySuperClass.call(this); and add the super class to the subclass prototype like so: MySubClass.prototype = new MySuperClass();
Drag and Drop
Drag and Drop covers some basics:
- start drag with mousedown event.
- drag with mousemove event. threshold for how many pixels before drag. on drag, animate or change element's look.
- dropzone where drop is valid.
- stop drag and drop with mouseup event.
Webreference tutorial
- record mouse movements by tracking onmousemove event
- record mouse clicks by tracking onmousedown events but only on those objects which should be clickable
- record mouse release clicks by tracking onmouseup
- set elements to absolute position; this will match their position 1-1 with the browser coordinates, allowing for easier position setting
- handle mouse drag by checking offset into draggable element; that way, elements will not always appear under the mouse in the same position, regardless of where click occurred
- when dropping an item, it will block items underneath. strategies to fix are to make item positioned to the bottom right of mouse, thereby unblocking mouse, leave item where it is, or leave both alone by checking where mouse released and if the position is a droppable, eligible target. TreePanel does a combination of the 1st and 2nd strategies, using the feedback mechanism for bottom right of mouse and leaves the draggable item in place.
- for rollover effect, show empty draggable container as if it were to be dropped. if draggable is not on a droppable, then make it invisibile. when draggable is on a droppable, make it visible so that empty draggable (with no content) creates space.
Yui-ext tree covers issues with drag and drop in a tree or hierarchical view
- notes that table layout is not good for drag and drop; uses nested unordered lists, which contain gifs for indent and lining up the expand, folder, and elbow connector icons
- checkout TreePanel/TreeNode/AsyncTreeNode for expand/collapse and event listeners
- one tree loads everything while the other dynamically grabs the data
- node and tree are independent of treepanel, which contains the logic for tying together trees and drag/drop functionality
- issues: auto scrolling when there are additional elements out of view (i.e. leave mouse on edge of display and the window will scroll in that direction when dragging an object), feedback when dropzone encountered (i.e. change cursor to show element being dragged and how it will be dropped), auto expand node (although node may have many children), target is in charge of what can be dropped on it
- performance when auto-expanding thousands of nodes (re-read about cache implementation) - features: keyboard navigation, single and multiple selection, bubble up (to parents) and cascade (to children) logic, inline editing, sort options
TreePanel
Code samples:
Treeview
Nice example of auto checkmarks for parents and children:
http://developer.yahoo.com/yui/examples/treeview/check.html?mode=dist
Logging
To log data via Ajax, http is generally not a good protocol because it requires a response. Ideally, logging would send the data and end operation. To make things more efficient, use response 204 to indicate no content.