Thunderbird/NextGeneration/Collections: Difference between revisions

Thunderbird/NextGeneration/Collections (view source)

Revision as of 23:19, 14 August 2017

2,555 bytes added , 14 August 2017

Sample code for 3 pane window

BenB

Confirmed users

591

edits

@@ Line 22: / Line 22: @@
 * [[Jetpack/Collections]]
 * [https://github.com/benbucksch/jscollection/ GitHub]
+== Example code for main window ==
+To illustrate the power of the concept, here is some example code for the 3-pane main window. This sample contains almost all code necessary to display the account list, folder list and message list, and to react to mouse clicks selecting items and loading them. Missing are the generic list widget implementation and the code to display an individual item.
+ function start() {
+   try {
+     gAccountListE = new Fastlist(E("account-list"));
+     gFolderListE = new Fastlist(E("folder-list"));
+     gMessageListE = new Fastlist(E("message-list"));
+     gAccountListE.showCollection(gAccounts);
+     gAccountSelectionObserver.selectedItem(null);
+     gFolderSelectionObserver.selectedItem(null);
+     gAccountListE.selectedCollection.registerObserver(gAccountSelectionObserver);
+     gFolderListE.selectedCollection.registerObserver(gFolderSelectionObserver);
+     gMessageListE.selectedCollection.registerObserver(gMessageSelectionObserver);
+   } catch (e) { showError(e); }
+ }
+ window.addEventListener("load", start, false);
+ var gAccountSelectionObserver = new SingleSelectionObserver();
+ gAccountSelectionObserver.selectedItem = function(account) {
+   gFolderListE.showCollection(account ? account.folders : new ArrayColl());
+ };
+ var gFolderSelectionObserver = new SingleSelectionObserver();
+ gFolderSelectionObserver.selectedItem = function(folder) {
+   gMessageListE.showCollection(folder ? folder.messages : new ArrayColl());
+ };
+ var gMessageSelectionObserver = new SingleSelectionObserver();
+ gMessageSelectionObserver.selectedItem = function(message) {
+   if (message) {
+     showMessage(message);
+   } else {
+     // show start page
+   }
+ };
+What's happening here is:
+* The accounts UI list widget is populated with the accounts list in the model.
+* The generic list widget automatically subscribes to changes in the accounts list, and will immediately display any new accounts being added or removed. The same is true for folders and messages.
+* The generic list widget also handles selections using mouse and keyboard.
+* We instantiate an SingleSelectionObserver for each of the UI list widgets, and let it listen to selections.
+* We define what should happen when the user selects an account, a folder and a message.
+** If the user selects an account, we display its folders in the folder list.
+** If the user select a folder, we display its messages in the message list.
+** If the user selects a message, we display the message.
+This is most the UI code necessary for basic message reading.