mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-09-29 15:30:47 +00:00
Extend "TiddlyWiki Architecture" with details on the model and view.
This commit is contained in:
Stephan Sokolow
parent
e3dc00573d
commit
1a9f34203c
@ -18,3 +18,53 @@ DOM events trigger actions on widgets which update the tiddler store. The update
|
||||
|
||||
{{Server Architecture.svg}}
|
||||
|
||||
When programming TiddlyWiki 5 plugins which make changes outside the scope of the included examples, you will need a more in-depth understanding of TiddlyWiki's internal architecture.
|
||||
|
||||
! Model
|
||||
|
||||
TiddlyWiki's data model is a fairly simple key-value store.
|
||||
|
||||
* Each tiddler is simply an object with a `fields` member containing members such as `title`, `text`, `tags` and so on.
|
||||
* The core `Wiki` class defined in `boot/boot.js` implements simple associative array behaviours like insertion, deletion, iteration, listing keys, and get-by-key.
|
||||
* The code in `core/modules/wiki.js` then extends the `Wiki` class with functionality such as event dispatch and various cache-backed methods such as `getTiddlersWithTag`.
|
||||
|
||||
The active tiddler store can be accessed via `$tw.wiki` as in this example:
|
||||
|
||||
```js
|
||||
$tw.wiki.makeTiddlerIterator($tw.wiki.getTiddlersWithTag('timeline')
|
||||
)(function(tiddler, title) {
|
||||
// Skip templates
|
||||
if (tiddler.fields.tags.indexOf('templates') >= 0) { return; }
|
||||
|
||||
do_something(tiddler);
|
||||
});
|
||||
```
|
||||
|
||||
Data which should not be visible to end users under normal operation (eg. internal components, plugins, persisted state for GUI widgets) is stored in [[system tiddlers|SystemTiddlers]] organized via a set of [[namespaces|Naming of System Tiddlers]].
|
||||
|
||||
The similarity between filesystem paths and system tiddler names is intentional and will be used to provide a hierarchical browsing interface in a future TiddlyWiki release.
|
||||
|
||||
! View
|
||||
|
||||
TiddlyWiki's view layer has a //lot// in common with desktop widget toolkits and this is the part which is most likely to trip up newcomers. There are two facets to it:
|
||||
|
||||
!! Role of the DOM
|
||||
Because TiddlyWiki may re-render content, plugins should treat the DOM as write-only.
|
||||
|
||||
In other words, any state you store in the DOM could vanish at any instant and you need to use TiddlyWiki's internal [[StateMechanism]] instead.
|
||||
|
||||
In a desktop application, the base widget class defines a method such as `paint(canvas)` which is called in response to `expose` events or "data has changed" messages.
|
||||
|
||||
In TiddlyWiki, the `Widget` class in `core/modules/widgets/widgets.js` defines a `render(parent, nextSibling)` method which TiddlyWiki calls in response to various events such as changes in the model.
|
||||
|
||||
(The potential inefficiency of this approach is mitigated via a `refresh(changedTiddlers)` method which TiddlyWiki calls to ask your widget whether its current rendering is stale.)
|
||||
|
||||
!! Locus of Control
|
||||
|
||||
While TiddlyWiki's extended [[WikiText]] is similar in design to HTML templating languages with logic constructs, you can't just ignore it and assemble all of your content in raw Javascript because it is used to define most of TiddlyWiki's UI.
|
||||
|
||||
In this respect, it's closer to a glue language like Qt Quick or Python with Javascript filling the "create new components" role of C/C++ in widget toolkits like Qt and GTK+.
|
||||
|
||||
{{Page Composition.svg}}
|
||||
|
||||
To familiarize yourself with this, read [[Widgets in WikiText]] and [[Introduction to Filters]]. then examine the internals for a tiddler like [[TaskManagementExample]].
|
||||
|
||||
328
editions/tw5.com/tiddlers/images/Page Composition.svg
Normal file
328
editions/tw5.com/tiddlers/images/Page Composition.svg
Normal file
@ -0,0 +1,328 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="702.85712"
|
||||
height="612.85718"
|
||||
id="svg2"
|
||||
version="1.1"
|
||||
inkscape:version="0.48.3.1 r9886"
|
||||
sodipodi:docname="TiddlyWiki Page Composition.svg">
|
||||
<defs
|
||||
id="defs4">
|
||||
<marker
|
||||
inkscape:stockid="Arrow1Sstart"
|
||||
orient="auto"
|
||||
refY="0"
|
||||
refX="0"
|
||||
id="Arrow1Sstart"
|
||||
style="overflow:visible">
|
||||
<path
|
||||
id="path3929"
|
||||
d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
|
||||
style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
|
||||
transform="matrix(0.2,0,0,0.2,1.2,0)"
|
||||
inkscape:connector-curvature="0" />
|
||||
</marker>
|
||||
<marker
|
||||
inkscape:stockid="Arrow1Mstart"
|
||||
orient="auto"
|
||||
refY="0"
|
||||
refX="0"
|
||||
id="Arrow1Mstart"
|
||||
style="overflow:visible">
|
||||
<path
|
||||
id="path3923"
|
||||
d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
|
||||
style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
|
||||
transform="matrix(0.4,0,0,0.4,4,0)"
|
||||
inkscape:connector-curvature="0" />
|
||||
</marker>
|
||||
<marker
|
||||
inkscape:stockid="Arrow1Mend"
|
||||
orient="auto"
|
||||
refY="0"
|
||||
refX="0"
|
||||
id="Arrow1Mend"
|
||||
style="overflow:visible">
|
||||
<path
|
||||
id="path3926"
|
||||
d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
|
||||
style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
|
||||
transform="matrix(-0.4,0,0,-0.4,-4,0)"
|
||||
inkscape:connector-curvature="0" />
|
||||
</marker>
|
||||
<marker
|
||||
inkscape:stockid="Arrow1Lend"
|
||||
orient="auto"
|
||||
refY="0"
|
||||
refX="0"
|
||||
id="Arrow1Lend"
|
||||
style="overflow:visible">
|
||||
<path
|
||||
id="path3920"
|
||||
d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
|
||||
style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
|
||||
transform="matrix(-0.8,0,0,-0.8,-10,0)"
|
||||
inkscape:connector-curvature="0" />
|
||||
</marker>
|
||||
<marker
|
||||
inkscape:stockid="Arrow1Mstart"
|
||||
orient="auto"
|
||||
refY="0"
|
||||
refX="0"
|
||||
id="Arrow1Mstart-7"
|
||||
style="overflow:visible">
|
||||
<path
|
||||
inkscape:connector-curvature="0"
|
||||
id="path3923-5"
|
||||
d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
|
||||
style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
|
||||
transform="matrix(0.4,0,0,0.4,4,0)" />
|
||||
</marker>
|
||||
</defs>
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="1.1339431"
|
||||
inkscape:cx="351.42856"
|
||||
inkscape:cy="335.09306"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="false"
|
||||
inkscape:snap-global="true"
|
||||
fit-margin-top="0"
|
||||
fit-margin-left="0"
|
||||
fit-margin-right="0"
|
||||
fit-margin-bottom="0"
|
||||
inkscape:window-width="1280"
|
||||
inkscape:window-height="979"
|
||||
inkscape:window-x="1280"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1" />
|
||||
<metadata
|
||||
id="metadata7">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-20.618683,-122.75086)">
|
||||
<g
|
||||
id="g3019"
|
||||
transform="translate(20.618683,0)">
|
||||
<rect
|
||||
y="122.75086"
|
||||
x="0"
|
||||
height="448.57144"
|
||||
width="702.85712"
|
||||
id="rect2985"
|
||||
style="fill:#aade87;stroke:none" />
|
||||
<text
|
||||
sodipodi:linespacing="125%"
|
||||
id="text3011"
|
||||
y="153.91151"
|
||||
x="8.1617117"
|
||||
style="font-size:27.47451591px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
|
||||
xml:space="preserve"><tspan
|
||||
y="153.91151"
|
||||
x="8.1617117"
|
||||
id="tspan3013"
|
||||
sodipodi:role="line">TiddlyWiki Markup</tspan></text>
|
||||
</g>
|
||||
<g
|
||||
id="g4546"
|
||||
transform="translate(0,-1.587616e-6)">
|
||||
<rect
|
||||
y="585.60803"
|
||||
x="20.618683"
|
||||
height="150.00002"
|
||||
width="702.85712"
|
||||
id="rect2985-2"
|
||||
style="fill:#afdde9;fill-opacity:1;stroke:none" />
|
||||
<text
|
||||
sodipodi:linespacing="125%"
|
||||
id="text3015"
|
||||
y="616.5614"
|
||||
x="30.040705"
|
||||
style="font-size:27.47451591px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
|
||||
xml:space="preserve"><tspan
|
||||
y="616.5614"
|
||||
x="30.040705"
|
||||
id="tspan3017"
|
||||
sodipodi:role="line">JavaScript</tspan></text>
|
||||
</g>
|
||||
</g>
|
||||
<g
|
||||
inkscape:groupmode="layer"
|
||||
id="layer2"
|
||||
inkscape:label="Layer"
|
||||
transform="translate(-20.618683,-122.75086)">
|
||||
<g
|
||||
id="g6147">
|
||||
<rect
|
||||
y="196.51784"
|
||||
x="250.82893"
|
||||
height="33.119667"
|
||||
width="242.43661"
|
||||
id="rect3029"
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none" />
|
||||
<text
|
||||
sodipodi:linespacing="125%"
|
||||
id="text3050"
|
||||
y="219.0132"
|
||||
x="256.21371"
|
||||
style="font-size:19.12419319px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
|
||||
xml:space="preserve"><tspan
|
||||
y="219.0132"
|
||||
x="256.21371"
|
||||
id="tspan3052"
|
||||
sodipodi:role="line">$:/core/ui/PageTemplate</tspan></text>
|
||||
</g>
|
||||
<g
|
||||
id="g6152">
|
||||
<rect
|
||||
y="270.08807"
|
||||
x="275.11465"
|
||||
height="33.119667"
|
||||
width="193.86519"
|
||||
id="rect3029-1"
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none" />
|
||||
<text
|
||||
sodipodi:linespacing="125%"
|
||||
id="text3050-2"
|
||||
y="292.58344"
|
||||
x="280.49945"
|
||||
style="font-size:19.12419319px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
|
||||
xml:space="preserve"><tspan
|
||||
y="292.58344"
|
||||
x="280.49945"
|
||||
id="tspan3052-0"
|
||||
sodipodi:role="line">System UI Tiddlers</tspan></text>
|
||||
</g>
|
||||
<g
|
||||
id="g6162">
|
||||
<rect
|
||||
y="408.30234"
|
||||
x="447.35312"
|
||||
height="33.119667"
|
||||
width="242.43661"
|
||||
id="rect3029-5"
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none" />
|
||||
<text
|
||||
sodipodi:linespacing="125%"
|
||||
id="text3050-7"
|
||||
y="430.7977"
|
||||
x="452.73788"
|
||||
style="font-size:19.12419319px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
|
||||
xml:space="preserve"><tspan
|
||||
y="430.7977"
|
||||
x="452.73788"
|
||||
id="tspan3052-5"
|
||||
sodipodi:role="line">User Tiddlers</tspan></text>
|
||||
</g>
|
||||
<g
|
||||
id="g6157">
|
||||
<rect
|
||||
y="408.30237"
|
||||
x="65.924561"
|
||||
height="33.119667"
|
||||
width="242.43661"
|
||||
id="rect3029-4"
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none" />
|
||||
<text
|
||||
sodipodi:linespacing="125%"
|
||||
id="text3050-28"
|
||||
y="430.79773"
|
||||
x="71.309326"
|
||||
style="font-size:19.12419319px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
|
||||
xml:space="preserve"><tspan
|
||||
y="430.79773"
|
||||
x="71.309326"
|
||||
id="tspan3052-55"
|
||||
sodipodi:role="line">Transcluded Tiddlers</tspan></text>
|
||||
</g>
|
||||
<g
|
||||
id="g6167">
|
||||
<rect
|
||||
y="647.23096"
|
||||
x="327.25751"
|
||||
height="33.119667"
|
||||
width="89.579468"
|
||||
id="rect3029-7"
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none" />
|
||||
<text
|
||||
sodipodi:linespacing="125%"
|
||||
id="text3050-75"
|
||||
y="669.72632"
|
||||
x="332.6423"
|
||||
style="font-size:19.12419319px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
|
||||
xml:space="preserve"><tspan
|
||||
y="669.72632"
|
||||
x="332.6423"
|
||||
id="tspan3052-8"
|
||||
sodipodi:role="line">Widgets</tspan></text>
|
||||
</g>
|
||||
<path
|
||||
style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker-start:url(#Arrow1Mstart)"
|
||||
d="m 372.04724,231.13751 0,40.45057"
|
||||
id="path4556"
|
||||
inkscape:connector-type="polyline"
|
||||
inkscape:connector-curvature="0" />
|
||||
<path
|
||||
style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker-start:url(#Arrow1Mstart-7)"
|
||||
d="M 199.95835,441.42202 359.23176,647.23095"
|
||||
id="path5529"
|
||||
inkscape:connector-type="polyline"
|
||||
inkscape:connector-curvature="0" />
|
||||
<path
|
||||
style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker-start:url(#Arrow1Mstart-7)"
|
||||
d="M 554.9506,441.42202 385.66808,647.23095"
|
||||
id="path5911"
|
||||
inkscape:connector-type="polyline"
|
||||
inkscape:connector-curvature="0" />
|
||||
<path
|
||||
style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker-start:url(#Arrow1Mstart-7)"
|
||||
d="m 372.04724,303.20775 0,344.0232"
|
||||
id="path5913"
|
||||
inkscape:connector-type="polyline"
|
||||
inkscape:connector-curvature="0" />
|
||||
<path
|
||||
style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker-start:url(#Arrow1Mstart-7)"
|
||||
d="m 395.59335,303.20775 149.43198,105.0946"
|
||||
id="path5915"
|
||||
inkscape:connector-type="polyline"
|
||||
inkscape:connector-curvature="0" />
|
||||
<path
|
||||
style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker-start:url(#Arrow1Mstart-7)"
|
||||
d="m 447.35313,424.86219 -138.99196,0"
|
||||
id="path5919"
|
||||
inkscape:connector-type="polyline"
|
||||
inkscape:connector-curvature="0" />
|
||||
<path
|
||||
style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker-start:url(#Arrow1Mstart-7)"
|
||||
d="M 349.89334,303.20775 209.29677,408.30235"
|
||||
id="path5921"
|
||||
inkscape:connector-type="polyline"
|
||||
inkscape:connector-curvature="0" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 12 KiB |
@ -0,0 +1,4 @@
|
||||
title: Page Composition.svg
|
||||
type: image/svg+xml
|
||||
tags: picture external-image dev
|
||||
modified: 20140719210754000
|
||||
Loading…
Reference in New Issue
Block a user