ForeCiteNote by Emma Nguyen, 11 th June 2010

Outline Overview Server side Client side  JavaScript classes

ForeCiteNote - Overview A modification of TiddlyWiki A single PHP/HTML/JavaScript/CSS file A collection of small blocks of content called “tiddlers” Tiddlers are invisible (by default) DIVs, loaded on startup (from database/file) to an internal “TiddlyWiki” data structure.

ForeCiteNote - Overview Consists of main area (LHS) and a sidebar (RHS) Main area is a “Story” – a sequence of visible tiddlers Configurations are made through special tiddlers : PageTemplate, StyleSheet, etc.

ForeCiteNote – Server side Server side solution in PHP, provides ubiquitous access to a hosted ForeCiteNote Maintains data integrity between users’ data and ForeCite centralized database: create, modify or delete tiddlers Provides metadata auto complete Supports other miscellaneous functionalities : login/logout, register, send mail to users, etc.

ForeCiteNote – Client Side HTML:stores tiddlers as DIVs [Note content] CSS:defines style JS:implements FCNote functionalities

ForeCiteNote – JS classes -Constructor function pattern function Tiddler(title) { this.title = title; this.text = "";... return this; } var myTiddler = new Tiddler(“New Tiddler”); (*) -(*) will 1) create a blank Tiddler object, 2) execute the commands listed in Tiddler function

ForeCiteNote – JS classes Each Tiddler object has methods associated with it, so we can call myTiddler.isTagged(“test”). Tiddler.prototype.isTagged = function(tag) { return this.tags.indexOf(tag) != -1; } function TiddlyWiki() { var tiddlers = {}; // Hashmap by name of tiddlers... this.fetchTiddler = function(title) { var t = tiddlers[title]; return t instanceof Tiddler ? t : null; }; }

ForeCiteNote – JS classes Initialization  Main: main() function which runs an initialization sequence on page load AJAX request  DSR: handles AJAX requests Animation  Animator: runs the dynamic flow of stepping through an animation, delegating to specific animation type.  Morpher: supports smooth transformation between 2 CSS styles  Scroller: scroll a window to show an element  Slider: slides elements upon opening/closing Data structures  Tiddler: represents a tiddler (block of text with a title)  TiddlyWiki: represents a collection of tiddlers Data import/export  Loader/Saver: converts between HTML and a list of tiddlers  Saving: saves FCN, serialized tiddlers to DOM elements and saving to local file system

ForeCiteNote – JS classes Control & Options  Config: General config, control capacities, names of shadow tiddlers, which options can be set…  Commands: toolbar commands (close, edit, delete, close others,…)  Macros: define built-in macros  Options: cookie based preferences. UI elements  ListView: table-like list  Messages: status notification  NewTiddler: macro for new tiddler, when users hit “new research note”  NewNote: macro for new tiddler, when users hit “new normal note”  Search: search implementation  Toolbar: toolbar shown in the top of tiddler  Wizard: multi-step wizard framework

ForeCiteNote – Tiddler Represents micro-content blocks that make up FCNote  Title  Text  Timestamp  Tags/tasks  Fields : hash of arbitrary properties..

ForeCiteNote – Shadow Tiddler Used for configuration like stylesheets, site URL, etc Stored in separated place & treated in a special way Shadow tiddlers aren’t actually of class Tiddler.  Shadow tiddlers : maps from title to text  Regular tiddlers: maps from title to Tiddler Immutable, but can be overridden with regular tiddlers of the same name : fallback mechanism

ForeCiteNote - TiddlyWiki Hash of tiddlers, keyed on their titles function TiddlyWiki() { var tiddlers = {}; // Hashmap by name of tiddlers... this.clear = function() { tiddlers = {}; }; this.fetchTiddler = function(title) { return tiddlers[title]; }; this.deleteTiddler = function(title) { delete tiddlers[title]; }; this.addTiddler = function(tiddler) { tiddlers[tiddler.title] = tiddler; }; } Main function: manage tiddlers hash, such as add, fetch, remove …a tiddler in tiddlers hash

ForeCiteNote - Story Container of all visible tiddlers in FCNote, whose main properties is containerId and idPrefix In Story, a “tiddler” is a DOM element Each tiddler’s ID is idPrefix + title Story contains logic to display and render tiddlers Tiddlers are rendered using template (contained in shadow tiddlers)  PageTemplate: overall structure  NoteViewTemplate: show normal notes in view mode  NoteEditTempalte: show normal notes in edit mode  ViewTemplate: show research notes in view mode  EditTemplate: show research notes in edit mode

ForeCiteNote - Main Create new TiddlyWiki data store, populated from invisible “storeArea” div (using TiddlyWiki.prototype.loadFromDiv()) Create a second data store to hold shadow tiddlers, populated from invisible “shadowArea” div Create a new Story div Call several lifecycle event handlers as it loads (get notification every minute) Set up event propagation - certain tiddlers are notified when certain actions occur E.g.: {name: "SiteTitle", notify: refreshPageTitle}, Show the display (display header according to online/offline or sandbox mode)