More fun code! Note today's new lessons -- the OM for tree items, rows, children, and cells; the use of CDATA for encapsulating javascript in XUL files, which are picky XML files, especially when you use a <; and slightly more situation-specific code.

   1 <?xml version="1.0"?>
   2 <?xml-stylesheet href="chrome://global/skin/" type"text/css" ?>
   3 <!DOCTYPE page SYSTEM "chrome://zoteroplay/locale/overlay.dtd">
   4 <page id="zoteroplaySidebar" title="&zoteroplaySidebar.label;"
   5          xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
   6 
   7 
   8 
   9 <script src="ff-sidebar.js"/>
  10 <script>
  11 <![CDATA[
  12         function hello()        {
  13                 alert('Hello from ff-sidebar.xul!!');
  14         }
  15         function OnTreeDoubleClick(event)       {
  16                 alert('doubleclick');
  17                 var objTree = document.getElementById('myTree');
  18                 var iIndex = 
  19                   objTree.treeBoxObject.getRowAt(event.clientX,event.clientY);
  20                 alert(iIndex);
  21         }
  22 
  23         function addSource(bIsNewSource)        {
  24                 // note that this is hard-coded to grab from the tree we make,
  25                 // using XUL, not javascript, below.  The only reason I'm doing
  26                 // this (instead of having it passed in as a function
  27                 // parameter) is so that we don't have to navigate some DOM
  28                 // from another file to call this function.  Just call from
  29                 // overlay.js or whatever and forget about sidebar refs.
  30                 var rootChild = null;
  31                 if (bIsNewSource)       {
  32                         rootChild = document.getElementById("newRoot");
  33                 }       else    {
  34                         rootChild = document.getElementById("dupeRoot");
  35                 }
  36                 
  37 
  38 
  39                 //========================================
  40                 // Create the parent row.
  41                 //========================================
  42                 // Now we're going to create a new TreeItem, which will also
  43                 // be a container for nested items.
  44                 // itemSourceHeader will have two items, one the field we're
  45                 // using to distinguish it (like Title, if it's got one) and
  46                 // the second is the value ("Moby-Dick; or, The Whale")
  47                 
  48                 var itemSourceParent = document.createElement("treeitem");
  49                 itemSourceParent.setAttribute("container","true");
  50                         // create a new row with two cells for the new
  51                         // item, which will be attached to the rootChild.
  52                         var rowSourceHeader = document.createElement("treerow");
  53 
  54                         var cellField = document.createElement("treecell");
  55                         cellField.setAttribute("label","Title:");
  56 
  57                         var cellFieldValue = document.createElement("treecell");
  58                         cellFieldValue
  59                           .setAttribute("label","Moby-Dick; or, The Whale");
  60 
  61                         rowSourceHeader.appendChild(cellField);
  62                         rowSourceHeader.appendChild(cellFieldValue);
  63                 // attach the header values for this item (now in a treerow) to
  64                 // the item that'll hold it.   That is, the source (like a
  65                 // book) parent has some title information to display.
  66                 itemSourceParent.appendChild(rowSourceHeader);
  67 
  68 
  69 
  70                 //========================================
  71                 // Now we create the nested row.
  72                 //========================================
  73                 var parentNested = document.createElement("treechildren");
  74 
  75                 // soon we'll put in actual value from an array
  76                 // rather than this dummy loop; this is just to
  77                 // show how to have more than one "child".
  78                 for (var j=1;j<=10;j++) {
  79                         var itemNested = document.createElement("treeitem");
  80                         var rowNested = document.createElement("treerow");
  81                         var cellNest1 = document.createElement("treecell");
  82                         cellNest1.setAttribute("label","Author:");
  83 
  84                         var cellNest2 = document.createElement("treecell");
  85                         cellNest2.setAttribute("label","Herman Melville");
  86 
  87                         rowNested.appendChild(cellNest1);
  88                         rowNested.appendChild(cellNest2);
  89 
  90 
  91                         itemNested.appendChild(rowNested);
  92                         parentNested.appendChild(itemNested);
  93                 }
  94                 // attach the detailed source information to
  95                 // the parent item.
  96                 itemSourceParent.appendChild(parentNested);
  97 
  98 
  99                 //========================================
 100                 // Now we add the parent item of all the
 101                 // source's detailed information to the 
 102                 // root child of the tree.
 103                 //========================================
 104                 rootChild.appendChild(itemSourceParent);
 105         }
 106 
 107         
 108 ]]>     
 109 </script>
 110 
 111 
 112 
 113   <vbox flex="1">
 114     <label value="&zoteroplaySidebar.label;" />
 115     <!-- put your GUI here -->
 116 
 117 
 118         <tree ondblclick="OnTreeDoubleClick(event);" id="myTree" flex="1">
 119                 <treecols>
 120                         <treecol id="firstname" label="Field" flex="5"
 121                                  primary="true"/>
 122                         <treecol id="lastname" label="Field Value" flex="5"/>
 123                 </treecols>
 124 
 125                 <treechildren>
 126                         <treeitem container="true" open="true">
 127                                 <treerow>
 128                                         <treecell label="Possible New Sources"/>
 129                                 </treerow>
 130                                 <treechildren id="newRoot">
 131                                 </treechildren>
 132 
 133                         </treeitem>
 134                         <treeitem container="true" open="true">
 135                                 <treerow>
 136                                         <treecell 
 137                                           label="Likely Duplicate Sources"/>
 138                                 </treerow>
 139                                 <treechildren id="dupeRoot">
 140                                         <treeitem>
 141                                                 <treerow>
 142                                                    <treecell 
 143                                                         label="Title:"/>
 144                                                    <treecell 
 145                                                         label="Already Got It"/>
 146                                                 </treerow>
 147                                         </treeitem>
 148                                 
 149                                 </treechildren>
 150 
 151                         </treeitem>
 152                 </treechildren>
 153         </tree>
 154   </vbox>
 155 </page>
 156


So this ends up looking like the following (after rows have been added to new and dupe sources several times):



It may also be useful to note that I made the sidebar open up apparently about as wide as Firefox is going to let it with this code in ff-sidebar.js:

   1 var mainWindow = null;
   2 
   3 function startup() {
   4         mainWindow = window.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
   5                 .getInterface(Components.interfaces.nsIWebNavigation)
   6                 .QueryInterface(Components.interfaces.nsIDocShellTreeItem)
   7                 .rootTreeItem
   8                 .QueryInterface(Components.interfaces.nsIInterfaceRequestor)
   9                 .getInterface(Components.interfaces.nsIDOMWindow);
  10 
  11         // this spacebar needs a lot of space to display the info
  12         // we're going to put there. Give it at least 400 pixels out of the box.
  13         // TODO: I'm setting a check to see if it's already 400, but it seems there's
  14         // an absolute max width for sidebars in Firefox by default which is less than
  15         // (or about) 400.
  16         if (mainWindow.document.getElementById("sidebar-box").width < 400)      {
  17                 mainWindow.document.getElementById("sidebar-box").width = 400;  
  18         }
  19   // Sidebar is loaded and mainwindow is ready                   
  20 }
  21 
  22 function shutdown() {
  23   // Sidebar is unloading
  24 }
  25 
  26 window.addEventListener("load", startup, false);
  27 window.addEventListener("unload", shutdown, false);
  28

Labels: , , ,