Download to read offline
![onChange(例）
$c.onChange = function (e) {
var state = $w.app.state;
var names = e.target.name.split("#")
switch (names.length) {
case 1:
state[names[0]] = e.target.value
break;
case 2:
state[names[0]][names[1]] = e.target.value
break;
case 3:
state[names[0]][names[1]][names[2]] = e.target.value
break;
case 4:
state[names[0]][names[1]][names[2]][names[3]] = e.target.value
break;
default:
console.error("name length over")
}
this.update()
return true
};](https://image.slidesharecdn.com/riot20190301-190301222518/85/kichijyojipm17-Riot20190301-10-320.jpg)
kichijyojipm17-Riot20190301
- 1.
- 2. 使用してきたフレームワーク • Smartclient – https://www.smartclient.com/product/smartclien t.jsp –日本ではあまり知られていないがAll In Oneで非 常に良いフレームワーク – 英語のDocumentしかない。 – 無償でも十分使用できる。
- 3. 使用してきたフレームワーク • React.js – 非常に衝撃的なインパクトがあった。 –React.js, Flux, CofeeScriptで試作したメモ https://qiita.com/mikeshimura/items/ccc225f2fc64f20fe656 – Typescript React 簡易 Redux ( redux, react-redux ライブラリ 使用せ ず） https://qiita.com/mikeshimura/items/6671f1ded7d811802f34 – 超簡単 Reactjs もうflux、store、reduxで悩まなくても良い。onChange のhandlerも記述不要。 https://qiita.com/mikeshimura/items/178d71e0412d377acf36
- 4. React.js • 色々使用してみて（小規模システム） FeedbackをQiitaに書きました。 • 難点は、一部（特にstyle)がHTMLの標準表 記と違っていて、デザイナーからHTMLを受け 取ったときの反映がつらい • Status管理などの考え方は秀逸なので、他の フレームワークでもReact.jsの考え方を継続使 用している。
- 5. Riot.js • React.jsによく似たコンセプトのフレームワーク • HTMLの表記はstyleを含めて標準のままなの でデザイナーから受け取ったものがそのまま 反映できて、大変効率が良い。 •ＪｓへのCompileが実行時に大変早くできるの で、ｊｓに事前CompileせずRiot.jsの tag ファイ ルをそのまま使用している。
- 6.
- 7. 私製効率化ライブラリ • 先日吉祥寺pmで発表したJava Desktop,Go Desktopでも使用している共通ライブラリ • Input Text,Check Box,Radio Box,Select等の Handlerを Name属性から自動的に実行する ことで個別Program不要 • tagcommon.js • https://github.com/mikeshimura/javadesktop • https://github.com/mikeshimura/godesktop
- 8. Riot.js html <!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="UTF-8"> <title>The ASIN tying system</title> <script src="/static/js/lib/riot+compiler.js"></script> <script src="/static/js/lib/jquery.min.js"></script> <script src="/static/js/lib/sweetalert/sweetalert.min.js"></script> <script src="/static/tag/tagcommon.js"></script> <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.css"> <link rel="stylesheet" type="text/css" href="/static/css/sweetalert.css"> <link rel="stylesheet" type="text/css" href="/static/css/project.css"> </head> <body onunload="$wa.unload()"> <content></content> <script type="riot/tag" data-src="/static/tag/index.tag"></script> <script>riot.mount('content') ;riot.update()</script> </body> </html>
- 9. Input Text Sample <inputtype="text" style={ "width:100px;margin- left:20px;"} name="test" value={$ws.test} onchange={$c.onChange}>
- 10. onChange(例） $c.onChange = function(e) { var state = $w.app.state; var names = e.target.name.split("#") switch (names.length) { case 1: state[names[0]] = e.target.value break; case 2: state[names[0]][names[1]] = e.target.value break; case 3: state[names[0]][names[1]][names[2]] = e.target.value break; case 4: state[names[0]][names[1]][names[2]][names[3]] = e.target.value break; default: console.error("name length over") } this.update() return true };
- 11. Check Box Sample <inputtype="checkbox" style={ "width:20px;margin-left:20px;" } name="setting#test" checked={$ws.setting.test} onchange={$c.onChecked} > <span style="margin-left:0px;">チェックボックス </span>
- 12. Radio Button Sample <inputclass="form-check-input" type="checkbox" name="sel#1" checked={$ws.sel=="1" } onchange={$c.onRadioChecked} style="width:18px;height:18px;margin-top:1px;margin-left:120px;" /> <span style="padding-top:10px;vertical-align:top">SEL1 </span> <input class="form-check-input" type="checkbox" name="sel#2" checked={$ws.sel=="2" } onchange={$c.onRadioChecked} style="width:18px;height:18px;margin-top:1px;margin-left:30px;" /> <span style="padding-top:10px;vertical-align:top">SEL2</span>
- 13. Select Sample <select value={$ws.testsel}name={"testsel"} onChange={$c.onChange} style={"margin-left:0px;margin-top:0px;"}> <option each={c,index in $ws.testgroup} value={c.value} selected={c.value==$ws.testsel}> {c.label}</option> </select>
- 14. 表示・非表示 • If={true} If={false}で切り替え • Display属性より簡単で判り易い
- 15. Table Sample <table class="tabletable-bordered table-condensed wscrolltable" id="stable" style="width:300px;margin-left:120px;" if={$ws.setting.test}> <thead> <tr> <th style={"width:150px;"}>VALUE</th> <th style={"width:150px;"}>LABEL</th> </tr> </thead> <tbody> <tr each={c,index in $ws.testgroup}> <td>{c.value}</td> <td>{c.label}</td> </tr> </tbody> </table>