A GUI for ps(1) Built with Mozilla
Listing 4. XUL Code for Simple <template> Based Content
<?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <!DOCTYPE window> <window xmlns="http://www.mozilla.org/keymaster/ ↪gatekeeper/there.is.only.xul"> <description value="Before Template"/> <vbox datasources="trivial.rdf" ref="urn:example:items" containment="http://www.example.org/TestData#items" > <template> <rule> <conditions> <content uri="?uri"/> <member container="?uri" child="?note"/> </conditions> <action> <hbox uri="?note"> <description value="Repeated content"/> <description value="?note"/> </hbox> </action> </rule> </template> </vbox> <description value="After Template"/> </window>
An XUL template is like a report template and not like a C++ template. It's the basis for repeated sets of data. The template starts with the <vbox> tag that has a datasources= attribute. The <action> part of the <template> is the content to be repeated for every record that the <conditions> part identifies in the trivial.rdf file. If you're an intermediate at make(1) or SQL or have touched Lisp, Scheme or Prolog, you should be able to grasp how the template system works. Listing 5 shows the trivial.rdf file that drives the display of Figure 2.
Listing 5. Trivial RDF File Matching Listing 4 Template
<?xml version="1.0"?> <RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" > <Description about="urn:example:root"> <T:items> <Seq about="urn:example:items"> <li resource="urn:example:item:A"/> <li resource="urn:example:item:B"/> </Seq> </T:items> </Description> </RDF>
If this file is modified, Figure 2 can change even though Listing 4 hasn't been altered. That's a data-driven arrangement. This file is RDF, one of the harder W3C standards. Basically, it's a graph of nodes, each node holding three items of data. The items are called subject, predicate (or property) and object. Simple graphs are trees, so Listing 5 is a tree. Combine the <hbox> in Listing 4 with the <li> tags in Listing 5, and the result appears as illustrated in Figure 2. This is somewhat like an SQL join or join(1). For now, notice that the ref= attribute in Listing 4 matches the <Seq> tag in Listing 5. This is how the two are matched up in Mozilla's template processing logic. Mozilla support for RDF is basic rather than strict, so nearly all the URIs and URLs can be made up on the spot, as though they were variables or constants. That's done throughout this article. Try adding another <li> tag to Listing 5; restart Mozilla and display the page again.
If the <tree> and <template> tags are put together, the final XUL document is as shown in Figure 3 and Listing 6.
Listing 6. Final XUL for a Tree-Based View of ps Data
<?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> <!DOCTYPE window> <window xmlns="http://www.mozilla.org/keymaster/ ↪gatekeeper/there.is.only.xul" title="Process Tree" flex="1"> <script src="tree.js"/> <vbox flex="1"> <description> Snapshot of processes currently running </description> <tree id="proc-tree" flex="1" datasources="rdf:null" ref="http://www.example.org/ProcData#ProcList" containment="http://www.example.org/ProcData#child" > <treecols> <treecol id="pid" primary="true" label="PID" minwidth="75"/> <splitter class="tree-splitter"/> <treecol id="pcpu" label="%CPU" minwidth="40"/> <splitter class="tree-splitter"/> <treecol id="time" label="TIME" minwidth="40"/> <splitter class="tree-splitter"/> <treecol id="vsz" label="VSZ" minwidth="40"/> <splitter class="tree-splitter"/> <treecol id="group" label="GROUP" minwidth="40"/> <splitter class="tree-splitter"/> <treecol id="nice" label="NI" minwidth="40"/> <splitter class="tree-splitter"/> <treecol id="user" label="USER" minwidth="40"/> <splitter class="tree-splitter"/> <treecol flex="1" id="args" label="COMMAND" minwidth="40"/> </treecols> <template> <treechildren> <treeitem open="true" uri="rdf:*"> <treerow> <treecell label="rdf:http://www.example.org/ProcData#pid"/> <treecell label="rdf:http://www.example.org/ProcData#pcpu"/> <treecell label="rdf:http://www.example.org/ProcData#time"/> <treecell label="rdf:http://www.example.org/ProcData#vsz"/> <treecell label="rdf:http://www.example.org/ProcData#group"/> <treecell label="rdf:http://www.example.org/ProcData#nice"/> <treecell label="rdf:http://www.example.org/ProcData#user"/> <treecell label="rdf:http://www.example.org/ProcData#args"/> </treerow> </treeitem> </treechildren> </template> </tree> </vbox> </window>
Again, you can spot the datasource= and ref= attributes and the <template> tag. The URLs beginning with rdf: indicate spots where RDF data should be put into the template. In the earlier example, variables started with a question mark. Two syntaxes are available to mark such spots. Not surprisingly, there's one such piece of data for every column and every row.
The <splitter> tag is simply friendly decoration; it allows the user to resize the columns. Doing so aids readability, as do the minwidth= and flex= attributes. Figure 3 shows how the displayed process hierarchy naturally fills the tree.
Webinar: 8 Signs You’re Beyond Cron
11am CDT, April 29th
Join Linux Journal and Pat Cameron, Director of Automation Technology at HelpSystems, as they discuss the eight primary advantages of moving beyond cron job scheduling. In this webinar, you’ll learn about integrating cron with an enterprise scheduler.Join us!
- Picking Out the Nouns
- Tips for Optimizing Linux Memory Usage
- "No Reboot" Kernel Patching - And Why You Should Care
- DevOps: Better Than the Sum of Its Parts
- Return of the Mac
- Android Candy: Intercoms
- Drupageddon: SQL Injection, Database Abstraction and Hundreds of Thousands of Web Sites
- Non-Linux FOSS: .NET?
- Consent That Goes Both Ways