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.
|September 2015 Issue of Linux Journal: HOW-TOs||Sep 01, 2015|
|September 2015 Video Preview||Sep 01, 2015|
|Using tshark to Watch and Inspect Network Traffic||Aug 31, 2015|
|Where's That Pesky Hidden Word?||Aug 28, 2015|
|A Project to Guarantee Better Security for Open-Source Projects||Aug 27, 2015|
|Concerning Containers' Connections: on Docker Networking||Aug 26, 2015|
- Optimization in GCC
- Using tshark to Watch and Inspect Network Traffic
- September 2015 Issue of Linux Journal: HOW-TOs
- Problems with Ubuntu's Software Center and How Canonical Plans to Fix Them
- Concerning Containers' Connections: on Docker Networking
- A Project to Guarantee Better Security for Open-Source Projects
- Firefox Security Exploit Targets Linux Users and Web Developers
- Where's That Pesky Hidden Word?
- My Network Go-Bag
- Doing Astronomy with Python