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.
|PasswordPing Ltd.'s Exposed Password and Credentials API Service||Apr 28, 2017|
|Graph Any Data with Cacti!||Apr 27, 2017|
|Be Kind, Buffer!||Apr 26, 2017|
|Preparing Data for Machine Learning||Apr 25, 2017|
|openHAB||Apr 24, 2017|
|Omesh Tickoo and Ravi Iyer's Making Sense of Sensors (Apress)||Apr 21, 2017|
- Graph Any Data with Cacti!
- Teradici's Cloud Access Platform: "Plug & Play" Cloud for the Enterprise
- The Weather Outside Is Frightful (Or Is It?)
- Simple Server Hardening
- Understanding Firewalld in Multi-Zone Configurations
- Gordon H. Williams' Making Things Smart (Maker Media, Inc.)
- IGEL Universal Desktop Converter
- Server Technology's HDOT Alt-Phase Switched POPS PDU
- From vs. to + for Microsoft and Linux