177 lines
7.9 KiB
HTML
177 lines
7.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset='UTF-8'>
|
|
<title>Yatta! Documentation</title>
|
|
<script src='../../javascript/application.js'></script>
|
|
<script src='../../javascript/search.js'></script>
|
|
<link rel='stylesheet' href='../../stylesheets/application.css' type='text/css'>
|
|
</head>
|
|
<body>
|
|
<div id='base' data-path='../../'></div>
|
|
<div id='header'>
|
|
<div id='menu'>
|
|
<a href='../../extra/README.md.html' title='Yatta!'>
|
|
Yatta!
|
|
</a>
|
|
»
|
|
<a href='../../alphabetical_index.html' title='Index'>
|
|
Index
|
|
</a>
|
|
»
|
|
<span class='title'>examples</span>
|
|
»
|
|
<span class='title'>IwcJson.md</span>
|
|
</div>
|
|
</div>
|
|
<div id='content'>
|
|
<nav class='toc'>
|
|
<p class='title'>
|
|
<a class='hide_toc' href='#'>
|
|
<strong>Table of Contents</strong>
|
|
</a>
|
|
<small>
|
|
(<a class='float_toc' href='#'>left</a>)
|
|
</small>
|
|
</p>
|
|
</nav>
|
|
<div id='filecontents'>
|
|
<h2 id="iwc-json-example">IWC + JSON Example</h2><p>Here, I will give a short overview on how to use the IwcJson Framework in Role-SDK widgets.
|
|
First you have to include the following libraries in your widget file:</p><pre><code><script src="http://open-app.googlecode.com/files/openapp.js"></script>
|
|
<script src="http://dbis.rwth-aachen.de/gadgets/iwc/lib/iwc.js"></script>
|
|
<script src="http://dbis.rwth-aachen.de/~jahns/role-widgets/widgetbundles/libraries/DUIClient.js"></script>
|
|
<script src="../dest/browser/Frameworks/JsonIwcYatta.min.js"></script>
|
|
<script src="./IwcJson.js"></script>
|
|
</code></pre><p>A working widget implementation is maintained <a href="./IwcJson.xml">here</a> and the js-file is <a href="./IwcJson.js">here</a></p><pre><code class="lang-js">function init(){
|
|
createConnector(function(Connector, user_id){
|
|
</code></pre><p>yatta is the shared json object. If you change something on this object,
|
|
it will be instantly shared with all the other collaborators.</p><pre><code class="lang-js"> yatta = new JsonYatta(user_id, Connector);
|
|
</code></pre><p>Add a integer-property like this</p><pre><code class="lang-js"> yatta.val('x', 7);
|
|
</code></pre><p>Get the value of property x like this</p><pre><code class="lang-js"> console.log(yatta.val('x') === 7); // true
|
|
</code></pre><p>A string property can be either mutable or immutable.</p><pre><code class="lang-js"> yatta.val('mutable_string', "text", "mutable");
|
|
yatta.val('immutable_string', "text", "immutable");
|
|
|
|
console.log(yatta.val('immutable_string') === "text"); // true
|
|
yatta.val('mutable_string').insertText(2,"XXX"); // position, string
|
|
yatta.val('mutable_string').deleteText(0,1); // position, deletion length
|
|
console.log(yatta.val('mutable_string').val() === "eXXXxt"); // true
|
|
</code></pre><p>You can omit the mutable - parameter. In that case the default will be used.
|
|
Initially the default is 'mutable'. You can set it like this:</p><pre><code class="lang-js"> yatta.setMutableDefault('mutable');
|
|
// or
|
|
yatta.setMutableDefault('immutable');
|
|
|
|
yatta.val('new_string', "string");
|
|
console.log(yatta.val('new_string') === "string"); // true
|
|
</code></pre><p>yatta is chainable:</p><pre><code class="lang-js"> yatta.val('a', 4).val('b',5);
|
|
console.log(yatta.val('a') === 4); // true
|
|
console.log(yatta.val('b') === 5); // true
|
|
</code></pre><p>You can alse set objects.</p><pre><code class="lang-js"> yatta.val('object', {a : {b : "b"}, c : { d : 5 }});
|
|
console.log(yatta.val('object').val('c').val('d') === 5); // true
|
|
</code></pre><p>Lists are always immutable.</p><pre><code class="lang-js"> yatta.val('list', [1,2,3]);
|
|
console.log(yatta.val('list')[2] === 3); // true
|
|
</code></pre><p>But there is a much more convenient way!</p><pre><code class="lang-js"> console.log(yatta.value.list[2] === 3) // true
|
|
yatta.value.list = [3,4,5]
|
|
console.log(yatta.val('list')[2] === 5) // true
|
|
yatta.value.object = {c : 4}
|
|
console.log(yatta.value.object.c === 4) // true
|
|
</code></pre><p>The downside is that you are only allowed to overwrite existing properties.</p><pre><code class="lang-js"> yatta.value.newProperty = "Awesome"
|
|
console.log(yatta.value.newProperty !== "Awesome") // true, yatta.value.newProperty is undefined.
|
|
</code></pre><p>So, how do we create new properties?</p><pre><code class="lang-js"> yatta.value = {newProperty : "Awesome"}
|
|
console.log(yatta.value.newProperty === "Awesome") // true, it's awesome ;)
|
|
</code></pre><p>This is stupid! I don't want to overwrite all my existing properties!
|
|
Very well.. The solution is that we merge yatta.value with the new assignment.
|
|
For example: assuming we want to overwrite yatta.value with some object o.
|
|
Then these two rules apply:</p><ul>
|
|
<li>The result has all properties of o</li>
|
|
<li>The result has all properties of yatta.value if they don't occur under the same property-name in o</li>
|
|
</ul>
|
|
<pre><code class="lang-js"> yatta.value = {newProperty : {Awesome : true }}
|
|
console.log(yatta.value.list[2] === 5) // true, old value list still exists.
|
|
console.log(yatta.value.newProperty.Awesome === true) // true, newProperty is overwritten.
|
|
</code></pre><p>Consider this case.</p><pre><code class="lang-js"> yatta.value = {newProperty : { x : 4} }
|
|
console.log(yatta.value.newProperty.Awesome == null) // true, newProperty was replaced, therefore it is now undefined
|
|
</code></pre><p>Did you notice that you always set immutable objects if you set properties like this?
|
|
Even if the default is 'mutable'. If you want to work with mutable objects you have to work with .val().</p><p>One last thing. You are only allowed to set properties like this <code>yatta.value = o</code>.
|
|
Yatta can't observe if you overwrite object references <code>yatta = "Awesome"</code>.</p><pre><code class="lang-js"> w = yatta.value.newProperty
|
|
w = "Awesome"
|
|
console.log(yatta.value.newProperty !== "Awesome") // true, still not awesome..
|
|
</code></pre><p>Please also read <a href="https://rawgit.com/DadaMonad/Yatta/master/doc/class/JsonWrapper.html">JsonWrapper</a></p><pre><code class="lang-js"> })
|
|
}
|
|
window.onload = init
|
|
</code></pre>
|
|
|
|
</div>
|
|
</div>
|
|
<div id='footer'>
|
|
August 08, 14 04:37:31 by
|
|
<a href='https://github.com/coffeedoc/codo' title='CoffeeScript API documentation generator'>
|
|
Codo
|
|
</a>
|
|
2.0.9
|
|
✲
|
|
Press H to see the keyboard shortcuts
|
|
✲
|
|
<a href='http://twitter.com/netzpirat' target='_parent'>@netzpirat</a>
|
|
✲
|
|
<a href='http://twitter.com/_inossidabile' target='_parent'>@_inossidabile</a>
|
|
</div>
|
|
<iframe id='search_frame'></iframe>
|
|
<div id='fuzzySearch'>
|
|
<input type='text'>
|
|
<ol></ol>
|
|
</div>
|
|
<div id='help'>
|
|
<p>
|
|
Quickly fuzzy find classes, mixins, methods, file:
|
|
</p>
|
|
<ul>
|
|
<li>
|
|
<span>T</span>
|
|
Open fuzzy finder dialog
|
|
</li>
|
|
</ul>
|
|
<p>
|
|
Control the navigation frame:
|
|
</p>
|
|
<ul>
|
|
<li>
|
|
<span>L</span>
|
|
Toggle list view
|
|
</li>
|
|
<li>
|
|
<span>C</span>
|
|
Show class list
|
|
</li>
|
|
<li>
|
|
<span>I</span>
|
|
Show mixin list
|
|
</li>
|
|
<li>
|
|
<span>F</span>
|
|
Show file list
|
|
</li>
|
|
<li>
|
|
<span>M</span>
|
|
Show method list
|
|
</li>
|
|
<li>
|
|
<span>E</span>
|
|
Show extras list
|
|
</li>
|
|
</ul>
|
|
<p>
|
|
You can focus and blur the search input:
|
|
</p>
|
|
<ul>
|
|
<li>
|
|
<span>S</span>
|
|
Focus search input
|
|
</li>
|
|
<li>
|
|
<span>Esc</span>
|
|
Blur search input
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</body>
|
|
</html> |