seed r563 - in trunk/doc: . modules tutorial-standalone
- From: hortont svn gnome org
- To: svn-commits-list gnome org
- Subject: seed r563 - in trunk/doc: . modules tutorial-standalone
- Date: Sat, 27 Dec 2008 23:39:39 +0000 (UTC)
Author: hortont
Date: Sat Dec 27 23:39:39 2008
New Revision: 563
URL: http://svn.gnome.org/viewvc/seed?rev=563&view=rev
Log:
Syntax highlighting for documentation!!
It's not the prettiest, but it's better than nothing...
Added:
trunk/doc/sh.css
trunk/doc/sh.js
trunk/doc/sh_js.js
Modified:
trunk/doc/modules/readline.html
trunk/doc/runtime.html
trunk/doc/tutorial-standalone/tutorial.html
Modified: trunk/doc/modules/readline.html
==============================================================================
--- trunk/doc/modules/readline.html (original)
+++ trunk/doc/modules/readline.html Sat Dec 27 23:39:39 2008
@@ -5,15 +5,18 @@
<title>Seed readline Module Documentation</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="../style.css" type="text/css" charset="utf-8" />
+ <script type="text/javascript" src="../sh.js"></script>
+ <script type="text/javascript" src="../sh_js.js"></script>
+ <link type="text/css" rel="stylesheet" href="../sh.css" />
</head>
-<body>
+<body onload="sh_highlightDocument();">
<div id="header">Seed <i>readline</i> Module</div>
<div id="subheader">v.0.3</div>
<div class="section"><b>Usage</b></div>
<p>
In order to use functions from the readline module, you must first import it:
</p>
-<pre>
+<pre class="sh_javascript">
Seed.import_namespace("readline");
</pre>
<div class="section"><b>readline.readline</b>(prompt)</div>
@@ -21,7 +24,7 @@
<p>
Uses the GNU Readline library to display a prompt (using the <i>prompt</i> argument) and then wait for input from the user. The readline prompt provides history (using the up and down arrow keys) within a single Seed process.
</p>
-<pre>
+<pre class="sh_javascript">
var input = readline.readline("prompt> ");
Seed.print(input);
</pre>
@@ -29,7 +32,7 @@
<p>
Binds <i>key</i>, any valid ASCII character, to <i>function</i>. If the given key is then pressed while at a <b>readline.readline</b> prompt, the passed function will be called.
</p>
-<pre>
+<pre class="sh_javascript">
readline.readline_bind("q", function () { Seed.quit() });
var num = readline.readline("Enter a number, or q to quit:");
readline.print(num);
Modified: trunk/doc/runtime.html
==============================================================================
--- trunk/doc/runtime.html (original)
+++ trunk/doc/runtime.html Sat Dec 27 23:39:39 2008
@@ -5,29 +5,32 @@
<title>Seed Runtime Documentation</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />
+ <script type="text/javascript" src="sh.js"></script>
+ <script type="text/javascript" src="sh_js.js"></script>
+ <link type="text/css" rel="stylesheet" href="sh.css" />
</head>
-<body>
+<body onload="sh_highlightDocument();">
<div id="header">Seed Runtime</div>
<div id="subheader">v.0.3</div>
<div class="section"><b>Seed.import_namespace</b>(namespace, <i>version</i>)</div>
<p>
Imports functions and constructors from the given gobject-introspection <i>namespace</i>. The optional <i>version</i> parameter forces a particular version, and will throw an exception if the typelib for that version is not installed; if it is omitted, the latest version is loaded.
</p>
-<pre>
+<pre class="sh_javascript">
Seed.import_namespace("Gtk", "2.0");
</pre>
<div class="section"><b>Seed.include</b>(file)</div>
<p>
Evaluates a Javascript <i>file</i> as if it were included in the file at the point include is called.
</p>
-<pre>
+<pre class="sh_javascript">
Seed.include("tabview.js");
</pre>
<div class="section"><b>Seed.print</b>(value)</div>
<p>
Prints, to standard output, a representation of <i>value</i>. Number types are printed as floating-point values (with 6 decimal places); strings are printed as-is; objects are printed as <code>[object <i>type</i>]</code>.
</p>
-<pre>
+<pre class="sh_javascript">
Seed.print(5);
Seed.print("This is a test!".replace(" is ", " was "));
@@ -42,7 +45,7 @@
<p>
<code>sprintf</code> returns the string, instead of printing it.
</p>
-<pre>
+<pre class="sh_javascript">
Seed.printf("A number: %d\n", 5);
Seed.printf("One third is approximately %.3f\n", 1/3);
Seed.printf("%d %s %d\n", 2, " is not ", 5);
@@ -55,7 +58,7 @@
<p>
Examines a segment of Javascript, looking for syntax errors. If errors are found, an exception is thrown, which can be caught with a try/catch block. You can examine the location of the syntax error with the <i>line</i> property of the returned exception.
</p>
-<pre>
+<pre class="sh_javascript">
try
{
Seed.check_syntax("234[asdf");
@@ -70,7 +73,7 @@
<p>
Creates a new process which is an exact copy of the current one, starting from the next instruction in both processes. It works just as <a href="http://www.opengroup.org/onlinepubs/000095399/functions/fork.html";>POSIX fork</a> should.
</p>
-<pre>
+<pre class="sh_javascript">
var pid = Seed.fork();
if(pid)
@@ -92,7 +95,7 @@
<p>
Returns an object containing information about the function, its arguments, etc. This will eventually support introspection of a wider variety of Javascript types.
</p>
-<pre>
+<pre class="sh_javascript">
proto = Seed.prototype(Gtk.Window);
method = Seed.introspect(proto.translate_coordinates);
@@ -105,7 +108,7 @@
<p>
Returns a string representing the entire contents of <i>object</i> in a pretty-printed fashion, like that of JSON.
</p>
-<pre>
+<pre class="sh_javascript">
proto = Seed.prototype(Gtk.Window);
method = Seed.introspect(proto.translate_coordinates);
Seed.print(Seed.stringify(method));
@@ -123,7 +126,7 @@
<p>
Connects <i>function</i> to the signal, <i>signame</i>, on <i>object</i>. Any GObject signal will work. If present, user_data is passed as the last argument to the callback.
</p>
-<pre>
+<pre class="sh_javascript">
function button_clicked()
{
Seed.print("You pushed me!!");
@@ -135,7 +138,7 @@
<p>
The second form is useful if you want to connect to detailed signals; for example, <b>notify::</b> signals on an object's properties:
</p>
-<pre>
+<pre class="sh_javascript">
function handle_opacity_change(obj, gobject, user_data)
{
Seed.print("Window " + obj + "'s opacity was changed!");
@@ -158,7 +161,7 @@
<li><b>ParseError</b> - a parsing error was thrown from JavaScriptCore (make sure you close all of your brackets!)</li>
</ul>
<p>Exceptions are caught with the <code>try/catch</code> construct:</p>
-<pre>
+<pre class="sh_javascript">
try
{
var window = new Gtk.Window();
@@ -180,7 +183,7 @@
<p>
Just as in Javascript, you can throw an exception manually with the <b>throw</b> function, passing it an object - either a new object, with the properties listed above (for consistency), or an arbitrary object:
</p>
-<pre>
+<pre class="sh_javascript">
try
{
if(!http.connect("http://google.com";))
@@ -199,7 +202,7 @@
<p>
To implement a new GType, an object describing the type is required.
</p>
-<pre>
+<pre class="sh_javascript">
NewType = {
parent: ParentTypeConstructor,
name: "NewTypeName",
@@ -214,7 +217,7 @@
<p>
Indicates that the new type derives from ParentType, i.e. Gtk.Window, with name "NewTypeName". The class_init function is called when the class comes in to existence, and allows you to add to the prototype of objects constructed by the type. The instance_init function is called on the creation of each instance, with the "this" variable set to the new instance. An example type:
</p>
-<pre>
+<pre class="sh_javascript">
HelloLabel = new GType({
parent: Gtk.Label,
name: "HelloLabel",
@@ -233,7 +236,7 @@
});
</pre>
<p> Now to create an instance of the object:</p>
-<pre>
+<pre class="sh_javascript">
label = new HelloLabel();
box.pack_start(label);
label.show();
@@ -246,7 +249,7 @@
<p>
<b>emit</b> provides the ability to arbitrarily emit any GObject signal, thus calling all of the functions which are connected to it. Any arguments passed to <b>emit</b> are passed on to the callback function.
</p>
-<pre>
+<pre class="sh_javascript">
win = new Gtk.Window();
win.signal.close.connect(Gtk.main_quit);
win.signal.close.emit();
@@ -266,7 +269,7 @@
<p>
For example:
</p>
-<pre>
+<pre class="sh_javascript">
HelloWindow = new GType({
parent: Gtk.Window.type,
name: "HelloWindow",
Added: trunk/doc/sh.css
==============================================================================
--- (empty file)
+++ trunk/doc/sh.css Sat Dec 27 23:39:39 2008
@@ -0,0 +1,66 @@
+pre.sh_sourceCode {
+ background-color: white;
+ color: black;
+ font-style: normal;
+ font-weight: normal;
+}
+
+pre.sh_sourceCode .sh_keyword { color: blue; font-weight: bold; } /* language keywords */
+pre.sh_sourceCode .sh_type { color: darkgreen; } /* basic types */
+pre.sh_sourceCode .sh_usertype { color: teal; } /* user defined types */
+pre.sh_sourceCode .sh_string { color: red; font-family: monospace; } /* strings and chars */
+pre.sh_sourceCode .sh_regexp { color: orange; font-family: monospace; } /* regular expressions */
+pre.sh_sourceCode .sh_specialchar { color: pink; font-family: monospace; } /* e.g., \n, \t, \\ */
+pre.sh_sourceCode .sh_comment { color: brown; font-style: italic; } /* comments */
+pre.sh_sourceCode .sh_number { color: purple; } /* literal numbers */
+pre.sh_sourceCode .sh_preproc { color: darkblue; font-weight: bold; } /* e.g., #include, import */
+pre.sh_sourceCode .sh_symbol { color: darkred; } /* e.g., <, >, + */
+pre.sh_sourceCode .sh_function { color: black; font-weight: bold; } /* function calls and declarations */
+pre.sh_sourceCode .sh_cbracket { color: red; } /* block brackets (e.g., {, }) */
+pre.sh_sourceCode .sh_todo { font-weight: bold; background-color: cyan; } /* TODO and FIXME */
+
+/* Predefined variables and functions (for instance glsl) */
+pre.sh_sourceCode .sh_predef_var { color: darkblue; }
+pre.sh_sourceCode .sh_predef_func { color: darkblue; font-weight: bold; }
+
+/* for OOP */
+pre.sh_sourceCode .sh_classname { color: teal; }
+
+/* line numbers (not yet implemented) */
+pre.sh_sourceCode .sh_linenum { color: black; font-family: monospace; }
+
+/* Internet related */
+pre.sh_sourceCode .sh_url { color: blue; text-decoration: underline; font-family: monospace; }
+
+/* for ChangeLog and Log files */
+pre.sh_sourceCode .sh_date { color: blue; font-weight: bold; }
+pre.sh_sourceCode .sh_time, pre.sh_sourceCode .sh_file { color: darkblue; font-weight: bold; }
+pre.sh_sourceCode .sh_ip, pre.sh_sourceCode .sh_name { color: darkgreen; }
+
+/* for Prolog, Perl... */
+pre.sh_sourceCode .sh_variable { color: darkgreen; }
+
+/* for LaTeX */
+pre.sh_sourceCode .sh_italics { color: darkgreen; font-style: italic; }
+pre.sh_sourceCode .sh_bold { color: darkgreen; font-weight: bold; }
+pre.sh_sourceCode .sh_underline { color: darkgreen; text-decoration: underline; }
+pre.sh_sourceCode .sh_fixed { color: green; font-family: monospace; }
+pre.sh_sourceCode .sh_argument { color: darkgreen; }
+pre.sh_sourceCode .sh_optionalargument { color: purple; }
+pre.sh_sourceCode .sh_math { color: orange; }
+pre.sh_sourceCode .sh_bibtex { color: blue; }
+
+/* for diffs */
+pre.sh_sourceCode .sh_oldfile { color: orange; }
+pre.sh_sourceCode .sh_newfile { color: darkgreen; }
+pre.sh_sourceCode .sh_difflines { color: blue; }
+
+/* for css */
+pre.sh_sourceCode .sh_selector { color: purple; }
+pre.sh_sourceCode .sh_property { color: blue; }
+pre.sh_sourceCode .sh_value { color: darkgreen; font-style: italic; }
+
+/* other */
+pre.sh_sourceCode .sh_section { color: black; font-weight: bold; }
+pre.sh_sourceCode .sh_paren { color: red; }
+pre.sh_sourceCode .sh_attribute { color: darkgreen; }
Added: trunk/doc/sh.js
==============================================================================
--- (empty file)
+++ trunk/doc/sh.js Sat Dec 27 23:39:39 2008
@@ -0,0 +1,4 @@
+/* Copyright (C) 2007, 2008 gnombat users sourceforge net */
+/* License: http://shjs.sourceforge.net/doc/gplv3.html */
+
+if(!this.sh_languages){this.sh_languages={}}var sh_requests={};function sh_isEmailAddress(a){if(/^mailto:/.test(a)){return false}return a.indexOf("@")!==-1}function sh_setHref(b,c,d){var a=d.substring(b[c-2].pos,b[c-1].pos);if(a.length>=2&&a.charAt(0)==="<"&&a.charAt(a.length-1)===">"){a=a.substr(1,a.length-2)}if(sh_isEmailAddress(a)){a="mailto:"+a}b[c-2].node.href=a}function sh_konquerorExec(b){var a=[""];a.index=b.length;a.input=b;return a}function sh_highlightString(B,o){if(/Konqueror/.test(navigator.userAgent)){if(!o.konquered){for(var F=0;F<o.length;F++){for(var H=0;H<o[F].length;H++){var G=o[F][H][0];if(G.source==="$"){G.exec=sh_konquerorExec}}}o.konquered=true}}var N=document.createElement("a");var q=document.createElement("span");var A=[];var j=0;var n=[];var C=0;var k=null;var x=function(i,a){var p=i.length;if(p===0){return}if(!a){var Q=n.length;if(Q!==0){var r=n[Q-1];if(!r[3]){a=r[1]}}}if(k!==a){if(k){A[j++]={pos:C};if(k==="sh_url"){sh_setHref(A,j,B)}}if(a){var P;i
f(a==="sh_url"){P=N.cloneNode(false)}else{P=q.cloneNode(false)}P.className=a;A[j++]={node:P,pos:C}}}C+=p;k=a};var t=/\r\n|\r|\n/g;t.lastIndex=0;var d=B.length;while(C<d){var v=C;var l;var w;var h=t.exec(B);if(h===null){l=d;w=d}else{l=h.index;w=t.lastIndex}var g=B.substring(v,l);var M=[];for(;;){var I=C-v;var D;var y=n.length;if(y===0){D=0}else{D=n[y-1][2]}var O=o[D];var z=O.length;var m=M[D];if(!m){m=M[D]=[]}var E=null;var u=-1;for(var K=0;K<z;K++){var f;if(K<m.length&&(m[K]===null||I<=m[K].index)){f=m[K]}else{var c=O[K][0];c.lastIndex=I;f=c.exec(g);m[K]=f}if(f!==null&&(E===null||f.index<E.index)){E=f;u=K;if(f.index===I){break}}}if(E===null){x(g.substring(I),null);break}else{if(E.index>I){x(g.substring(I,E.index),null)}var e=O[u];var J=e[1];var b;if(J instanceof Array){for(var L=0;L<J.length;L++){b=E[L+1];x(b,J[L])}}else{b=E[0];x(b,J)}switch(e[2]){case -1:break;case -2:n.pop();break;case -3:n.length=0;break;default:n.push(e);break}}}if(k){A[j++]={pos:C};if(k==="sh_url"){sh_s
etHref(A,j,B)}k=null}C=w}return A}function sh_getClasses(d){var a=[];var b=d.className;if(b&&b.length>0){var e=b.split(" ");for(var c=0;c<e.length;c++){if(e[c].length>0){a.push(e[c])}}}return a}function sh_addClass(c,a){var d=sh_getClasses(c);for(var b=0;b<d.length;b++){if(a.toLowerCase()===d[b].toLowerCase()){return}}d.push(a);c.className=d.join(" ")}function sh_extractTagsFromNodeList(c,a){var f=c.length;for(var d=0;d<f;d++){var e=c.item(d);switch(e.nodeType){case 1:if(e.nodeName.toLowerCase()==="br"){var b;if(/MSIE/.test(navigator.userAgent)){b="\r"}else{b="\n"}a.text.push(b);a.pos++}else{a.tags.push({node:e.cloneNode(false),pos:a.pos});sh_extractTagsFromNodeList(e.childNodes,a);a.tags.push({pos:a.pos})}break;case 3:case 4:a.text.push(e.data);a.pos+=e.length;break}}}function sh_extractTags(c,b){var a={};a.text=[];a.tags=b;a.pos=0;sh_extractTagsFromNodeList(c.childNodes,a);return a.text.join("")}function sh_mergeTags(d,f){var a=d.length;if(a===0){return f}var c=f.length;if
(c===0){return d}var i=[];var e=0;var b=0;while(e<a&&b<c){var h=d[e];var g=f[b];if(h.pos<=g.pos){i.push(h);e++}else{i.push(g);if(f[b+1].pos<=h.pos){b++;i.push(f[b]);b++}else{i.push({pos:h.pos});f[b]={node:g.node.cloneNode(false),pos:h.pos}}}}while(e<a){i.push(d[e]);e++}while(b<c){i.push(f[b]);b++}return i}function sh_insertTags(k,h){var g=document;var l=document.createDocumentFragment();var e=0;var d=k.length;var b=0;var j=h.length;var c=l;while(b<j||e<d){var i;var a;if(e<d){i=k[e];a=i.pos}else{a=j}if(a<=b){if(i.node){var f=i.node;c.appendChild(f);c=f}else{c=c.parentNode}e++}else{c.appendChild(g.createTextNode(h.substring(b,a)));b=a}}return l}function sh_highlightElement(d,g){sh_addClass(d,"sh_sourceCode");var c=[];var e=sh_extractTags(d,c);var f=sh_highlightString(e,g);var b=sh_mergeTags(c,f);var a=sh_insertTags(b,e);while(d.hasChildNodes()){d.removeChild(d.firstChild)}d.appendChild(a)}function sh_getXMLHttpRequest(){if(window.ActiveXObject){return new ActiveXObject("Msxml2
.XMLHTTP")}else{if(window.XMLHttpRequest){return new XMLHttpRequest()}}throw"No XMLHttpRequest implementation available"}function sh_load(language,element,prefix,suffix){if(language in sh_requests){sh_requests[language].push(element);return}sh_requests[language]=[element];var request=sh_getXMLHttpRequest();var url=prefix+"sh_"+language+suffix;request.open("GET",url,true);request.onreadystatechange=function(){if(request.readyState===4){try{if(!request.status||request.status===200){eval(request.responseText);var elements=sh_requests[language];for(var i=0;i<elements.length;i++){sh_highlightElement(elements[i],sh_languages[language])}}else{throw"HTTP error: status "+request.status}}finally{request=null}}};request.send(null)}function sh_highlightDocument(g,k){var b=document.getElementsByTagName("pre");for(var e=0;e<b.length;e++){var f=b.item(e);var a=sh_getClasses(f);for(var c=0;c<a.length;c++){var h=a[c].toLowerCase();if(h==="sh_sourcecode"){continue}if(h.substr(0,3)==="sh_"){va
r d=h.substring(3);if(d in sh_languages){sh_highlightElement(f,sh_languages[d])}else{if(typeof(g)==="string"&&typeof(k)==="string"){sh_load(d,f,g,k)}else{throw'Found <pre> element with class="'+h+'", but no such language exists'}}break}}}};
\ No newline at end of file
Added: trunk/doc/sh_js.js
==============================================================================
--- (empty file)
+++ trunk/doc/sh_js.js Sat Dec 27 23:39:39 2008
@@ -0,0 +1,347 @@
+if (! this.sh_languages) {
+ this.sh_languages = {};
+}
+sh_languages['javascript'] = [
+ [
+ [
+ /\/\/\//g,
+ 'sh_comment',
+ 1
+ ],
+ [
+ /\/\//g,
+ 'sh_comment',
+ 7
+ ],
+ [
+ /\/\*\*/g,
+ 'sh_comment',
+ 8
+ ],
+ [
+ /\/\*/g,
+ 'sh_comment',
+ 9
+ ],
+ [
+ /\b(?:abstract|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|false|final|finally|for|function|goto|if|implements|in|instanceof|interface|native|new|null|private|protected|prototype|public|return|static|super|switch|synchronized|throw|throws|this|transient|true|try|typeof|var|volatile|while|with)\b/g,
+ 'sh_keyword',
+ -1
+ ],
+ [
+ /(\+\+|--|\)|\])(\s*)(\/=?(?![*\/]))/g,
+ ['sh_symbol', 'sh_normal', 'sh_symbol'],
+ -1
+ ],
+ [
+ /(0x[A-Fa-f0-9]+|(?:[\d]*\.)?[\d]+(?:[eE][+-]?[\d]+)?)(\s*)(\/(?![*\/]))/g,
+ ['sh_number', 'sh_normal', 'sh_symbol'],
+ -1
+ ],
+ [
+ /([A-Za-z$_][A-Za-z0-9$_]*\s*)(\/=?(?![*\/]))/g,
+ ['sh_normal', 'sh_symbol'],
+ -1
+ ],
+ [
+ /\/(?:\\.|[^*\\\/])(?:\\.|[^\\\/])*\/[gim]*/g,
+ 'sh_regexp',
+ -1
+ ],
+ [
+ /\b[+-]?(?:(?:0x[A-Fa-f0-9]+)|(?:(?:[\d]*\.)?[\d]+(?:[eE][+-]?[\d]+)?))u?(?:(?:int(?:8|16|32|64))|L)?\b/g,
+ 'sh_number',
+ -1
+ ],
+ [
+ /"/g,
+ 'sh_string',
+ 10
+ ],
+ [
+ /'/g,
+ 'sh_string',
+ 11
+ ],
+ [
+ /~|!|%|\^|\*|\(|\)|-|\+|=|\[|\]|\\|:|;|,|\.|\/|\?|&|<|>|\|/g,
+ 'sh_symbol',
+ -1
+ ],
+ [
+ /\{|\}/g,
+ 'sh_cbracket',
+ -1
+ ],
+ [
+ /\b(?:Math|Infinity|NaN|undefined|arguments|Seed|signal|argv|argc|Gtk|GObject|GLib|WebKit)\b/g,
+ 'sh_predef_var',
+ -1
+ ],
+ [
+ /\b(?:printf|sprintf|connect|Array|Boolean|Date|Error|EvalError|Function|Number|Object|RangeError|ReferenceError|RegExp|String|SyntaxError|TypeError|URIError|decodeURI|decodeURIComponent|encodeURI|encodeURIComponent|eval|isFinite|isNaN|parseFloat|parseInt)\b/g,
+ 'sh_predef_func',
+ -1
+ ],
+ [
+ /(?:[A-Za-z]|_)[A-Za-z0-9_]*(?=[ \t]*\()/g,
+ 'sh_function',
+ -1
+ ]
+ ],
+ [
+ [
+ /$/g,
+ null,
+ -2
+ ],
+ [
+ /(?:<?)[A-Za-z0-9_\.\/\-_~]+ [A-Za-z0-9_\ \/\-_~]+(?:>?)|(?:<?)[A-Za-z0-9_]+:\/\/[A-Za-z0-9_\.\/\-_~]+(?:>?)/g,
+ 'sh_url',
+ -1
+ ],
+ [
+ /<\?xml/g,
+ 'sh_preproc',
+ 2,
+ 1
+ ],
+ [
+ /<!DOCTYPE/g,
+ 'sh_preproc',
+ 4,
+ 1
+ ],
+ [
+ /<!--/g,
+ 'sh_comment',
+ 5
+ ],
+ [
+ /<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)(?:\/)?>/g,
+ 'sh_keyword',
+ -1
+ ],
+ [
+ /<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)/g,
+ 'sh_keyword',
+ 6,
+ 1
+ ],
+ [
+ /&(?:[A-Za-z0-9]+);/g,
+ 'sh_preproc',
+ -1
+ ],
+ [
+ /<(?:\/)?[A-Za-z][A-Za-z0-9]*(?:\/)?>/g,
+ 'sh_keyword',
+ -1
+ ],
+ [
+ /<(?:\/)?[A-Za-z][A-Za-z0-9]*/g,
+ 'sh_keyword',
+ 6,
+ 1
+ ],
+ [
+ /@[A-Za-z]+/g,
+ 'sh_type',
+ -1
+ ],
+ [
+ /(?:TODO|FIXME|BUG)(?:[:]?)/g,
+ 'sh_todo',
+ -1
+ ]
+ ],
+ [
+ [
+ /\?>/g,
+ 'sh_preproc',
+ -2
+ ],
+ [
+ /([^=" \t>]+)([ \t]*)(=?)/g,
+ ['sh_type', 'sh_normal', 'sh_symbol'],
+ -1
+ ],
+ [
+ /"/g,
+ 'sh_string',
+ 3
+ ]
+ ],
+ [
+ [
+ /\\(?:\\|")/g,
+ null,
+ -1
+ ],
+ [
+ /"/g,
+ 'sh_string',
+ -2
+ ]
+ ],
+ [
+ [
+ />/g,
+ 'sh_preproc',
+ -2
+ ],
+ [
+ /([^=" \t>]+)([ \t]*)(=?)/g,
+ ['sh_type', 'sh_normal', 'sh_symbol'],
+ -1
+ ],
+ [
+ /"/g,
+ 'sh_string',
+ 3
+ ]
+ ],
+ [
+ [
+ /-->/g,
+ 'sh_comment',
+ -2
+ ],
+ [
+ /<!--/g,
+ 'sh_comment',
+ 5
+ ]
+ ],
+ [
+ [
+ /(?:\/)?>/g,
+ 'sh_keyword',
+ -2
+ ],
+ [
+ /([^=" \t>]+)([ \t]*)(=?)/g,
+ ['sh_type', 'sh_normal', 'sh_symbol'],
+ -1
+ ],
+ [
+ /"/g,
+ 'sh_string',
+ 3
+ ]
+ ],
+ [
+ [
+ /$/g,
+ null,
+ -2
+ ]
+ ],
+ [
+ [
+ /\*\//g,
+ 'sh_comment',
+ -2
+ ],
+ [
+ /(?:<?)[A-Za-z0-9_\.\/\-_~]+ [A-Za-z0-9_\ \/\-_~]+(?:>?)|(?:<?)[A-Za-z0-9_]+:\/\/[A-Za-z0-9_\.\/\-_~]+(?:>?)/g,
+ 'sh_url',
+ -1
+ ],
+ [
+ /<\?xml/g,
+ 'sh_preproc',
+ 2,
+ 1
+ ],
+ [
+ /<!DOCTYPE/g,
+ 'sh_preproc',
+ 4,
+ 1
+ ],
+ [
+ /<!--/g,
+ 'sh_comment',
+ 5
+ ],
+ [
+ /<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)(?:\/)?>/g,
+ 'sh_keyword',
+ -1
+ ],
+ [
+ /<(?:\/)?[A-Za-z](?:[A-Za-z0-9_:.-]*)/g,
+ 'sh_keyword',
+ 6,
+ 1
+ ],
+ [
+ /&(?:[A-Za-z0-9]+);/g,
+ 'sh_preproc',
+ -1
+ ],
+ [
+ /<(?:\/)?[A-Za-z][A-Za-z0-9]*(?:\/)?>/g,
+ 'sh_keyword',
+ -1
+ ],
+ [
+ /<(?:\/)?[A-Za-z][A-Za-z0-9]*/g,
+ 'sh_keyword',
+ 6,
+ 1
+ ],
+ [
+ /@[A-Za-z]+/g,
+ 'sh_type',
+ -1
+ ],
+ [
+ /(?:TODO|FIXME|BUG)(?:[:]?)/g,
+ 'sh_todo',
+ -1
+ ]
+ ],
+ [
+ [
+ /\*\//g,
+ 'sh_comment',
+ -2
+ ],
+ [
+ /(?:<?)[A-Za-z0-9_\.\/\-_~]+ [A-Za-z0-9_\ \/\-_~]+(?:>?)|(?:<?)[A-Za-z0-9_]+:\/\/[A-Za-z0-9_\.\/\-_~]+(?:>?)/g,
+ 'sh_url',
+ -1
+ ],
+ [
+ /(?:TODO|FIXME|BUG)(?:[:]?)/g,
+ 'sh_todo',
+ -1
+ ]
+ ],
+ [
+ [
+ /"/g,
+ 'sh_string',
+ -2
+ ],
+ [
+ /\\./g,
+ 'sh_specialchar',
+ -1
+ ]
+ ],
+ [
+ [
+ /'/g,
+ 'sh_string',
+ -2
+ ],
+ [
+ /\\./g,
+ 'sh_specialchar',
+ -1
+ ]
+ ]
+];
Modified: trunk/doc/tutorial-standalone/tutorial.html
==============================================================================
--- trunk/doc/tutorial-standalone/tutorial.html (original)
+++ trunk/doc/tutorial-standalone/tutorial.html Sat Dec 27 23:39:39 2008
@@ -5,6 +5,9 @@
<title>Seed Tutorial : Standalone</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="../style.css" type="text/css" charset="utf-8" />
+ <script type="text/javascript" src="../sh.js"></script>
+ <script type="text/javascript" src="../sh_js.js"></script>
+ <link type="text/css" rel="stylesheet" href="../sh.css" />
<style type="text/css">
div.section
{
@@ -13,7 +16,7 @@
</style>
</head>
-<body>
+<body onload="sh_highlightDocument();">
<div id="header">Seed Tutorial : Standalone</div>
<div id="subheader">v.0.3</div>
<div class="section">Introduction</div>
@@ -21,13 +24,13 @@
<p>This tutorial begins with a few brief examples, and then dives right in, following the development of a simple Seed program, from beginning to end. By the end of the tutorial, you'll have your very own tiny WebKit-based web browser, as well as a summary knowledge of the use of Seed to build Gtk+ applications.</p>
<div class="section">Beginning Seed</div>
<p>It makes sense to start our exploration with a program you're probably quite familiar with:</p>
-<pre>
+<pre class="sh_javascript">
#!/usr/bin/env seed
Seed.print("Hello, world!");
</pre>
<p>If you were to make this script executable (<code>chmod +x hello.js</code>), and run it, you'd hopefully see the following, just as expected (if you don't, for some reason, make sure you have the latest version of Seed installed, then <a href="racarr svn gnome org">email us</a>):</p>
-<pre>
+<pre class="sh_javascript">
Hello, world!
</pre>
<p>In order to make the file executable, include (<code>#!/usr/bin/env seed</code>) at the top of every Seed program you write. This is known as the <em>shebang line</em>, and tells your shell where to find the <code>seed</code> interpreter; I'm only going to include it when listing a whole file, from now on.</p>
@@ -38,7 +41,7 @@
</ul>
<p>There is one exception: in order to convert a string of digits into a 'number', Javascript needs to be explicitly instructed to do so: <code>parseFloat("42.5")</code>.</p>
<p>Seed also provides a very simple interface to the <a href="http://directory.fsf.org/project/readline/";>GNU Readline</a> library, which allows programs to ask the user for input. This interface is in the <b>readline</b> module, which <u>must</u> be imported before it can be used. The only argument <code>readline.readline()</code> requires is the prompt for the user. Also, the current version of Seed ensures that everything typed is automatically saved in the prompt's history; if you press the up key while at a prompt, you can access and edit lines you've previously entered. Future versions of Seed will provide more control over the history and other parts of readline.</p>
-<pre>
+<pre class="sh_javascript">
Seed.import_namespace("readline");
var my_name = readline.readline("Your name? ");
var my_age = readline.readline("Your age? ");
@@ -49,16 +52,16 @@
<p>You've probably noticed that the word '<code>var</code>' precedes the first use of every variable in Javascript. This is important, because it ensures that the memory consumed by the variable is freed to be used elsewhere at the end of the current block of code, when the variable goes <em>out of scope</em>. If, instead, you want to create a variable which is <em>global</em> (available forever, after it is created), you can omit the '<code>var</code>'. Keep in mind that making many global variables is generally considered bad practice, and can be expensive in terms of memory use.</p>
<div class="section">A Javascript Shell</div>
<p>Javascript, being a scripting language, includes a construct, <code>eval()</code> which allows you to evaluate a <em>string</em> of Javascript. This allows, for example, a user to input Javascript with <code>readline</code>, and it to be executed as if it had been part of your source file. In addition, <code>eval()</code>'s return value is the return value of the snippet of code. For example:</p>
-<pre>
+<pre class="sh_javascript">
var output = eval("2+2");
Seed.print(output);
</pre>
<p>Will output:</p>
-<pre>
+<pre class="sh_javascript">
4.000000
</pre>
<p>When something goes <em>wrong</em> in a piece of Javascript code, the program will exit, most likely leaving the user in a confused state. For example, if you try to access a variable that doesn't exist: <code>Seed.print(asdf);</code> Seed will exit with the message: <code>ReferenceError Can't find variable: asdf</code>. It is possible to catch this sort of error, or exception, inside of your Javascript program, ensuring that it doesn't terminate your program - or that if it does, it prints a useful error message. The <code>try/catch</code> construct provides a way to <em>try</em> to execute a segment of Javascript, and, if it fails, run a second segment, without exiting the program. The second segment could print a user-friendly error message, ignore the exception entirely, or try to work around the problem. A quick example of <code>try/catch</code>:</p>
-<pre>
+<pre class="sh_javascript">
try
{
Seed.print(asdf);
@@ -69,7 +72,7 @@
}
</pre>
<p>It's also possible to determine what, exactly, went wrong. The '<code>e</code>' in the <code>catch</code> statement (which, by the way, you <em>cannot</em> omit) is actually an object containing information about the exception! We can access some of the basic properties of this object:</p>
-<pre>
+<pre class="sh_javascript">
try
{
Seed.print(asdf);
@@ -84,7 +87,7 @@
<p>This will print a message similar to what would be printed if you hadn't caught the exception, but <em>without exiting the program!</em></p>
<p>Combining <code>readline</code>, <code>eval</code>, exceptions, and <code>print</code>, we can write a simple shell, allowing interactive use of Seed. This shell is included in the Seed distribution, in <code>examples/repl.js</code>. Looking at the source, you'll note that it takes very little code to implement a shell:</p>
<div class="filename">examples/repl.js</div>
-<pre>
+<pre class="sh_javascript">
#!/usr/bin/env seed
Seed.import_namespace("readline");
@@ -107,7 +110,7 @@
<p>In order to use GTK (or any other external library) in a Seed program, you first have to import the functions from said library. <code>Seed.import_namespace()</code>, taking as its only argument the name of the library to import, does this for us.</p>
<p>Once the library has been imported, all of its functions are available on a global object with the same name as the library. For example, if we <code>Seed.import_namespace("Gtk")</code>, all of the imported functions are available on the Gtk object: <code><a href="http://library.gnome.org/devel/gtk/2.14/gtk-General.html#gtk-init";>Gtk.init()</a></code>, etc.</p>
<p>Let's start off the development of our browser by getting Gtk working. It takes very little to get a window displayed with Seed:</p>
-<pre>
+<pre class="sh_javascript">
#!/usr/bin/env seed
Seed.import_namespace("Gtk");
@@ -123,18 +126,18 @@
<div style="text-align: center;"><img src="1.png" alt="Blank GTK Window"/></div>
<div class="section">JSON Constructors</div>
<p>Notice that the title of the window is 'seed'. We'll fix that, using another Seed feature: you can use <a href="http://www.json.org/js.html";>JSON notation</a> to set properties while constructing objects, like so:</p>
-<pre>
+<pre class="sh_javascript">
var window = new Gtk.Window({title: "Browser"});
</pre>
<p>This saves a lot of typing from the alternative, conventional method:</p>
-<pre>
+<pre class="sh_javascript">
var window = new Gtk.Window();
window.set_title("Browser");
</pre>
<p>You can set any number of properties this way, by separating them by commas (<code>{"title": "Browser", "default-height": 500}</code>, etc.). This method should work for any GObject constructor.</p>
<div class="section">Signals</div>
<p>You'll notice that our program, as it stands, fails to quit when you click the 'Close' button. You can, of course, quit it with Ctrl-C, but this is certainly unacceptable behaviour. To fix it, we'll connect a Javascript function to the signal that gets emitted when the 'Close' button is clicked:</p>
-<pre>
+<pre class="sh_javascript">
function quit()
{
Gtk.main_quit();
@@ -145,7 +148,7 @@
<p>The signal names are the same as in the <a href="http://library.gnome.org/devel/gtk/stable/";>GTK documentation</a>, except using underscores instead of dashes between words. </p>
<div class="section">Local Context with '<code>this</code>'</div>
<p>Javascript, like some other object-oriented languages, has the concept of a local <i>context</i>. Accessed with the '<code>this</code>' keyword, local contexts allow for neatly contained, transparent signal callbacks, among other things. Imagine we have, a WebKit view, say, <code>browser</code>, and a button, call it <code>back_button</code>. We could certainly make the browser object global, but this would make having multiple browsers (think tabs!) rather annoying. Instead, when setting up the callback, we can provide <code>browser</code> as the '<code>this</code>' object. This gives us the following code:</p>
-<pre>
+<pre class="sh_javascript">
function back(button)
{
this.go_back();
@@ -164,7 +167,7 @@
<p>In this case, the <code>browser</code> object is passed as the magical <code>this</code> object into the <code>back()</code> function, so <code>go_back()</code> is actually called on <code>browser</code>. The upside to this model is that, no matter how many times <code>create_browser()</code> is called, <code>back()</code> is always provided the <code>browser</code> that corresponds with its <code>back_button</code>.</p>
<div class="section">Working with Widgets</div>
<p>We'll start by making the browser's toolbar buttons. GTK provides a ToolButton widget, which is generally used for making such toolbars, as well as various different stock icons (to ensure consistency within all GTK applications). Browsing through <a href="http://library.gnome.org/devel/gtk/2.14/gtk-Stock-Items.html";>the GTK Stock Item documentation</a>, we find that we're looking for "<code>gtk-go-back</code>", "<code>gtk-go-forward</code>", and "<code>gtk-refresh</code>". A glance at the <a href="">GtkToolButton documentation</a> shows us that we can choose a stock icon by setting the <code>stock-id</code> property - we'll use JSON constructors to keep things tidy. Do note that we use underscores instead of dashes, because the property name isn't quoted (thus, a dash would indicate subtraction, which isn't what we're looking for!):</p>
-<pre>
+<pre class="sh_javascript">
function create_ui()
{
var main_ui = new Gtk.VBox();
@@ -193,7 +196,7 @@
</pre>
<p>There are a few things in the snippet above which you probably haven't seen before (unless you've used GTK in another language). Firstly, the Gtk.Entry widget is a simple text entry field, like you would expect in a browser's URL bar. Secondly, you'll notice the use of the Gtk.HBox widget, and its <code>pack_start()</code> function. These serve as the foundation of GUI layout in GTK: a window is subdivided into boxes, which 'pack' widgets in a particular direction (HBoxes pack horizontally, VBoxes pack vertically, as expected). We use a HBox, since we want our toolbar arranged horizontally. <code>pack_start()</code> adds a widget to a Box; widgets are packed in the order they're added. There are optional arguments, which are addressed in more depth in the <a href="http://library.gnome.org/devel/gtk/2.14/GtkBox.html";>GtkBox documentation</a>, which allow you to force widgets to expand into the usable space (the second and third arguments used when packing <code>url_entry</
code> above serve this purpose).</p>
<p>We also need a bunch of callbacks (for all three buttons, and for when you're done entering text in the URL bar). We'll make them just print the function they're supposed to perform, for now, since we don't have a WebKit view to operate on yet.</p>
-<pre>
+<pre class="sh_javascript">
function forward(button)
{
Seed.print("forward");
@@ -217,7 +220,7 @@
<p>You'll notice that <code>create_ui()</code> returns an VBox with all of the widgets in it - thinking ahead, we're packing the toolbar HBox into a VBox (eventually, we'll add the WebKit view, too!). In fact, to try and get a more visual feel of packing, let's take a look at the Box layout for our browser:</p>
<div style="text-align: center;"><img src="packing.png" alt="Packing Layout"/></div>
<p>Right now, nothing's calling <code>create_ui()</code>, so you won't see the toolbar drawn. To remedy this, before <code>window.show_all()</code>, add a line to pack the toolbar:</p>
-<pre>
+<pre class="sh_javascript">
window.add(create_ui());
</pre>
<p>Your code should be in a runnable state now; take a minute to try it out, stand back, and admire what you've learned:</p>
@@ -225,7 +228,7 @@
<p>If, for some reason, something doesn't work, compare your code to <a href="1.js">the tutorial version</a>.</p>
<div class="section">Adding WebKit</div>
<p>It's finally time to start displaying some web pages with our little browser! Let's create and pack a WebKit web view below our toolbar, first. Create the browser at the top of the <code>create_ui()</code> function (we'll also need to pass the browser as the <code>this</code> object for our button callbacks, so it needs to already be created), and pack it into the <code>main_ui</code> VBox <em>after</em> you pack the toolbar. Here's an updated version of our <code>create_ui()</code> function:</p>
-<pre>
+<pre class="sh_javascript">
function create_ui()
{
var main_ui = new Gtk.VBox();
@@ -256,7 +259,7 @@
}
</pre>
<p>Also, remember that we need to import a namespace before its functions are available to us! So, go back to the top of the file and import "WebKit", just after you import "Gtk". One final thing, before you again try to run your browser: we haven't yet specified a 'recommended' size for our window - let's go ahead and do that (if we didn't do so, the WebKit view would have no space to fill!). Just after you create the Gtk.Window(), add:</p>
-<pre>
+<pre class="sh_javascript">
window.resize(600,600);
</pre>
<p>Now, fire up your browser! Hopefully, you'll see a nice blank WebKit view, like below. If you don't, take a peek at <a href="2.js">our version</a>.</p>
@@ -264,11 +267,11 @@
<p>That's really not a very interesting browser, at all - nothing works yet, and there's no way to navigate! Still, we're almost done.</p>
<div class="section">Finishing our Browser</div>
<p>Poking around in the <a href="http://svn.webkit.org/repository/webkit/trunk/WebKit/gtk/webkit/webkitwebview.h";>WebKit documentation</a> (the WebKit team is a bit behind on documentation, so all we have to work with is header files), we find that the <code>open()</code> function on a WebView allows you to navigate to a particular page. Just after you create the WebView, have it navigate to your favorite page:</p>
-<pre>
+<pre class="sh_javascript">
browser.open("http://www.gnome.org";);
</pre>
<p>A quick note about WebKit: if you omit the protocol part of a URL (e.g., http://), WebKit won't even bother to try to figure it out - so make sure you specify it! This is also important for the browse() callback, which is called when you press enter in the URL field, which we'll implement now. To get around this shortcoming, we'll use Javascript's string search function to see if a protocol has been specified, and, if it hasn't, we'll assume it's '<code>http://</code>':</p>
-<pre>
+<pre class="sh_javascript">
function browse(url)
{
if(url.text.search("://") < 0)
@@ -280,7 +283,7 @@
}
</pre>
<p>Almost done! Next we need to implement the button callbacks. Again browsing webkitwebview.h, we find reload(), go_forward(), and go_back() - the last functions needed to finish our browser! Remembering that the browser view is passed as '<code>this</code>' to the functions, go ahead and fill them in:</p>
-<pre>
+<pre class="sh_javascript">
function forward(button)
{
this.go_forward();
@@ -297,11 +300,11 @@
}
</pre>
<p>Our final modification will listen to a WebKit signal, and adjust the URL bar when you click a link. The aforementioned webkitwebview.h header file provides us with the name of the signal (load_committed). This signal is different than those we've worked with in the past, as it provides two arguments: the WebView, and a WebFrame. The distinction is important in WebKit-land, but we'll ignore it, noting only that (from the headers, again - this time, webkitwebframe.h) there is a WebFrame get_uri() function which provides the current URL of the frame. Let's first add our signal connection code. Make sure to connect to load_committed <em>after</em> you've created both the WebView and the URL entry field, as the signal is <em>on</em> the browser view, and we want to pass the URL entry field as its <code>this</code> object:</p>
-<pre>
+<pre class="sh_javascript">
browser.signal.load_committed.connect(url_changed, url_entry);
</pre>
<p>Next, the callback, <code>url_changed</code>. Remember that we're given two arguments, and that <code>this</code> is the URL entry field:</p>
-<pre>
+<pre class="sh_javascript">
function url_changed(browser, frame)
{
this.text = frame.get_uri();
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
