You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by cx...@apache.org on 2017/03/29 12:13:31 UTC
[04/39] incubator-weex git commit: + [example] add showcase input box
shadow chatroom
+ [example] add showcase input box shadow chatroom
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/cde2c0c8
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/cde2c0c8
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/cde2c0c8
Branch: refs/heads/0.12-dev
Commit: cde2c0c8719cab6d77f5ad0efdf9be4b7073d2a4
Parents: bb68f88
Author: kfeagle <su...@163.com>
Authored: Thu Mar 23 21:37:34 2017 +0800
Committer: kfeagle <su...@163.com>
Committed: Thu Mar 23 21:37:34 2017 +0800
----------------------------------------------------------------------
examples/component/list/list-basic.we | 5 +-
examples/module/chatroom-demo.we | 227 +++++++++++++++++++++++++++++
examples/module/websocket-demo.we | 50 ++++++-
examples/vue/components/input.vue | 203 +++++++++++++++++++++-----
examples/vue/components/list.vue | 3 +
examples/vue/index.vue | 1 +
examples/vue/showcase/boxshadow.vue | 39 +++++
7 files changed, 493 insertions(+), 35 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/cde2c0c8/examples/component/list/list-basic.we
----------------------------------------------------------------------
diff --git a/examples/component/list/list-basic.we b/examples/component/list/list-basic.we
index f7e0efc..7efc5a0 100644
--- a/examples/component/list/list-basic.we
+++ b/examples/component/list/list-basic.we
@@ -21,7 +21,7 @@
<style>
.list {
- height:850
+ height:850;
}
.count {
font-size: 48;
@@ -49,6 +49,9 @@
height: 100;
padding:20;
}
+ .item:active {
+ background-color: #00BFFF;
+ }
.item-title {
}
.refresh-view {
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/cde2c0c8/examples/module/chatroom-demo.we
----------------------------------------------------------------------
diff --git a/examples/module/chatroom-demo.we b/examples/module/chatroom-demo.we
new file mode 100644
index 0000000..506e3c3
--- /dev/null
+++ b/examples/module/chatroom-demo.we
@@ -0,0 +1,227 @@
+<template>
+ <div class="container">
+ <list class="list" loadmore="loadmore" loadmoreoffset="500">
+ <cell repeat="{{row in rows}}" append="tree">
+ <div class="item">
+ <text class="item-title" style="text-align:{{row.align}};background-color:{{row.bg}} ">{{row.message}}</text>
+ </div>
+ </cell>
+ <cell>
+ <text id="cellfoot" style="margin-bottom: 40"></text>
+ </cell>
+ </list>
+
+ <div style="flex-direction: row; justify-content: center;">
+ <input
+ type="text"
+ placeholder="\u8bf7\u8f93\u5165\u804a\u5929\u4fe1\u606f"
+ class="input"
+ autofocus="false"
+ value=""
+ onchange="onchange"
+ oninput="oninput"
+ id = "input"
+ />
+ <!--<text class="button" onclick="{{connect}}">connect</text>-->
+ <text class="button" onclick="{{send}}">\u53d1\u9001</text>
+ </div>
+ <text id="foot" style="color: #000000;height: 40"></text>
+ </div>
+</template>
+
+<style>
+ .input {
+ font-size: 40;
+ height: 80;
+ width: 500;
+ margin-bottom: 40px;
+ border-width: 2;
+ border-style: solid;
+ border-color: rgb(162, 217, 192);
+ }
+ .button {
+ font-size: 36;
+ width: 150;
+ height: 80;
+ text-align: center;
+ padding-top: 15;
+ padding-bottom: 15;
+ border-width: 2;
+ border-style: solid;
+ margin-right: 20;
+ margin-left: 20;
+ border-color: rgb(162, 217, 192);
+ background-color:#00BFFF;
+ color: white;
+ font-weight: 900;
+ box-shadow: 1 1px 8px rgba(205, 155, 29, 0.85);
+ }
+ .button:active {
+ background-color: #1E90FF;
+ box-shadow: 1 4px 6px rgba(255, 99, 71, 0.85);
+ }
+ .container{
+ flex:1;
+ justify-content: center;
+ align-items: center;
+ /*background-color: #f8f8f8;*/
+ flex-direction: column;
+ border-top-style:solid;
+ border-top-width:2;
+ border-top-color:#DFDFDF;
+ }
+ .list {
+ flex:1;
+ width:750;
+ /*transform:rotate(180deg);*/
+ justify-content: center;
+ align-items: center;
+ /*background-color: #abcdef;*/
+ flex-direction: column;
+ border-top-style:solid;
+ border-top-width:2;
+ border-top-color:#DFDFDF;
+ }
+ .row {
+
+ }
+ .item {
+ justify-content: center;
+ /*border-bottom-width: 2px;*/
+ /*border-bottom-color: #c0c0c0;*/
+ height: 60px;
+ padding:20px;
+ margin-top: 5;
+ /*transform:rotate(180deg);*/
+ }
+ .item-title {
+ font-size:30px;
+ height: 60px;
+ padding-top: 10;
+ padding-right: 20;
+ padding-left: 20;
+ }
+</style>
+
+<script>
+ var dom = require('@weex-module/dom');
+ var websocket = require('@weex-module/webSocket');
+ module.exports = {
+ data: {
+ rows:[],
+ names:['A','B','C','D','E','F','H','G'],
+ connectinfo: '',
+ sendinfo: '',
+ onopeninfo: '',
+ onmessage: '',
+ oncloseinfo: '',
+ onerrorinfo: '',
+ closeinfo: '',
+ txtInput:'',
+ info:'',
+ message:'',
+ align:'left',
+ bg:'white',
+ from_client_id:'',
+ name:'',
+ number:1
+ },
+ methods: {
+ ready:function(){
+ var self = this;
+ self.connect();
+ },
+ connect:function() {
+ websocket.WebSocket('ws://chat.workerman.net:7272/','');
+ var self = this;
+ self.info = 'connecting...'
+ websocket.onopen = function(e)
+ {
+ self.info = 'websocket open';
+ var count = self.names.length;
+ var id=Math.ceil(Math.random()*count);
+ self.name = self.names[id];
+ var loginData='{"type":"login","client_name":"'+self.name+'","room_id":"1"}';
+ self.login(loginData);
+ }
+
+ websocket.onmessage = function(e)
+ {
+ self.onmessage = e.data;
+ var message = JSON.parse(e.data);
+ self.align = 'left';
+ self.bg = 'white';
+ var loginMessage = '';
+ if(message.type == 'login' ){
+ if (self.from_client_id.length == 0)
+ {
+ self.from_client_id = message.client_id;
+// self.info = 'type is login';
+ self.align = 'right';
+ self.bg = '#00CD00';
+ loginMessage = self.name+' \u6b22\u8fce\u60a8\u52a0\u5165\u4e86\u804a\u5929\u5ba4';
+ }else {
+ self.info = 'type is login';
+ self.align = 'left';
+ self.bg = 'white';
+ loginMessage = message.client_name+'\u52a0\u5165\u4e86\u804a\u5929\u5ba4';
+ }
+ }
+ if(self.from_client_id == message.from_client_id)
+ {
+ self.align = 'right';
+ self.bg = '#00CD00';
+ }
+// self.info = message.type;
+ if(message.type == 'ping'){
+// self.info = 'type is ping';
+ }
+// self.info = e.data;
+ if(message.type == 'login')
+ {
+ self.rows.push({message:loginMessage,align:self.align,bg:self.bg});
+ }else if(message.type == 'logout')
+ {
+ self.rows.push({message:message.from_client_name+'\u79bb\u5f00\u4e86\u804a\u5929\u5ba4',align:self.align,bg:self.bg});
+ }
+
+ if(message.content ){
+ self.rows.push({message:message.from_client_name+':'+message.content,align:self.align,bg:self.bg});
+ if(self.rows.length>16){
+ dom.scrollToElement(self.$el('cellfoot'), { offset: 0 })
+ }
+ }
+
+
+ }
+ websocket.onerror = function(e)
+ {
+ self.onerrorinfo = e.data;
+ }
+ websocket.onclose = function(e)
+ {
+ self.onopeninfo = '';
+ self.onerrorinfo = e.code;
+ }
+ },
+ login:function (loginInfo) {
+ websocket.send(loginInfo);
+ },
+ send:function(e) {
+
+ var input = this.$el('input');
+ input.blur();
+ var self = this;
+ var sendinfo = '{"type":"say","from_client_id":"'+self.from_client_id+'","from_client_name":"'+'\u6e38\u5ba2'+'","to_client_id":"all","content":"'+this.txtInput+'","time":"2017-03-15 01:04:00"}'
+ websocket.send(sendinfo);
+// this.info = sendinfo;
+ },
+ oninput: function(event) {
+ this.txtInput = event.value;
+ },
+ close:function(e) {
+ websocket.close();
+ },
+ },
+ }
+</script>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/cde2c0c8/examples/module/websocket-demo.we
----------------------------------------------------------------------
diff --git a/examples/module/websocket-demo.we b/examples/module/websocket-demo.we
index 65de2e7..0d0c329 100644
--- a/examples/module/websocket-demo.we
+++ b/examples/module/websocket-demo.we
@@ -18,6 +18,7 @@
<text class="button" onclick="{{connect}}">connect</text>
<text class="button" onclick="{{send}}">send</text>
<text class="button" onclick="{{close}}">close</text>
+ <text class="button" onclick="{{go}}">chatroom</text>
</div>
<div style="background-color: #D3D3D3;margin-top: 20">
<text class="title" style="height: 80 ;padding: 20;color: #000000">method = send</text>
@@ -54,7 +55,7 @@
width: 600;
}
.button {
- font-size: 36;
+ font-size: 30;
width: 150;
color: #41B883;
text-align: center;
@@ -69,6 +70,7 @@
</style>
<script>
var websocket = require('@weex-module/webSocket');
+ var navigator = require('@weex-module/navigator');
module.exports = {
data: {
connectinfo: '',
@@ -84,7 +86,41 @@
dir: 'examples',
baseURL: '',
},
+ created: function() {
+ var bundleUrl = this.$getConfig().bundleUrl;
+ bundleUrl = new String(bundleUrl);
+ console.log('hit', bundleUrl);
+ var nativeBase;
+ var isAndroidAssets = bundleUrl.indexOf('file://assets/') >= 0;
+
+ var isiOSAssets = bundleUrl.indexOf('file:///') >= 0 && bundleUrl.indexOf('WeexDemo.app') > 0;
+ if (isAndroidAssets) {
+ nativeBase = 'file://assets/';
+ }
+ else if (isiOSAssets) {
+ // file:///var/mobile/Containers/Bundle/Application/{id}/WeexDemo.app/
+ // file:///Users/{user}/Library/Developer/CoreSimulator/Devices/{id}/data/Containers/Bundle/Application/{id}/WeexDemo.app/
+ nativeBase = bundleUrl.substring(0, bundleUrl.lastIndexOf('/') + 1);
+ }
+ else {
+ var host = 'localhost:12580';
+ var matches = /\/\/([^\/]+?)\//.exec(this.$getConfig().bundleUrl);
+ if (matches && matches.length >= 2) {
+ host = matches[1];
+ }
+ nativeBase = 'http://' + host + '/' + this.dir + '/build/';
+ }
+ var h5Base = bundleUrl;
+ // in Native
+ var base = nativeBase;
+ if (typeof window == 'object') {
+ // in Browser or WebView
+ base = h5Base;
+ }
+ this.baseURL = base;
+ },
methods: {
+
connect:function() {
websocket.WebSocket('ws://echo.websocket.org','');
var self = this;
@@ -119,6 +155,18 @@
close:function(e) {
websocket.close();
},
+ go:function(e) {
+ var vm = this;
+ if (typeof window !== 'object') {
+ this.baseURL = this.baseURL + 'module/chatroom-demo.js?test=1';
+ }
+ var params = {
+ 'url': this.baseURL,
+ 'animated' : 'true',
+ }
+ navigator.push(params,function(){
+ });
+ },
}
};
</script>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/cde2c0c8/examples/vue/components/input.vue
----------------------------------------------------------------------
diff --git a/examples/vue/components/input.vue b/examples/vue/components/input.vue
index 5583c25..6ef5f9b 100644
--- a/examples/vue/components/input.vue
+++ b/examples/vue/components/input.vue
@@ -1,55 +1,192 @@
<template>
- <scroller>
- <panel title="input" type="primary">
- <input
- type="text"
- placeholder="Text Input"
- class="input"
- autofocus="true"
- value=""
- @change="onchange"
- @input="oninput"
- />
- <text>oninput: {{txtInput}}</text>
- <text>onchange: {{txtChange}}</text>
- </panel>
- </scroller>
+ <div>
+ <div>
+ <text style="font-size: 40px">oninput: {{txtInput}}</text>
+ <text style="font-size: 40px">onchange: {{txtChange}}</text>
+ <text style="font-size: 40px">onreturntype: {{txtReturnType}}</text>
+ </div>
+ <scroller>
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = text</text>
+ </div>
+ <input type="text" placeholder="Input Text" class="input" :autofocus="autofocus" value="" @change="onchange" @input="oninput"/>
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = password</text>
+ </div>
+ <input type="password" placeholder="Input Password" class="input" @change="onchange" @input="oninput"/>
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = url</text>
+ </div>
+ <input type="url" placeholder="Input URL" class="input" @change="onchange" @input="oninput"/>
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = email</text>
+ </div>
+ <input type="email" placeholder="Input Email" class="input" @change="onchange" @input="oninput"/>
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = tel</text>
+ </div>
+ <input type="tel" placeholder="Input Tel" class="input" @change="onchange" @input="oninput"/>
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = time</text>
+ </div>
+ <input type="time" placeholder="Input Time" class="input" @change="onchange" @input="oninput"/>
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input type = date</text>
+ </div>
+ <input type="date" placeholder="Input Date" class="input" @change="onchange" @input="oninput" max="2017-12-12" min="2015-01-01"/>
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input keyboard = default</text>
+ </div>
+ <input type="text" placeholder="please input" return-key-type="default" class="input" @change="onchange" @return = "onreturn" @input="oninput" />
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input keyboard = go</text>
+ </div>
+ <input type="text" placeholder="please input" return-key-type="go" class="input" @change="onchange" @return = "onreturn" @input="oninput" />
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input keyboard = next</text>
+ </div>
+ <input type="text" placeholder="please input" return-key-type="next" class="input" @change="onchange" @return = "onreturn" @input="oninput" />
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input keyboard = search</text>
+ </div>
+ <input type="text" placeholder="please input" return-key-type="search" class="input" @change="onchange" @return = "onreturn" @input="oninput" />
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input keyboard = send</text>
+ </div>
+ <input type="text" placeholder="please input" return-key-type="send" class="input" @change="onchange" @return = "onreturn" @input="oninput" />
+ </div>
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input keyboard = done</text>
+ </div>
+ <input type="text" placeholder="please input" return-key-type="done" class="input" @change="onchange" @return = "onreturn" @input="oninput" />
+ </div>
+
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">function focus() & blur()</text>
+ </div>
+ <div style="flex-direction: row;margin-bottom: 16px;justify-content: space-between">
+ <text class="button" value="Focus" type="primary" @click="focus"></text>
+ <text class="button" value="Blur" type="primary" @click="blur"></text>
+ </div>
+
+ <input type="text" placeholder="Input1" class="input" value="" ref="input1"/>
+ </div>
+
+
+ <div>
+ <div style="background-color: #286090">
+ <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">input selection</text>
+ </div>
+ <div style="flex-direction: row;margin-bottom: 16px;justify-content: space-between">
+ <text class="button" value="setRange" type="primary" @click="setRange"></text>
+ </div>
+ <input type="text" ref="inputselection" placeholder="please input" value="123456789" class="input" @change="onchange" @return = "onreturn" @input="oninput"/>
+ </div>
+
+
+
+ </scroller>
+ </div>
</template>
-<style>
+<style scoped>
.input {
font-size: 60px;
height: 80px;
- width: 400px;
+ width: 750px;
+ }
+ .button {
+ font-size: 36;
+ width: 200;
+ color: #41B883;
+ text-align: center;
+ padding-top: 10;
+ padding-bottom: 10;
+ border-width: 2;
+ border-style: solid;
+ margin-right: 20;
+ border-color: rgb(162, 217, 192);
+ background-color: rgba(162, 217, 192, 0.2);
}
</style>
<script>
- var modal = weex.requireModule('modal')
module.exports = {
data: function () {
return {
txtInput: '',
- txtChange: ''
- }
- },
- components: {
- panel: require('../include/panel.vue')
+ txtChange: '',
+ txtReturnType: '',
+ txtSelection:'',
+ autofocus: false
+ };
},
methods: {
- onchange: function(event) {
+ ready: function () {
+ var self = this;
+ setTimeout(function () {
+ self.autofocus = true;
+ }, 1000);
+ },
+ onchange: function (event) {
this.txtChange = event.value;
- modal.toast({
- message: 'onchange: ' + event.value,
- duration: 2
- })
+ console.log('onchange', event.value);
+ },
+ onreturn: function (event) {
+ this.txtReturnType = event.returnKeyType;
+ console.log('onreturn', event.type);
},
- oninput: function(event) {
+ oninput: function (event) {
this.txtInput = event.value;
- modal.toast({
- message: 'onitput: ' + event.value,
- duration: 1
- })
+ console.log('oninput', event.value);
+ },
+ focus: function () {
+ this.$refs['input1'].focus();
+ },
+ blur: function () {
+ this.$refs['input1'].blur();
+ },
+ setRange: function() {
+ console.log(this.$refs["inputselection"]);
+ this.$refs["inputselection"].setSelectionRange(2, 6);
}
}
};
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/cde2c0c8/examples/vue/components/list.vue
----------------------------------------------------------------------
diff --git a/examples/vue/components/list.vue b/examples/vue/components/list.vue
index 81056c3..fb9ba21 100644
--- a/examples/vue/components/list.vue
+++ b/examples/vue/components/list.vue
@@ -40,6 +40,9 @@
height: 100px;
padding:20px;
}
+ .item:active {
+ background-color: #00BDFF;
+ }
.item-title {
}
</style>
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/cde2c0c8/examples/vue/index.vue
----------------------------------------------------------------------
diff --git a/examples/vue/index.vue b/examples/vue/index.vue
index dffc5f3..e37931d 100644
--- a/examples/vue/index.vue
+++ b/examples/vue/index.vue
@@ -37,6 +37,7 @@
// {name: 'module/clipboard', title: 'Clipboard'}, // 0.8 , developing
// showcase
+ {name: root + '/showcase/boxshadow', title: 'boxshadow'},
{name: root + '/showcase/progress', title: 'Progress Bar'},
{name: root + '/showcase/itemlist', title: 'List (Advanced)'},
{name: root + '/showcase/calculator', title: 'Calculator'},
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/cde2c0c8/examples/vue/showcase/boxshadow.vue
----------------------------------------------------------------------
diff --git a/examples/vue/showcase/boxshadow.vue b/examples/vue/showcase/boxshadow.vue
new file mode 100644
index 0000000..d656b23
--- /dev/null
+++ b/examples/vue/showcase/boxshadow.vue
@@ -0,0 +1,39 @@
+
+<template>
+ <div class="wrapper">
+ <div style="width:400px; height:60px;background-color: #FFE4C4; box-shadow:20px 10px rgb(255, 69, 0);">
+ <text class="title" style="text-align: center">Hello {{target}}</text>
+ </div>
+ <div style="margin-top: 80px;width:400px; height:60px;background-color: #FFE4C4; box-shadow: 20px 10px 5px rgba(255, 69, 0, 0.8);">
+ <text class="title" style="text-align: center">Hello {{target}}</text>
+ </div>
+ <div style="margin-top: 80px;width:400px; height:60px;background-color: #FFE4C4; box-shadow:inset 20px 10px 5px rgba(255, 69, 0, 0.8);">
+ <text class="title" style="text-align: center">Hello {{target}}</text>
+ </div>
+ <div style="margin-top: 80px;width:400px; height:60px;background-color: #FFE4C4; box-shadow:inset 20px 10px 5px rgb(255, 69, 0);">
+ <text class="title" style="text-align: center">Hello {{target}}</text>
+ </div>
+ <div style="margin-top: 80px;width:400px; height:60px;background-color: #FFE4C4; box-shadow:20px 10px 5px black;">
+ <text class="title" style="text-align: center">Hello {{target}}</text>
+ </div>
+ <div style="margin-top: 80px;width:400px; height:60px;background-color: #FFE4C4; box-shadow:20px 10px 5px #008B00;">
+ <text class="title" style="text-align: center">Hello {{target}}</text>
+ </div>
+ </div>
+</template>
+
+<style scoped>
+ .wrapper {align-items: center; margin-top: 120px;}
+ .title {font-size: 48px;}
+</style>
+
+<script>
+ module.exports = {
+ data: function () {
+ return {
+ logoUrl: 'https://alibaba.github.io/weex/img/weex_logo_blue@3x.png',
+ target: 'World'
+ };
+ }
+ };
+</script>