<?xml version="1.0" encoding="UTF-8"?>
<!--Xholon Workbook http://www.primordion.com/Xholon/wb/ (C) Ken Webb Thu May 03 2012 13:17:09 GMT-0400 (EDT)-->
<XholonWorkbook>
<Notes><![CDATA[
Xholon
------
Title: CodeMirror
Description:
Url: http://codemirror.net/
InternalName:
YoutubeId:
Keywords:
My Notes **May 3 2012**
========
Each Xholon workbook contains multiple editors, implemented using CodeMirror. I've just upgraded to the latest version (2.24), and will use this workbook as a tutorial (and test) of some features of CodeMirror.
Select editor content
---------------------
Place the cursor in any of the 13 editors on this page, for example this editor, and press Ctrl-A. All of the content in that editor will be selected.
Click the |Select all| button above, to select the content of all editors.
Click the |Unselect all| button, to unselect the content of all editors.
Click the |Refresh| button, to refresh the layout of all editors.
Select a theme
--------------
CodeMirror offers multiple themes, selectable using the |Theme| selector above. Version 2.24 provides some new themes not included here yet. I like the cobalt theme because it visually separates the editors from the rest of the page, while doing a nice job of syntax highlighting. The CodeMirror default theme has a white background and blends in with the rest of the page. The rubyblue theme is the only one that uses a proportional font.
Modes
-----
Each editor uses a CodeMirror language-specific syntax-highlighting mode. This editor uses the reStructuredText (rst) markup mode, which works well for notes and simple blog- or wiki-type text. The code editors use the CodeMirror javascript, python, ruby, clike (includes Java), and groovy modes.
The workbook automatically changes the CodeMirror mode if you change the language of the editor. For example, change |implName="lang:python:inline:"| to |implName="lang:javascript:inline:"| in the editor just below this one. Then undo (|Ctrl-Z|) and redo (|Shift-Ctrl-Z|) to see the change in highlighting.
Syntax Highlighting
-------------------
As mentioned, this editor uses the reStructuredText mode. CodeMirror highlights some of the reStructuredText syntax, a feature I sometimes make use of in my workbooks. In the text above, note the effect of multiple underline and double-underline characters, the effect of using the vertical line for bracketing, and the use of double stars as brackets. Here are some more simple examples.
::
This text is highlighted until I end it with a line that starts at position 0.
still highlighted
no longer highlighted
.. hello
bye
*Most of the reStructuredText content is only parsed if you use a third-party reStructuredText tool*
Hints
-----
CodeMirror provides a hints capability, which Xholon Workbook builds on. Many of the editors on this page provide some mode-specific content if you press |Ctrl-Space|. For example, in this editor it provides lists of special characters, such as ::
î ĵ a⃗ b⃗ c⃗ d⃗ e⃗ f⃗ g⃗ h⃗ i⃗ j⃗ k⃗ l⃗ m⃗ n⃗ o⃗ p⃗ q⃗ r⃗ s⃗ t⃗ u⃗ v⃗ w⃗ x⃗ y⃗ z⃗
≤ ≥ ≠ ≒ × · ÷ √ ± ∓ ∞ ° ∑ ∏ ⌈ ⌉ ⌊ ⌋
α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ σ τ υ φ χ ψ ω
In the _-.XholonClass editor, |Ctrl-Space| offers a list of common quantities, such as ::
<Fahrenheit superClass="Temperature"/>
In the xholonClassDetails editor ::
<port name="angularAcceleration" connector="#xpointer(AngularAcceleration)"/>
In the PhysicalSystem editor ::
<AngularAcceleration>0.0 rad/s^2</AngularAcceleration>
In the SVG Client editor ::
<g>
<rect id="PhysicalSystem/Block/AngularAcceleration" fill="#aad4ff" height="20" width="30"/>
<text>AngularAcceleration</text>
</g>
In many cases the choices offered depend on where the cursor is located, or what is currently selected, within another editor.
If the Sphere node in the PhysicalSystem editor is selected (highlighted), and the active cursor is inside the Block node in the xholonClassDetails editor, then presssing |Ctrl-,| (control comma) will create the following ::
<port name="sphere" connector="#xpointer(ancestor::PhysicalSystem/descendant::Sphere)"/>
This specifies a variable name (sphere) and a path that together can be used by runtime code to access the Sphere node.
|Ctrl-.| is also used in the xholonClassDetails editor.
CodeMirror key bindings
-----------------------
Other built-in key bindings include:
|Tab| shift line(s) right one tab stop
|Shift-Tab| shift line(s) left one tab stop
|Ctrl-/| reformat
]]></Notes>
<script implName="lang:python:inline:"><![CDATA[
print "height = 12.34 m"
# testing
]]></script>
<script implName="lang:javascript:inline:"><![CDATA[
print("height = 56.78 meters\n");
// testing
]]></script>
<_-.XholonClass>
<!-- types of domain objects -->
<PhysicalSystem/>
<Block/>
<!-- quantities -->
<Height superClass="Length"/>
</_-.XholonClass>
<xholonClassDetails>
<Block>
<port name="height" connector="#xpointer(Height)"/>
</Block>
</xholonClassDetails>
<PhysicalSystem>
<Block>
<Height>0.1 m</Height>
</Block>
<Sphere/>
</PhysicalSystem>
<Blockbehavior implName="lang:python:inline:"><![CDATA[
# This works if pasted in as a last child of Block.
height.incVal(0.02)
print("Python wants something to do. Height:" + str(height))
]]></Blockbehavior>
<Blockbehavior implName="lang:javascript:inline:"><![CDATA[
// This works if pasted in as a last child of Block.
height.incVal(0.02);
print("JavaScript wants something to do. Height:" + height + "\n");
]]></Blockbehavior>
<Blockbehavior implName="lang:webEditionjs:inline:"><![CDATA[
this.bindPorts(this.parent());
this.height.incVal(0.02);
print("JavaScript wants something to do. Height:" + this.height.attr('val') + "\n");
]]></Blockbehavior>
<Blockbehavior implName="lang:bsh:inline:"><![CDATA[
// This works if pasted in as a last child of Block.
height.incVal(0.02);
System.out.print("Java/Beanshell wants something to do. Height:" + height + "\n");
]]></Blockbehavior>
<Blockbehavior implName="lang:jruby:inline:"><![CDATA[
require 'java'
# This works if pasted in as a last child of Block.
$height.incVal(0.02)
puts "Ruby wants something to do. Height: #{$height}"
]]></Blockbehavior>
<Blockbehavior implName="lang:groovy:inline:"><![CDATA[
// This works if pasted in as a last child of Block.
height.incVal(0.02);
System.out.print("Groovy wants something to do. Height:" + height + "\n");
]]></Blockbehavior>
<SvgClient><Attribute_String roleName="svgUri"><![CDATA[data:image/svg+xml,
<svg width="100" height="50" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Block</title>
<rect id="PhysicalSystem/Block" fill="#98FB98" height="50" width="50" x="25" y="0"/>
<g>
<title>Height</title>
<rect id="PhysicalSystem/Block/Height" fill="#6AB06A" height="50" width="10" x="80" y="0"/>
</g>
</g>
</svg>
]]></Attribute_String><Attribute_String roleName="setup">${MODELNAME_DEFAULT},${SVGURI_DEFAULT}</Attribute_String></SvgClient>
</XholonWorkbook>