tag:blogger.com,1999:blog-60997657294906623812024-08-29T11:15:23.077+09:00uchima.blogUnknownnoreply@blogger.comBlogger5125tag:blogger.com,1999:blog-6099765729490662381.post-26607787666092494802011-02-26T20:28:00.002+09:002011-02-27T06:43:14.306+09:00jquery.jsonengine.js _LOAD()<script src="http://jsdo.it/blogparts/sLbx/js" type="text/javascript">
</script><br />
<div class="ttlBpJsdoit" style="font-size: 11px; margin: 0; text-align: right; width: 465px;"><a href="http://jsdo.it/tsutomu/sLbx" title="jquery.jsonengine.js _LOAD()">jquery.jsonengine.js _LOAD() - jsdo.it - share JavaScript, HTML5 and CSS</a></div><br />
前の<a href="http://tsutomuuchima.blogspot.com/2011/02/jqueryjsonenginejs.html">エントリ</a>で書いたヤツjquery.jsonengine.js _LOAD()を書いてみた。ネストしたjsonにはまだ未対応だけど。<br />
<br />
ぜひ<a href="http://jsdo.it/tsutomu/sLbx" target="_blank">jsdo.it</a>でフォークしてhtmlやcssの定義のみでデータ表示出来る様子を疑似体験してください。<br />
<br />
追記：<a href="http://satomacoto.blogspot.com/2010/02/jsonhtml.html" target="_blank">こちら</a>を参考にネストしたjsonにも対応しました。Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-6099765729490662381.post-63612223511016741552011-02-26T09:28:00.016+09:002011-03-01T00:26:08.428+09:00jquery.jsonengine.js メモ<pre class="brush: xml"><div class="_je_message">
<span class="query">&sort=_createdAt.desc</span>
</div>
</pre><br />
<pre class="brush: js">$._GET (option, success, error);
$._POST (option, success, error);
$._PUT (option, success, error);
$._DELETE(option, success, error);
$('._je_messages')._LOAD();
$('._je_messages')._GET ($('._je_messages_form'), success, error);
$('._je_messages')._POST ($('._je_messages_form'), success, error);
$('._je_messages')._PUT ($('._je_messages_form'), success, error);
$('._je_messages')._DELETE($('._je_messages_form'), success, error);
$('._je_messages')._GET ($('._je_messages_search'), success, error);
$('._je_messages_listform');
$('._je_messages')._POST($('._je_messages_jsonform'), success, error);
</pre><br />
多分この形に落ち着くと思う。<br />
<a name='more'></a><br />
命名規則はhtmlタグのクラス名で。<br />
<br />
<span class="Apple-style-span" style="background-color: #cccccc;"><div class="_je_xxx"/></span><br />
<br />
クラス名の先頭に”_je_”と付いているエレメントがjqueryプラグイン用。”xxx”はjsonengineのdocType名を表す。<br />
<br />
<span class="Apple-style-span" style="background-color: #cccccc;"><s><span class="_je_query"/></s></span><br />
<span class="Apple-style-span" style="background-color: #cccccc;"><span class="query"/></span><br />
<br />
クラス名”<span class="Apple-style-span" style="font-family: monospace; white-space: pre;">_je_message</span>”の配下にあるクラス名”query”はjsonengineに対して_LOAD()が実行される場合に渡されるクエリ文字列を示す。つまり$('._je_messages')._LOAD();の実行はhtmlに記載された情報を元にされる。_LOAD()が実行されるとレスポンスが<div/>タグ内に表示される。どの様な表示形式にするかはまだ未定。単純なhtmlドキュメントが挿入されてユーザーのスタイルシートで自由に表現出来るようにしたい。あとダブルクリックでリロードするとか、<br />
<br />
<span class="Apple-style-span" style="background-color: #cccccc;">_je_xxx_form</span><br />
<br />
末尾に_formが付いている要素はdocTypeのデータを入力するフォームエレメントを表す。<br />
<br />
<span class="Apple-style-span" style="background-color: #cccccc;">_je_xxx_search</span><br />
<br />
末尾に_searchが付いている要素は検索式を入力するフォームエレメントを表す。<br />
<br />
以上が近々実装出来る機能。<br />
<br />
_je_xxx_listformと_je_xxx_jsonformは将来的に実装したい物。listformはGoogle taskみたいなリスト形式のデータが扱えるやつ。jsonformはオブジェクトリテラル形式のデータ入力を支援するフォーム。これらの機能はウィジェット的な形式で提供する事になると思う。Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-6099765729490662381.post-34338355301528032362011-02-25T20:25:00.008+09:002011-02-26T09:29:41.919+09:00jsonengine用のアプリを簡単に書けるようなjQueryプラグイン書いたアプリのJavaScriptはこんな感じで書けるようにしてみた。 <br />
<pre class="brush: js">$(function() {
$('#_POST').click(function(){
$('#myDoc-list')._POST($('#myDoc'));
});
$('#_GET').click(function(){
$('#myDoc-list')._GET($('#myDoc'));
});
$('#_PUT').click(function(){
$('#myDoc-list')._PUT($('#myDoc'));
});
$('#_DELETE').click(function(){
$('#myDoc-list')._DELETE($('#myDoc'));
});
$('#_SEARCH').click(function(){
$('#myDoc-list')._GET($('#myDoc-search'));
});
$('#_SEARCH').click();
});
</pre><br />
実際のデモはここ。 <a href="http://uchjava.appspot.com/samples/jquery/jquery.jsonengine.js/example.html" target="_blank">http://uchjava.appspot.com/samples/jquery/jquery.jsonengine.js/example.html</a><br />
<br />
リストの項目をクリックしたら編集出来る。<br />
<br />
<a name='more'></a><br />
htmlはこんな感じ。 <br />
<br />
<pre class="brush: html"><body>
<h1>Sample by jquery.jsonengine.js</h1>
<!--
<form id="myDoc" class="_jeClearForm" action="/_je/myDoc">
-->
<form id="myDoc">
<input type="text" name="msgTxt" value=""/><label>msgTxt</label><br/>
<input type="text" name="_docId" value=""/><label>_docId</label><br/>
<input type="text" name="_createdAt" value=""/><label>_createdAt</label><br/>
<input type="text" name="_updatedAt" value=""/><label>_updatedAt</label><br/>
<input type="button" id="_POST" value="POST"/>
<input type="button" id="_GET" value="GET"/>
<input type="button" id="_PUT" value="PUT"/>
<input type="button" id="_DELETE" value="DELETE"/>
<input type="reset"/>
</form>
<form id="myDoc-search">
<input type="text" name="msgTxt" value=""/>
<input type="button" id="_SEARCH" value="SEARCH"/>
</form>
<h2>messages</h2>
<p id="myDoc-list"></p>
</pre><br />
明日はこのアプリ自体のJavaScriptソースを書かなくてもいいようにクラスとidの命名規則で動くように作る。そこまで出きたらjsonengineのBBSとjson-noteをこのプラグインで書けるようにチャレンジ。<br />
<br />
多分そこまで出来るようになったらもっとjsonengineの利用が増えるんじゃないかと。Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-6099765729490662381.post-74982493998650964902011-02-18T16:30:00.007+09:002011-02-26T04:27:46.096+09:00blogspot.comにSyntaxHighlighterを導入する。いろいろソースコードを掲載する予定なのでこんな風に表示したい。<br />
<br />
<pre class="brush: js">var print = function(e){
console.log(e);
}
</pre><br />
手作業でハイライトを編集するのは面倒なのでSyntaxHighlighterを導入することにした。<br />
<br />
<br />
<a name='more'></a><br />
<br />
<head/>にソースを追加。<br />
<br />
blogspot.comのダッシュボードからデザイン>HTMLの編集を選択。<head/>を見つけて最後の要素として以下のものを追加。<br />
<br />
<pre class="brush: xml"><link href="http://sites.google.com/site/bloggermintcom/shCore.css" rel="stylesheet" type="text/css"></link>
<link href="http://sites.google.com/site/bloggermintcom/shThemeDefault.css" rel="stylesheet" type="text/css"></link>
<script src="http://sites.google.com/site/bloggermintcom/shCore.js" type="text/javascript"/>
<script src="http://sites.google.com/site/bloggermintcom/shBrushCss.js" type="text/javascript"/>
<script src="http://sites.google.com/site/bloggermintcom/shBrushJScript.js" type="text/javascript"/>
<script src="http://sites.google.com/site/bloggermintcom/shBrushXml.js" type="text/javascript"/>
<script type="text/javascript">
SyntaxHighlighter.all()
</script>
</pre><br />
<br />
使い方<br />
<br />
<pre class=”brush: xml”><br />
Your script here<br />
</pre>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-6099765729490662381.post-37659974295945588792011-02-18T15:57:00.008+09:002011-02-26T04:32:05.908+09:00jsonengineとExt.treeを使ったデモ<div class="separator" style="clear: both; text-align: center;"><a href="http://cdn-ak.f.st-hatena.com/images/fotolife/T/TsutomuUchima/20110215/20110215183215.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="206" src="http://cdn-ak.f.st-hatena.com/images/fotolife/T/TsutomuUchima/20110215/20110215183215.png" width="320" /></a></div><br />
デモはこちら。<a href="http://uchjava.appspot.com/samples/extjs/samples/tree.html" target="_blank">http://uchjava.appspot.com/samples/extjs/samples/tree.html</a><br />
<br />
<br />
<a name='more'></a><br />
<br />
コードはこんな感じ。<br />
<br />
<pre class="brush: js">Ext.onReady(function() {
var treePanel = new Ext.tree.TreePanel( {
dataUrl : '/_je/testTree',
requestMethod: 'GET',
nodeParameter: null,
root: {
nodeType: 'async',
text : '/',
id : 'xxx'
}
});
// event override
treePanel.on("beforeload", function(node){
this.loader.baseParams.cond = 'node.eq.' + node.id;
});
// render the tree
treePanel.render(Ext.getBody());
treePanel.getRootNode().expand();
});
</pre>Unknownnoreply@blogger.com0