sign in

JavaScript Documentation

< Back to About

Sections

Requisition and Presentation Pathway
Visual Effects and Affordances
Secondary Workspace Enhancements
Future Optimizations

Requisition and Presentation Flow (click to enlarge)

Requisition and Presentation Pathway

createXMLHttpRequest

Remote Function

Do you notice createXMLHttpRequest's elevated position on the chart? Some might accuse him of lording over lesser functions, but in these circumstances it is is simply, frankly, that he is more enlightened. Only through his tutelage may process-starting functions access the stores of knowledge held in the database. Any time an asynchronous request is made, the calling function accesses createXMLHttpRequest. Generally, it does little more than return the request. However, createXMLHttpRequest is not without pity, and will provide Internet Explorer with an ActiveXObject (whether anything else works is another store), or politely inform older browsers that they simply are not compatible.

getGroupByUser

Remote Function

Most loading cascades propogate through getGroupByUser. When the body of HTML loads, it is this function that is called. It queries the aptly named getgroupbyuser.php, and received in compensation an array of some complexity, containing identifiers and (limited) metadata of each group to which a user is registered. This function has no idea who's information it's asking for; it is wholly dependent on the sagacity of the most revered sever to deliver an accurate array. In fact, getGroupByUser can't do much of anything for itself, which is why it immediately passes responsibility on to more capable functions.

createGroups

Organization Function

getGroupByUser has no idea how much raw potential he held. createGroups tempers the raw materials of the database into a glimmering, object-oriented array. But that's not good enough! Oh no! These groups are simply containers for many fabulous items; he enlists the aid of getItemsByGroup to help fill them.

group

Meta-organization Function

group provides the structure for the group object with which createGroups fills its array.

getItemsByGroup

Remote Function

getItemsByGroup is little more capable than getGroupByUser, but, like its predecessor, does its one job without question. So long as no one thinks to shoot the messenger, their futures are secure. For each group a user may access, getItemsByGroup queries the server for associated items. These, like the earlier Groups, must be arrayed into a more pleasing format. Additionally, he is sending these arrays of icons to displayItems.

createItems

Organization Function

createItems is the little brother of createGroups. He crafts the array from the server into a friendly, object-oriented little beast.

item

Meta-organization Function

item is just the little beast for the job. Like group, item is a prototypical arrayment in which requisite properties fit nicely and predictably.

displayItems

Presentation Function

Once createGroups receives the last item array from getItemsByGroup (from createItems, from item), our presentational backbone is complete. Judicious parsing can access just about any bit of data about any group or item. But some people are impatient. displayItems is one of them. As getItemsByGroup finishes each array, it sends them there as well as filling the Groups array. displayItems is the main function which visualizes items. It parses the data into easily read entries and assigns a number of useful direct manipulation functions to each object (these are covered are part of a larger overview of the script.aculo.us library below). As a last order of business, a completed item is appended to the initially empty UL in the main container of the end-user workspace.

displayGroupInSidebar

Presentation Function

Someone else wants to try to present things, too: it's displayGroupInSidebar! She was called by getGroupByUser when he first acted. With access the the Groups array, it's trivial for displayGroupInSiderbar to take each group name and append it to their affordance in the right column, and give each a link to displayGroup.

displayGroup

Presentation Function

displayGroup is activated by clicking any group name on the right column. First, it removes every subnode from the primary UL, removing every listed item. It has received the unique ID of the group which was clicked, and, using this, it traverses the Groups array until it finds this group, and sends that group's position in the array to displayItems, who, as before, iterates over each item. This time, it only receives the information for the single group's items.

displayAll

Presentation Function

Not being able to see all your snipps may make you mad. It certainly makes displayAll mad, but, unlike you, he can actually do something about it! First... hm... first he erases whatever's showing. He needs a clean canvas to work his magic, anyways. displayAll, like displayGroup, traverses the Groups array, but he's content to send the items of every group he crosses to displayItems, who is, likewise, almost too happy to put them up.

getPurgatoryByGroup

Remote/Organzation Function

Purgatory is a little curious. When an item is dismissed from the main work flow it is not immediately erased. Instead, the server flags it with a "Purgatory" boolean. Though it saves its group affiliations, it is now marked for death. And, like, any good death camp, you can line up your victims all at once and pick out exactly the ones you want dead first. This is a parallel process to the normal process of querying data, parsing arrays, and displaying them. This function accomplishes the first two goals, erasing the existing items and querying getpurgatory.php to, well, pretty much do what it sounds like. Once queried, it parses the data as well, showing up getGroupByUser and getItemsByGroup something wicked.

displayPurgatory

Presentation Function

displayPurgatory receives the array of items from getPurgatoryByGroup. It follows displayItem's lead almost vebatim, the only compositional difference being some quirks of the item buttons and having to accommodate a slightly different format of array (getPurgatoryByGroup can't do everything just right, I guess.).

Visual Effects and Affordances

script.aculo.us is a Javascript framework built to simplify the application of visual effects and reactions. A few simple functions are enough to apply advance, graphic effects which improve feedback from user action, replete with proven cross-browser compatibilities. The script.aculo.us library supplements the control buttons of individual items to improve their sense of solidity and ease intuitive use.

enableDragger

enableDragger carries with it boundless potential. This function applies to all data elements in the primary UL, and trivially allows users to visually reorder them. It has several callback methods: functions which are executed when certain conditions are met.

updateList

updateList a callback method of enableDragger; when an item leaves or enters a UL by dragging, this function executes. Though not presently implemented, this function will allow the application to store how users want their items to be ordered in a list and ensure changes are easily made.

enableDroplets

This function designates the group UL elements as 'droppables'; regions which react to having dragged items released on them. In a future version users will be able to migrate items between workspaces by dragging them to representations of those workspaces.

outbound

This function is a callback of enableDroplets. When an object is released over a droppable this function activates. Being able to determine which object was released allows an XMLHttpRequest to represent that change on the server. The most significant amount of work will be server side, implementing a function to change an item's group affiliation.

minimize

script.aculo.us' visual effects convey meaning in a more intuitive manner. minimize hides the elements of an item except for its title, link, and control buttons. A visual effect conveys this obfuscation, hiding data as the element shrinks, evidencing its continued presence. The library provides a single function which permits toggling of this effect.

dismiss

script.aculo.us' effects convey the removal of an item as well. Traditionally, a deleted item would vanish abruptly or necessitate the entire refreshing of a page, either of which can confuse or distract users. When an element is sent to Purgatory, it physically fades from the page, transitioning from there to not-there.

edit

edit allows users to modify existing snipps from the comfort of their own workspace. Clicking the associated button causes the item to transition to an edit box, where users may modify saved data.

editItemSubmit

When a user clicks 'update' during the above function, the entries of the item are sent to editItemSubmit. An AJAX call is made to edititem.php, sending all the variables of the element.

updatea

Once the above changes are recognized by the server, modification of the visual item begins. updatea is lexically very similar to displayItems and displayPurgatory, albeit significantly less stable.

Other functions (click to enlarge)

Secondary Workspace Enhancements

A number of enhancements augment pages besides the primary workspace interface. These functions are largely short and simple, but their presence improves response on these pages.

addTagField\addFriendField

These are part of the Add Item and Add Group pages, respectively. Each box (for a folksonomic tag or an invited user) holds one entry; any arbritrary number of additional entries can be appended by adding additional cells.

getUserName

This function graces the top of all logged-in-area pages. A simple "welcome [username]" lets users know at a glance that they are logged in and responsible for their account. Additionally a little politeness goes a long way.

getGroup/displayGroupInSelect

This cascade augments the Add Item page. Users select which group will receive a new snipp from a drop down menu, which is queried and populated, respectively, by these two functions.

logoutSubmit/logoutActions

These functions direct logging out. After a successful server query from logoutSubmit, logoutActions directs users to the front page.

loginSubmit/loginActions/handleLoginErrors

These functions handle logging in. If loginSubmit receives an okay response, loginActions transfers the logged-in user to their workspace. If a submission is not recognized as a valid account, an in situ warning message alerts users without leaving the page or forcing an alert box.

addgroupSubmit/additemSubmit/itemSubmitActions

Javascript allows programs to draw from web forms and submit those results to the server as an intermediary. In the case of additemSubmit, a successful submission allows itemSubmitActions to clear the form and add a 'success' message, so a user may continue to e.g. add a series of snipps without interruption.

signupSubmit/handleSignupErrors

Registration may involve several attempts before an unclaimed username is found. Traditionally, each attempt requires a page refresh before delivering the bad news. Using AJAX, these scripts can alert a user using an in situ message without leaving the frame.

Future Optimizations

Additional functionality was discussed above with regards to visual control of snipps. Being able to modify group affiliations without the additional steps of a menu interface is natural, fast, and useful. Save organization allows for additional meaning to be saved within a group. Sorting by metadata allows for similar freedom.

Programatically, getItemsByGroup makes a comparatively large number of calls to our server; in a real world situation (on a real world free hosting service), this may lead to slower access. displayPurgatory and updatea replicate most of the code of displayItems, to the point where a change to one necessitates a change to all three; the obvious solution is to right a general function which can handle the needs of all three functions.

Additional control and presentation of information regarding groups is critical. Even simple additions such as adding the number of snipps in a given group, or the users who belong to it, vastly increase the relative sense of being attributed to a group. Subsequent revisions may focus on interaction between groups; finding new, pertinent information; and additional ease of integration with existing workflows, such using as a bookmarklet or a Firefox Extension.