运行截图如下
list.w
<?xml version="1.0" encoding="utf-8"?>
<div xmlns="http://www.w3.org/1999/xhtml" xid="window" class="window" component="$UI/system/components/justep/window/window"
design="device:m;">
<div component="$UI/system/components/justep/model/model" xid="model" style="height:auto;left:172px;top:187px;">
<div component="$UI/system/components/justep/data/baasData" autoLoad="true"
xid="accountData" idColumn="fID" limit="5" saveAction="saveAccount" queryAction="queryAccount" tableName="account" url="/justep/account">
<column label="主键" name="fID" type="String" xid="xid3"/>
<column label="创建时间" name="fCreateTime" type="DateTime" xid="xid4"/>
<column label="日期" name="fDate" type="Date" xid="xid5"/>
<column label="金额" name="fMoney" type="Decimal" xid="xid6"/>
<column label="备注" name="fDescription" type="String" xid="xid7"/>
<column label="收入支出" name="fType" type="String" xid="xid8"/>
<column label="分类" name="fClass" type="String" xid="xid9"/>
<data xid="default2">[]</data>
</div>
</div>
<span component="$UI/system/components/justep/windowDialog/windowDialog" xid="detailDialog"
style="left:103px;top:198px;" src="$UI/demo/account/detail.w" title="记账" onReceived="detailDialogReceived">
<result concept="accountData" operation="edit" origin="accountData" xid="default26">
<mapping from="fID" to="fID" locator="true" xid="default27"/>
<mapping from="fCreateTime" to="fCreateTime" xid="default28"/>
<mapping from="fDate" to="fDate" xid="default29"/>
<mapping from="fMoney" to="fMoney" xid="default30"/>
<mapping from="fDescription" to="fDescription" xid="default31"/>
<mapping from="fType" to="fType" xid="default32"/>
<mapping from="fClass" to="fClass" xid="default33"/>
</result>
</span>
<div component="$UI/system/components/justep/panel/panel" class="x-panel x-full"
xid="panel1">
<div class="x-panel-top" xid="top1">
<div component="$UI/system/components/justep/titleBar/titleBar" class="x-titlebar"
xid="titleBar1" title="记账本">
<div class="x-titlebar-left" xid="div1">
<a component="$UI/system/components/justep/button/button" class="btn btn-link btn-only-icon"
label="设置" xid="settingBtn" icon="icon-navicon-round" onClick="settingBtnClick">
<i xid="i4" class="icon-navicon-round"/>
<span xid="span5">设置</span>
</a>
</div>
<div class="x-titlebar-title" xid="div2">记账本</div>
<div class="x-titlebar-right reverse" xid="div3">
<a component="$UI/system/components/justep/button/button" class="btn btn-link btn-only-icon"
label="新增" xid="newBtn" icon="icon-android-add" onClick="newBtnClick">
<i xid="i2" class="icon-android-add"/>
<span xid="span2">新增</span>
</a>
</div>
</div>
</div>
<div class="x-panel-content x-scroll-view" xid="content1">
<div class="x-scroll" component="$UI/system/components/justep/scrollView/scrollView"
xid="scrollView1">
<div class="x-content-center x-pull-down container" xid="div4">
<i class="x-pull-down-img glyphicon x-icon-pull-down" xid="i1"/>
<span class="x-pull-down-label" xid="span1">下拉刷新...</span>
</div>
<div class="x-scroll-content" xid="div5">
<div component="$UI/system/components/justep/list/list" class="x-list"
xid="list1" data="accountData">
<ul class="x-list-template" xid="listTemplateUl1">
<li xid="li1" class="account-list-line" bind-css="{'account-income' : $object.val('fType') == '收入','account-payout' : $object.val('fType') == '支出'}">
<div component="$UI/system/components/justep/row/row" class="x-row x-row-center"
xid="row1">
<div class="x-col" xid="col2" bind-click="listLineClick">
<div component="$UI/system/components/justep/row/row" class="x-row"
xid="row2">
<div class="x-col" xid="col4">
<div component="$UI/system/components/justep/output/output"
class="x-output h3" xid="output2" bind-ref="ref('fClass')"/>
</div>
</div>
<div component="$UI/system/components/justep/row/row" class="x-row"
xid="row3">
<div class="x-col" xid="col7">
<div component="$UI/system/components/justep/output/output"
class="x-output" xid="output4" bind-ref="ref('fDescription')"/>
</div>
</div>
</div>
<div class="x-col" xid="col3" bind-click="listLineClick">
<div component="$UI/system/components/justep/row/row" class="x-row"
xid="row4">
<div class="x-col" xid="col10">
<div component="$UI/system/components/justep/output/output"
class="x-output h3" xid="output1" bind-ref="ref('fMoney')"
format="0,000.00"/>
</div>
</div>
<div component="$UI/system/components/justep/row/row" class="x-row"
xid="row5">
<div class="x-col" xid="col13">
<div component="$UI/system/components/justep/output/output"
class="x-output" xid="output3" bind-ref="ref('fDate')" format="yyyy-MM-dd"/>
</div>
</div>
</div>
<div class="x-col x-col-fixed" xid="col1" style="50px;">
<a component="$UI/system/components/justep/button/button"
class="btn btn-link btn-only-icon account-delete" label="删除"
xid="deleteBtn" icon="icon-android-close" onClick="deleteBtnClick">
<i xid="i3" class="icon-android-close"/>
<span xid="span3">删除</span>
</a>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="x-content-center x-pull-up" xid="div6">
<span class="x-pull-up-label" xid="span4">加载更多...</span>
</div>
</div>
</div>
</div>
</div>
list.js
define(function(require) {
var $ = require("jquery");
var justep = require("$UI/system/lib/justep");
var Model = function() {
this.callParent();
};
Model.prototype.newBtnClick = function(event) {
// 调用对话框新增
this.comp("detailDialog").open({
"data" : {
"operator" : "new"
}
});
};
Model.prototype.listLineClick = function(event) {
// 调用对话框编辑，并传入当前行数据
var row = event.bindingContext.$object;
this.comp("detailDialog").open({
"data" : {
"operator" : "edit",
"rowData" : row.toJson()
}
});
};
Model.prototype.deleteBtnClick = function(event) {
// 行删除
var data = this.comp("accountData");
var row = event.bindingContext.$object;
data.deleteData([ row ], {
"async" : true,
"onSuccess" : function() {
data.saveData();
}
});
};
Model.prototype.detailDialogReceived = function(event) {
// 对话框返回后保存数据
this.comp("accountData").saveData();
};
Model.prototype.settingBtnClick = function(event) {
// 通过Shell显示左边的设置
justep.Shell.showLeft();
};
return Model;
});
list.css
.h3 {
margin : 0;
color : inherit;
font-size : 24px;
}
.x-output {
padding : 0px;
}
.account-list-line {
border-bottom: 1px solid lightgray;
overflow: hidden;
}
.account-list-line:active {
background-color: lightgray;
}
.account-income {
color : green;
}
.account-payout {
color : brown;
}
index.w
<?xml version="1.0" encoding="utf-8"?>
<div xmlns="http://www.w3.org/1999/xhtml" xid="window" class="window" component="$UI/system/components/justep/window/window"
design="device:m;">
<div component="$UI/system/components/justep/model/model" xid="model" onLoad="modelLoad"
style="height:auto;left:187px;top:249px;"/>
<div component="$UI/system/components/justep/wing/wing" class="x-wing" xid="wing" display="push">
<div class="x-wing-left" xid="left">
<div component="$UI/system/components/justep/titleBar/titleBar" class="x-titlebar"
xid="titleBar1" title="设置">
<div class="x-titlebar-left" xid="div2"/>
<div class="x-titlebar-title" xid="div3">设置</div>
<div class="x-titlebar-right reverse" xid="div4"/>
</div>
<a component="$UI/system/components/justep/button/button" class="btn btn-link btn-lg"
label="设置分类" xid="classSettingBtn" onClick="classSettingBtnClick" style="100%;">
<i xid="i2"/>
<span xid="span2">设置分类</span>
</a>
</div>
<div class="x-wing-content" xid="content1">
<div class="x-wing-backdrop" xid="div1"/>
<div component="$UI/system/components/justep/contents/contents" class="x-contents x-full"
active="0" xid="pages"/>
</div>
<div class="x-wing-right" xid="right1"/>
</div>
</div>
index.js
define(function(require) {
var $ = require("jquery");
var justep = require("$UI/system/lib/justep");
var ShellImpl = require('$UI/system/lib/portal/shellImpl');
require("$UI/demo/account/appVersionChecker");
var Model = function() {
this.callParent();
this.shellImpl = new ShellImpl(this, {
contentsXid : "pages",
wingXid : "wing",
pageMappings : {
"list" : {
url : "$UI/demo/account/list.w"
},
"detail" : {
url : "$UI/demo/account/detail.w"
},
"classSetting" : {
url : "$UI/demo/account/classSetting.w"
}
}
});
};
Model.prototype.modelLoad = function(event) {
this.shellImpl.showPage("list");
};
Model.prototype.classSettingBtnClick = function(event) {
this.shellImpl.showPage("classSetting");
};
return Model;
});
index.css
.x-wing-left > .x-titlebar {
background-color : orange;
}
detail.w
<?xml version="1.0" encoding="utf-8"?>
<div xmlns="http://www.w3.org/1999/xhtml" xid="window" class="window" component="$UI/system/components/justep/window/window"
design="device:m;">
<div component="$UI/system/components/justep/model/model" xid="model" style="height:auto;left:233px;top:180px;"
onLoad="modelLoad">
<div component="$UI/system/components/justep/data/data" autoLoad="false"
xid="accountData" idColumn="fID" autoNew="false" onValueChanged="accountDataValueChanged">
<column label="主键" name="fID" type="String" xid="xid3"/>
<column label="创建时间" name="fCreateTime" type="DateTime" xid="xid4"/>
<column label="日期" name="fDate" type="Date" xid="xid5"/>
<column label="金额" name="fMoney" type="Decimal" xid="xid6"/>
<column label="备注" name="fDescription" type="String" xid="xid7"/>
<column label="收入支出" name="fType" type="String" xid="xid8"/>
<column label="分类" name="fClass" type="String" xid="xid9"/>
<rule xid="rule1">
<col name="fMoney" xid="ruleCol1">
<required xid="required1">
<expr xid="default4">true</expr>
<message xid="default5">请填写金额</message>
</required>
</col>
</rule>
<data xid="default2">[]</data>
</div>
<div component="$UI/system/components/justep/data/baasData" autoLoad="true"
xid="classData" idColumn="fID" queryAction="queryAccount_class" tableName="account_class" url="/justep/account">
<column label="主键" name="fID" type="String" xid="xid1"/>
<column label="支出收入" name="fType" type="String" xid="xid2"/>
<column label="分类" name="fClass" type="String" xid="xid10"/>
<data xid="default1">[]</data>
</div>
<div component="$UI/system/components/justep/data/data" autoLoad="true"
xid="typeData" idColumn="fType" limit="20">
<column label="fType" name="fType" type="String" xid="xid11"/>
<data xid="default3">[{"fType":"收入"},{"fType":"支出"}]</data>
</div>
</div>
<span component="$UI/system/components/justep/windowReceiver/windowReceiver"
xid="windowReceiver1" style="left:149px;top:283px;" onReceive="windowReceiver1Receive"/>
<div component="$UI/system/components/justep/panel/panel" class="x-panel x-full"
xid="panel1">
<div class="x-panel-top" xid="top1">
<div component="$UI/system/components/justep/titleBar/titleBar" class="x-titlebar"
xid="titleBar1" title="记一笔">
<div class="x-titlebar-left" xid="div1">
<a component="$UI/system/components/justep/button/button" class="btn btn-link btn-only-icon"
label="button" xid="button3" onClick="{operation:'windowReceiver1.windowCancel'}">
<i xid="i3"/>
<span xid="span3"/>
</a>
</div>
<div class="x-titlebar-title" xid="div2">记一笔</div>
<div class="x-titlebar-right reverse" xid="div3">
<a component="$UI/system/components/justep/button/button" class="btn btn-link btn-only-icon"
label="确定" xid="okBtn" icon="icon-android-checkmark" onClick="okBtnClick">
<i xid="i1" class="icon-android-checkmark"/>
<span xid="span1">确定</span>
</a>
</div>
</div>
</div>
<div class="x-panel-content" xid="content1">
<div component="$UI/system/components/justep/labelEdit/labelEdit" class="x-label-edit x-label30"
xid="labelSelect1">
<label class="x-label" xid="label5"><![CDATA[类型]]></label>
<select component="$UI/system/components/justep/select/select" class="form-control x-edit"
xid="select4" bind-ref="accountData.ref('fType')" bind-options="typeData"
bind-optionsValue="fType"/>
</div>
<div component="$UI/system/components/justep/labelEdit/labelEdit" class="x-label-edit x-label30"
xid="labelSelect2">
<label class="x-label" xid="label2"><![CDATA[分类]]></label>
<select component="$UI/system/components/justep/select/select" class="form-control x-edit"
xid="select2" bind-ref="accountData.ref('fClass')" bind-options="$model.classData.find(['fType'], [$model.accountData.getValue('fType')])"
bind-optionsValue="fClass"/>
</div>
<div component="$UI/system/components/justep/labelEdit/labelEdit" class="x-label-edit x-label30"
xid="labelInput1">
<label class="x-label" xid="label1"><![CDATA[日期]]></label>
<input component="$UI/system/components/justep/input/input" class="form-control x-edit"
xid="input1" bind-ref="accountData.ref('fDate')"/>
</div>
<div component="$UI/system/components/justep/labelEdit/labelEdit" class="x-label-edit x-label30"
xid="labelInput2">
<label class="x-label" xid="label3"><![CDATA[金额]]></label>
<input component="$UI/system/components/justep/input/input" class="form-control x-edit"
xid="input2" bind-ref="accountData.ref('fMoney')" format="0,000.00" placeHolder="0.00"/>
</div>
<div component="$UI/system/components/justep/labelEdit/labelEdit" class="x-label-edit x-label30"
xid="labelInput3">
<label class="x-label" xid="label6"><![CDATA[备注]]></label>
<input component="$UI/system/components/justep/input/input" class="form-control x-edit"
xid="input3" bind-ref="accountData.ref('fDescription')" placeHolder="请输入备注"/>
</div>
</div>
</div>
</div>
detail.js
define(function(require) {
var $ = require("jquery");
var justep = require("$UI/system/lib/justep");
var Model = function() {
this.callParent();
};
Model.prototype.windowReceiver1Receive = function(event) {
// 对话框接收参数后，新增或编辑
var accountData = this.comp("accountData");
accountData.clear();
this.operator = event.data.operator;
if (this.operator == "new") {
accountData.newData({
"defaultValues" : [ {
"fID" : justep.UUID.createUUID(),
"fCreateTime" : new Date(),
"fDate" : new Date(),
"fType" : "支出",
"fClass" : this.getDefaultClass("支出")
} ]
});
} else if (this.operator == "edit") {
accountData.loadData([ event.data.rowData ]);
accountData.first();
}
};
// 获取指定类型下第一个分类作为默认分类
Model.prototype.getDefaultClass = function(type) {
var classData = this.comp("classData");
var rows = classData.find([ "fType" ], [ type ]);
return rows.length > 0 ? rows[0].val("fClass") : "";
};
Model.prototype.accountDataValueChanged = function(event) {
// 当类型改变时，分类也要同时改变
if (event.col == "fType") {
event.row.val("fClass", this.getDefaultClass(event.value));
}
};
Model.prototype.okBtnClick = function(event) {
// 确定后返回当前行，用于windowDialog的mapping映射
var accountData = this.comp("accountData");
var receiver = this.comp("windowReceiver1");
receiver.windowEnsure(accountData.getCurrentRow());
};
Model.prototype.onClassChanged = function(event) {
this.comp("classData").clear();
this.comp("classData").loadData(event.classData, true, null, null, true);
};
Model.prototype.modelLoad = function(event) {
// 通过Shell的消息总线，挂接分类改变的消息，接收到后加载改变后的分类数据
justep.Shell.on("onClassChanged", this.onClassChanged, this);
};
Model.prototype.modelUnLoad = function(event){
justep.Shell.off("onClassChanged", this.onClassChanged);
};
return Model;
});
detail.css
.x-panel > .x-panel-content {
margin : 10px;
}
classSetting.w
<?xml version="1.0" encoding="utf-8"?>
<div xmlns="http://www.w3.org/1999/xhtml" component="$UI/system/components/justep/window/window" design="device:m;"
xid="window" class="window">
<div component="$UI/system/components/justep/model/model" xid="model" style="height:auto;left:130px;top:300px;">
<div component="$UI/system/components/justep/data/baasData" autoLoad="true"
xid="classData" idColumn="fID" onAfterSave="classDataAfterSave" saveAction="saveAccount_class"
queryAction="queryAccount_class" tableName="account_class" url="/justep/account" directDelete="true">
<column label="主键" name="fID" type="String" xid="xid1"/>
<column label="支出收入" name="fType" type="String" xid="xid2"/>
<column label="分类" name="fClass" type="String" xid="xid10"/>
<data xid="default1">[]</data>
</div>
<div component="$UI/system/components/justep/data/data" autoLoad="true"
xid="typeData" idColumn="fType" limit="20">
<column label="fType" name="fType" type="String" xid="xid11"/>
<data xid="default3">[{"fType":"收入"},{"fType":"支出"}]</data>
</div>
</div>
<div component="$UI/system/components/justep/panel/panel" class="x-panel x-full"
xid="panel1">
<div class="x-panel-top" xid="top1">
<div component="$UI/system/components/justep/titleBar/titleBar" title="设置分类"
class="x-titlebar">
<div class="x-titlebar-left">
<a component="$UI/system/components/justep/button/button" label=""
class="btn btn-link btn-only-icon" icon="icon-chevron-left" xid="backBtn"
onClick="{operation:'window.close'}">
<i class="icon-chevron-left"/>
<span/>
</a>
</div>
<div class="x-titlebar-title">设置分类</div>
<div class="x-titlebar-right reverse">
<a component="$UI/system/components/justep/button/button" class="btn btn-link btn-only-icon"
label="保存" xid="saveBtn" icon="icon-android-checkmark" onClick="{operation:'classData.save'}">
<i xid="i3" class="icon-android-checkmark"/>
<span xid="span4">保存</span>
</a>
<a component="$UI/system/components/justep/button/button" class="btn btn-link btn-only-icon"
label="新增" xid="newBtn" icon="icon-android-add" onClick="newBtnClick">
<i xid="i4" class="icon-android-add"/>
<span xid="span5">新增</span>
</a>
</div>
</div>
</div>
<div class="x-panel-content" xid="content1" style="bottom: 0px;">
<div component="$UI/system/components/justep/list/list" class="x-list"
xid="list1" data="classData">
<ul class="x-list-template" xid="listTemplateUl1">
<li xid="li1">
<div component="$UI/system/components/justep/row/row" class="x-row x-row-center"
xid="row1">
<div class="x-col x-col-33" xid="col1">
<select component="$UI/system/components/justep/select/select"
class="form-control" xid="select1" bind-options="$model.typeData"
bind-optionsValue="fType" bind-ref="ref('fType')"/>
</div>
<div class="x-col" xid="col2">
<input component="$UI/system/components/justep/input/input" class="form-control"
xid="input1" bind-ref="ref('fClass')"/>
</div>
<div class="x-col x-col-fixed" xid="col3" style="50px;">
<a component="$UI/system/components/justep/button/button"
class="btn btn-link btn-only-icon" label="删除" xid="deleteBtn" icon="icon-android-close"
onClick="deleteBtnClick">
<i xid="i2" class="icon-android-close"/>
<span xid="span3">删除</span>
</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
classSetting.js
define(function(require) {
var $ = require("jquery");
var justep = require("$UI/system/lib/justep");
var Model = function() {
this.callParent();
};
Model.prototype.newBtnClick = function(event) {
// 新增分类数据并给出默认值
this.comp("classData").newData({
"defaultValues" : [ {
"fID" : justep.UUID.createUUID(),
"fType" : "支出"
} ]
});
};
Model.prototype.deleteBtnClick = function(event) {
// 行删除
var row = event.bindingContext.$object;
this.comp("classData").deleteData([ row ], {
"async" : true
});
};
Model.prototype.classDataAfterSave = function(event) {
// 通过Shell发出一个消息，通知其他页面分类数据已改变，并且在消息中携带了改变后的分类数据
var classData = this.comp("classData");
justep.Shell.fireEvent("onClassChanged", {
"classData" : classData.toJson()
});
};
return Model;
});
appVersionChecker.js
define(function(require){
var $ = require('jquery');
var versionInfo;
var Browser = require('$UI/system/lib/base/browser');
var MsgDialog = require("$UI/system/components/justep/messageDialog/messageDialog");
require("cordova!cordova-plugin-app-version");
require("cordova!cordova-plugin-inappbrowser");
var parentNode = $('body').find('.window').get(0);
var VersionChecker = function(){
this.env = "browser";
if(Browser.isX5App){
if(Browser.isAndroid){
this.env = "androidApp";
}
if(Browser.isIOS){
this.env = "iosApp";
}
}
//this.env = "androidApp";
this.versionMsg = new MsgDialog({
parentNode:parentNode
});
var $domNode = this.versionMsg.$domNode;
$domNode.find('.Yes').text('更新');
$domNode.find('.No').text('忽略');
this.versionMsg.on('onYes', function(event) {
//下载
this.download();
}, this);
this.versionMsg.on('onNo', function(event) {
//忽略
this.ignore();
}, this);
var self = this;
document.addEventListener("deviceready", function() {
setTimeout(function(){
self.check();
},1000);
});
};
VersionChecker.prototype.check = function(){
var self = this;
if(cordova.getAppVersion){
cordova.getAppVersion.getVersionNumber(function (currentVersion) {
require(['./appVersion_in_server'],function(version_info){
if(version_info){
versionInfo = version_info;
if(versionInfo[self.env] && currentVersion < versionInfo[self.env].version && window.localStorage &&
localStorage.getItem('versionIgnore') !== versionInfo[self.env].version){
self.versionMsg.show({
type : "YesNoCancel",
title : "版本更新",
message : versionInfo[self.env].changeLog
});
}
}
},function(){
console.log('检查版本失败！');
});
});
}else{
console.log('请登录wex5.com下载最新版本体验系统！');
}
};
VersionChecker.prototype.download = function(){
window.open(versionInfo[this.env].downloadUrl,'_system');
};
VersionChecker.prototype.ignore = function(){
if(window.localStorage){
localStorage.setItem('versionIgnore',versionInfo[this.env].version);
}
};
return new VersionChecker();
});
appVersion_in_server.js
define(function(require){
var versionInfo = {
androidApp:{
version:"5.3.18",
changeLog:"请填写版本更新内容",
downloadUrl:"http://wex5.com/apps/account.apk"
},
iosApp:{
version:"5.3.18",
changeLog:"请填写版本更新内容",
downloadUrl:"itms-services:///?action=download-manifest&url=https://x.justep.com/apps/account.plist"
}
};
return versionInfo;
});