未验证 提交 a23fc365 编写于 作者: O openharmony_ci 提交者: Gitee

!6044 【ACE子系统】新增用例

Merge pull request !6044 from splaneguo/master
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/* xxx.css */
.container {
flex-direction:row;
width:100%;
height:100%;
padding: 1px;
}
.prop_all-container {
flex-direction: row;
height: 100%;
flex-weight: 1;
}
.sub-container{
flex-direction: column;
height: 100%;
flex-weight: 1;
}
.style-container{
flex-direction: column;
height: 100%;
flex-weight: 1;
}
.title{
width: 100%;
font-size: 18px;
margin: 2px;
padding: 2px;
font-weight: bold;
text-align: center;
}
.sub-title{
width: 100%;
font-size: 14px;
text-align: left;
margin: 2px;
padding: 2px;
}
.style1{
width: 100%;
height: 100%;
min-width: 25px;
min-height: 10px;
max-width: 300px;
max-height: 50px;
padding-left: 10px;
padding-top: 20px;
padding-right: 15px;
padding-bottom: 5px;
margin-left: 10px;
margin-top: 20px;
margin-right: 15px;
margin-bottom: 5px;
border-left-style: solid;
border-right-style: dashed;
border-top-style: dashed;
border-bottom-style: dotted;
border-left-width: 1px;
border-right-width: 2px;
border-top-width: 2px;
border-bottom-width: 1px;
border-left-color: #ff0000;
border-right-color: #00ff00;
border-top-color: #0000ff;
border-bottom-color: #fff000;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 15px;
border-top-left-radius: 8px;
border-top-right-radius: 12px;
background: linear-gradient(pink,#fff000);
box-shadow: 2px 4px 6px 8px #888888;
opacity: 0.5;
display: flex;
visibility: visible;
align-self: center;
image-fill: #000fff;
clip-path: margin-box;
}
.style2{
width: 50px;
height: 20px;
padding-start: 10px;
padding-end: 15px;
margin-start: 5px;
margin-end: 10px;
border-style: dotted;
border-width: 2px;
border-color:#000000;
border-radius:5px;
background-color:#ffaa00;
mask-image: url('common/images/icon.png');
mask-size: cover;
mask-position: center;
}
.style3{
width: 100%;
padding: 10px;
margin: 5px;
border-left: 1px solid #000000;
border-right: 2px dashed #00ff00;
border-top: 1.5px dotted #0000ff;
border-bottom: 2.5px dotted #fff000;
background-image:url('common/images/bg-tv.jpg');
background-size:cover;
background-repeat: repeat-x;
background-position: center;
flex:1;
flex-grow: 2;
flex-basis: 10px;
flex-shrink: 1;
}
.style4{
width: 60%;
height: 5%;
padding: 10px;
margin: 5px;
border: 2px solid #000000;
}
.contain1{
width: 100%;
height: 70px;
flex-direction: column;
}
.style5{
width: 50%;
height: 30px;
background-color: yellow;
border-image-source: url('/common/images/image.png');
border-image-slice: 1px 2px 3px 4px;
border-image-width: 2px 3px 4px 5px;
border-image-outset: 3px 4px 5px 6px;
border-image-repeat: repeat;
}
.style6{
width: 70px;
height: 30px;
position: absolute;
left: 10px;
top: 35px;
bottom: 5px;
right: 10px;
background-color: pink;
border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round;
}
.prop-container{
flex-direction: column;
height: 100%;
flex-weight: 1;
}
.prop1 {
color: #ad4e2a;
height: 30px;
background-color: mediumslateblue;
width: 100%;
margin: 5px;
}
.prop2 {
color: #343524;
height: 30px;
background-color: pink;
width: 100%;
margin: 5px;
}
.prop3 {
color: #456345;
height: 30px;
background-color: darkseagreen;
width: 100%;
margin: 5px;
}
.prop5 {
color: #831834;
stroke-width: 40px;
line-cap: square;
margin: 5px;
height: 70px;
}
.ani-container{
flex-direction: column;
height: 100%;
flex-weight: 1;
}
.ani1{
color: #72ac33;
stroke-width: 55px;
line-cap: square;
margin: 5px;
transform-origin: 0% 0%;
animation: ani1Go 3s infinite;
}
@keyframes ani1Go
{
from {
background-color: #f76160;
opacity:0.3;
width:50px;
height: 50px;
transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg);
background-position:10% 10%
}
30% {
background-color: #60f761;
opacity:0.5;
width:70px;
height: 70px;
background-position:12% 12%;
transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg)
}
to {
background-color: #6160f7;
opacity:1;
width:90px;
height: 90px;
background-position:22% 22%;
transform:rotate(180deg) scale(2)
}
}
.ani2{
color: #ad4e2a;
width: 55px;
height: 55px;
margin: 5px;
transform-origin: 2% 3%;
animation-name:ani2Go;
animation-delay:5s;
animation-duration:10s;
animation-iteration-count:4;
animation-timing-function:ease-out;
animation-direction:reverse;
animation-fill-mode:forwards;
animation-play-state:running;
transition:all 0 ease 0;
}
@keyframes ani2Go
{
from {
background-color: #f76160;
opacity:0.3;
width:50px;
height: 50px;
background-position:10% 10%
}
30% {
background-color: #60f761;
opacity:0.5;
width:70px;
height: 70px;
background-position:12% 12%;
transform:translateX(10px) translateY(5px) translateZ(15px)
rotateX(20deg) rotateY(25deg) rotateZ(15deg) scaleX(0.6) scaleY(0.5) scaleZ(1.5) perspective(10);
}
to {
background-color: #6160f7;
opacity:1;
width:90px;
height: 90px;
background-position:22% 22%;
transform:translateX(30px) translateY(45px) translateZ(55px)
rotateX(180deg) rotateY(185deg) rotateZ(150deg) scaleX(2) scaleY(2.5) scaleZ(3.5);
}
}
.gradient-container{
flex-direction: column;
}
.gradient1{
width: 100%;
height: 20px;
margin: 5px;
background: linear-gradient(red, #00ff00);
}
.gradient2{
width: 100%;
height: 20px;
margin: 5px;
background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
}
.gradient3{
width: 100%;
height: 20px;
margin: 5px;
background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
}
.gradient4{
width: 100%;
height: 20px;
margin: 5px;
background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
}
.atom-container{
flex-direction: column;
}
.multiMode-container{
flex-direction: column;
}
.multiMode1{
background-color: #978666;
width: 100%;
height: 30px;
margin: 5px;
}
.flex-box {
justify-content: space-around;
align-items: center;
height: 50px;
background-color: #ffffff;
}
.flex-item {
width: 20px;
height: 20px;
border-radius: 16px;
}
.color-primary {
background-color: mediumpurple;
}
.color-warning {
background-color: pink;
}
.color-success {
background-color: cornflowerblue;
}
.dragContent{
width: 60px;
height: 60px;
background-color: red;
}
.flex-box2 {
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
height: 100px;
background-color: #ffffff;
}
.common {
background-color: #ffffff;
align-items: center;
justify-content: center;
}
.grid-parent {
display: grid;
grid-template-columns: 20% 20%;
grid-columns-gap: 14px;
grid-rows-gap: 4px;
grid-template-rows: 15% 15%;
}
.grid-child {
width: 100%;
/* height: 100%;*/
border-radius: 2px;
}
.grid-left-top {
width: 20px;
height: 20px;
border-radius: 10px;
border: 1px solid plum;
background: linear-gradient(pink, purple);
box-shadow: 0px 0px 1px 1px pink;
grid-row-start: 0;
grid-column-start: 0;
grid-row-end: 0;
grid-column-end: 0;
}
.grid-left-bottom {
width: 20px;
height: 20px;
border-radius: 5px;
border: 1px solid plum;
background: linear-gradient(pink, #00aaee);
box-shadow: 0px 0px 1px 1px pink;
grid-row-start: 1;
grid-column-start: 0;
grid-row-end: 1;
grid-column-end: 0;
}
.grid-right-top {
width: 20px;
height: 20px;
border-radius: 3px;
border: 1px dotted plum;
background: linear-gradient(mediumpurple, #00aaee);
box-shadow: 0px 0px 1px 1px pink;
grid-row-start: 0;
grid-column-start: 1;
grid-row-end: 0;
grid-column-end: 1;
}
.grid-right-bottom {
width: 20px;
height: 20px;
border-radius: 5px;
border: 1px dotted plum;
background: linear-gradient(pink, mediumpurple);
box-shadow: 0px 0px 2px 2px pink;
grid-row-start: 1;
grid-column-start: 1;
grid-row-end: 1;
grid-column-end: 1;
}
.event-container{
flex-direction: column;
height: 30%;
}
.event1{
width: 60%;
flex-weight: 1;
}
.event2{
width: 70%;
flex-weight: 1;
}
.event3{
width: 80%;
flex-weight: 1;
}
.function-container{
flex-direction: column;
}
.function {
height: 30px;
width: 100%;
}
<!--/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/-->
<div class="container">
<div class="sub-container">
<div class="prop-container">
<text class="title">
对象的属性
</text>
<text class="sub-title">
属性1
</text>
<canvas ref="canvas1" style="width: 100%; height: 30px;margin-top: 5px; ">
</canvas>
<text class="sub-title">
属性2
</text>
<canvas ref="canvas2" style="width: 100%; height: 30px;margin-top: 5px; ">
</canvas>
<text class="sub-title">
属性3
</text>
<canvas ref="canvas3" style="width: 100%; height: 20px;margin-top: 5px;">
</canvas>
<text class="sub-title">
属性4
</text>
<canvas ref="canvas4" style="width: 100%; height: 50px;margin-top: 5px;">
</canvas>
<text class="sub-title">
属性5
</text>
<canvas ref="canvas5" style="width: 100%; height: 40px;margin-top: 5px;">
</canvas>
<text class="sub-title">
属性6
</text>
<canvas ref="canvas6" style="width: 100%; height: 30px;margin-top: 5px;">
</canvas>
<text class="sub-title">
属性7
</text>
<canvas ref="canvas7" style="width: 100%; height: 80px;margin-top: 5px;">
</canvas>
<text class="sub-title">
属性8
</text>
<canvas ref="canvas8" style="width: 100%; height: 80px; background-color: #ffff00;margin-top: 5px;">
</canvas>
<text class="sub-title">
属性9
</text>
<canvas ref="canvas9" style="width: 100%; height: 70px;margin-top: 5px;">
</canvas>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<div class="sub-container">
<div class="prop-container">
<text class="sub-title">
属性10
</text>
<canvas ref="canvas10" style="width: 100%; height: 90px;margin-top: 5px;">
</canvas>
<text class="sub-title">
属性11
</text>
<canvas ref="canvas11" style="width: 100%; height: 80px;margin-top: 5px;">
</canvas>
<text class="sub-title">
属性12
</text>
<canvas ref="canvas12" style="width: 100%; height: 40px;margin-bottom: 10px;margin-top: 5px;">
</canvas>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<text class="title">
对象的方法
</text>
<text class="sub-title">
方法1
</text>
<canvas style="width: 100%; height: 50px;margin-top: 5px;" ref="function1">
</canvas>
<text class="sub-title">
方法2
</text>
<canvas style="width: 100%; height: 30px;margin-top: 5px;" ref="function2">
</canvas>
<text class="sub-title">
方法3
</text>
<canvas style="width: 100%; height: 40px;margin-top: 5px;" ref="function3">
</canvas>
<text class="sub-title">
方法4
</text>
<canvas style="width: 100%; height: 70px;margin-top: 5px;" ref="function4"></canvas>
<text class="sub-title">
方法5
</text>
<canvas style="width: 100%; height: 50px;margin-top: 5px;" ref="function5"></canvas>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<div class="sub-container">
<div class="function-container">
<text class="sub-title">
方法6
</text>
<canvas style="width: 100%; height: 40px;margin-top: 5px;" ref="function6"></canvas>
<text class="sub-title">
方法7
</text>
<canvas style="width: 100%; height: 40px;margin-top: 5px;" ref="function7"></canvas>
<text class="sub-title">
方法8
</text>
<canvas style="width: 100%; height: 50px;margin-top: 5px;" ref="function8"></canvas>
<text class="sub-title">
方法9
</text>
<canvas style="width: 100%; height: 100px;background-color: #ffff00;margin-top: 5px;" ref="function9"></canvas>
<text class="sub-title">
方法10
</text>
<canvas style="width: 100%; height: 60px;margin-top: 5px;" ref="function10"></canvas>
<text class="sub-title">
方法11
</text>
<canvas style="width: 100%; height: 70px;margin-top: 5px;" ref="function11"></canvas>
<text class="sub-title">
方法12
</text>
<canvas style="width: 100%; height: 60px;margin-top: 5px;" ref="function12"></canvas>
<text class="sub-title">
方法13
</text>
<canvas style="width: 100%; height: 60px;margin-top: 5px;" ref="function13"></canvas>
<text class="sub-title">
方法14
</text>
<canvas style="width: 100%; height: 60px;margin-top: 5px;" ref="function14"></canvas>
<text class="sub-title">
方法15
</text>
<canvas style="width: 100%; height: 60px;margin-top: 5px;" ref="function15"></canvas>
<text class="sub-title">
方法16
</text>
<canvas style="width: 100%; height: 60px;margin-top: 5px;" ref="function16"></canvas>
<text class="sub-title">
方法17
</text>
<canvas style="width: 100%; height: 60px;margin-top: 5px;" ref="function17"></canvas>
<text class="sub-title">
方法18
</text>
<canvas style="width: 100%; height: 60px;margin-top: 5px;" ref="function18"></canvas>
<text class="sub-title">
方法19
</text>
<canvas style="width: 100%; height: 60px;margin-top: 5px;" ref="function19"></canvas>
<text class="sub-title">
方法20
</text>
<canvas style="width: 100%; height: 60px;margin-top: 5px;" ref="function20"></canvas>
<text class="sub-title">
方法21
</text>
<canvas style="width: 100%; height: 60px;margin-top: 5px;" ref="function21"></canvas>
<text class="sub-title">
方法22
</text>
<canvas style="width: 100%; height: 60px;margin-top: 5px;" ref="function22"></canvas>
</div>
<text class="sub-title">
方法23
</text>
<canvas style="width: 100%; height: 60px;margin-top: 5px;" ref="function23"></canvas>
<text class="sub-title">
方法24
</text>
<canvas style="width: 100%; height: 60px;margin-top: 5px;" ref="function24"></canvas>
<text class="sub-title">
方法25
</text>
<canvas style="width: 100%; height: 60px;margin-top: 5px;" ref="function25"></canvas>
<text class="sub-title">
方法26
</text>
<canvas style="width: 100%; height: 60px;margin-top: 5px;" ref="function26"></canvas>
<text class="sub-title">
方法27
</text>
<canvas style="width: 100%; height: 60px;margin-top: 5px;" ref="function27"></canvas>
<text class="sub-title">
方法28
</text>
<canvas style="width: 100%; height: 60px;margin-top: 5px;" ref="function28"></canvas>
<text class="sub-title">
方法29
</text>
<canvas style="width: 100%; height: 60px;margin-top: 5px;" ref="function29"></canvas>
<text class="sub-title">
方法30
</text>
<canvas style="width: 100%; height: 60px;margin-top: 5px;" ref="function30"></canvas>
</div>
</div>
</div>
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import prompt from '@system.prompt';
export default {
data:{
left:0,
top:0,
},
onShow(){
// 屬性
this.props1()
this.props2()
this.props3()
this.props4()
this.props5()
this.props6()
this.props7()
this.props8()
this.props9()
this.props10()
this.props11()
this.props12()
// 方法
this.functionTouch1()
this.functionTouch2()
this.functionTouch3()
this.functionTouch4()
this.functionTouch5()
this.functionTouch6()
this.functionTouch7()
this.functionTouch8()
this.functionTouch9()
this.functionTouch10()
this.functionTouch11()
this.functionTouch12()
this.functionTouch13()
this.functionTouch14()
this.functionTouch15()
this.functionTouch16()
this.functionTouch17()
this.functionTouch18()
this.functionTouch19()
this.functionTouch20()
this.functionTouch21()
this.functionTouch22()
},
props1() {
const el = this.$refs.canvas1;
const ctx = el.getContext('2d');
ctx.fillStyle = '#0000ff';
ctx.fillRect(0, 0, 100, 30);
},
props2() {
const el = this.$refs.canvas2;
const ctx = el.getContext('2d');
ctx.lineWidth = 10;
ctx.strokeStyle = '#0000ff';
ctx.lineCap = 'round';
ctx.strokeRect(0, 0, 100, 30);
},
props3() {
const el = this.$refs.canvas3;
const ctx = el.getContext('2d');
ctx.lineWidth = 8;
ctx.beginPath();
ctx.lineCap = 'round';
ctx.moveTo(10, 10);
ctx.lineTo(100, 10);
ctx.stroke();
},
props4() {
const el = this.$refs.canvas4;
const ctx = el.getContext('2d');
ctx.beginPath();
ctx.lineWidth = 5;
ctx.lineJoin = 'miter';
ctx.moveTo(10, 10);
ctx.lineTo(80, 30);
ctx.lineTo(10, 50);
ctx.stroke();
},
props5() {
const el =this.$refs.canvas5;
const ctx = el.getContext('2d');
ctx.lineWidth = 5;
ctx.lineJoin = 'miter';
ctx.miterLimit = 3;
ctx.moveTo(10, 10);
ctx.lineTo(60, 15);
ctx.lineTo(10, 40);
ctx.stroke();
},
props6() {
const el =this.$refs.canvas6;
const ctx = el.getContext('2d');
ctx.font = '20px sans-serif';
ctx.fillText("Hello World", 10, 20);
},
props7() {
const el =this.$refs.canvas7;
const ctx = el.getContext('2d');
ctx.fillStyle = 'rgb(255,0,0)';
ctx.fillRect(0, 0, 40, 40);
ctx.globalAlpha = 0.4;
ctx.fillStyle = 'rgb(0,0,255)';
ctx.fillRect(40, 40, 40, 40);
},
props8() {
const el =this.$refs.canvas8;
const ctx = el.getContext('2d');
ctx.arc(50, 40, 30, 0, 6.28);
ctx.setLineDash([10,20]);
ctx.lineDashOffset = 10.0;
ctx.stroke();
},
props9() {
const el =this.$refs.canvas9;
const ctx = el.getContext('2d');
ctx.fillStyle = 'rgb(255,0,0)';
ctx.fillRect(10, 10, 30, 30);
ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = 'rgb(0,0,255)';
ctx.fillRect(25, 25, 30, 30);
// Start drawing second example
ctx.fillStyle = 'rgb(255,0,0)';
ctx.fillRect(70, 10, 30, 30);
ctx.globalCompositeOperation = 'destination-over';
ctx.fillStyle = 'rgb(0,0,255)';
ctx.fillRect(85, 25, 30, 30);
},
props10() {
const el =this.$refs.canvas10;
const ctx = el.getContext('2d');
ctx.shadowBlur = 30;
ctx.shadowColor = 'rgb(0,0,0)';
ctx.fillStyle = 'rgb(255,0,0)';
ctx.fillRect(20, 20, 70, 50);
},
props11() {
const el =this.$refs.canvas11;
const ctx = el.getContext('2d');
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 20;
ctx.shadowOffsetY = 20;
ctx.shadowColor = 'rgb(0,0,0)';
ctx.fillStyle = 'rgb(255,0,0)';
ctx.fillRect(10, 0, 70, 50);
},
props12() {
const el =this.$refs.canvas12;
const ctx = el.getContext('2d');
var img = new Image();
img.src = 'common/images/image.png';
img.onload = function() {
ctx.imageSmoothingEnabled = false;
ctx.drawImage(img, 10, 0, 100, 60);
};
},
functionTouch1() {
const el =this.$refs.function1;
const ctx = el.getContext('2d');
ctx.fillStyle = 'rgb(0,0,255)';
ctx.fillRect(0, 0, 100, 40);
ctx.clearRect(20, 10, 60, 20);
},
functionTouch2() {
const el =this.$refs.function2;
const ctx = el.getContext('2d');
ctx.font = '18px sans-serif';
ctx.strokeText("Hello World!", 0, 20);
},
functionTouch3() {
const el =this.$refs.function3;
const ctx = el.getContext('2d');
ctx.font = '16px sans-serif';
var txt = 'Hello World';
ctx.fillText("width:" + ctx.measureText(txt).width, 0, 10);
ctx.fillText(txt, 0, 25);
},
functionTouch4() {
const el =this.$refs.function4;
const ctx = el.getContext('2d');
ctx.beginPath();
ctx.moveTo(5, 5);
ctx.lineTo(70, 5);
ctx.lineTo(40, 60);
ctx.closePath();
ctx.stroke();
},
functionTouch5() {
const el =this.$refs.function5;
const ctx = el.getContext('2d');
var img = new Image();
img.src = 'common/images/sun.png';
var pat = ctx.createPattern(img, 'repeat');
ctx.fillStyle = pat;
ctx.fillRect(20, 0, 60, 50);
},
functionTouch6() {
const el =this.$refs.function6;
const ctx = el.getContext('2d');
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.bezierCurveTo(20, 40, 80, 40, 100, 10);
ctx.stroke();
},
functionTouch7() {
const el =this.$refs.function7;
const ctx = el.getContext('2d');
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.quadraticCurveTo(50, 50, 100, 10);
ctx.stroke();
},
functionTouch8() {
const el =this.$refs.function8;
const ctx = el.getContext('2d');
ctx.moveTo(30, 20);
ctx.arcTo(70, 10, 70, 20, 30); // Create an arc
ctx.stroke();
},
functionTouch9() {
const el =this.$refs.function9;
const ctx = el.getContext('2d');
ctx.beginPath();
ctx.ellipse(50, 50, 30, 60, Math.PI * 0.25, Math.PI * 0.5, Math.PI, 1);
ctx.stroke();
},
functionTouch10() {
const el =this.$refs.function10;
const ctx = el.getContext('2d');
ctx.rect(10, 0, 60, 60); // Create a 100*100 rectangle at (20, 20)
ctx.fill(); // Draw it in default setting
},
functionTouch11() {
const el =this.$refs.function11;
const ctx = el.getContext('2d');
ctx.rect(10, 0, 50, 50);
ctx.stroke();
ctx.clip();
// Draw red rectangle after clip
ctx.fillStyle = "rgb(255,0,0)";
ctx.fillRect(0, 0, 40, 40);
},
functionTouch12() {
const el =this.$refs.function12;
const ctx = el.getContext('2d');
ctx.rotate(45 * Math.PI / 180); // Rotate the rectangle 45 degrees
ctx.fillRect(20, 0, 20, 20);
},
functionTouch13() {
const el =this.$refs.function13;
const ctx = el.getContext('2d');
ctx.strokeRect(10, 10, 25, 25);
ctx.scale(1.5, 1.5);// Scale to 200%
ctx.strokeRect(10, 10, 20, 20);
},
functionTouch14() {
const el =this.$refs.function14;
const ctx = el.getContext('2d');
ctx.fillStyle = 'rgb(0,0,0)';
ctx.fillRect(0, 0, 30, 30)
ctx.transform(1, 0.5, -0.5, 1, 3, 3);
ctx.fillStyle = 'rgb(255,0,0)';
ctx.fillRect(0, 0, 30, 30);
ctx.transform(1, 0.5, -0.5, 1, 3, 3);
ctx.fillStyle = 'rgb(0,0,255)';
ctx.fillRect(0, 0, 30, 30);
},
functionTouch15() {
const el =this.$refs.function15;
const ctx = el.getContext('2d');
ctx.fillRect(10, 10, 30, 30);
ctx.translate(50, 10);
ctx.fillRect(10, 10, 30, 30);
},
functionTouch16() {
const el =this.$refs.function16;
const ctx = el.getContext('3d');
ctx.strokeRect(10, 10, 25, 25);
ctx.scale3d(1.5, 1.5, 1.5);// scale3d to 200%
ctx.strokeRect(10, 10, 20, 20);
},
functionTouch17() {
const el =this.$refs.function17;
const ctx = el.getContext('2d');
ctx.strokeRect(10, 10, 25, 25);
ctx.scaleX(1.5);// scaleX to 200%
ctx.strokeRect(10, 10, 20, 20);
},
functionTouch18() {
const el =this.$refs.function18;
const ctx = el.getContext('2d');
ctx.strokeRect(10, 10, 25, 25);
ctx.scaleY(1.5);// scaleY to 200%
ctx.strokeRect(10, 10, 20, 20);
},
functionTouch19() {
const el =this.$refs.function19;
const ctx = el.getContext('2d');
ctx.strokeRect(10, 10, 25, 25);
ctx.scaleZ(1.5);// scaleZ to 200%
ctx.strokeRect(10, 10, 20, 20);
},
functionTouch20() {
const el =this.$refs.function20;
const ctx = el.getContext('2d');
ctx.strokeRect(10, 10, 25, 25);
ctx.skew(1.5, 1.5);// skew to 200%
ctx.strokeRect(10, 10, 20, 20);
},
functionTouch21() {
const el =this.$refs.function21;
const ctx = el.getContext('2d');
ctx.strokeRect(10, 10, 25, 25);
ctx.skewX(1.5);// skew to 200%
ctx.strokeRect(10, 10, 20, 20);
},
functionTouch22() {
const el =this.$refs.function22;
const ctx = el.getContext('2d');
ctx.strokeRect(10, 10, 25, 25);
ctx.skewY(1.5);// skew to 200%
ctx.strokeRect(10, 10, 20, 20);
},
functionTouch23() {
const el =this.$refs.function22;
const ctx = el.getContext('2d');
ctx.strokeRect(10, 10, 25, 25);
ctx.perspective(1.5);// perspective to 200%
ctx.strokeRect(10, 10, 20, 20);
},
functionTouch24() {
const el =this.$refs.function15;
const ctx = el.getContext('2d');
ctx.fillRect(10, 10, 30, 30);
ctx.translateX(50);
ctx.fillRect(10, 10, 30, 30);
},
functionTouch25() {
const el =this.$refs.function15;
const ctx = el.getContext('2d');
ctx.fillRect(10, 10, 30, 30);
ctx.translateY(10);
ctx.fillRect(10, 10, 30, 30);
},
functionTouch26() {
const el =this.$refs.function15;
const ctx = el.getContext('2d');
ctx.fillRect(10, 10, 30, 30);
ctx.translateY(10);
ctx.fillRect(10, 10, 30, 30);
},
functionTouch27() {
const el =this.$refs.function15;
const ctx = el.getContext('2d');
ctx.fillRect(10, 10, 30, 30);
ctx.rotate3d(10,10,10);
ctx.fillRect(10, 10, 30, 30);
},
functionTouch28() {
const el =this.$refs.function15;
const ctx = el.getContext('2d');
ctx.fillRect(10, 10, 30, 30);
ctx.rotateX(10);
ctx.fillRect(10, 10, 30, 30);
},
functionTouch29() {
const el =this.$refs.function15;
const ctx = el.getContext('2d');
ctx.fillRect(10, 10, 30, 30);
ctx.rotateY(10);
ctx.fillRect(10, 10, 30, 30);
},
functionTouch30() {
const el =this.$refs.function15;
const ctx = el.getContext('2d');
ctx.fillRect(10, 10, 30, 30);
ctx.rotateZ(10);
ctx.fillRect(10, 10, 30, 30);
},
}
\ No newline at end of file
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/* xxx.css */
.container {
flex-direction:row;
width:100%;
height:100%;
padding: 1px;
}
.prop_all-container {
flex-direction: row;
height: 100%;
flex-weight: 1;
}
.sub-container{
flex-direction: column;
height: 100%;
flex-weight: 1;
}
.style-container{
flex-direction: column;
height: 100%;
flex-weight: 1;
}
.title{
width: 100%;
font-size: 18px;
margin: 2px;
padding: 2px;
font-weight: bold;
text-align: center;
}
.sub-title{
width: 100%;
font-size: 14px;
text-align: left;
margin: 2px;
padding: 2px;
}
.style1{
width: 100%;
height: 100%;
min-width: 25px;
min-height: 10px;
max-width: 300px;
max-height: 50px;
padding-left: 10px;
padding-top: 20px;
padding-right: 15px;
padding-bottom: 5px;
margin-left: 10px;
margin-top: 20px;
margin-right: 15px;
margin-bottom: 5px;
border-left-style: solid;
border-right-style: dashed;
border-top-style: dashed;
border-bottom-style: dotted;
border-left-width: 1px;
border-right-width: 2px;
border-top-width: 2px;
border-bottom-width: 1px;
border-left-color: #ff0000;
border-right-color: #00ff00;
border-top-color: #0000ff;
border-bottom-color: #fff000;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 15px;
border-top-left-radius: 8px;
border-top-right-radius: 12px;
background: linear-gradient(pink,#fff000);
box-shadow: 2px 4px 6px 8px #888888;
opacity: 0.5;
display: flex;
visibility: visible;
align-self: center;
image-fill: #000fff;
clip-path: margin-box;
}
.style2{
width: 50px;
height: 20px;
padding-start: 10px;
padding-end: 15px;
margin-start: 5px;
margin-end: 10px;
border-style: dotted;
border-width: 2px;
border-color:#000000;
border-radius:5px;
background-color:#ffaa00;
mask-image: url('common/images/icon.png');
mask-size: cover;
mask-position: center;
}
.style3{
width: 100%;
padding: 10px;
margin: 5px;
border-left: 1px solid #000000;
border-right: 2px dashed #00ff00;
border-top: 1.5px dotted #0000ff;
border-bottom: 2.5px dotted #fff000;
background-image:url('common/images/bg-tv.jpg');
background-size:cover;
background-repeat: repeat-x;
background-position: center;
flex:1;
flex-grow: 2;
flex-basis: 10px;
flex-shrink: 1;
}
.style4{
width: 60%;
height: 5%;
padding: 10px;
margin: 5px;
border: 2px solid #000000;
}
.contain1{
width: 100%;
height: 70px;
flex-direction: column;
}
.style5{
width: 50%;
height: 30px;
background-color: yellow;
border-image-source: url('/common/images/image.png');
border-image-slice: 1px 2px 3px 4px;
border-image-width: 2px 3px 4px 5px;
border-image-outset: 3px 4px 5px 6px;
border-image-repeat: repeat;
}
.style6{
width: 70px;
height: 30px;
position: absolute;
left: 10px;
top: 35px;
bottom: 5px;
right: 10px;
background-color: pink;
border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round;
}
.prop-container{
flex-direction: column;
height: 100%;
flex-weight: 1;
}
.prop1 {
color: #ad4e2a;
height: 30px;
background-color: mediumslateblue;
width: 100%;
margin: 5px;
}
.prop2 {
color: #343524;
height: 30px;
background-color: pink;
width: 100%;
margin: 5px;
}
.prop3 {
color: #456345;
height: 30px;
background-color: darkseagreen;
width: 100%;
margin: 5px;
}
.prop5 {
color: #831834;
stroke-width: 40px;
line-cap: square;
margin: 5px;
height: 70px;
}
.ani-container{
flex-direction: column;
height: 100%;
flex-weight: 1;
}
.ani1{
color: #72ac33;
stroke-width: 55px;
line-cap: square;
margin: 5px;
transform-origin: 0% 0%;
animation: ani1Go 3s infinite;
}
@keyframes ani1Go
{
from {
background-color: #f76160;
opacity:0.3;
width:50px;
height: 50px;
transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg);
background-position:10% 10%
}
30% {
background-color: #60f761;
opacity:0.5;
width:70px;
height: 70px;
background-position:12% 12%;
transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg)
}
to {
background-color: #6160f7;
opacity:1;
width:90px;
height: 90px;
background-position:22% 22%;
transform:rotate(180deg) scale(2)
}
}
.ani2{
color: #ad4e2a;
width: 55px;
height: 55px;
margin: 5px;
transform-origin: 2% 3%;
animation-name:ani2Go;
animation-delay:5s;
animation-duration:10s;
animation-iteration-count:4;
animation-timing-function:ease-out;
animation-direction:reverse;
animation-fill-mode:forwards;
animation-play-state:running;
transition:all 0 ease 0;
}
@keyframes ani2Go
{
from {
background-color: #f76160;
opacity:0.3;
width:50px;
height: 50px;
background-position:10% 10%
}
30% {
background-color: #60f761;
opacity:0.5;
width:70px;
height: 70px;
background-position:12% 12%;
transform:translateX(10px) translateY(5px) translateZ(15px)
rotateX(20deg) rotateY(25deg) rotateZ(15deg) scaleX(0.6) scaleY(0.5) scaleZ(1.5) perspective(10);
}
to {
background-color: #6160f7;
opacity:1;
width:90px;
height: 90px;
background-position:22% 22%;
transform:translateX(30px) translateY(45px) translateZ(55px)
rotateX(180deg) rotateY(185deg) rotateZ(150deg) scaleX(2) scaleY(2.5) scaleZ(3.5);
}
}
.gradient-container{
flex-direction: column;
}
.gradient1{
width: 100%;
height: 20px;
margin: 5px;
background: linear-gradient(red, #00ff00);
}
.gradient2{
width: 100%;
height: 20px;
margin: 5px;
background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
}
.gradient3{
width: 100%;
height: 20px;
margin: 5px;
background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
}
.gradient4{
width: 100%;
height: 20px;
margin: 5px;
background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
}
.atom-container{
flex-direction: column;
}
.multiMode-container{
flex-direction: column;
}
.multiMode1{
background-color: #978666;
width: 100%;
height: 30px;
margin: 5px;
}
.flex-box {
justify-content: space-around;
align-items: center;
height: 50px;
background-color: #ffffff;
}
.flex-item {
width: 20px;
height: 20px;
border-radius: 16px;
}
.color-primary {
background-color: mediumpurple;
}
.color-warning {
background-color: pink;
}
.color-success {
background-color: cornflowerblue;
}
.dragContent{
width: 60px;
height: 60px;
background-color: red;
}
.flex-box2 {
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
height: 100px;
background-color: #ffffff;
}
.common {
background-color: #ffffff;
align-items: center;
justify-content: center;
}
.grid-parent {
display: grid;
grid-template-columns: 20% 20%;
grid-columns-gap: 14px;
grid-rows-gap: 4px;
grid-template-rows: 15% 15%;
}
.grid-child {
width: 100%;
/* height: 100%;*/
border-radius: 2px;
}
.grid-left-top {
width: 20px;
height: 20px;
border-radius: 10px;
border: 1px solid plum;
background: linear-gradient(pink, purple);
box-shadow: 0px 0px 1px 1px pink;
grid-row-start: 0;
grid-column-start: 0;
grid-row-end: 0;
grid-column-end: 0;
}
.grid-left-bottom {
width: 20px;
height: 20px;
border-radius: 5px;
border: 1px solid plum;
background: linear-gradient(pink, #00aaee);
box-shadow: 0px 0px 1px 1px pink;
grid-row-start: 1;
grid-column-start: 0;
grid-row-end: 1;
grid-column-end: 0;
}
.grid-right-top {
width: 20px;
height: 20px;
border-radius: 3px;
border: 1px dotted plum;
background: linear-gradient(mediumpurple, #00aaee);
box-shadow: 0px 0px 1px 1px pink;
grid-row-start: 0;
grid-column-start: 1;
grid-row-end: 0;
grid-column-end: 1;
}
.grid-right-bottom {
width: 20px;
height: 20px;
border-radius: 5px;
border: 1px dotted plum;
background: linear-gradient(pink, mediumpurple);
box-shadow: 0px 0px 2px 2px pink;
grid-row-start: 1;
grid-column-start: 1;
grid-row-end: 1;
grid-column-end: 1;
}
.event-container{
flex-direction: column;
height: 30%;
}
.event1{
width: 60%;
flex-weight: 1;
}
.event2{
width: 70%;
flex-weight: 1;
}
.event3{
width: 80%;
flex-weight: 1;
}
.function-container{
flex-direction: column;
}
.function {
height: 30px;
width: 100%;
}
<!--/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/-->
<div class="container">
<div class="sub-container">
<div class="prop-container">
<text class="title">
对象的属性
</text>
<text class="sub-title">
属性1
</text>
<canvas ref="canvas1" style="width: 100%; height: 30px;margin-top: 5px; ">
</canvas>
<text class="sub-title">
属性2
</text>
<canvas ref="canvas2" style="width: 100%; height: 30px;margin-top: 5px; ">
</canvas>
<text class="sub-title">
属性3
</text>
<canvas ref="canvas3" style="width: 100%; height: 20px;margin-top: 5px;">
</canvas>
<text class="sub-title">
属性4
</text>
<canvas ref="canvas4" style="width: 100%; height: 50px;margin-top: 5px;">
</canvas>
<text class="sub-title">
属性5
</text>
<canvas ref="canvas5" style="width: 100%; height: 40px;margin-top: 5px;">
</canvas>
<text class="sub-title">
属性6
</text>
<canvas ref="canvas6" style="width: 100%; height: 30px;margin-top: 5px;">
</canvas>
<text class="sub-title">
属性7
</text>
<canvas ref="canvas7" style="width: 100%; height: 80px;margin-top: 5px;">
</canvas>
<text class="sub-title">
属性8
</text>
<canvas ref="canvas8" style="width: 100%; height: 80px; background-color: #ffff00;margin-top: 5px;">
</canvas>
<text class="sub-title">
属性9
</text>
<canvas ref="canvas9" style="width: 100%; height: 70px;margin-top: 5px;">
</canvas>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<div class="sub-container">
<div class="prop-container">
<text class="sub-title">
属性10
</text>
<canvas ref="canvas10" style="width: 100%; height: 90px;margin-top: 5px;">
</canvas>
<text class="sub-title">
属性11
</text>
<canvas ref="canvas11" style="width: 100%; height: 80px;margin-top: 5px;">
</canvas>
<text class="sub-title">
属性12
</text>
<canvas ref="canvas12" style="width: 100%; height: 40px;margin-bottom: 10px;margin-top: 5px;">
</canvas>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<text class="title">
对象的方法
</text>
<text class="sub-title">
方法1
</text>
<canvas style="width: 100%; height: 50px;margin-top: 5px;" ref="function1">
</canvas>
<text class="sub-title">
方法2
</text>
<canvas style="width: 100%; height: 30px;margin-top: 5px;" ref="function2">
</canvas>
<text class="sub-title">
方法3
</text>
<canvas style="width: 100%; height: 40px;margin-top: 5px;" ref="function3">
</canvas>
<text class="sub-title">
方法4
</text>
<canvas style="width: 100%; height: 70px;margin-top: 5px;" ref="function4"></canvas>
<text class="sub-title">
方法5
</text>
<canvas style="width: 100%; height: 50px;margin-top: 5px;" ref="function5"></canvas>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<div class="sub-container">
<div class="function-container">
<text class="sub-title">
方法6
</text>
<canvas style="width: 100%; height: 40px;margin-top: 5px;" ref="function6"></canvas>
<text class="sub-title">
方法7
</text>
<canvas style="width: 100%; height: 40px;margin-top: 5px;" ref="function7"></canvas>
<text class="sub-title">
方法8
</text>
<canvas style="width: 100%; height: 50px;margin-top: 5px;" ref="function8"></canvas>
<text class="sub-title">
方法9
</text>
<canvas style="width: 100%; height: 100px;background-color: #ffff00;margin-top: 5px;" ref="function9"></canvas>
<text class="sub-title">
方法10
</text>
<canvas style="width: 100%; height: 60px;margin-top: 5px;" ref="function10"></canvas>
<text class="sub-title">
方法11
</text>
<canvas style="width: 100%; height: 70px;margin-top: 5px;" ref="function11"></canvas>
<text class="sub-title">
方法12
</text>
<canvas style="width: 100%; height: 60px;margin-top: 5px;" ref="function12"></canvas>
<text class="sub-title">
方法13
</text>
<canvas style="width: 100%; height: 60px;margin-top: 5px;" ref="function13"></canvas>
<text class="sub-title">
方法14
</text>
<canvas style="width: 100%; height: 60px;margin-top: 5px;" ref="function14"></canvas>
<text class="sub-title">
方法15
</text>
<canvas style="width: 100%; height: 60px;margin-top: 5px;" ref="function15"></canvas>
</div>
</div>
</div>
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import prompt from '@system.prompt';
export default {
data:{
left:0,
top:0,
},
onShow(){
// 屬性
this.props1()
this.props2()
this.props3()
this.props4()
this.props5()
this.props6()
this.props7()
this.props8()
this.props9()
this.props10()
this.props11()
this.props12()
// 方法
this.functionTouch1()
this.functionTouch2()
this.functionTouch3()
this.functionTouch4()
this.functionTouch5()
this.functionTouch6()
this.functionTouch7()
this.functionTouch8()
this.functionTouch9()
this.functionTouch10()
this.functionTouch11()
this.functionTouch12()
this.functionTouch13()
this.functionTouch14()
this.functionTouch15()
},
props1() {
const el = this.$refs.canvas1;
const ctx = el.getContext('2d');
ctx.fillStyle = '#0000ff';
ctx.fillRect(0, 0, 100, 30);
},
props2() {
const el = this.$refs.canvas2;
const ctx = el.getContext('2d');
ctx.lineWidth = 10;
ctx.strokeStyle = '#0000ff';
ctx.lineCap = 'round';
ctx.strokeRect(0, 0, 100, 30);
},
props3() {
const el = this.$refs.canvas3;
const ctx = el.getContext('2d');
ctx.lineWidth = 8;
ctx.beginPath();
ctx.lineCap = 'round';
ctx.moveTo(10, 10);
ctx.lineTo(100, 10);
ctx.stroke();
},
props4() {
const el = this.$refs.canvas4;
const ctx = el.getContext('2d');
ctx.beginPath();
ctx.lineWidth = 5;
ctx.lineJoin = 'miter';
ctx.moveTo(10, 10);
ctx.lineTo(80, 30);
ctx.lineTo(10, 50);
ctx.stroke();
},
props5() {
const el =this.$refs.canvas5;
const ctx = el.getContext('2d');
ctx.lineWidth = 5;
ctx.lineJoin = 'miter';
ctx.miterLimit = 3;
ctx.moveTo(10, 10);
ctx.lineTo(60, 15);
ctx.lineTo(10, 40);
ctx.stroke();
},
props6() {
const el =this.$refs.canvas6;
const ctx = el.getContext('2d');
ctx.font = '20px sans-serif';
ctx.fillText("Hello World", 10, 20);
},
props7() {
const el =this.$refs.canvas7;
const ctx = el.getContext('2d');
ctx.fillStyle = 'rgb(255,0,0)';
ctx.fillRect(0, 0, 40, 40);
ctx.globalAlpha = 0.4;
ctx.fillStyle = 'rgb(0,0,255)';
ctx.fillRect(40, 40, 40, 40);
},
props8() {
const el =this.$refs.canvas8;
const ctx = el.getContext('2d');
ctx.arc(50, 40, 30, 0, 6.28);
ctx.setLineDash([10,20]);
ctx.lineDashOffset = 10.0;
ctx.stroke();
},
props9() {
const el =this.$refs.canvas9;
const ctx = el.getContext('2d');
ctx.fillStyle = 'rgb(255,0,0)';
ctx.fillRect(10, 10, 30, 30);
ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = 'rgb(0,0,255)';
ctx.fillRect(25, 25, 30, 30);
// Start drawing second example
ctx.fillStyle = 'rgb(255,0,0)';
ctx.fillRect(70, 10, 30, 30);
ctx.globalCompositeOperation = 'destination-over';
ctx.fillStyle = 'rgb(0,0,255)';
ctx.fillRect(85, 25, 30, 30);
},
props10() {
const el =this.$refs.canvas10;
const ctx = el.getContext('2d');
ctx.shadowBlur = 30;
ctx.shadowColor = 'rgb(0,0,0)';
ctx.fillStyle = 'rgb(255,0,0)';
ctx.fillRect(20, 20, 70, 50);
},
props11() {
const el =this.$refs.canvas11;
const ctx = el.getContext('2d');
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 20;
ctx.shadowOffsetY = 20;
ctx.shadowColor = 'rgb(0,0,0)';
ctx.fillStyle = 'rgb(255,0,0)';
ctx.fillRect(10, 0, 70, 50);
},
props12() {
const el =this.$refs.canvas12;
const ctx = el.getContext('2d');
var img = new Image();
img.src = 'common/images/image.png';
img.onload = function() {
ctx.imageSmoothingEnabled = false;
ctx.drawImage(img, 10, 0, 100, 60);
};
},
functionTouch1() {
const el =this.$refs.function1;
const ctx = el.getContext('2d');
ctx.fillStyle = 'rgb(0,0,255)';
ctx.fillRect(0, 0, 100, 40);
ctx.clearRect(20, 10, 60, 20);
},
functionTouch2() {
const el =this.$refs.function2;
const ctx = el.getContext('2d');
ctx.font = '18px sans-serif';
ctx.strokeText("Hello World!", 0, 20);
},
functionTouch3() {
const el =this.$refs.function3;
const ctx = el.getContext('2d');
ctx.font = '16px sans-serif';
var txt = 'Hello World';
ctx.fillText("width:" + ctx.measureText(txt).width, 0, 10);
ctx.fillText(txt, 0, 25);
},
functionTouch4() {
const el =this.$refs.function4;
const ctx = el.getContext('2d');
ctx.beginPath();
ctx.moveTo(5, 5);
ctx.lineTo(70, 5);
ctx.lineTo(40, 60);
ctx.closePath();
ctx.stroke();
},
functionTouch5() {
const el =this.$refs.function5;
const ctx = el.getContext('2d');
var img = new Image();
img.src = 'common/images/sun.png';
var pat = ctx.createPattern(img, 'repeat');
ctx.fillStyle = pat;
ctx.fillRect(20, 0, 60, 50);
},
functionTouch6() {
const el =this.$refs.function6;
const ctx = el.getContext('2d');
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.bezierCurveTo(20, 40, 80, 40, 100, 10);
ctx.stroke();
},
functionTouch7() {
const el =this.$refs.function7;
const ctx = el.getContext('2d');
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.quadraticCurveTo(50, 50, 100, 10);
ctx.stroke();
},
functionTouch8() {
const el =this.$refs.function8;
const ctx = el.getContext('2d');
ctx.moveTo(30, 20);
ctx.arcTo(70, 10, 70, 20, 30); // Create an arc
ctx.stroke();
},
functionTouch9() {
const el =this.$refs.function9;
const ctx = el.getContext('2d');
ctx.beginPath();
ctx.ellipse(50, 50, 30, 60, Math.PI * 0.25, Math.PI * 0.5, Math.PI, 1);
ctx.stroke();
},
functionTouch10() {
const el =this.$refs.function10;
const ctx = el.getContext('2d');
ctx.rect(10, 0, 60, 60); // Create a 100*100 rectangle at (20, 20)
ctx.fill(); // Draw it in default setting
},
functionTouch11() {
const el =this.$refs.function11;
const ctx = el.getContext('2d');
ctx.rect(10, 0, 50, 50);
ctx.stroke();
ctx.clip();
// Draw red rectangle after clip
ctx.fillStyle = "rgb(255,0,0)";
ctx.fillRect(0, 0, 40, 40);
},
functionTouch12() {
const el =this.$refs.function12;
const ctx = el.getContext('2d');
ctx.rotate(45 * Math.PI / 180); // Rotate the rectangle 45 degrees
ctx.fillRect(20, 0, 20, 20);
},
functionTouch13() {
const el =this.$refs.function13;
const ctx = el.getContext('2d');
ctx.strokeRect(10, 10, 25, 25);
ctx.scale(1.5, 1.5);// Scale to 200%
ctx.strokeRect(10, 10, 20, 20);
},
functionTouch14() {
const el =this.$refs.function14;
const ctx = el.getContext('2d');
ctx.fillStyle = 'rgb(0,0,0)';
ctx.fillRect(0, 0, 30, 30)
ctx.transform(1, 0.5, -0.5, 1, 3, 3);
ctx.fillStyle = 'rgb(255,0,0)';
ctx.fillRect(0, 0, 30, 30);
ctx.transform(1, 0.5, -0.5, 1, 3, 3);
ctx.fillStyle = 'rgb(0,0,255)';
ctx.fillRect(0, 0, 30, 30);
},
functionTouch15() {
const el =this.$refs.function15;
const ctx = el.getContext('2d');
ctx.fillRect(10, 10, 30, 30);
ctx.translate(50, 10);
ctx.fillRect(10, 10, 30, 30);
},
functionTouch16() {
const el =this.$refs.function15;
const ctx = el.getContext('2d');
ctx.fillRect(10, 10, 30, 30);
ctx.translate3d(50, 10,10);
ctx.fillRect(10, 10, 30, 30);
},
functionTouch17() {
const el =this.$refs.function15;
const ctx = el.getContext('2d');
ctx.fillRect(10, 10, 30, 30);
ctx.matrix(40, 10);
ctx.fillRect(10, 10, 30, 30);
},
functionTouch18() {
const el =this.$refs.function15;
const ctx = el.getContext('2d');
ctx.fillRect(10, 10, 30, 30);
ctx.matrix3d(50, 10,20);
ctx.fillRect(10, 10, 30, 30);
},
functionTouch19() {
const el =this.$refs.function15;
const ctx = el.getContext('2d');
ctx.fillRect(10, 10, 30, 30);
ctx.translateX(5);
ctx.fillRect(10, 10, 30, 30);
},
}
\ No newline at end of file
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
.container {
display: flex;
flex-direction: column;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}
.testDiv {
display: flex;
flex-direction: column;
left: 0px;
top: 0px;
width: 100%;
}
.title {
font-size: 40px;
text-align: center;
width: 100%;
height: 60px;
margin: 10px;
padding: 10px;
}
@media screen and (orientation: landscape) {
.title {
font-size: 60px;
}
}
@media screen and (device-type: tablet) and (orientation: landscape) {
.title {
font-size: 100px;
}
}
\ No newline at end of file
<!--/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/-->
<div class="container">
<div id="testDiv" class="testDiv">
</div>
<input id="function1" class="title" onclick="functionTest1">
Element setStyle
</input>
<input id="function2" class="title" onclick="functionTest2">
Element setAttribute
</input>
<input id="function3" class="title" onclick="functionTest3">
Element addChild
</input>
<input id="function4" class="title" onclick="functionTest4">
Element rotation
</input>
<input id="function5" class="title" onclick="functionTest5">
watch test
</input>
<input id="function6" class="title" onclick="functionTest6">
set/delete test
</input>
<input id="function7" class="title" onclick="functionTest7">
set/delete test
</input>
</div>
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export default {
data: {
title: "",
watchVal:"123",
Version:"1.0"
},
onInit() {
this.$watch("watchVal", "onwatch")
},
functionTest1() {
var function1 = this.$element('function1');
var result = function1.setStyle("font-size", "50px")
console.info('setStyle result is ' + result)
},
functionTest2() {
var function2 = this.$element('function2');
function2.setAttribute("type", "password")
},
functionTest3() {
var elem = dom.createElement("button");
elem.setAttribute("value", "buttoncreateElement");
var testDiv = this.$element('testDiv');
testDiv.addChild(elem);
},
functionTest4() {
var function2 = this.$element('function2');
function2.rotation({
focus: true
})
},
functionTest5() {
//将watchVal从123改为456,触发onwatch事件
this.watchVal = "456"
},
functionTest6() {
this.$set('Version', 2);
console.info("Version = " + this.Version);
this.$delete('Version');
// log print:Version = undefined
console.info("Version = " + this.Version);
},
functionTest7() {
this.$tc('Version', 2);
console.info("Version = " + this.Version);
this.$delete('Version');
// log print:Version = undefined
console.info("Version = " + this.Version);
},
onwatch(newVal, oldVal) {
console.log("watch newVal = " + newVal + ",oldVal =" + oldVal)
},
}
/*
* Copyright (c) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@Entry
@Component
struct alphabetIndexer {
private value: string[] = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I']
private value1: string[] = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I']
@State active: boolean = false
private content: string = "AlphabetIndexer Page"
onPageShow() {
console.info('alphabetIndexer page show called');
}
onBuildDone() {
console.info('alphabetIndexer page build done called');
}
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Text(`${this.content}`)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Text("AlphabetIndexer0")
AlphabetIndexer({ arrayValue: this.value, selected: 0 })
.color('#FF00DDDD')
.selectedColor(0xffffff)
.key('alphabetIndexer')
.popupColor('#FF737373')
.selectedBackgroundColor('#FF0000E6')
.popupBackground('#FF00DDDD')
.usingPopup(true)
.popupPosition({x:90.0, y:50.0})
.selectedFont({ size: 16, weight: FontWeight.Regular })
.popupFont({ size: 30, weight: FontWeight.Bolder, style: FontStyle.Normal })
.itemSize(28)
.alignStyle(IndexerAlign.Left)
.onSelected((index: number) => {
console.info(this.value[index] + ' on selected')
})
Text("AlphabetIndexer1")
AlphabetIndexer({ arrayValue: this.value1, selected: 0 })
.selectedColor(0xffffff)
.key('alphabetIndexer1')
.popupColor('#FF737373')
.selectedBackgroundColor('#FF0000E6')
.popupBackground('#FF00DDDD')
.usingPopup(false)
.popupPosition({x:90.0, y:50.0})
.selectedFont({ size: 16, weight: FontWeight.Lighter })
.popupFont({ size: 30, weight: FontWeight.Bold, style: FontStyle.Italic })
.itemSize(28)
.alignStyle(IndexerAlign.Right)
.margin({ left: 50 })
.onSelected((index: number) => {
console.info(this.value[index] + ' on selected')
})
}
}
}
// @ts-nocheck
/*
* Copyright (c) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@Entry
@Component
struct WebComponent {
@State javaScriptAccess: boolean = true;
@State fileAccess: boolean = true;
@State geolocationAccess: boolean = true;
@State imageAccess: boolean = true;
@State domStorageAccess: boolean = false;
@State onlineImageAccess: boolean = true;
@State zoomAccess: boolean = true;
@State accessBackward: boolean = true;
@State accessForward: boolean = true;
@State accessStep: boolean = true;
@State password: boolean = true;
@State tableData: boolean = true;
@State wideViewModeAccess: boolean = true;
@State overviewModeAccess: boolean = true;
@State databaseAccess: boolean = true;
@State textZoomAtio: number = 1;
@State mixedMode: MixedMode = MixedMode.None
@State cacheMode: CacheMode = CacheMode.None
@State getHitTest: HitTestType = HitTestType.Unknown
controller: WebController = new WebController();
cookie: WebCookie = new WebCookie()
testObj = {
test: (data1, data2, data3) => {
console.log('ets test web : ' + data1)
console.log('ets test web : ' + data2)
console.log('ets test web : ' + data3)
return 'AceString'
},
toString: () => {
console.log('ets test web : ++++++toString')
}
}
build() {
Column() {
Row() {
Button('混合内容')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.mixedMode = MixedMode.All
})
Button('混合内容兼容性模式')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.mixedMode = MixedMode.Compatible
})
Button('不允许混合内容')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.mixedMode = MixedMode.None
})
Button('确认弹框')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
AlertDialog.show(
{
title: 'title',
message: 'text',
primaryButton: {
value: 'cancel',
action: () => {
console.info('Callback when the first button is clicked')
}
},
secondaryButton: {
value: 'ok',
action: () => {
console.info('Callback when the second button is clicked')
}
},
cancel: () => {
console.info('Closed callbacks')
}
}
)
})
Button('警告弹框')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
AlertDialog.show(
{
title: 'title',
message: 'text',
confirm: {
value: 'button',
action: () => {
console.info('Button-clicking callback')
}
},
cancel: () => {
console.info('Closed callbacks')
}
}
)
})
}
Row() {
Button('先缓存后在线')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.cacheMode = CacheMode.Online
})
Button('加载缓存')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.cacheMode = CacheMode.Only
})
Button('加载在线')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.cacheMode = CacheMode.None
})
Button('设置cookie')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.cookie.setCookie()
})
Button('保存cookie')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.cookie.saveCookie()
})
}
Row() {
Button(this.accessBackward ? '页面可后退' : '页面不可后退')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.accessBackward = this.controller.accessBackward()
})
Button(this.accessForward ? '页面可前进' : '页面不可前进')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.accessForward = this.controller.accessForward()
})
Button(this.accessStep ? '页面可前进1步' : '页面不可前进1步')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.accessStep = this.controller.accessStep(1)
})
Button('清空JavaScript方法')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.controller.deleteJavaScriptRegister('objName')
})
Button('Web组件获焦')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.controller.requestFocus()
})
Button('停止页面加载')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.controller.stop()
})
}
Row() {
Button('页面后退')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.controller.backward()
})
Button('页面前进')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.controller.forward()
})
Button('清理历史')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.controller.clearHistory()
})
Button('获取点击对象类型')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
let getHitTest = this.controller.getHitTest()
if (getHitTest == HitTestType.Edit) {
console.log('this getHitTest : Edit');
} else if (getHitTest == HitTestType.Email) {
console.log('this getHitTest : Email');
} else if (getHitTest == HitTestType.Http) {
console.log('this getHitTest : Http');
} else if (getHitTest == HitTestType.HttpImg) {
console.log('this getHitTest : HttpImg');
} else if (getHitTest == HitTestType.Img) {
console.log('this getHitTest : Img');
} else if (getHitTest == HitTestType.Map) {
console.log('this getHitTest : Map');
} else if (getHitTest == HitTestType.Phone) {
console.log('this getHitTest : Phone');
} else {
getHitTest = HitTestType.Unknown
console.log('this getHitTest : Unknown');
}
})
Button('加载数据')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.controller.loadData({
data: "<html><body bgcolor=\"white\">Source : <pre> source:</pre></body></html>",
mimetype: "text/html",
encoding: "UTF-8",
baseUrl: "https://www.baidu.com",
historyUrl: "https://www.gitee.com"
})
})
Button('加载URL')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.controller.loadUrl({
url: "https://www.baidu.com",
additionalHttpHeaders: [{ key: 'div', value: 'div' }]
})
})
}
Row() {
Button('页面重新激活')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.controller.onActive()
})
Button('页面暂停渲染')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.controller.onInactive()
})
Button('刷新页面')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.controller.refresh()
})
Button('注册JavaScript')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.controller.registerJavaScriptProxy({
obj: this.testObj,
name: 'objName',
methodList: ['test', 'toString']
})
})
Button('执行JavaScript脚本')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.controller.runJavaScript({
script: "test()",
callback: (result: string) => {
console.log('run javascript result : ' + result);
}
})
})
}
Row() {
Button('onNewRequest')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.controller.onNewRequest()
})
Button('onStartContinuation')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.controller.onStartContinuation()
})
Button('onSaveData')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.controller.onSaveData()
})
Button('onRestoreData')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.controller.onRestoreData()
})
Button('onCompleteContinuation')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.controller.onCompleteContinuation()
})
Button('onConfigurationUpdated')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.controller.onConfigurationUpdated()
})
Button('extendViewModel')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.controller.extendViewModel()
})
}
Web({ src: $rawfile('indextest.html'), controller: this.controller })
.domStorageAccess(this.domStorageAccess)
.fileAccess(this.fileAccess)
.geolocationAccess(this.geolocationAccess)
.imageAccess(this.imageAccess)
.javaScriptAccess(this.javaScriptAccess)
.mixedMode(this.mixedMode)
.onlineImageAccess(this.onlineImageAccess)
.zoomAccess(this.zoomAccess)
.cacheMode(this.cacheMode)
.tableData(this.tableData)
.wideViewModeAccess(this.wideViewModeAccess)
.overviewModeAccess(this.overviewModeAccess)
.textZoomAtio(this.textZoomAtio)
.databaseAccess(this.databaseAccess)
.javaScriptProxy({
obj: this.testObj,
name: 'objName',
methodList: ['test', 'toString']
})
.password(this.password)
.onPageBegin((e) => {
console.log("webTest : onPageBegin: " + e.url);
})
.onPageEnd(e => {
console.log("webTest : onPageEnd: " + e.url);
this.controller.runJavaScript('test()')
})
.onProgressChange((e) => {
console.log("webTest : onProgressChange: " + e.newProgress);
})
.onTitleReceive((e) => {
console.log("webTest : onProgressChange: " + e.title);
})
.onDownloadStart((e) => {
console.log("webTest : onDownloadStart url : " + e.url);
console.log("webTest : onDownloadStart userAgent : " + e.userAgent);
console.log("webTest : onDownloadStart contentDisposition : " + e.contentDisposition);
console.log("webTest : onDownloadStart mimetype : " + e.mimetype);
console.log("webTest : onDownloadStart contentLength : " + e.contentLength);
})
.onGeolocationHide(() => {
console.log("webTest : onGeolocationHide: ");
})
.onGeolocationShow((e) => {
console.log("webTest : onDownloadStart origin : " + e.origin);
e.geolocation.invoke(e.origin, true, true)
console.log("webTest : onDownloadStart origin : " + e.geolocation.invoke);
})
.onRequestSelected(() => {
console.log("webTest : onRequestSelected: ");
})
.onAlert((e) => {
console.log("webTest : onAlert: " + e.url);
console.log("webTest : onAlert: " + e.message);
console.log("webTest : onAlert .result : " + e.result);
console.log("webTest : onAlert .result : " + e.result.handleCancel());
console.log("webTest : onAlert .result : " + e.result.handleConfirm());
})
.onBeforeUnload((e) => {
console.log("webTest : onBeforeUnload: " + e.message);
console.log("webTest : onBeforeUnload .result : " + e.result);
console.log("webTest : onBeforeUnload .result : " + e.result.handleCancel());
console.log("webTest : onBeforeUnload .result : " + e.result.handleConfirm());
})
.onConfirm((e) => {
console.log("webTest : onConfirm: " + e.url);
console.log("webTest : onConfirm: " + e.message);
console.log("webTest : onConfirm .result : " + e.result);
console.log("webTest : onConfirm .result : " + e.result.handleCancel());
console.log("webTest : onConfirm .result : " + e.result.handleConfirm());
})
.onConsole((e) => {
console.log("webTest : onConsole .message : " + e.message);
console.log("webTest : onConsole .message : " + e.message.getMessage());
console.log("webTest : onConsole .message : " + e.message.getSourceId());
console.log("webTest : onConsole .message : " + e.message.getLineNumber());
let level = e.message.getMessageLevel()
if (level == MessageLevel.Debug) {
console.log("webTest : onConsole: level Debug");
} else if (level == MessageLevel.Error) {
console.log("webTest : onConsole: level Error");
} else if (level == MessageLevel.Info) {
console.log("webTest : onConsole: level Info");
} else if (level == MessageLevel.Log) {
console.log("webTest : onConsole: level Log");
} else {
level = MessageLevel.Warn
console.log("webTest : onConsole: level Warn");
}
})
.onErrorReceive((e) => {
console.log("webTest : onErrorReceive .request : " + e.request);
console.log("webTest : onErrorReceive .request : " + e.request.getRequestHeader());
console.log("webTest : onErrorReceive .request : " + e.request.getRequestUrl());
console.log("webTest : onErrorReceive .request : " + e.request.isRequestGesture());
console.log("webTest : onErrorReceive .request : " + e.request.isMainFrame());
console.log("webTest : onErrorReceive .request : " + e.request.isRedirect());
console.log("webTest : onErrorReceive .error : " + e.error);
console.log("webTest : onErrorReceive .error : " + e.error.getErrorInfo());
console.log("webTest : onErrorReceive .error : " + e.error.getErrorCode());
})
.onHttpErrorReceive((e) => {
console.log("webTest : onHttpErrorReceive .request : " + e.request);
console.log("webTest : onHttpErrorReceive .request : " + e.request.getRequestHeader());
console.log("webTest : onHttpErrorReceive .request : " + e.request.getRequestUrl());
console.log("webTest : onHttpErrorReceive .request : " + e.request.isRequestGesture());
console.log("webTest : onHttpErrorReceive .request : " + e.request.isMainFrame());
console.log("webTest : onHttpErrorReceive .request : " + e.request.isRedirect());
console.log("webTest : onHttpErrorReceive .error : " + e.error);
console.log("webTest : onHttpErrorReceive .error : " + e.error.getErrorInfo());
console.log("webTest : onHttpErrorReceive .error : " + e.error.getErrorCode());
})
.onRefreshAccessedHistory((e) => {
console.log("webTest : onRefreshAccessedHistory .url : " + e.url);
console.log("webTest : onRefreshAccessedHistory .refreshed : " + e.refreshed);
})
.onUrlLoadIntercept((e) => {
console.log("webTest : onUrlLoadIntercept .data : " + e.data);
})
.onSslErrorReceive((e) => {
console.log("webTest : onSslErrorReceive .handle : " + e.handle);
console.log("webTest : onSslErrorReceive .error : " + e.error);
})
.onRenderExited((e) => {
console.log("webTest : onRenderExited .detail : " + JSON.stringify(e.detail));
})
.onFileSelectorShow((e) => {
console.log("webTest : onFileSelectorShow .callback : " + e.callback);
console.log("webTest : onFileSelectorShow .fileSelector : " + e.fileSelector);
})
}
}
}
\ No newline at end of file
// @ts-nocheck
/**
* Copyright (c) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import animator from '@ohos.animator';
import prompt from '@system.prompt';
@Entry
@Component
struct ColumnExample {
@State divWidth: number = 120;
@State divHeight: number = 120;
@State animation: AnimatorResult = animator.createAnimator({
duration: 3000,
fill: 'forwards',
direction: "normal",
begin: 200,
end: 270
});
onPageShow() {
this.animation.onrepeat(() => {
var repeatoptions = {
duration: 2000,
iterations: 1,
direction: 'alternate',
begin: 180,
end: 240
};
this.animation.update(repeatoptions);
this.animation.play();
});
}
build() {
Column() {
Column() {
Column() {
Column().width(this.divWidth).height(this.divHeight).backgroundColor(0xAFEEEE)
}.width('100%')
}.width('100%').padding({ top: 5 })
Column() {
Row() {
Button('play').borderRadius(8).backgroundColor(0x317aff).width(90).onClick(() => {
this.animation.onframe((value) => {
this.divWidth = value
this.divHeight = value
});
this.animation.play();
});
Button('update').borderRadius(8).backgroundColor(0x317aff).width(90).onClick(() => {
var newoptions = {
duration: 5000,
iterations: 2,
begin: 120,
end: 180
};
this.animation.update(newoptions);
this.animation.play();
});
Button('create').borderRadius(8).backgroundColor(0x317aff).width(90).onClick(() => {
var newoptions = {
duration: 5000,
easing: 'friction',
delay: 0,
fill: 'forwards',
direction: "normal",
iterations: 2,
begin: 120,
end: 180
};
this.animation.create(newoptions);
});
}.margin({ top: 5 })
Row() {
Button('pause').borderRadius(8).backgroundColor(0x317aff).width(90).onClick(() => {
this.animation.pause();
});
Button('finish').borderRadius(8).backgroundColor(0x317aff).width(90).onClick(() => {
this.animation.onfinish(() => {
prompt.showToast({
message: 'finish'
})
});
this.animation.finish();
});
}.margin({ top: 5 })
Row() {
Button('cancel').borderRadius(8).backgroundColor(0x317aff).width(90).onClick(() => {
this.animation.cancel();
});
Button('reverse').borderRadius(8).backgroundColor(0x317aff).width(90).onClick(() => {
this.animation.reverse();
});
}.margin({ top: 5 })
}.margin({ top: 30 })
}
}
}
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import Log from '../common/Log.ets';
import inputEventClient from '@ohos.multimodalInput.inputEventClient';
const TAG = 'ets_apiLack_add';
@Entry
@Component
export default struct CommonBackgroundBlurStyle {
@State value: string = ''
isEnv:boolean = Environment.EnvProp('accessibilityEnabled', 'default')
configuration : Configuration = {
colorMode: "xxx",
fontScale: 20
}
layoutInfo : LayoutInfo = {
position: {
x:20,
y:30
},
constraint: {}
}
constraint:ConstraintSizeOptions = {
}
onMeasure(children,constraint) {
console.info('onMeasure');
children[0].measure(constraint)
}
onLayout(childen, constraint) {
console.info('onLayout');
childen[0].layout(this.layoutInfo)
}
aboutToAppear() {
Log.showInfo(TAG, `aboutToAppear CommonBackgroundBlurStyle start`)
}
aboutToDisappear() {
Log.showInfo(TAG, `aboutToDisAppear CommonBackgroundBlurStyle end`)
}
onPageHide(): void {
Log.showInfo(TAG, `onPageHide CommonBackgroundBlurStyle start`)
}
onBackPress(): void {
Log.showInfo(TAG, `onBackPress CommonBackgroundBlurStyle start`)
}
@Styles pressedStyles() {
.backgroundColor('red')
.opacity(1)
}
buttonTab(){
let keyEventDown = {
isPressed: true,
keyCode: 2049,
keyDownDuration: 0,
isIntercepted: false
}
let res1 = inputEventClient.injectEvent({KeyEvent: keyEventDown});
let keyEventUp = {
isPressed: false,
keyCode: 2049,
keyDownDuration: 0,
isIntercepted: false
}
let res2 = inputEventClient.injectEvent({KeyEvent: keyEventUp});
}
buttonOnKey(){
let keyEventDown = {
isPressed: true,
keyCode: 2054,
keyDownDuration: 0,
isIntercepted: false
}
let res3 = inputEventClient.injectEvent({KeyEvent: keyEventDown});
let keyEventUp = {
isPressed: false,
keyCode: 2054,
keyDownDuration: 0,
isIntercepted: false
}
let res4 = inputEventClient.injectEvent({KeyEvent: keyEventUp});
}
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Text("common-BackgroundBlurStyle")
.width(320)
.height(50)
.fontSize(20)
.opacity(1)
.align(Alignment.TopStart)
.fontColor(0xCCCCCC)
.lineHeight(25)
.border({ width: 1 })
.padding(10)
.textAlign(TextAlign.Center)
.textOverflow({ overflow: TextOverflow.None })
.key("backgroundBlurStyleText")
.backgroundBlurStyle(BlurStyle.Thick)
Text("common-BorderImage")
.width(320)
.height(50)
.fontSize(20)
.opacity(1)
.align(Alignment.TopStart)
.fontColor(0xCCCCCC)
.lineHeight(25)
.border({ width: 1 })
.padding(10)
.textAlign(TextAlign.Center)
.textOverflow({ overflow: TextOverflow.None })
.key("borderImageText")
.hitTestBehavior(HitTestMode.Default)
.borderImage({
source: {
angle: 90,
direction: GradientDirection.Left,
colors: [[0xAEE1E1, 0.0], [0xD3E0DC, 0.3], [0xFCD1D1, 1.0]]
},
slice: { top: 10, bottom: 10, left: 10, right: 10 },
width: { top: "10px", bottom: "10px", left: "10px", right: "10px" },
repeat: RepeatMode.Stretch,
fill: false
})
Text("common-HoverEffectHighlight")
.width(320)
.height(50)
.fontSize(20)
.opacity(1)
.align(Alignment.TopStart)
.fontColor(0xCCCCCC)
.lineHeight(25)
.border({ width: 1 })
.padding(10)
.textAlign(TextAlign.Center)
.textOverflow({ overflow: TextOverflow.None })
.key("hoverEffectText")
.hoverEffect(HoverEffect.Highlight)
Text("common-HoverEffectScale")
.width(320)
.height(50)
.fontSize(20)
.opacity(1)
.align(Alignment.TopStart)
.fontColor(0xCCCCCC)
.lineHeight(25)
.border({ width: 1 })
.padding(10)
.textAlign(TextAlign.Center)
.textOverflow({ overflow: TextOverflow.None })
.key("hoverEffectScaleText")
.hoverEffect(HoverEffect.Scale)
Text("common-OnKeyEvent")
.width(320)
.height(50)
.fontSize(20)
.opacity(1)
.align(Alignment.TopStart)
.fontColor(0xCCCCCC)
.lineHeight(25)
.border({ width: 1 })
.padding(10)
.textAlign(TextAlign.Center)
.textOverflow({ overflow: TextOverflow.None })
.key("onKeyEventText")
Button('common-OnKeyEvent')
.onClick(()=>{
this.buttonTab()
this.buttonOnKey()
})
.key("onKeyEventButton")
.onKeyEvent((event: KeyEvent) => {
if (event.keyCode === 2054) {
console.info("onKeyEvent 2054 inject Success ");
}
if (event.type === KeyType.Down) {
Log.showInfo(TAG, `Down`)
}
if (event.type === KeyType.Up) {
Log.showInfo(TAG, `Up`)
}
Log.showInfo(TAG, 'KeyType:' + event.type + ';keyCode:' + event.keyCode + ';keyText:' + event.keyText)
})
Text("common-TabIndex")
.width(320)
.height(50)
.fontSize(20)
.opacity(1)
.align(Alignment.TopStart)
.fontColor(0xCCCCCC)
.lineHeight(25)
.border({ width: 1 })
.padding(10)
.textAlign(TextAlign.Center)
.textOverflow({ overflow: TextOverflow.None })
.key("tabIndexText")
.tabIndex(1)
Text("common-ParallelGesture" + '\n' + this.value)
.width(320)
.height(100)
.fontSize(12)
.opacity(1)
.align(Alignment.TopStart)
.fontColor(0xCCCCCC)
.lineHeight(15)
.border({ width: 1 })
.padding(10)
.textAlign(TextAlign.Center)
.textOverflow({ overflow: TextOverflow.None })
.key("parallelGestureText")
.parallelGesture(TapGesture().onAction(() => {
// 并行手势
this.value = 'gesture onAction'
}))
Text("common-Sepia")
.width(320)
.height(50)
.fontSize(20)
.opacity(1)
.align(Alignment.TopStart)
.fontColor(0xCCCCCC)
.lineHeight(25)
.border({ width: 1 })
.padding(10)
.textAlign(TextAlign.Center)
.textOverflow({ overflow: TextOverflow.None })
.key("sepiaText")
.backgroundColor('#E78282')
.sepia(1)
Button('Button 1')
.id('target')
Text("common-AlignRules")
.width(260)
.height(50)
.fontSize(20)
.opacity(1)
.align(Alignment.TopStart)
.fontColor(0xCCCCCC)
.lineHeight(25)
.border({ width: 1 })
.padding(10)
.textAlign(TextAlign.Center)
.textOverflow({ overflow: TextOverflow.None })
.key("alignRulesText")
.alignRules({
top: { anchor: 'target', align: VerticalAlign.Bottom },
right: { anchor: "target", align: HorizontalAlign.Center }
})
Text("common-StateStyles")
.width(320)
.height(50)
.fontSize(20)
.opacity(1)
.align(Alignment.TopStart)
.fontColor(0xCCCCCC)
.lineHeight(25)
.border({ width: 1 })
.padding(10)
.textAlign(TextAlign.Center)
.textOverflow({ overflow: TextOverflow.None })
.key("stateStylesText")
.stateStyles({
pressed: this.pressedStyles
})
Text("common-OnVisibleAreaChange")
.width(320)
.height(50)
.fontSize(20)
.opacity(1)
.align(Alignment.TopStart)
.fontColor(0xCCCCCC)
.lineHeight(25)
.border({ width: 1 })
.padding(10)
.textAlign(TextAlign.Center)
.textOverflow({ overflow: TextOverflow.None })
.key("onVisibleAreaChangeText")
Text("common-OnPageHide")
.width(320)
.height(50)
.fontSize(20)
.opacity(1)
.align(Alignment.TopStart)
.fontColor(0xCCCCCC)
.lineHeight(25)
.border({ width: 1 })
.padding(10)
.textAlign(TextAlign.Center)
.textOverflow({ overflow: TextOverflow.None })
.key("onPageHideText")
Text("common-OnBackPress")
.width(320)
.height(50)
.fontSize(20)
.opacity(1)
.align(Alignment.TopStart)
.fontColor(0xCCCCCC)
.lineHeight(25)
.border({ width: 1 })
.padding(10)
.textAlign(TextAlign.Center)
.textOverflow({ overflow: TextOverflow.None })
.key("onBackPressText")
}.width("100%").height("100%")
}
}
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import Log from '../common/Log.ets';
const TAG = 'ets_apiLack_add';
@Entry
@Component
struct HitTestMode {
build() {
Column() {
// outer stack 1
Stack() {
Button('outer button')
.onTouch((event) => {
console.info('HitTestMode outer button touched type: ' + event.type)
})
// inner stack
Stack() {
Button('inner button')
.key("innnerButton")
.onTouch((event) => {
console.info('HitTestMode inner button touched type: ' + event.type)
})
}
.key("Block")
.width("100%")
.height("100%")
// .hitTestBehavior(HitTestMode.Block)
.onTouch((event) => {
console.info('HitTestMode inner stack touched type: ' + event.type)
})
Text('Transparent')
.key("Transparent")
// .hitTestBehavior(HitTestMode.Transparent)
.width("100%")
.height("50%")
.onTouch((event) => {
console.info('HitTestMode text touched type: ' + event.type)
let strJson = getInspectorByKey('Transparent');
let obj = JSON.parse(strJson);
console.info("HitTestMode hitTestBehavior is " + obj.$attrs.hitTestBehavior);
let strJson2 = getInspectorByKey('Block');
let obj2 = JSON.parse(strJson2);
console.info("HitTestMode hitTestBehavior is " + obj2.$attrs.hitTestBehavior);
})
}.width(300).height(300).backgroundColor(Color.Gray)
}.width('100%').height('100%')
}
}
// @ts-nocheck
/**
* Copyright (c) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import events_emitter from '@ohos.events.emitter';
@Entry
@Component
struct NavigationExample {
private arr: number[] = [0, 1, 2, 3, 4, 5]
@State hideBar: boolean = true
@State toolBar: boolean = true
@State hideToolBar: boolean = false
@State hideTitleBar: boolean = false
@State hideBackButton: boolean = false
@State onActionCalled: boolean = false
@State hideNavBar: boolean = false
@State titleMode: NavigationTitleMode = NavigationTitleMode.Free
private stateChangCallBack = (eventData) => {
if (eventData != null) {
console.info("tabs page state change called:" + JSON.stringify(eventData));
if (eventData.data.vertical != null) {
this.titleMode = eventData.data.titleMode;
}
if (eventData.data.hideToolBar != null) {
this.hideToolBar = parseInt(eventData.data.hideToolBar);
}
if (eventData.data.hideTitleBar != null) {
this.hideTitleBar = parseInt(eventData.data.hideTitleBar);
}
if (eventData.data.hideBackButton != null) {
this.hideBackButton = parseInt(eventData.data.hideBackButton);
}
if (eventData.data.hideNavBar != null) {
this.titleMode = parseInt(eventData.data.titleMode);
}
}
}
onPageShow() {
console.info('progress page show called');
var stateChangeEvent = {
eventId: 135,
priority: events_emitter.EventPriority.LOW
}
events_emitter.on(stateChangeEvent, this.stateChangCallBack)
}
@Builder NavigationTitle() {
Column() {
Text('title')
.width(80)
.height(60)
.fontColor(Color.Blue)
.fontSize(30)
}
.onClick(() => {
console.log("title")
})
}
@Builder NavigationMenus() {
Row() {
Image('images/add.png')
.width(25)
.height(25)
Image('comment/more.png')
.width(25)
.height(25)
.margin({ left: 30 })
}.width(100)
}
build() {
Column() {
Navigation() {
Search({ value: '', placeholder: "" }).width('85%').margin(26)
List({ space: 5, initialIndex: 0 }) {
ForEach(this.arr, (item) => {
ListItem() {
Text('' + item)
.width('90%')
.height(80)
.backgroundColor('#3366CC')
.borderRadius(15)
.fontSize(16)
.textAlign(TextAlign.Center)
}.editable(true)
}, item => item)
}
.listDirection(Axis.Vertical)
.key('Navigation')
.height(300)
.margin({ top: 10, left: 18 })
.width('100%')
Button(this.hideBar ? "tool bar" : "hide bar")
.backgroundColor(0x2788D9).width(200).height(100).fontSize(20)
.key('NavigationContent1')
.onClick(() => {
this.hideBar = !this.hideBar;
console.info('navigationContent1 current action state is: ' + this.hideBar);
try {
var backData = {
data: {
"ACTION": this.hideBar,
}
}
var backEvent = {
eventId: 1366,
priority: events_emitter.EventPriority.LOW
}
console.info("navigationContent1 start to emit action state")
events_emitter.emit(backEvent, backData)
} catch (err) {
console.info("navigationContent1 emit action state err: " + JSON.stringify(err.message))
}
})
.margin({ left: 135, top: 60 })
}
.title(this.NavigationTitle)
.subTitle('subtitle')
.backButtonIcon()
.navBarWidth(5)
.navBarPosition(NavBarPosition.end)
.menus(this.NavigationMenus)
.titleMode(NavigationTitleMode.Free)
.hideTitleBar(false)
.hideNavBar(false)
.hideBackButton(false)
.onTitleModeChanged((titleModel: NavigationTitleMode) => {
console.log('titleMode' + titleModel)
})
.onNavBarStateChange((isVisible: boolean) => {
console.log('isVisible:' + isVisible)
})
.toolBar({ items: [
{ value: 'app', icon: 'images/grid.svg', action: () => {
console.log("app")
} },
{ value: 'add', icon: 'images/add.svg', action: () => {
console.log("add")
} },
{ value: 'collect', icon: 'images/collect.svg', action: () => {
console.log("collect")
} }] })
.hideToolBar(this.hideBar)
}
}
}
\ No newline at end of file
// @ts-nocheck
/**
* Copyright (c) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import prompt from '@system.prompt';
import prompt from '@ohos.prompt';
import promptAction from '@ohos.promptAction';
import events_emitter from '@ohos.events.emitter';
@Entry
@Component
struct promptExample {
@State text: string = 'item1'
@State color: string = '#000000'
build(){
Column(){
Button('showActionMenu')
.key('button1')
.backgroundColor('#FF0B8FE2')
.fontSize(20)
.margin({top: 20})
.onClick(()=>{
prompt.showActionMenu({
title: 'Title Info',
buttons: [
{
text: this.text,
color: this.color,
},
],
success: function(data) {
console.log('dialog success callback,click button : ' + data.tapIndex);
},
fail: function(data) {
console.log('dialog fail callback' + data.errMsg);
},
});
})
Button('showDialog')
.key('button2')
.backgroundColor('#FF0B8FE2')
.fontSize(20)
.margin({top: 20})
.onClick(()=> {
prompt.showDialog({
title: 'Title Info',
message: 'Message Info',
buttons: [
{
text: this.text,
color: this.color,
},
],
success: function(data) {
console.log('dialog success callback,click button : ' + data.index);
},
cancel: function() {
console.log('dialog cancel callback');
},
});
})
Button('showActionMenu1')
.key('button3')
.backgroundColor('#ffe20b48')
.fontSize(20)
.margin({top: 20})
.onClick(()=>{
prompt.showDialog({
title: 'Title Info',
message: 'Message Info',
buttons: [
{
text: this.text,
color: this.color,
},
],
})
.then(data => {
console.info('showDialog success, click button: ' + data.tapIndex);
Utils.emitEvent('sucessful',422)
})
.catch(data => {
console.info('showDialog error: ' + data.errMsg);
});
})
Button('showDialog1')
.key('button4')
.backgroundColor('#ffe20b56')
.fontSize(20)
.margin({top: 20})
.onClick(()=> {
prompt.showDialog({
title: 'Title Info',
message: 'Message Info',
buttons: [
{
text: this.text,
color: this.color,
},
],
})
.then(data => {
console.info('showDialog success, click button: ' + data.tapIndex);
Utils.emitEvent('sucessful',422)
})
.catch(data => {
console.info('showDialog error: ' + data.errMsg);
});
})
Button('showActionMenu2')
.key('button6')
.backgroundColor('#ffe20b48')
.fontSize(20)
.margin({top: 20})
.onClick(()=>{
promptAction.showDialog({
title: 'Title Info',
message: 'Message Info',
buttons: [
{
text: this.text,
color: this.color,
},
],
})
.then(data => {
console.info('showDialog success, click button: ' + data.tapIndex);
Utils.emitEvent('sucessful',422)
})
.catch(data => {
console.info('showDialog error: ' + data.errMsg);
});
})
Button('showDialog2')
.key('button5')
.backgroundColor('#ffe20b56')
.fontSize(20)
.margin({top: 20})
.onClick(()=> {
promptAction.showDialog({
title: 'Title Info',
message: 'Message Info',
buttons: [
{
text: this.text,
color: this.color,
},
],
})
.then(data => {
console.info('showDialog success, click button: ' + data.tapIndex);
Utils.emitEvent('sucessful',422)
})
.catch(data => {
console.info('showDialog error: ' + data.errMsg);
});
})
}
}
}
\ No newline at end of file
// @ts-nocheck
/**
* Copyright (c) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import router from '@system.router';
import routery from '@ohos.router';
@Entry
@Component
struct OhosRouterA {
build() {
Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center}) {
Text('A Page')
.fontSize(50)
.fontWeight(FontWeight.Bold)
Button('Push')
.key('pushButtonA')
.backgroundColor('#FF0B8FE2')
.fontSize(20)
.margin({top: 20})
.onClick(() => {
router.push({
uri: 'pages/ohosRouterB',
params: {
data: 'B Page'
}
});
});
Button('back')
.key('pushButtonA')
.backgroundColor('#FF0B8FE2')
.fontSize(20)
.margin({top: 20})
.onClick(() => {
router.push({
uri: 'pages/ohosRouterB',
params: {
data: 'B Page'
}
});
});
Button('pushUrl')
.key('pushButtonA1')
.backgroundColor('#FF0B8FE2')
.fontSize(20)
.margin({top: 20})
.onClick(() => {
try {
routery.pushUrl({
url: 'pages/routerpage2',
params: {
data1: 'message',
data2: {
data3: [123, 456, 789]
},
},
}, (err) => {
if (err) {
console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`);
return;
}
console.info('pushUrl success');
});
} catch (error) {
console.error(`pushUrl args error code is ${error.code}, message is ${error.message}`);
};
});
Button('pushUrl')
.key('pushButtonA1')
.backgroundColor('#FF0B8FE2')
.fontSize(20)
.margin({top: 20})
.onClick(() => {
try {
routery.pushUrl({
url: 'pages/routerpage2',
params: {
data1: 'message',
data2: {
data3: [123, 456, 789]
},
},
}, (err) => {
if (err) {
console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`);
return;
}
console.info('pushUrl success');
});
} catch (error) {
console.error(`pushUrl args error code is ${error.code}, message is ${error.message}`);
};
});
Button('replaceUrl')
.key('pushButtonA1')
.backgroundColor('#FF0B8FE2')
.fontSize(20)
.margin({top: 20})
.onClick(() => {
try {
routery.replaceUrl({
url: 'pages/detail',
params: {
data1: 'message',
},
}, routery.RouterMode.Standard, (err) => {
if (err) {
console.error(`replaceUrl failed, code is ${err.code}, message is ${err.message}`);
return;
}
console.info('replaceUrl success');
});
} catch (error) {
console.error(`replaceUrl args error code is ${error.code}, message is ${error.message}`);
};
});
Button('replaceUrl')
.key('pushButtonA1')
.backgroundColor('#FF0B8FE2')
.fontSize(20)
.margin({top: 20})
.onClick(() => {
try {
routery.replaceUrl({
url: 'pages/detail',
params: {
data1: 'message',
},
}, (err) => {
if (err) {
console.error(`replaceUrl failed, code is ${err.code}, message is ${err.message}`);
return;
}
console.info('replaceUrl success');
});
} catch (error) {
console.error(`replaceUrl args error code is ${error.code}, message is ${error.message}`);
};
});
Button('clear')
.key('pushButtonA')
.backgroundColor('#FF0B8FE2')
.fontSize(20)
.margin({top: 20})
.onClick(() => {
router.push({
uri: 'pages/ohosRouterB',
params: {
data: 'B Page'
}
});
});
Button('getLength')
.key('pushButtonA')
.backgroundColor('#FF0B8FE2')
.fontSize(20)
.margin({top: 20})
.onClick(() => {
router.push({
uri: 'pages/ohosRouterB',
params: {
data: 'B Page'
}
});
});
Button('enableAlertBeforeBackPage')
.key('pushButtonA')
.backgroundColor('#FF0B8FE2')
.fontSize(20)
.margin({top: 20})
.onClick(() => {
router.push({
uri: 'pages/ohosRouterB',
params: {
data: 'B Page'
}
});
});
Button('enableBackPageAlert')
.key('pushButtonA')
.backgroundColor('#FF0B8FE2')
.fontSize(20)
.margin({top: 20})
.onClick(() => {
routery.push({
uri: 'pages/ohosRouterB',
params: {
data: 'B Page'
}
});
});
Button('disableAlertBeforeBackPage')
.key('pushButtonA')
.backgroundColor('#FF0B8FE2')
.fontSize(20)
.margin({top: 20})
.onClick(() => {
router.push({
uri: 'pages/ohosRouterB',
params: {
data: 'B Page'
}
});
});
}.width('100%').height('100%')
}
}
\ No newline at end of file
// @ts-nocheck
/**
* Copyright (c) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import router from '@system.router';
import newrouter from '@ohos.router';
@Entry
@Component
struct OhosRouterA {
build() {
Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center}) {
Text('A Page')
.fontSize(50)
.fontWeight(FontWeight.Bold)
Button('Push')
.key('pushButtonA')
.backgroundColor('#FF0B8FE2')
.fontSize(20)
.margin({top: 20})
.onClick(() => {
router.push({
uri: 'pages/ohosRouterB',
params: {
data: 'B Page'
}
});
});
Button('back')
.key('pushButtonA')
.backgroundColor('#FF0B8FE2')
.fontSize(20)
.margin({top: 20})
.onClick(() => {
router.push({
uri: 'pages/ohosRouterB',
params: {
data: 'B Page'
}
});
});
Button('clear')
.key('pushButtonA')
.backgroundColor('#FF0B8FE2')
.fontSize(20)
.margin({top: 20})
.onClick(() => {
router.push({
uri: 'pages/ohosRouterB',
params: {
data: 'B Page'
}
});
});
Button('getLength')
.key('pushButtonA')
.backgroundColor('#FF0B8FE2')
.fontSize(20)
.margin({top: 20})
.onClick(() => {
router.push({
uri: 'pages/ohosRouterB',
params: {
data: 'B Page'
}
});
});
Button('enableAlertBeforeBackPage')
.key('pushButtonA')
.backgroundColor('#FF0B8FE2')
.fontSize(20)
.margin({top: 20})
.onClick(() => {
router.push({
uri: 'pages/ohosRouterB',
params: {
data: 'B Page'
}
});
});
Button('disableAlertBeforeBackPage')
.key('pushButtonA')
.backgroundColor('#FF0B8FE2')
.fontSize(20)
.margin({top: 20})
.onClick(() => {
router.push({
uri: 'pages/ohosRouterB',
params: {
data: 'B Page'
}
});
});
Button('pushurl1')
.key('pushurlButton1')
.backgroundColor('#FF0B8FE2')
.fontSize(20)
.margin({top: 20})
.onClick(() => {
newrouter.pushurl({
uri: 'pages/ohosRouterB',
params: {
data: 'B Page'
}
});
});
Button('Pushurl2')
.key('pushurlButton1A')
.backgroundColor('#FF0B8FE2')
.fontSize(20)
.margin({top: 20})
.onClick(() => {
newrouter.pushurl({
uri: 'pages/ohosRouterB',
params: {
data: 'B Page'
}
});
},newrouter.RouterMode.Standard);
Button('replaceurl1')
.key('replaceurl1A')
.backgroundColor('#FF0B8FE2')
.fontSize(20)
.margin({top: 20})
.onClick(() => {
newrouter.replaceUrl({
uri: 'pages/ohosRouterB',
params: {
data: 'B Page'
}
});
});
Button('replaceurl2')
.key('replaceurl1')
.backgroundColor('#FF0B8FE2')
.fontSize(20)
.margin({top: 20})
.onClick(() => {
newrouter.replaceUrl({
uri: 'pages/ohosRouterB',
params: {
data: 'B Page'
}
});
},newrouter.RouterMode.Standard);
}.width('100%').height('100%')
}
}
\ No newline at end of file
// @ts-nocheck
/**
* Copyright (c) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import router from '@system.router';
import events_emitter from '@ohos.events.emitter';
@Entry
@Component
struct OhosRouterB {
build() {
Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center}) {
Text('B Page')
.fontSize(50)
.fontWeight(FontWeight.Bold)
}.width('100%').height('100%')
}
onPageShow() {
let params = router.getParams();
if (params && params.data) {
console.info("[OhosRouterB] getParams result: " + params.data);
this.getRouterParams(params.data);
}
}
getRouterParams(data) {
try {
let paramsData = {
data: {
"params": data,
}
}
let paramsEvent = {
eventId: 142,
priority: events_emitter.EventPriority.LOW
}
console.info("[OhosRouterB] start to emit params");
events_emitter.emit(paramsEvent, paramsData);
} catch (err) {
console.info("[OhosRouterB] emit params err: " + JSON.stringify(err.message));
}
}
}
\ No newline at end of file
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import events_emitter from '@ohos.events.emitter';
import Log from '../common/Log.ets';
const TAG = 'ets_apiLack_add';
@Entry
@Component
export default struct PanelBackgroundMask {
@State mode: PanelMode = PanelMode.Full
@State navBarPosition:PanelMode = PanelMode.Full
aboutToAppear() {
Log.showInfo(TAG, `aboutToAppear PanelBackgroundMask start`)
}
aboutToDisappear() {
Log.showInfo(TAG, `aboutToDisAppear PanelBackgroundMask end`)
}
build() {
Column() {
Text("panel-OnHeightChange")
.width(100)
.height(70)
.fontSize(20)
.opacity(1)
.align(Alignment.TopStart)
.fontColor(0xCCCCCC)
.lineHeight(25)
.border({ width: 1 })
.padding(10)
.textAlign(TextAlign.Center)
.textOverflow({ overflow: TextOverflow.None })
.key("onHeightChangeText")
.onClick(() => {
this.mode = PanelMode.Half
this.navBarPosition = PanelMode.Half
})
Panel(true) {
Column() {
Text("panel-BackgroundMask").fontSize(30)
}
}
.key("panel")
.mode(this.mode)
.navBarPosition(this.navBarPosition)
.backgroundColor('green')
.type(PanelType.Foldable)
.dragBar(false)
.halfHeight(300)
.onChange((width: number, height: number, mode: PanelMode) => {
Log.showInfo(TAG, `width:${width},height:${height},mode:${mode}`)
})
.backgroundMask('red')
.onHeightChange((value: number) => {
Log.showInfo(TAG, 'onHeightChange: ' + value)
try {
var backData = {
data: {
"result":"success"
}
}
let backEvent = {
eventId: 10111,
priority: events_emitter.EventPriority.LOW
}
console.info("onHeightChange start to emit action state")
events_emitter.emit(backEvent, backData)
} catch (err) {
console.info("testpanelOnHeightChange0002 emit action state err: " + JSON.stringify(err.message))
}
})
}.width("100%").height("100%")
}
}
// @ts-nocheck
/**
* Copyright (c) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import events_emitter from '@ohos.events.emitter';
@Entry
@Component
struct PositionSetting {
@State align: Alignment = Alignment.TopStart;
@State direction: Direction = Direction.Rtl;
@State position1: {x: string, y: string} = {x: 25, y: 15};
@State position2: {x: string, y: string} = {x: '50%', y: '70%'};
@State anchor: {x: string, y: string} = {x: 25, y: 25};
@State offset: {x: string, y: string} = {x: 10, y: 15};
@State span: {x: string, y: string} = {x: 10, y: 15};
@State opacityValue: string = 1;
build() {
Column() {
Column({space: 10}) {
Text('opacity(1)').fontSize(20).fontColor(Color.Black).width('90%').opacity(`${this.opacityValue}`).key("opacity")
Text('top start')
.align(this.align)
.height(50)
.width('90%')
.fontSize(20)
.backgroundColor(0xFFE4C4)
.key('textAlign')
Text('direction').fontSize(20).fontColor(Color.Black).width('90%')
Row() {
Text('1').height(50).width('25%').fontSize(20).backgroundColor(0xF5DEB3)
Text('2').height(50).width('25%').fontSize(20).backgroundColor(0xD2B48C)
Text('3').height(50).width('25%').fontSize(20).backgroundColor(0xF5DEB3)
Text('4').height(50).width('25%').fontSize(20).backgroundColor(0xD2B48C)
}
.width('90%')
.direction(this.direction)
.key('rowDirection')
Text('position').fontSize(20).fontColor(Color.Black).width('90%')
Row({ space: 20 }) {
Text('1')
.size({ width: '45%', height: '50' })
.backgroundColor(0xdeb887)
.border({ width: 1 })
.fontSize(20)
Text(`2 position(${this.position1.x}, ${this.position1.y})`)
.size({ width: '60%', height: '30' })
.backgroundColor(0xbbb2cb).border({ width: 1 })
.fontSize(20).align(Alignment.Start)
.position({ x: this.position1.x, y: this.position1.y })
.key('position1')
Text('3')
.size({ width: '45%', height: '50' })
.backgroundColor(0xdeb887)
.border({ width: 1 }).fontSize(20)
Text(`4 position(${this.position2.x}, ${this.position2.y})`)
.size({ width: '50%', height: '50' })
.backgroundColor(0xbbb2cb)
.border({ width: 1 }).fontSize(20)
.position({ x: this.position2.x, y: this.position2.y })
.key('position2')
}.width('90%').height(100).border({ width: 1, style: BorderStyle.Dashed })
Text('markAnchor').fontSize(20).fontColor(Color.Black).width('90%')
Stack({ alignContent: Alignment.TopStart }) {
Row()
.size({ width: '100', height: '100' })
.backgroundColor(0xdeb887)
Image('/images/ic_health_heart.png')
.size({ width: 25, height: 25 })
.markAnchor({ x: this.anchor.x, y: this.anchor.y })
.key('markAnchor')
Image('/images/ic_health_heart.png')
.size({ width: 25, height: 25 })
.markAnchor({ x: 25, y: 25 })
.position({ x: '100%', y: '100%' })
}.margin({ top: 25 }).border({ width: 1, style: BorderStyle.Dashed })
Stack({ alignContent: Alignment.Bottom }) {
Text('First child, show in bottom').width('90%').height('100%').backgroundColor(0xd2cab3).align(Alignment.Top)
Text('Second child, show in top').width('70%').height('60%').backgroundColor(0xc1cbac).align(Alignment.Top)
}.width('100%').height(150).margin({ top: 5 })
Text('offset').fontSize(20).fontColor(Color.Black).width('90%')
Row() {
Text('1').size({ width: '15%', height: '100' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(20)
Text(`2\noffset(${this.offset.x}, ${this.offset.y})`)
.size({ width: 170, height: '50' }).backgroundColor(0xbbb2cb).border({ width: 1 })
.fontSize(20).align(Alignment.Start)
.offset({ x: this.offset.x, y: this.offset.y })
.span({x: this.span.x, y: this.span.y})
.key('offset')
Text('3').size({ width: '15%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(20)
Text('4\noffset(-10%, 20%)')
.size({ width: 170, height: '50' }) .backgroundColor(0xbbb2cb).border({ width: 1 }).fontSize(20)
.offset({ x: '-10%', y: '50%' })
}.width('90%').height(100).border({ width: 1, style: BorderStyle.Dashed })
}
}
.width('100%').margin({ top: 5 })
}
onPageShow() {
let stateChangeEvent = {
eventId: 25,
priority: events_emitter.EventPriority.LOW
}
events_emitter.on(stateChangeEvent, this.stateChangCallBack);
let directionChangeEvent = {
eventId: 26,
priority: events_emitter.EventPriority.LOW
}
events_emitter.on(directionChangeEvent, this.stateChangCallBack);
let positionChangeEvent = {
eventId: 27,
priority: events_emitter.EventPriority.LOW
}
events_emitter.on(positionChangeEvent, this.stateChangCallBack);
let markAnchorChangeEvent = {
eventId: 28,
priority: events_emitter.EventPriority.LOW
}
events_emitter.on(markAnchorChangeEvent, this.stateChangCallBack);
let offsetChangeEvent = {
eventId: 29,
priority: events_emitter.EventPriority.LOW
}
events_emitter.on(offsetChangeEvent, this.stateChangCallBack);
}
stateChangCallBack = (eventData) => {
console.info("position page stateChangCallBack" + JSON.stringify(eventData));
if (eventData) {
if (eventData.data.textAlign) {
this.align = Alignment.BottomEnd;
} else if (eventData.data.direction) {
this.direction = eventData.data.direction;
} else if (eventData.data.position1) {
this.position1 = JSON.parse(eventData.data.position1);
this.position2 = JSON.parse(eventData.data.position2);
} else if (eventData.data.markAnchor) {
this.anchor = JSON.parse(eventData.data.markAnchor);
} else if (eventData.data.offset) {
this.offset = JSON.parse(eventData.data.offset);
this.span = JSON.parse(eventData.data.span);
} else if (eventData.data.opacityValue) {
this.opacityValue = eventData.data.opacityValue;
}
}
}
}
\ No newline at end of file
// @ts-nocheck
/**
* Copyright (c) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import events_emitter from '@ohos.events.emitter';
@Entry
@Component
struct ClipAndMaskExample {
@State isMaskRect: boolean = true;
@State isClipCircle:boolean = true;
@State maskType: CommonShapeMethod= new Rect({ width: 280, height: 280 });
@State clipType: CommonShapeMethod= new Circle({ width: 280, height: 280 });
@State shape_Type: CommonShapeMethod= new elliptical({ width: 200, height: 280 });
@State lengthType: CommonShapeMethod= new line({ width: 0, height: 10 });
@State pathType: CommonShapeMethod= new path({ width: 10, height: 10 });
@State shape_2_Type: CommonShapeMethod= new polygon({ width: 5, height: 10 });
@State shape_3_Type: CommonShapeMethod= new polyine({ width: 5, height: 10 });
@State shape_4_Type: CommonShapeMethod= new rect_({ width: 5, height: 10 ,radius : 5});
private stateChangCallBack = (eventData) => {
if (eventData != null) {
console.info("shapeClipping page state change called:" + JSON.stringify(eventData));
if(eventData.data.maskValue != null) {
this.maskType = new Circle({ width: 280, height: 280 });
}
}
}
private stateChangCallBack = (eventData) => {
if (eventData != null) {
console.info("shapeClipping page state change called:" + JSON.stringify(eventData));
if(eventData.data.maskValue != null) {
this.shape_Type = new elliptical({ width: 200, height: 280 });
}
}
}
private stateChangCallBack = (eventData) => {
if (eventData != null) {
console.info("shapeClipping page state change called:" + JSON.stringify(eventData));
if(eventData.data.maskValue != null) {
this.lengthType = new line({ width: 200, height: 280 });
}
}
}
private stateChangCallBack = (eventData) => {
if (eventData != null) {
console.info("shapeClipping page state change called:" + JSON.stringify(eventData));
if(eventData.data.maskValue != null) {
this.shape_4_Type = new rect_({ width: 200, height: 280 });
}
}
}
private stateChangCallBack = (eventData) => {
if (eventData != null) {
console.info("shapeClipping page state change called:" + JSON.stringify(eventData));
if(eventData.data.maskValue != null) {
this.pathType = new path({ width: 200, height: 280 });
}
}
}
private stateChangCallBack = (eventData) => {
if (eventData != null) {
console.info("shapeClipping page state change called:" + JSON.stringify(eventData));
if(eventData.data.maskValue != null) {
this.shape_2_Type = new polygon({ width: 200, height: 280 });
}
}
}
private stateChangCallBack = (eventData) => {
if (eventData != null) {
console.info("shapeClipping page state change called:" + JSON.stringify(eventData));
if(eventData.data.maskValue != null) {
this.shape_3_Type = new polyine({ width: 200, height: 280 });
}
}
}
private shapeChangCallBack = (eventData) => {
if (eventData != null) {
console.info("shapeClipping page shape change called:" + JSON.stringify(eventData));
if(eventData.data.clipValue != null) {
this.clipType = new Rect({ width: 280, height: 280 });
}
}
}
onPageShow() {
console.info('shapeClipping page show called');
var stateChangeEvent = {
eventId: 32,
priority: events_emitter.EventPriority.LOW
}
events_emitter.on(stateChangeEvent, this.stateChangCallBack);
var shapeChangeEvent = {
eventId: 33,
priority: events_emitter.EventPriority.LOW
Environment
}
events_emitter.on(shapeChangeEvent, this.shapeChangCallBack);
}
build() {
Column({ space: 5 }) {
Text('clip')
.fontSize(9)
.width('90%')
.fontColor(0xCCCCCC)
Image('/images/clip.png')
.clip(this.clipType)
.clip(this.shape_Type)
.clip(this.lengthType)
.clip(this.pathType)
.clip(this.shape_2_Type)
.clip(this.shape_3_Type)
.clip(this.shape_4_Type)
.width('500px')
.height('280px')
.key('image_clip')
Row() {
Image('/images/clip.png')
.width('500px')
.height('280px')
}
.clip(true)
.borderRadius(20)
.key('image_clip_true')
Text('mask')
.fontSize(9)
.width('90%')
.fontColor(0xCCCCCC)
Image('/images/clip.png')
.mask(this.maskType)
.width('500px').height('280px')
.key('image_mask')
}
.width('100%')
.margin({ top: 5 })
}
}
\ No newline at end of file
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import router from '@system.router';
import {describe, beforeAll, beforeEach, afterEach, afterAll, it, expect} from "hypium/index"
import Utils from './Utils.ets'
export default function stackAlignContentJsunit() {
describe('stackAlignContentTest', function () {
beforeAll(async function (done) {
console.info("flex beforeEach start");
let options = {
uri: 'pages/stack',
}
try {
router.clear();
let pages = router.getState();
console.info("get stack state success " + JSON.stringify(pages));
if (!("stack" == pages.name)) {
console.info("get stack state success " + JSON.stringify(pages.name));
let result = await router.push(options);
await Utils.sleep(2000);
console.info("push stack page success " + JSON.stringify(result));
}
} catch (err) {
console.error("push stack page error: " + err);
}
done()
});
afterEach(async function () {
await Utils.sleep(1000);
console.info("stackAlignContent after each called");
});
/*
* @tc.number SUB_ACE_BASIC_ETS_API_0001
* @tc.name teststackAlignContent0001
* @tc.desic acestackAlignContentEtsTest0001
*/
it('teststackAlignContent0001', 0, async function (done) {
console.info('stackAlignContent teststackAlignContent0001 START');
await Utils.sleep(2000);
let strJson = getInspectorByKey('Stack');
console.info("[teststackAlignContent0001] component width strJson:" + strJson);
let obj = JSON.parse(strJson);
expect(obj.$type).assertEqual('Stack');
expect(obj.$attrs.width).assertEqual("100.00%");
console.info("[teststackAlignContent0001] width value :" + obj.$attrs.width);
done();
});
/*
* @tc.number SUB_ACE_BASIC_ETS_API_0002
* @tc.name teststackAlignContent0002
* @tc.desic acestackAlignContentEtsTest0002
*/
it('teststackAlignContent0002', 0, async function (done) {
console.info('stackAlignContent teststackAlignContent0002 START');
await Utils.sleep(2000);
let strJson = getInspectorByKey('Stack');
console.info("[teststackAlignContent0002] component width strJson:" + strJson);
let obj = JSON.parse(strJson);
expect(obj.$type).assertEqual('Stack');
expect(obj.$attrs.height).assertEqual("150.00vp");
console.info("[teststackAlignContent0002] width value :" + obj.$attrs.width);
done();
});
})
}
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import Log from '../common/Log.ets';
const TAG = 'ets_apiLack_add';
@Entry
@Component
export default
struct StackAlignContent {
aboutToAppear() {
Log.showInfo(TAG, `aboutToAppear StackAlignContent start`)
}
aboutToDisappear(){
Log.showInfo(TAG, `aboutToDisAppear StackAlignContent end`)
}
build(){
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center,justifyContent:FlexAlign.Center }){
Text("stack-AlignContent")
.width(100)
.height(70)
.fontSize(20)
.opacity(1)
.align(Alignment.TopStart)
.fontColor(0xCCCCCC)
.lineHeight(25)
.border({ width: 1 })
.padding(10)
.textAlign(TextAlign.Center)
.textOverflow({ overflow: TextOverflow.None })
.key("alignContentText")
Stack({ alignContent: Alignment.Bottom }) {
Text('First child, show in bottom')
.width('95%')
.width('90%')
.height('100%')
.backgroundColor(0xd2cab3)
.align(Alignment.Top)
Text('Second child, show in top')
.width('70%')
.height('60%')
.backgroundColor(0xc1cbac)
.align(Alignment.Top)
}.key("Stack")
.width('100%').height(150).margin({ top: 5 })
}.width("100%").height("100%")
}
}
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import router from '@system.router';
import {describe, beforeAll, beforeEach, afterEach, afterAll, it, expect} from "hypium/index"
import Utils from './Utils.ets'
export default function tabsBarPositionJsunit() {
describe('tabsBarPositionTest', function () {
beforeAll(async function (done) {
console.info("flex beforeEach start");
let options = {
uri: 'pages/tabs',
}
try {
router.clear();
let pages = router.getState();
console.info("get tabs state success " + JSON.stringify(pages));
if (!("tabs" == pages.name)) {
console.info("get tabs state success " + JSON.stringify(pages.name));
let result = await router.push(options);
await Utils.sleep(2000);
console.info("push tabs page success " + JSON.stringify(result));
}
} catch (err) {
console.error("push tabs page error: " + err);
}
done()
});
afterEach(async function () {
await Utils.sleep(1000);
console.info("tabsBarPosition after each called");
});
/*
* @tc.number SUB_ACE_BASIC_ETS_API_0001
* @tc.name testtabsBarPosition0001
* @tc.desic acetabsBarPositionEtsTest0001
*/
it('testtabsBarPosition0001', 0, async function (done) {
console.info('tabsBarPosition testtabsBarPosition0001 START');
await Utils.sleep(2000);
let strJson = getInspectorByKey('barPositionText');
console.info("[testtabsBarPosition0001] component width strJson:" + strJson);
let obj = JSON.parse(strJson);
expect(obj.$type).assertEqual('Text');
expect(obj.$attrs.width).assertEqual("100.00vp");
console.info("[testtabsBarPosition0001] width value :" + obj.$attrs.width);
done();
});
/*
* @tc.number SUB_ACE_BASIC_ETS_API_0002
* @tc.name testtabsBarPosition0002
* @tc.desic acetabsBarPositionEtsTest0002
*/
it('testtabsBarPosition0002', 0, async function (done) {
console.info('tabsBarPosition testtabsBarPosition0002 START');
await Utils.sleep(2000);
let strJson = getInspectorByKey('barPositionText');
console.info("[testtabsBarPosition0002] component height strJson:" + strJson);
let obj = JSON.parse(strJson);
expect(obj.$type).assertEqual('Text');
expect(obj.$attrs.height).assertEqual("70.00vp");
console.info("[testtabsBarPosition0002] height value :" + obj.$attrs.height);
done();
});
/*
* @tc.number SUB_ACE_BASIC_ETS_API_0003
* @tc.name testtabsBarPosition0003
* @tc.desic acetabsBarPositionEtsTest0003
*/
it('testtabsBarPosition0003', 0, async function (done) {
console.info('tabsBarPosition testtabsBarPosition0003 START');
await Utils.sleep(2000);
let strJson = getInspectorByKey('barPositionText');
console.info("[testtabsBarPosition0003] component fontSize strJson:" + strJson);
let obj = JSON.parse(strJson);
expect(obj.$type).assertEqual('Text');
expect(obj.$attrs.fontSize).assertEqual("20.00fp");
console.info("[testtabsBarPosition0003] fontSize value :" + obj.$attrs.fontSize);
done();
});
/*
* @tc.number SUB_ACE_BASIC_ETS_API_0004
* @tc.name testtabsBarPosition0004
* @tc.desic acetabsBarPositionEtsTest0004
*/
it('testtabsBarPosition0004', 0, async function (done) {
console.info('tabsBarPosition testtabsBarPosition0004 START');
await Utils.sleep(2000);
let strJson = getInspectorByKey('barPositionText');
console.info("[testtabsBarPosition0004] component opacity strJson:" + strJson);
let obj = JSON.parse(strJson);
expect(obj.$type).assertEqual('Text');
expect(obj.$attrs.opacity).assertEqual(1);
console.info("[testtabsBarPosition0004] opacity value :" + obj.$attrs.opacity);
done();
});
/*
* @tc.number SUB_ACE_BASIC_ETS_API_0005
* @tc.name testtabsBarPosition0005
* @tc.desic acetabsBarPositionEtsTest0005
*/
it('testtabsBarPosition0005', 0, async function (done) {
console.info('tabsBarPosition testtabsBarPosition0005 START');
await Utils.sleep(2000);
let strJson = getInspectorByKey('barPositionText');
console.info("[testtabsBarPosition0005] component align strJson:" + strJson);
let obj = JSON.parse(strJson);
expect(obj.$type).assertEqual('Text');
expect(obj.$attrs.align).assertEqual("Alignment.TopStart");
console.info("[testtabsBarPosition0005] align value :" + obj.$attrs.align);
done();
});
/*
* @tc.number SUB_ACE_BASIC_ETS_API_0006
* @tc.name testtabsBarPosition0006
* @tc.desic acetabsBarPositionEtsTest0006
*/
it('testtabsBarPosition0006', 0, async function (done) {
console.info('tabsBarPosition testtabsBarPosition0006 START');
await Utils.sleep(2000);
let strJson = getInspectorByKey('barPositionText');
console.info("[testtabsBarPosition0006] component fontColor strJson:" + strJson);
let obj = JSON.parse(strJson);
expect(obj.$type).assertEqual('Text');
expect(obj.$attrs.fontColor).assertEqual("#FFCCCCCC");
console.info("[testtabsBarPosition0006] fontColor value :" + obj.$attrs.fontColor);
done();
});
/*
* @tc.number SUB_ACE_BASIC_ETS_API_0007
* @tc.name testtabsBarPosition0007
* @tc.desic acetabsBarPositionEtsTest0007
*/
it('testtabsBarPosition0007', 0, async function (done) {
console.info('tabsBarPosition testtabsBarPosition0007 START');
await Utils.sleep(2000);
let strJson = getInspectorByKey('barPositionText');
console.info("[testtabsBarPosition0007] component lineHeight strJson:" + strJson);
let obj = JSON.parse(strJson);
expect(obj.$type).assertEqual('Text');
expect(obj.$attrs.lineHeight).assertEqual("25.00fp");
console.info("[testtabsBarPosition0007] lineHeight value :" + obj.$attrs.lineHeight);
done();
});
/*
* @tc.number SUB_ACE_BASIC_ETS_API_0009
* @tc.name testtabsBarPosition0009
* @tc.desic acetabsBarPositionEtsTest0009
*/
it('testtabsBarPosition0009', 0, async function (done) {
console.info('tabsBarPosition testtabsBarPosition009 START');
await Utils.sleep(2000);
let strJson = getInspectorByKey('barPositionText');
console.info("[testtabsBarPosition0009] component padding strJson:" + strJson);
let obj = JSON.parse(strJson);
expect(obj.$type).assertEqual('Text');
expect(obj.$attrs.padding).assertEqual("10.00vp");
console.info("[testtabsBarPosition0009] padding value :" + obj.$attrs.padding);
done();
});
/*
* @tc.number SUB_ACE_BASIC_ETS_API_0010
* @tc.name testtabsBarPosition0010
* @tc.desic acetabsBarPositionEtsTest0010
*/
it('testtabsBarPosition0010', 0, async function (done) {
console.info('tabsBarPosition testtabsBarPosition0010 START');
await Utils.sleep(2000);
let strJson = getInspectorByKey('barPositionText');
console.info("[testtabsBarPosition0010] component textAlign strJson:" + strJson);
let obj = JSON.parse(strJson);
expect(obj.$type).assertEqual('Text');
expect(obj.$attrs.textAlign).assertEqual("TextAlign.Left");
console.info("[testtabsBarPosition0010] textAlign value :" + obj.$attrs.textAlign);
done();
});
/*
* @tc.number SUB_ACE_BASIC_ETS_API_0011
* @tc.name testtabsBarPosition0011
* @tc.desic acetabsBarPositionEtsTest0011
*/
it('testtabsBarPosition0011', 0, async function (done) {
console.info('tabsBarPosition testtabsBarPosition0011 START');
await Utils.sleep(2000);
let strJson = getInspectorByKey('barPositionTabs');
console.info("[testtabsBarPosition0011] component barPosition strJson:" + strJson);
let obj = JSON.parse(strJson);
expect(obj.$type).assertEqual('Tabs');
expect(obj.$attrs.barPosition).assertEqual("BarPosition.Start");
console.info("[testtabsBarPosition0011] barPosition value :" + obj.$attrs.barPosition);
done();
});
})
}
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import Log from '../common/Log.ets';
const TAG = 'ets_apiLack_add';
@Entry
@Component
export default
struct TabsBarPosition {
private controller: TabsController = new TabsController()
aboutToAppear() {
Log.showInfo(TAG, `aboutToAppear TabsBarPosition start`)
}
aboutToDisappear(){
Log.showInfo(TAG, `aboutToDisAppear TabsBarPosition end`)
}
build(){
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center,justifyContent:FlexAlign.Center }){
Text("tabs-BarPosition")
.width(100)
.height(70)
.fontSize(20)
.opacity(1)
.align(Alignment.TopStart)
.fontColor(0xCCCCCC)
.lineHeight(25)
.border({ width: 1 })
.padding(10)
.textAlign(TextAlign.Center)
.textOverflow({ overflow: TextOverflow.None })
.key("barPositionText")
Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
TabContent() {
Column().width('100%').height('100%').backgroundColor(Color.Pink)
}.tabBar('pink')
TabContent() {
Column().width('100%').height('100%').backgroundColor(Color.Yellow)
}.tabBar('yellow')
}
.key("barPositionTabs")
.vertical(true).scrollable(true).barMode(BarMode.Fixed)
.barWidth(70).barHeight(150).animationDuration(400)
.onChange((index: number) => {
console.info(index.toString())
})
.width('90%').backgroundColor(0xF5F5F5)
}.width("100%").height("100%")
}
}
/*
* Copyright (c) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import events_emitter from '@ohos.events.emitter';
import AbilityDelegatorRegistry from '@ohos.application.abilityDelegatorRegistry';
import { Hypium } from '@ohos/hypium';
import testsuite from '../../test/List.test';
import Utils from '../../test/Utils';
import web_webview from '@ohos.web.webview';
let loadedUrl;
@Entry
@Component
struct Index {
controllersss: WebAttribute = new WebAttribute();
controllerE: WebMessageEvent = new WebMessageEvent();
newcontroller: web_webview.WebviewController = new web_webview.WebviewController();
controller:WebController = new WebController()
responseweb: WebResourceResponse = new WebResourceResponse()
@State str:string="emitStoreWebArchive"
@State text:string=""
@State textRatio:number=100
@State zoomAccessValue:boolean=true
handler: FullScreenExitHandler = null
ports: WebMessagePort[]
host: string = "www.spincast.org"
realm: string = "protected example"
username_password: string[]
origin: string="file:///"
onPageShow(){
let valueChangeEvent={
eventId:10,
priority:events_emitter.EventPriority.LOW
}
events_emitter.on(valueChangeEvent,this.valueChangeCallBack)
}
private valueChangeCallBack=(eventData)=>{
console.info("web page valueChangeCallBack");
if(eventData != null){
console.info("valueChangeCallBack:"+ JSON.stringify(eventData));
if(eventData.data.ACTION != null){
this.str = eventData.data.ACTION;
}
}
}
private jsObj={
test:(res)=>{
Utils.emitEvent(res,102);
},
toString:(str)=>{
console.info("ets toString:"+String(str));
},
register:(res)=>{
Utils.emitEvent(res,86);
return "web222"
}
}
aboutToAppear(){
let abilityDelegator: any
abilityDelegator = AbilityDelegatorRegistry.getAbilityDelegator()
let abilityDelegatorArguments: any
abilityDelegatorArguments = AbilityDelegatorRegistry.getArguments()
console.info('start run testcase!!!')
Hypium.hypiumTest(abilityDelegator, abilityDelegatorArguments, testsuite)
}
build(){
Column(){
Web({src:$rawfile('index.html'),controller:this.controller})
.databaseAccess(true)
.zoomAccess(this.zoomAccessValue)
.textZoomRatio(this.textRatio)
.onConsole((event) => {
let level = event.message.getMessageLevel()
let msg = event.message.getMessage()
let lineNumber = event.message.getLineNumber().toString()
let sourceId = event.message.getSourceId()
console.log("lineNumber:" + lineNumber)
setTimeout(()=>{
Utils.emitEvent(lineNumber,420)
},3000)
setTimeout(()=>{
Utils.emitEvent(sourceId,422)
},3000)
return false
})
.onSearchResultReceive(ret=>{
var searchResult = ret.activeMatchOrdinal.toString() +
ret.numberOfMatches.toString()
console.log("searchResult" + searchResult)
setTimeout(()=>{
Utils.emitEvent(searchResult,426)
},3000)
})
.onFullScreenExit(() => {
console.log("onFullScreenExit...");
this.handler.constructor();
this.handler.exitFullScreen();
})
.onFullScreenEnter((event) => {
this.handler = event.handler;
})
Row(){
Button("web click").key('webcomponent').onClick(async ()=>{
console.info("key==>"+this.str)
switch(this.str){
case "emitStoreWebArchive":{
let webAsyncController = new web_webview.WebAsyncController(this.controller)
webAsyncController.storeWebArchive("/data/storage/el2/base/",true,(filename) => {
if(filename != null) {
Utils.emitEvent(filename,400)
}
})
break;
}
case "emitAllowGeolocation":{
web_webview.GeolocationPermissions.allowGeolocation("file:///")
web_webview.GeolocationPermissions.getAccessibleGeolocation(this.origin, (error, result) => {
if (error) {
console.log('error:' + JSON.stringify(error));
this.text = this.origin + ",error ," + JSON.stringify(error);
return;
}
this.text = this.origin + ", result: " + result;
Utils.emitEvent(this.text,402)
})
break;
}
case "emitDeleteGeolocation":{
web_webview.GeolocationPermissions.deleteGeolocation("file:///")
web_webview.GeolocationPermissions.getStoredGeolocation((error,origins) => {
if (error) {
console.log('error:' + JSON.stringify(error));
this.text = origins + ",error ," + JSON.stringify(error);
return;
}
this.text = origins.join();
Utils.emitEvent(this.text,404)
})
break;
}
case "emitDeleteAllGeolocation":{
web_webview.GeolocationPermissions.allowGeolocation("file:///")
web_webview.GeolocationPermissions.deleteAllGeolocation()
web_webview.GeolocationPermissions.getStoredGeolocation((error,origins) => {
if (error) {
console.log('error:' + JSON.stringify(error));
this.text = origins + ",error ," + JSON.stringify(error);
return;
}
this.text = origins.join();
Utils.emitEvent(this.text,406)
})
break;
}
case "emitIsCookieAllowed":{
web_webview.WebCookieManager.putAcceptCookieEnabled(false);
setTimeout(()=>{
Utils.emitEvent(web_webview.WebCookieManager.isCookieAllowed(),408)
},3000)
break;
}
case "emitSaveCookieAsync":{
web_webview.WebCookieManager.saveCookieAsync(function(result){
Utils.emitEvent(result,410)
})
break;
}
case "emitIsThirdPartyCookieAllowed":{
web_webview.WebCookieManager.putAcceptThirdPartyCookieEnabled(false);
setTimeout(()=>{
var result = web_webview.WebCookieManager.isThirdPartyCookieAllowed();
console.log(result.toString());
Utils.emitEvent(web_webview.WebCookieManager.isThirdPartyCookieAllowed(),412)
},3000)
break;
}
case "emitExistCookie":{
this.controller.getCookieManager().deleteEntireCookie();
setTimeout(()=>{
var result = web_webview.WebCookieManager.existCookie();
console.log(result.toString());
Utils.emitEvent(result,414)
},3000)
break ;
}
case "emitOnConsole":{
this.controller.runJavaScript({script:"consoleTest()"})
break;
}
case "emitLoaData":{
this.controller.loadUrl({url:"file:///data/storage/el1/bundle/phone/resources/rawfile/index.html"})
setTimeout(()=>{
this.controller.loadData({
data: "<html><title>index</title></html>",
mimeType: "text/html",
encoding: "UTF-8"
})
},3000)
setTimeout(()=>{
this.text = this.controller.getTitle();
Utils.emitEvent(this.text,424)
},4000)
break ;
}
case "emitZoomAccess":{
this.zoomAccessValue = false
this.controller.refresh()
var origin = this.controller.getPageHeight()
var zoomInCalled = false
setTimeout(()=>{
this.controller.zoomIn()
if (this.controller.getPageHeight() > origin) {
zoomInCalled = true
}
console.log("final" + this.controller.getPageHeight())
Utils.emitEvent(zoomInCalled,428);
},3000);
break ;
}
case "emitSaveHttpAuthCredentials":{
web_webview.WebDataBase.saveHttpAuthCredentials(this.host, this.realm, "Stromgol", "Laroche");
setTimeout(()=>{
let result = web_webview.WebDataBase.existHttpAuthCredentials();
Utils.emitEvent(result,442)
},3000)
break;
}
case "emitGetHttpAuthCredentials":{
this.username_password = web_webview.WebDataBase.getHttpAuthCredentials(this.host, this.realm);
setTimeout(()=>{
let result = this.username_password[0];
Utils.emitEvent(result,444)
},3000)
break;
}
case "emitDeleteHttpAuthCredentials":{
web_webview.WebDataBase.deleteHttpAuthCredentials();
setTimeout(()=>{
let result = web_webview.WebDataBase.existHttpAuthCredentials();
Utils.emitEvent(result,446)
},3000)
break;
}
case "emitdeleteAllData":{
setTimeout(()=>{
try{
web_webview.WebStorage.deleteAllData()
let result = 'succesful'
Utils.emitEvent(result,446)
}catch (error) {
console.info(`ErrorCode: ${error.code}, Message: ${error.message}`)
let result = 'fail'
Utils.emitEvent(result,446)
}
},3000)
break;
}
case "emitdeleteOringin":{
setTimeout(()=>{
try{
web_webview.WebStorage.deleteOrigin(this.origin);
let result = 'succesful'
Utils.emitEvent(result,446)
}catch (error) {
console.info(`ErrorCode: ${error.code}, Message: ${error.message}`)
let result = 'fail'
Utils.emitEvent(result,446)
}
},3000)
break;
}
case "emitgetOringin":{
setTimeout(()=>{
try {
web_webview.WebStorage.getOrigins()
.then(origins => {
for (let i = 0; i < origins.length; i++) {
console.log('origin: ' + origins[i].origin);
console.log('usage: ' + origins[i].usage);
console.log('quota: ' + origins[i].quota);
}
})
.catch(e => {
console.log('error: ' + e);
})
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
Utils.emitEvent('succesful',446)
},3000)
break;
}
case "emitgetOringinQuota":{
try{
web_webview.WebStorage.getOriginQuota(this.origin);
setTimeout(()=>{
console.info('sucessful')
Utils.emitEvent('sucessful',446)
},3000)
}catch (error) {
console.info(`ErrorCode: ${error.code}, Message: ${error.message}`);
Utils.emitEvent('fail',446)
}
break;
}
case "emitgetOringinUsage":{
setTimeout(()=>{
try{
web_webview.WebStorage.getOriginUsage(this.origin, (error, usage) => {
if (error) {
console.log('error: ' + error);
Utils.emitEvent(error,446)
}
console.log('usage: ' + usage);
Utils.emitEvent(usage,446)
})
Utils.emitEvent('sucessful',446)
}catch (error) {
console.info(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
},3000)
break;
}
case "emitAsyncControllerconstructor":{
setTimeout(()=>{
let webAsyncController = new web_webview.WebAsyncController(this.controller)
webAsyncController.constructor()
Utils.emitEvent('sucessful',446)
},3000)
break;
}
case "emitdeleteSessionCookie":{
setTimeout(()=>{
web_webview.WebCookieManager.deleteSessionCookie()
Utils.emitEvent('succesful',410)
},3000)
break;
}
case "emitSearchAllAsync":{
this.controller.loadUrl({url:"file:///data/storage/el1/bundle/phone/resources/rawfile/index.html"})
setTimeout(()=>{
this.controller.searchAllAsync("首页");
},3000)
break;
}
case "emitclose":{
setTimeout(() => {
this.ports[1].close()
Utils.emitEvent('sucessful', 446)
},3000)
break;
}
case "emitpostMessageEvent":{
setTimeout(()=>{
try {
var msg = new WebMessageEvent();
msg.setData("post message from ets to html5");
this.ports[0].postMessageEvent(msg)
Utils.emitEvent('sucessful', 446)
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
},3000)
break;
}
case "emitonMessageEvent":{
setTimeout(()=>{
try {
this.ports = this.controller.createWebMessagePorts();
this.ports[1].onMessageEvent((msg) => {
console.info("received message from html5, on message:" + msg);
})
} catch (error) {
console.info(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
Utils.emitEvent('sucessful', 446)
},3000)
break;
}
case "emitgetHitTestValue":{
setTimeout(() => {
try {
let hitValue = this.newcontroller.getHitTestValue();
console.info("hitType: " + hitValue.type);
console.info("extra: " + hitValue.extra);
Utils.emitEvent('sucessful', 446)
} catch (error) {
console.info(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
},3000)
break;
}
case "emitgetUserAgent":{
setTimeout(() => {
try{
let userAgent = this.newcontroller.getUserAgent();
console.log("userAgent: " + userAgent);
Utils.emitEvent('sucessful',446)
}catch (error) {
console.info(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
},3000)
break;
}
case "emitcreateWebMessagePorts":{
setTimeout(() => {
try {
this.ports = this.controller.createWebMessagePorts();
Utils.emitEvent('succesful',446)
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
},3000)
break;
}
case "emitclearMatches":{
setTimeout(() => {
try {
this.newcontroller.clearMatches();
Utils.emitEvent('succesful',446)
} catch (error) {
console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
}
},3000)
break;
}
case "emitsearchNext":{
setTimeout(() => {
try {
this.newcontroller.searchNext(true);
Utils.emitEvent('succesful',446)
} catch (error) {
console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
}
},3000)
break;
}
case "emitclearSslCache":{
setTimeout(() => {
try {
this.newcontroller.clearSslCache();
Utils.emitEvent('succesful',446)
} catch (error) {
console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
}
},3000)
break;
}
case "emitclearClientAuthenticationCache":{
setTimeout(() => {
try {
this.newcontroller.clearClientAuthenticationCache();
Utils.emitEvent('succesful',446)
} catch (error) {
console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
}
},3000)
break;
}
case "emitgetUrl":{
try{
setTimeout(() => {
this.newcontroller.getUrl();
Utils.emitEvent('succesful',446)
},3000)
}catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
break;
}
case "emitonFullScreenExitconstructor":{
setTimeout(() => {
this.handler.constructor()
Utils.emitEvent('sucessful',446)
})
break;
}
// case "emitexitfullscreen":{
// setTimeout(()=>{
// this.handler.exitfullscreen()
// console.info('succesful')
// Utils.emitEvent('succesful',69)
// },3000)
// break;
// }
// ts not exist
// case "emitpostMessageEvent1":{
// setTimeout(() => {
// try {
// this.controllerE.postMessageEvent();
// Utils.emitEvent('succesful',446)
// } catch (error) {
// console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
// }
// })
// }
// ts not exist
// case "emitpostMessage":{
// setTimeout(() => {
// try {
// this.controllerE.postMessage();
// Utils.emitEvent('succesful',446)
// } catch (error) {
// console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
// }
// })
// }
// ts not exist
case "emitWebMessageEventconstructor":{
setTimeout(()=>{
this.controllerE.constructor()
Utils.emitEvent('sucessful',446)
},3000)
break;
}
case "emitgetData":{
setTimeout(()=>{
this.controllerE.getData()
console.info('succesful')
Utils.emitEvent('succesful',69)
},3000)
break;
}
case "emitsetData":{
setTimeout(()=>{
this.controllerE.setData('1')
console.info('succesful')
Utils.emitEvent('succesful',69)
},3000)
break;
}
case "emitgetPorts":{
setTimeout(()=>{
this.controllerE.getPorts()
console.info('succesful')
Utils.emitEvent('succesful',69)
},3000)
break;
}
case "emitsetPorts":{
setTimeout(()=>{
this.ports = this.controller.createWebMessagePorts()
this.controllerE.setPorts(this.ports)
console.info('succesful')
Utils.emitEvent('succesful',69)
},3000)
break;
}
default:
console.info("can not match case")
}
})
}
}
}
}
// @ts-nocheck
/*
* Copyright (c) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import {describe, beforeAll, beforeEach, afterEach, afterAll, it, expect} from "hypium/index"
import router from '@system.router';
export default function alphabetIndexerJsunit() {
function sleep(time) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve()
}, time * 1000)
}).then(() => {
console.info(`sleep ${time} over...`)
})
}
describe('alphabetIndexerTest', function () {
beforeEach(async function (done) {
let options = {
uri: 'pages/AlphabetIndexer',
}
try {
router.clear();
let pages = router.getState();
console.info("get AlphabetIndexer state success " + JSON.stringify(pages));
if (!("AlphabetIndexer" == pages.name)) {
console.info("get AlphabetIndexer state success " + JSON.stringify(pages.name));
let result = await router.push(options)
console.info("push AlphabetIndexer page success " + JSON.stringify(result));
}
} catch (err) {
console.error("push AlphabetIndexer page error " + JSON.stringify(result));
}
await sleep(2)
done()
});
afterEach(async function () {
await sleep(1)
console.info("AlphabetIndexer after each called");
});
/**
* @tc.number SUB_ACE_BASIC_ETS_API_0100
* @tc.name alphabetIndexerTest001
* @tc.desc aceEtsTest
*/
it('alphabetIndexerTest001', 0, async function (done) {
console.info('AlphabetIndexerTest001 START');
await sleep(1)
let strJson = getInspectorByKey('alphabetIndexer');
let obj = JSON.parse(strJson);
console.info("component obj is: " + JSON.stringify(obj));
expect(obj.$type).assertEqual('AlphabetIndexer');
console.info('AlphabetIndexerTest001 END');
done();
});
/**
* @tc.number SUB_ACE_BASIC_ETS_API_0110
* @tc.name alphabetIndexerTest002
* @tc.desc aceEtsTest
*/
it('alphabetIndexerTest002', 0, async function (done) {
console.info('AlphabetIndexerTest002 START');
let strJson = getInspectorByKey('alphabetIndexer1');
let obj = JSON.parse(strJson);
console.info("component obj is: " + JSON.stringify(obj));
console.info('AlphabetIndexerTest002 END');
done();
});
})
}
// @ts-nocheck
/**
* Copyright (c) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import {describe, beforeAll, beforeEach, afterEach, afterAll, it, expect} from "hypium/index"
import router from '@system.router';
import events_emitter from '@ohos.events.emitter';
import Utils from './Utils';
export default function ohosPromptJsunit() {
describe('appInfoTest_four_3', function () {
beforeEach(async function (done) {
console.info("OhosPrompt beforeEach start");
let options = {
uri: 'pages/ohosPrompt',
}
try {
router.clear();
let pages = router.getState();
console.info("get OhosPrompt state pages:" + JSON.stringify(pages));
if (!("ohosPrompt " == pages.name)) {
console.info("get OhosPrompt state pages.name:" + JSON.stringify(pages.name));
let result = await router.push(options);
await Utils.sleep(2000);
console.info("push OhosPrompt page result:" + JSON.stringify(result));
}
} catch (err) {
console.error("push OhosPrompt page error:" + err);
}
done()
});
afterEach(async function () {
await Utils.sleep(1000);
console.info("OhosPrompt each called");
});
it('test_OhosPrompt_001', 0, async function (done) {
await Utils.sleep(1000)
var callback = (eventData) => {
console.info("[test_OhosPrompt_001] get event state result is: " + JSON.stringify(eventData));
expect(eventData.data.matrix1).assertEqual("[100, 10]")
}
var innerEvent = {
eventId: 142,
priority: events_emitter.EventPriority.LOW
}
try {
events_emitter.on(innerEvent, callback)
} catch (err) {
console.info("[test_OhosPrompt_001] on events_emitter err : " + JSON.stringify(err));
}
console.info('[test_OhosPrompt_001] sendEventByKey ' + JSON.stringify(sendEventByKey('rotate5', 10, "")));
await Utils.sleep(1000)
console.info('[test_OhosPrompt_001] testSendTouchEvent END');
done();
});
})
}
// @ts-nocheck
/**
* Copyright (c) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import {describe, beforeAll, beforeEach, afterEach, afterAll, it, expect} from "hypium/index"
import router from '@system.router';
import Utils from './Utils';
import events_emitter from '@ohos.events.emitter';
import orouter from '@ohos.router';
export default function OhosRouterJsunit() {
describe('ohosRouterTest', function () {
beforeEach(async function (done) {
let options = {
uri: 'pages/ohosRouterA',
}
try {
router.clear();
let pages = router.getState();
console.info("get ohosRouter state success " + JSON.stringify(pages));
if (!("ohosRouter" == pages.name)) {
console.info("get ohosRouter state success " + JSON.stringify(pages.name));
let result = await router.push(options);
await Utils.sleep(4000);
console.info("push ohosRouter page success " + JSON.stringify(result));
}
} catch (err) {
console.error("push ohosRouter page error " + err);
}
done()
});
afterEach(async function () {
await Utils.sleep(1000);
console.info("ohosRouter after each called");
});
it('ohosRouterTest001', 0, async function (done) {
console.info('[ohosRouterTest001] START');
let options = {
uri: 'pages/ohosRouterA',
}
try {
let result = await router.push(options);
await Utils.sleep(1000);
console.info("[ohosRouterTest001] push page success " + JSON.stringify(result));
let pages = router.getState();
expect(pages.index).assertEqual(3);
expect(pages.name).assertEqual('ohosRouterA');
expect(pages.path).assertEqual('pages/');
} catch (err) {
console.error("[ohosRouterTest001] push page error: " + err);
}
await Utils.sleep(2000);
done();
});
it('ohosRouterTest002', 0, async function (done) {
console.info('[ohosRouterTest002] START');
let options = {
uri: 'pages/ohosRouterA'
}
try {
let result = await router.push(options);
console.info("[ohosRouterTest002] push page success " + JSON.stringify(result));
} catch (err) {
console.error("[ohosRouterTest002] push page error " + JSON.stringify(result));
}
await Utils.sleep(1500);
let callback = (paramsEvent) => {
console.info("[ohosRouterTest002] get state result is: " + JSON.stringify(paramsEvent));
expect(paramsEvent.data.params).assertEqual('B Page');
}
let paramsEvent = {
eventId: 142,
priority: events_emitter.EventPriority.LOW
}
try {
events_emitter.on(paramsEvent, callback);
} catch (err) {
console.info("[ohosRouterTest002] on events_emitter err : " + JSON.stringify(err));
}
console.info("[ohosRouterTest002] click push button result is: "
+ JSON.stringify(sendEventByKey('pushButtonA', 10, "")));
await Utils.sleep(1000);
router.back();
await Utils.sleep(1000);
done();
});
it('ohosRouterTest003', 0, async function (done) {
console.info('[ohosRouterTest003] START');
await Utils.sleep(1000);
router.clear();
await Utils.sleep(2000);
let size = router.getLength();
console.info("[ohosRouterTest003] size" + size);
expect(size).assertEqual("1");
await Utils.sleep(1000);
done();
});
it('ohosRouterTest004', 0, async function (done) {
console.info('[ohosRouterTest004] START');
router.clear();
await Utils.sleep(1000);
let options = {
uri: 'pages/ohosRouterA'
}
try {
let result = await router.push(options);
console.info("[ohosRouterTest004] push page success " + JSON.stringify(result));
} catch (err) {
console.error("[ohosRouterTest004] push page error " + JSON.stringify(result));
}
await Utils.sleep(1000);
let optionsB = {
uri: 'pages/ohosRouterB'
}
try {
let result = await router.replace(optionsB);
console.info("[ohosRouterTest004] push page success " + JSON.stringify(result));
} catch (err) {
console.error("[ohosRouterTest004] push page error " + JSON.stringify(result));
}
await Utils.sleep(1500);
let size = router.getLength();
console.info("[ohosRouterTest004] size" + size);
expect(size).assertEqual("2");
done();
});
it('ohosRouterTest005', 0, async function(done) {
console.info('[ohosRouterTest005] START');
let options = {
uri: 'pages/ohosRouterA'
}
try {
let result = await router.push(options);
console.info("[ohosRouterTest005] push page success " + JSON.stringify(result));
} catch (err) {
console.error("[ohosRouterTest005] push page error " + JSON.stringify(result));
}
await Utils.sleep(1000);
router.clear();
await Utils.sleep(1500);
let callback = (paramsEvent) => {
console.info("[ohosRouterTest005] get state result is: " + JSON.stringify(paramsEvent));
expect(paramsEvent.data.params).assertEqual('B Page');
}
let paramsEvent = {
eventId: 142,
priority: events_emitter.EventPriority.LOW
}
try {
events_emitter.on(paramsEvent, callback);
} catch (err) {
console.info("[ohosRouterTest005] on events_emitter err : " + JSON.stringify(err));
}
console.info("[ohosRouterTest005] click replace button result is: "
+ JSON.stringify(sendEventByKey('ReplaceButtonA', 10, "")));
done();
});
it('ohosRouterTest006', 0, async function(done) {
console.info('[ohosRouterTest006] START');
let options = {
uri: 'pages/ohosRouterA'
}
try {
let result = await orouter.pushurl(options);
console.info("[ohosRouterTest006] push page success " + JSON.stringify(result));
} catch (err) {
console.error("[ohosRouterTest006] push page error " + JSON.stringify(result));
}
await Utils.sleep(1000);
router.clear();
await Utils.sleep(1500);
let callback = (paramsEvent) => {
console.info("[ohosRouterTest006] get state result is: " + JSON.stringify(paramsEvent));
expect(paramsEvent.data.params).assertEqual('B Page');
}
let paramsEvent = {
eventId: 142,
priority: events_emitter.EventPriority.LOW
}
try {
events_emitter.on(paramsEvent, callback);
} catch (err) {
console.info("[ohosRouterTest006] on events_emitter err : " + JSON.stringify(err));
}
console.info("[ohosRouterTest006] click replace button result is: "
+ JSON.stringify(sendEventByKey('pushurlButton1', 10, "")));
done();
});
it('ohosRouterTest008', 0, async function(done) {
console.info('[ohosRouterTest008] START');
let options = {
uri: 'pages/ohosRouterA'
}
try {
let result = await orouter.pushurl(options);
console.info("[ohosRouterTest008] push page success " + JSON.stringify(result));
} catch (err) {
console.error("[ohosRouterTest008] push page error " + JSON.stringify(result));
}
await Utils.sleep(1000);
router.clear();
await Utils.sleep(1500);
let callback = (paramsEvent) => {
console.info("[ohosRouterTest008] get state result is: " + JSON.stringify(paramsEvent));
expect(paramsEvent.data.params).assertEqual('B Page');
}
let paramsEvent = {
eventId: 142,
priority: events_emitter.EventPriority.LOW
}
try {
events_emitter.on(paramsEvent, callback);
} catch (err) {
console.info("[ohosRouterTest008] on events_emitter err : " + JSON.stringify(err));
}
console.info("[ohosRouterTest008] click replace button result is: "
+ JSON.stringify(sendEventByKey('pushurlButton1A', 10, "")));
done();
});
it('ohosRouterTest007', 0, async function(done) {
console.info('[ohosRouterTest007] START');
let options = {
uri: 'pages/ohosRouterA'
}
try {
let result = await orouter.replaceUrl(options);
console.info("[ohosRouterTest007] push page success " + JSON.stringify(result));
} catch (err) {
console.error("[ohosRouterTest007] push page error " + JSON.stringify(result));
}
await Utils.sleep(1000);
router.clear();
await Utils.sleep(1500);
let callback = (paramsEvent) => {
console.info("[ohosRouterTest007] get state result is: " + JSON.stringify(paramsEvent));
expect(paramsEvent.data.params).assertEqual('B Page');
}
let paramsEvent = {
eventId: 142,
priority: events_emitter.EventPriority.LOW
}
try {
events_emitter.on(paramsEvent, callback);
} catch (err) {
console.info("[ohosRouterTest007] on events_emitter err : " + JSON.stringify(err));
}
console.info("[ohosRouterTest007] click replace button result is: "
+ JSON.stringify(sendEventByKey('ReplaceButtonA', 10, "")));
done();
});
it('ohosRouterTest009', 0, async function(done) {
console.info('[ohosRouterTest009] START');
let options = {
uri: 'pages/ohosRouterA'
}
try {
let result = await orouter.replaceUrl(options);
console.info("[ohosRouterTest009] push page success " + JSON.stringify(result));
} catch (err) {
console.error("[ohosRouterTest009] push page error " + JSON.stringify(result));
}
await Utils.sleep(1000);
router.clear();
await Utils.sleep(1500);
let callback = (paramsEvent) => {
console.info("[ohosRouterTest009] get state result is: " + JSON.stringify(paramsEvent));
expect(paramsEvent.data.params).assertEqual('B Page');
}
let paramsEvent = {
eventId: 142,
priority: events_emitter.EventPriority.LOW
}
try {
events_emitter.on(paramsEvent, callback);
} catch (err) {
console.info("[ohosRouterTest009] on events_emitter err : " + JSON.stringify(err));
}
console.info("[ohosRouterTest009] click replace button result is: "
+ JSON.stringify(sendEventByKey('replaceurl1', 10, "")));
done();
});
});
}
\ No newline at end of file
// @ts-nocheck
/**
* Copyright (c) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import {describe, beforeAll, beforeEach, afterEach, afterAll, it, expect} from "hypium/index"
import router from '@system.router';
import events_emitter from '@ohos.events.emitter';
import Utils from './Utils.ets';
export default function positionSettingJsunit() {
describe('borderTest_five_3', function () {
beforeEach(async function (done) {
console.info("positionSetting beforeEach start");
let options = {
uri: 'pages/positionSetting',
}
try {
router.clear();
let pages = router.getState();
console.info("get positionSetting state pages:" + JSON.stringify(pages));
if (!("positionSetting" == pages.name)) {
console.info("get positionSetting state pages.name:" + JSON.stringify(pages.name));
let result = await router.push(options);
await Utils.sleep(2000);
console.info("push positionSetting page result:" + JSON.stringify(result));
}
} catch (err) {
console.error("push positionSetting page error:" + err);
}
done()
});
afterEach(async function () {
await Utils.sleep(1000);
console.info("positionSetting after each called");
});
it('testPositionSetting001', 0, async function (done) {
console.info('[testPositionSetting001] START');
await Utils.sleep(1000);
let strJson = getInspectorByKey('textAlign');
console.info("[testPositionSetting001] component strJson:" + strJson);
let obj = JSON.parse(strJson);
console.info("[testPositionSetting001] textAlign: " + obj.$attrs.textAlign);
expect(obj.$attrs.textAlign).assertEqual('TextAlign.Left');
console.info('[testPositionSetting001] END');
done();
});
it('testPositionSetting002', 0, async function (done) {
console.info('[testPositionSetting002] START');
await Utils.sleep(1000);
let strJson = getInspectorByKey('rowDirection');
console.info("[testPositionSetting002] component strJson:" + strJson);
let obj = JSON.parse(strJson);
console.info("[testPositionSetting002] rowDirection: " + obj.$attrs.direction);
expect(obj.$attrs.direction).assertEqual('Direction.Rtl');
console.info('[testPositionSetting002] END');
done();
});
it('testPositionSetting003', 0, async function (done) {
console.info('[testPositionSetting003] START');
try {
let eventData = {
data: {
"textAlign": Alignment.BottomEnd
}
}
let indexEvent = {
eventId: 25,
priority: events_emitter.EventPriority.LOW
}
console.info("[testPositionSetting003] start to publish emit");
events_emitter.emit(indexEvent, eventData);
} catch (err) {
console.log("[testPositionSetting003] change component data error: " + err.message);
}
await Utils.sleep(4000);
let strJson = getInspectorByKey('textAlign');
console.info("[testPositionSetting003] component strJson:" + strJson);
let obj = JSON.parse(strJson);
console.info("[testPositionSetting003] textAlign: " + obj.$attrs.textAlign);
expect(obj.$attrs.textAlign).assertEqual("TextAlign.Right");
console.info('[testPositionSetting003] END');
done();
});
it('testPositionSetting004', 0, async function (done) {
console.info('[testPositionSetting004] START');
await Utils.sleep(1000);
try {
let eventData = {
data: {
"direction": Direction.Ltr
}
}
let indexEvent = {
eventId: 26,
priority: events_emitter.EventPriority.LOW
}
console.info("[testPositionSetting004] start to publish emit");
events_emitter.emit(indexEvent, eventData);
} catch (err) {
console.log("[testPositionSetting004] change component data error: " + err.message);
}
await Utils.sleep(3000);
let strJson = getInspectorByKey('rowDirection');
console.info("[testPositionSetting004] component strJson:" + strJson);
let obj = JSON.parse(strJson);
console.info("[testPositionSetting004] rowDirection: " + obj.$attrs.direction);
expect(obj.$attrs.direction).assertEqual('Direction.Ltr');
console.info('[testPositionSetting004] END');
done();
});
it('testPositionSetting005', 0, async function (done) {
console.info('[testPositionSetting005] START');
await Utils.sleep(1000);
let strJson = getInspectorByKey('position1');
console.info("[testPositionSetting005] component strJson:" + strJson);
let obj = JSON.parse(strJson);
console.info("[testPositionSetting005] position: " + JSON.stringify(obj.$attrs.position));
expect(obj.$attrs.position.x).assertEqual('25.00vp');
expect(obj.$attrs.position.y).assertEqual('15.00vp');
let strJson1 = getInspectorByKey('position2');
console.info("[testPositionSetting005] component strJson1:" + strJson1);
let obj1 = JSON.parse(strJson1);
console.info("[testPositionSetting005] position1: " + JSON.stringify(obj1.$attrs.position));
expect(obj1.$attrs.position.x).assertEqual('50.00%');
expect(obj1.$attrs.position.y).assertEqual('70.00%');
console.info('[testPositionSetting005] END');
done();
});
it('testPositionSetting006', 0, async function (done) {
console.info('[testPositionSetting006] START');
await Utils.sleep(1000);
try {
let data = {
x: 10, y: 25
};
let data2 = {
x: '30%', y: '50%'
};
let eventData = {
data: {
"position1": JSON.stringify(data),
"position2": JSON.stringify(data2)
}
}
let indexEvent = {
eventId: 27,
priority: events_emitter.EventPriority.LOW
}
console.info("[testPositionSetting006] start to publish emit");
events_emitter.emit(indexEvent, eventData);
} catch (err) {
console.log("[testPositionSetting006] change component data error: " + err.message);
}
await Utils.sleep(3000);
let strJson = getInspectorByKey('position1');
console.info("[testPositionSetting006] component strJson:" + strJson);
let obj = JSON.parse(strJson);
console.info("[testPositionSetting006] position1: " + JSON.stringify(obj.$attrs.position));
expect(obj.$attrs.position.x).assertEqual('10.00vp');
expect(obj.$attrs.position.y).assertEqual('25.00vp');
let strJson2 = getInspectorByKey('position2');
console.info("[testPositionSetting006] component strJson2:" + strJson2);
let obj2 = JSON.parse(strJson2);
console.info("[testPositionSetting006] position2: " + JSON.stringify(obj2.$attrs.position));
expect(obj2.$attrs.position.x).assertEqual('30.00%');
expect(obj2.$attrs.position.y).assertEqual('50.00%');
done();
});
it('testPositionSetting007', 0, async function (done) {
console.info('[testPositionSetting007] START');
await Utils.sleep(1000);
let strJson = getInspectorByKey('markAnchor');
console.info("[testPositionSetting007] component strJson:" + strJson);
let obj = JSON.parse(strJson);
console.info("[testPositionSetting007] position: " + JSON.stringify(obj.$attrs.markAnchor));
expect(obj.$attrs.markAnchor.x).assertEqual('25.00vp');
expect(obj.$attrs.markAnchor.y).assertEqual('25.00vp');
console.info('[testPositionSetting007] END');
done();
});
it('testPositionSetting008', 0, async function (done) {
console.info('[testPositionSetting008] START');
await Utils.sleep(1000);
try {
let data = {
x: 0, y: 0
};
let eventData = {
data: {
"markAnchor": JSON.stringify(data),
}
}
let indexEvent = {
eventId: 28,
priority: events_emitter.EventPriority.LOW
}
console.info("[testPositionSetting008] start to publish emit");
events_emitter.emit(indexEvent, eventData);
} catch (err) {
console.log("[testPositionSetting008] change component data error: " + err.message);
}
await Utils.sleep(3000);
let strJson = getInspectorByKey('markAnchor');
console.info("[testPositionSetting008] component strJson:" + strJson);
let obj = JSON.parse(strJson);
console.info("[testPositionSetting008] markAnchor: " + JSON.stringify(obj.$attrs.markAnchor));
expect(obj.$attrs.markAnchor.x).assertEqual('0.00vp');
expect(obj.$attrs.markAnchor.y).assertEqual('0.00vp');
console.info('[testPositionSetting008] END');
done();
});
it('testPositionSetting009', 0, async function (done) {
console.info('[testPositionSetting009] START');
await Utils.sleep(1000);
let strJson = getInspectorByKey('offset');
console.info("[testPositionSetting009] component strJson:" + strJson);
let obj = JSON.parse(strJson);
console.info("[testPositionSetting009] offset: " + JSON.stringify(obj.$attrs.offset));
expect(obj.$attrs.offset.x).assertEqual('10.00vp');
expect(obj.$attrs.offset.y).assertEqual('15.00vp');
expect(obj.$attrs.span.x).assertEqual('10.00vp');
expect(obj.$attrs.span.y).assertEqual('15.00vp');
console.info('[testPositionSetting009] END');
done();
});
it('testPositionSetting010', 0, async function (done) {
console.info('[testPositionSetting010] START');
await Utils.sleep(1000);
try {
let data = {
x: 150, y: 10
};
let eventData = {
data: {
"offset": JSON.stringify(data),
}
}
let indexEvent = {
eventId: 29,
priority: events_emitter.EventPriority.LOW
}
console.info("[testPositionSetting010] start to publish emit");
events_emitter.emit(indexEvent, eventData);
} catch (err) {
console.log("[testPositionSetting010] change component data error: " + err.message);
}
await Utils.sleep(3000);
let strJson = getInspectorByKey('offset');
console.info("[testPositionSetting010] component strJson:" + strJson);
let obj = JSON.parse(strJson);
console.info("[testPositionSetting010] offset: " + JSON.stringify(obj.$attrs.offset));
expect(obj.$attrs.offset.x).assertEqual('150.00vp');
expect(obj.$attrs.offset.y).assertEqual('10.00vp');
console.info('[testPositionSetting010] END');
done();
});
it('testPositionSetting011', 0, async function (done) {
console.info('[testPositionSetting011] START');
await Utils.sleep(1000);
let strJson = getInspectorByKey('opacity');
let obj = JSON.parse(strJson);
console.info("[testPositionSetting011] component obj is: " + JSON.stringify(obj));
expect(obj.$attrs.opacity).assertEqual(1);
console.info('[testPositionSetting011] END');
done();
});
it('testPositionSetting012', 0, async function (done) {
console.info('[testPositionSetting012] START');
try {
var eventData = {
data: {
"opacityValue": "0.7"
}
}
var innerEvent = {
eventId: 25,
priority: events_emitter.EventPriority.LOW
}
console.info("[testPositionSetting012] start to publish emit");
events_emitter.emit(innerEvent, eventData);
} catch (err) {
console.log("[testPositionSetting012] change component data error: " + err.message);
}
await Utils.sleep(2000);
let strJsonNew = getInspectorByKey('opacity');
let objNew = JSON.parse(strJsonNew);
console.info("[testPositionSetting012] component objNew is: " + JSON.stringify(objNew));
expect(objNew.$attrs.opacity).assertEqual(0.7);
console.info('[testPositionSetting012] END');
done();
});
})
}
\ No newline at end of file
// @ts-nocheck
/**
* Copyright (c) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import {describe, beforeAll, beforeEach, afterEach, afterAll, it, expect} from "hypium/index"
import router from '@system.router';
import events_emitter from '@ohos.events.emitter';
import Utils from './Utils.ets';
export default function shapeClippingJsunit() {
describe('borderTest_five_4', function () {
beforeEach(async function (done) {
console.info("shapeClipping beforeEach start");
let options = {
uri: 'pages/shapeClipping',
}
try {
router.clear();
let pages = router.getState();
console.info("get shapeClipping state pages:" + JSON.stringify(pages));
if (!("shapeClipping" == pages.name)) {
console.info("get shapeClipping state pages.name:" + JSON.stringify(pages.name));
let result = await router.push(options);
await Utils.sleep(2000);
console.info("push shapeClipping page result:" + JSON.stringify(result));
}
} catch (err) {
console.error("push shapeClipping page error:" + err);
}
done()
});
afterEach(async function () {
await Utils.sleep(1000);
console.info("shapeClipping after each called");
});
it('testShapeClipping001', 0, async function (done) {
console.info('[testShapeClipping001] START');
await Utils.sleep(1000);
let strJson = getInspectorByKey('image_clip');
let obj = JSON.parse(strJson);
console.info("[testShapeClipping001] component obj is: " + JSON.stringify(obj));
let clip = JSON.parse(obj.$attrs.clip);
expect(clip.shape).assertEqual('Circle');
let strJson1 = getInspectorByKey('image_clip_true');
let obj1 = JSON.parse(strJson1);
console.info("[testShapeClipping001] component obj1 is: " + JSON.stringify(obj1));
expect(obj1.$attrs.clip).assertEqual('true');
console.info('[testShapeClipping001] END');
done();
});
it('testShapeClipping002', 0, async function (done) {
console.info('[testShapeClipping002] START');
await Utils.sleep(1000);
let strJson = getInspectorByKey('image_mask');
let obj = JSON.parse(strJson);
console.info("[testShapeClipping002] component obj is: " + JSON.stringify(obj));
expect(obj.$attrs.mask.shape).assertEqual('Rect');
expect(obj.$attrs.clip).assertEqual('false');
console.info('[testShapeClipping002] END');
done();
});
it('testShapeClipping003', 0, async function (done) {
console.info('[testShapeClipping003] START');
try {
var eventData = {
data: {
"maskValue": false
}
}
var innerEvent = {
eventId: 32,
priority: events_emitter.EventPriority.LOW
}
console.info("[testShapeClipping003] start to publish emit");
events_emitter.emit(innerEvent, eventData);
} catch (err) {
console.log("[testShapeClipping003] change component data error: " + err.message);
}
await Utils.sleep(2000);
let strJsonNew = getInspectorByKey('image_mask');
let objNew = JSON.parse(strJsonNew);
console.info("[testShapeClipping003] component objNew is: " + JSON.stringify(objNew));
expect(objNew.$attrs.mask.shape).assertEqual('Circle');
console.info('[testShapeClipping003] END');
done();
});
it('testShapeClipping004', 0, async function (done) {
console.info('[testShapeClipping004] START');
try {
var eventData = {
data: {
"clipValue": false
}
}
var innerEvent = {
eventId: 33,
priority: events_emitter.EventPriority.LOW
}
console.info("[testShapeClipping004] start to publish emit");
events_emitter.emit(innerEvent, eventData);
} catch (err) {
console.log("[testShapeClipping004] change component data error: " + err.message);
}
await Utils.sleep(2000);
let strJsonNew = getInspectorByKey('image_clip');
let objNew = JSON.parse(strJsonNew);
console.info("[testShapeClipping004] component objNew is: " + JSON.stringify(objNew));
let clip = JSON.parse(objNew.$attrs.clip);
expect(clip.shape).assertEqual('Rect');
console.info('[testShapeClipping004] END');
done();
});
it('testShapeClipping004', 0, async function (done) {
console.info('[testShapeClipping004] START');
try {
var eventData = {
data: {
"clipValue": false
}
}
var innerEvent = {
eventId: 33,
priority: events_emitter.EventPriority.LOW
}
console.info("[testShapeClipping004] start to publish emit");
events_emitter.emit(innerEvent, eventData);
} catch (err) {
console.log("[testShapeClipping004] change component data error: " + err.message);
}
await Utils.sleep(2000);
let strJsonNew = getInspectorByKey('shapeType_clip');
let objNew = JSON.parse(strJsonNew);
console.info("[testShapeClipping004] component objNew is: " + JSON.stringify(objNew));
let clip = JSON.parse(objNew.$attrs.clip);
expect(clip.shape).assertEqual('Rect');
console.info('[testShapeClipping004] END');
done();
});
})
}
\ No newline at end of file
/*
* Copyright (c) 2022 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
// @ts-nocheck
import { describe, beforeEach, afterEach, it, expect } from "@ohos/hypium";
import events_emitter from '@ohos.events.emitter';
import Utils from './Utils.ets';
let emitKey = "emitUserAgent";
export default function webJsunit() {
describe('ActsAceWebDevTest', function () {
beforeEach(async function (done) {
await Utils.sleep(2000);
console.info("web beforeEach start");
done();
})
afterEach(async function (done) {
console.info("web afterEach start:"+emitKey);
try {
let backData = {
data: {
"ACTION": emitKey
}
}
let backEvent = {
eventId:10,
priority:events_emitter.EventPriority.LOW
}
console.info("start send emitKey");
events_emitter.emit(backEvent, backData);
} catch (err) {
console.info("emit emitKey err: " + JSON.stringify(err));
}
await Utils.sleep(2000);
done();
})
/*
*tc.number SUB_ACE_BASIC_ETS_API_066
*tc.name storeWebArchive
*tc.desic Save current page
*/
it('storeWebArchive',0,async function(done){
emitKey="emitAllowGeolocation";
Utils.registerContainEvent("storeWebArchive","/data/storage/el2/base/",400,done);
sendEventByKey('webcomponent',10,'');
})
/*
*tc.number SUB_ACE_BASIC_ETS_API_067
*tc.name allowGeolocation
*tc.desic allow specific url to access the geolocation
*/
it('allowGeolocation',0,async function(done){
emitKey="emitDeleteGeolocation";
Utils.registerEvent("allowGeolocation","file:///, result: true",402,done);
sendEventByKey('webcomponent',10,'');
})
/*
*tc.number SUB_ACE_BASIC_ETS_API_068
*tc.name deleteGeolocation
*tc.desic delete specific restored geolocation
*/
it('deletGeolocation',0,async function(done){
emitKey="emitDeleteAllGeolocation";
Utils.registerEvent("deletGeolocation","",404,done);
sendEventByKey('webcomponent',10,'');
})
/*
*tc.number SUB_ACE_BASIC_ETS_API_069
*tc.name deletAllGeolocation
*tc.desic delete all restored geolocation
*/
it('deletAllGeolocation',0,async function(done){
emitKey="emitIsCookieAllowed";
Utils.registerEvent("deletAllGeolocation","",406,done);
sendEventByKey('webcomponent',10,'');
})
/*
*tc.number SUB_ACE_BASIC_ETS_API_070
*tc.name isCookieAllowed
*tc.desic return whether the cookie is allowed
*/
it('isCookieAllowed',0,async function(done){
emitKey="emitSaveCookieAsync";
Utils.registerEvent("isCookieAllowed",false,408,done);
sendEventByKey('webcomponent',10,'');
})
/*
*tc.number SUB_ACE_BASIC_ETS_API_071
*tc.name saveCookieAsync
*tc.desic return whether the cookie is allowed
*/
it('saveCookieAsync',0,async function(done){
emitKey="emitIsThirdPartyCookieAllowed";
Utils.registerEvent("saveCookieAsync",true,410,done);
sendEventByKey('webcomponent',10,'');
})
/*
*tc.number SUB_ACE_BASIC_ETS_API_072
*tc.name isThirdPartyCookieAllowed
*tc.desic return whether the third party cookie is allowed
*/
it('isThirdPartyCookieAllowed',0,async function(done){
emitKey="emitExistCookie";
Utils.registerEvent("isThirdPartyCookieAllowed",false,412,done);
sendEventByKey('webcomponent',10,'');
})
/*
*tc.number SUB_ACE_BASIC_ETS_API_073
*tc.name existCookie
*tc.desic return whether there exits cookie
*/
it('existCookie',0,async function(done){
emitKey="emitOnConsole";
Utils.registerEvent("existCookie",false,414,done);
sendEventByKey('webcomponent',10,'');
})
/*
*tc.number SUB_ACE_BASIC_ETS_API_076
*tc.name getLineNumber
*tc.desic return the number of console message lines
*/
it('getLineNumber',0,async function(done){
emitKey="emitOnConsole";
Utils.registerEvent("getLineNumber","51",420,done);
sendEventByKey('webcomponent',10,'');
})
/*
*tc.number SUB_ACE_BASIC_ETS_API_077
*tc.name getSourceId
*tc.desic return the source url
*/
it('getSourceId',0,async function(done){
emitKey="emitLoaData";
Utils.registerEvent("getSourceId","file:///data/storage/el1/bundle/phone/resources/rawfile/index.html",422,done);
sendEventByKey('webcomponent',10,'');
})
/*
*tc.number SUB_ACE_BASIC_ETS_API_078
*tc.name loadData
*tc.desic load specific strings
*/
it('loadData',0,async function(done){
emitKey="emitZoomAccess";
Utils.registerEvent("loadData","index",424,done);
sendEventByKey('webcomponent',10,'');
})
/*
*tc.number SUB_ACE_BASIC_ETS_API_080
*tc.name zoomAccess
*tc.desic set whether it is allowed to zoom
*/
it('zoomAccess',0,async function(done){
emitKey="emitSaveHttpAuthCredentials";
Utils.registerEvent("zoomAccess",false,428,done);
sendEventByKey('webcomponent',10,'');
})
/*
*tc.number SUB_ACE_BASIC_ETS_API_087
*tc.name saveHttpAuthCredentials
*tc.desic save credentials
*/
it('saveHttpAuthCredentials',0,async function(done){
emitKey="emitGetHttpAuthCredentials";
Utils.registerEvent("saveHttpAuthCredentials",true,442,done);
sendEventByKey('webcomponent',10,'');
})
/*
*tc.number SUB_ACE_BASIC_ETS_API_088
*tc.name getHttpAuthCredentials
*tc.desic delete credentials
*/
it('getHttpAuthCredentials',0,async function(done){
emitKey="emitDeleteHttpAuthCredentials";
Utils.registerEvent("getHttpAuthCredentials","Stromgol",444,done);
sendEventByKey('webcomponent',10,'');
})
/*
*tc.number SUB_ACE_BASIC_ETS_API_089
*tc.name deleteHttpAuthCredentials
*tc.desic delete credentials
*/
it('deleteHttpAuthCredentials',0,async function(done){
emitKey="emitSearchAllAsync";
Utils.registerEvent("deleteHttpAuthCredentials",false,446,done);
sendEventByKey('webcomponent',10,'');
})
/*
*tc.number SUB_ACE_BASIC_ETS_API_079
*tc.name searchAllAsync
*tc.desic search specific words
*/
it('searchAllAsync',0,async function(done){
emitKey="emitSearchAllAsync";
Utils.registerEvent("searchAllAsync","01",426,done);
sendEventByKey('webcomponent',10,'');
})
it('deleteAllData',0,async function(done){
emitKey="emitdeleteAllData";
Utils.registerEvent("deleteAllData","01",426,done);
sendEventByKey('webcomponent',10,'');
})
it('deleteOrigin',0,async function(done){
emitKey="emitdeleteOringin";
Utils.registerEvent("deleteOrigin","index",424,done);
sendEventByKey('webcomponent',10,'');
})
it('getOrigins',0,async function(done){
emitKey="emitgetOringin";
Utils.registerEvent("getOrigins",1,424,done);
sendEventByKey('webcomponent',10,'');
})
it('getOriginQuota',0,async function(done){
emitKey="emitgetOringinQuota";
Utils.registerEvent("getOriginQuota",1,424,done);
sendEventByKey('webcomponent',10,'');
})
it('getOriginUsage',0,async function(done){
emitKey="emitgetOringinUsage";
Utils.registerEvent("getOriginUsage",1,424,done);
sendEventByKey('webcomponent',10,'');
})
it('close',0,async function(done){
emitKey="emitclose";
Utils.registerEvent("close",1,424,done);
sendEventByKey('webcomponent',10,'');
})
it('postMessageEvent',0,async function(done){
emitKey="emitpostMessageEvent";
Utils.registerEvent("postMessageEvent",'index',424,done);
sendEventByKey('webcomponent',10,'');
})
it('onMessageEvent',0,async function(done){
emitKey="emitonMessageEvent";
Utils.registerEvent("onMessageEvent",1,424,done);
sendEventByKey('webcomponent',10,'');
})
it('getUserAgent',0,async function(done){
emitKey="emitgetUserAgent";
Utils.registerEvent("getUserAgent",1,424,done);
sendEventByKey('webcomponent',10,'');
})
it('createWebMessagePorts',0,async function(done){
emitKey="emitcreateWebMessagePorts";
Utils.registerEvent("createWebMessagePorts",1,424,done);
sendEventByKey('webcomponent',10,'');
})
it('clearMatches',0,async function(done){
emitKey="emitclearMatches";
Utils.registerEvent("clearMatches",1,424,done);
sendEventByKey('webcomponent',10,'');
})
it('searchNext',0,async function(done){
emitKey="emitsearchNext";
Utils.registerEvent("searchNext",1,424,done);
sendEventByKey('webcomponent',10,'');
})
it('clearSslCache',0,async function(done){
emitKey="emitclearSslCache";
Utils.registerEvent("clearSslCache",1,424,done);
sendEventByKey('webcomponent',10,'');
})
it('clearClientAuthenticationCache',0,async function(done){
emitKey="emitclearClientAuthenticationCache";
Utils.registerEvent("clearClientAuthenticationCache",1,424,done);
sendEventByKey('webcomponent',10,'');
})
it('getUrl',0,async function(done){
emitKey="emitgetUrl";
Utils.registerEvent("getUrl",1,424,done);
sendEventByKey('webcomponent',10,'');
})
it('postMessageEvent',0,async function(done){
emitKey="emitpostMessageEvent1";
Utils.registerEvent("postMessageEvent",1,424,done);
sendEventByKey('webcomponent',10,'');
})
it('getData',0,async function(done){
emitKey="emitgetData";
Utils.registerEvent("getData",1,424,done);
sendEventByKey('webcomponent',10,'');
})
it('setData',0,async function(done){
emitKey="emitsetData";
Utils.registerEvent("setData",1,424,done);
sendEventByKey('webcomponent',10,'');
})
it('getPorts',0,async function(done){
emitKey="emitgetPorts";
Utils.registerEvent("getPorts",1,424,done);
sendEventByKey('webcomponent',10,'');
})
it('getPorts',0,async function(done){
emitKey="emitgetPorts";
Utils.registerEvent("getPorts",1,424,done);
sendEventByKey('webcomponent',10,'');
})
it('fullscreen',0,async function(done){
emitKey="emitexitfullscreen";
Utils.registerEvent("exitfullscreen",1,424,done);
sendEventByKey('webcomponent',10,'');
})
it('postMessage',0,async function(done){
emitKey="emitpostMessage";
Utils.registerEvent("postMessage",1,424,done);
sendEventByKey('webcomponent',10,'');
})
it('constructor',0,async function(done){
emitKey="emitAsyncControllerconstructor";
Utils.registerEvent("constructor",1,424,done);
sendEventByKey('webcomponent',10,'');
})
it('deleteSessionCookie',0,async function(done){
emitKey="emitdeleteSessionCookie";
Utils.registerEvent("deleteSessionCookie",1,424,done);
sendEventByKey('webcomponent',10,'');
})
it('constructor',0,async function(done){
emitKey="emitonFullScreenExitconstructor";
Utils.registerEvent("constructor",1,424,done);
sendEventByKey('webcomponent',10,'');
})
it('constructor',0,async function(done){
emitKey="emitWebMessageEventconstructor";
Utils.registerEvent("constructor",1,424,done);
sendEventByKey('webcomponent',10,'');
})
})
}
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import router from '@system.router';
import { describe, beforeAll, beforeEach, afterEach, afterAll, it, expect } from "hypium/index"
import Utils from './Utils.ets'
export default function commonBackgroundBlurStyleJsunit() {
describe('commonBackgroundBlurStyleTest', function () {
beforeEach(async function (done) {
console.info("flex beforeEach start");
let options = {
uri: 'pages/common',
}
try {
router.clear();
let pages = router.getState();
console.info("get common state success " + JSON.stringify(pages));
if (!("common" == pages.name)) {
console.info("get common state success " + JSON.stringify(pages.name));
let result = await router.push(options);
await Utils.sleep(2000);
console.info("push common page success " + JSON.stringify(result));
}
} catch (err) {
console.error("push common page error: " + err);
}
done()
});
afterEach(async function () {
await Utils.sleep(1000);
console.info("commonBackgroundBlurStyle after each called");
});
/*
* @tc.number SUB_ACE_BASIC_ETS_API_001
* @tc.name testcommonBackgroundBlurStyle001
* @tc.desic acecommonBackgroundBlurStyleEtsTest001
*/
it('testcommonBackgroundBlurStyle001', 0, async function (done) {
console.info('commonBackgroundBlurStyle testcommonBackgroundBlurStyle001 START');
await Utils.sleep(2000);
let strJson = getInspectorByKey('borderImageText');
console.info("[testcommonBackgroundBlurStyle001] component borderImage strJson:" + strJson);
let obj = JSON.parse(strJson);
expect(obj.$type).assertEqual('Text');
let targetValue = {
source: {
angle: 90,
direction: GradientDirection.Left,
colors: [[0xAEE1E1, 0.0], [0xD3E0DC, 0.3], [0xFCD1D1, 1.0]]
},
slice: {
top: 10, bottom: 10, left: 10, right: 10
},
width: {
top: "10px", bottom: "10px", left: "10px", right: "10px"
},
repeat: RepeatMode.Stretch,
fill: false
};
expect(obj.$attrs.borderImage).assertEqual(undefined);
console.info("[testcommonBackgroundBlurStyle001] borderImage value :" + JSON.stringify(obj.$attrs.borderImage));
done();
});
/*
* @tc.number SUB_ACE_BASIC_ETS_API_002
* @tc.name testcommonBackgroundBlurStyle002
* @tc.desic acecommonBackgroundBlurStyleEtsTest002
*/
it('testcommonBackgroundBlurStyle002', 0, async function (done) {
console.info('commonBackgroundBlurStyle testcommonBackgroundBlurStyle002 START');
await Utils.sleep(2000);
let strJson = getInspectorByKey('tabIndexText');
console.info("[testcommonBackgroundBlurStyle002] component tabIndex strJson:" + strJson);
let obj = JSON.parse(strJson);
expect(obj.$type).assertEqual('Text');
expect(obj.$attrs.tabIndex).assertEqual(undefined);
console.info("[testcommonBackgroundBlurStyle002] tabIndex value :" + obj.$attrs.textAlign);
done();
});
/*
* @tc.number SUB_ACE_BASIC_ETS_API_003
* @tc.name testcommonBackgroundBlurStyle003
* @tc.desic acecommonBackgroundBlurStyleEtsTest003
*/
it('testcommonBackgroundBlurStyle003', 0, async function (done) {
console.info('commonBackgroundBlurStyle testcommonBackgroundBlurStyle003 START');
await Utils.sleep(2000);
let strJson = getInspectorByKey('sepiaText');
console.info("[testcommonBackgroundBlurStyle003] component sepia strJson:" + strJson);
let obj = JSON.parse(strJson);
expect(obj.$type).assertEqual('Text');
expect(obj.$attrs.sepia).assertEqual(1);
console.info("[testcommonBackgroundBlurStyle003] sepia value :" + obj.$attrs.sepia);
done();
});
/*
* @tc.number SUB_ACE_BASIC_ETS_API_004
* @tc.name testcommonBackgroundBlurStyle004
* @tc.desic acecommonBackgroundBlurStyleEtsTest004
*/
it('testcommonBackgroundBlurStyle004', 0, async function (done) {
console.info('commonBackgroundBlurStyle testcommonBackgroundBlurStyle004 START');
await Utils.sleep(2000);
let strJson = getInspectorByKey('alignRulesText');
console.info("[testcommonBackgroundBlurStyle004] component alignRules strJson:" + strJson);
let obj = JSON.parse(strJson);
expect(obj.$type).assertEqual('Text');
let targetValue = {
top: {
anchor: 'target', align: VerticalAlign.Bottom
},
right: {
anchor: "target", align: HorizontalAlign.Center
}
};
expect(obj.$attrs.alignRules).assertEqual(undefined);
console.info("[testcommonBackgroundBlurStyle004] alignRules value :" + JSON.stringify(obj.$attrs.alignRules));
done();
});
/*
* @tc.number SUB_ACE_BASIC_ETS_API_005
* @tc.name testcommonBackgroundBlurStyle005
* @tc.desic acecommonBackgroundBlurStyleEtsTest005
*/
it('testcommonBackgroundBlurStyle005', 0, async function (done) {
console.info('commonBackgroundBlurStyle testcommonBackgroundBlurStyle005 START');
await Utils.sleep(2000);
let strJson = getInspectorByKey('backgroundBlurStyleText');
console.info("[testcommonBackgroundBlurStyle005] component backgroundBlurStyle strJson:" + strJson);
let obj = JSON.parse(strJson);
expect(obj.$attrs.backgroundBlurStyle).assertEqual(undefined);
console.info("[testcommonBackgroundBlurStyle005] backgroundBlurStyle value :" + obj.$attrs.backgroundBlurStyle);
done();
});
/*
* @tc.number SUB_ACE_BASIC_ETS_API_006
* @tc.name testcommonBackgroundBlurStyle006
* @tc.desic acecommonBackgroundBlurStyleEtsTest006
*/
it('testcommonBackgroundBlurStyle006', 0, async function (done) {
console.info('commonBackgroundBlurStyle testcommonBackgroundBlurStyle006 START');
console.info("common onKeyEvent click result is: " + JSON.stringify(sendEventByKey('onKeyEventButton', 10, "")));
done();
});
/*
* @tc.number SUB_ACE_BASIC_ETS_API_0006
* @tc.name testcommonHoverEffectHighlight0006
* @tc.desic acecommonHoverEffectHighlightEtsTest0006
*/
it('testcommonHoverEffectHighlight0001', 0, async function (done) {
console.info('commonHoverEffectHighlight testcommonHoverEffectHighlight0001 START');
await Utils.sleep(2000);
let strJson = getInspectorByKey('hoverEffectText');
console.info("[testcommonHoverEffectHighlight0001] component hoverEffect strJson:" + strJson);
let obj = JSON.parse(strJson);
expect(obj.$attrs.hoverEffect).assertEqual(undefined);
console.info("[testcommonHoverEffectHighlight0001] hoverEffect value :" + obj.$attrs.hoverEffect);
done();
});
/*
* @tc.number SUB_ACE_BASIC_ETS_API_0007
* @tc.name testcommonHoverEffectScale0007
* @tc.desic acecommonHoverEffectScaleEtsTest0007
*/
it('testcommonHoverEffectScale0001', 0, async function (done) {
console.info('commonHoverEffectScale testcommonHoverEffectScale0001 START');
await Utils.sleep(2000);
let strJson = getInspectorByKey('hoverEffectScaleText');
console.info("[testcommonHoverEffectScale0001] component hoverEffect strJson:" + strJson);
let obj = JSON.parse(strJson);
expect(obj.$attrs.hoverEffect).assertEqual(undefined);
console.info("[testcommonHoverEffectScale0001] hoverEffect value :" + obj.$attrs.hoverEffect);
done();
});
/*
* @tc.number SUB_ACE_BASIC_ETS_API_0008
* @tc.name testcommonhitTestBehavior0008
* @tc.desic acecommonhitTestBehaviorEtsTest0008
*/
it('testcommonhitTestBehavior0001', 0, async function (done) {
console.info('commonhitTestBehavior testcommonhitTestBehavior0001 START');
await Utils.sleep(2000);
let strJson = getInspectorByKey('hoverEffectScaleText');
console.info("[testcommonhitTestBehavior0001] component hoverEffect strJson:" + strJson);
let obj = JSON.parse(strJson);
expect(obj.$attrs.hoverEffect).assertEqual(undefined);
console.info("[testcommonhitTestBehavior0001] hoverEffect value :" + obj.$attrs.hoverEffect);
done();
});
})
}
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import router from '@system.router';
import {describe, beforeAll, beforeEach, afterEach, afterAll, it, expect} from "hypium/index"
import Utils from './Utils.ets'
export default function hitTestModeJsunit() {
describe('hitTestModeJsunit', function () {
beforeEach(async function (done) {
console.info("hitTestMode beforeEach start");
let options = {
uri: 'pages/hitTestMode',
}
try {
router.clear();
let pages = router.getState();
console.info("get hitTestMode state success " + JSON.stringify(pages));
if (!("hitTestMode" == pages.name)) {
console.info("get hitTestMode state success " + JSON.stringify(pages.name));
let result = await router.push(options);
await Utils.sleep(2000);
console.info("push hitTestMode page success " + JSON.stringify(result));
}
} catch (err) {
console.error("push hitTestMode page error: " + err);
}
done()
});
afterEach(async function () {
await Utils.sleep(1000);
console.info("hitTestModeTest after each called");
});
/*
* @tc.number SUB_ACE_BASIC_ETS_API_0002
* @tc.name testhitTestMode0002
* @tc.desic acehitTestModelEtsTest0002
*/
it('testhitTestMode0002', 0, async function (done) {
console.info('hitTestMode testhitTestMode0002 START');
await Utils.sleep(2000);
let strJson = getInspectorByKey('Block');
console.info("[testhitTestMode0002] component width strJson:" + strJson);
let obj = JSON.parse(strJson);
expect(obj.$type).assertEqual('Stack');
console.info("[testhitTestMode0002] hitTestBehavior value :" + obj.$attrs.hitTestBehavior);
// expect(obj.$attrs.hitTestBehavior).assertEqual(undefined);
done();
});
})
}
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import router from '@system.router';
import {describe, beforeAll, beforeEach, afterEach, afterAll, it, expect} from "hypium/index"
import Utils from './Utils.ets'
export default function stackAlignContentJsunit() {
describe('stackAlignContentTest', function () {
beforeAll(async function (done) {
console.info("flex beforeEach start");
let options = {
uri: 'pages/stack',
}
try {
router.clear();
let pages = router.getState();
console.info("get stack state success " + JSON.stringify(pages));
if (!("stack" == pages.name)) {
console.info("get stack state success " + JSON.stringify(pages.name));
let result = await router.push(options);
await Utils.sleep(2000);
console.info("push stack page success " + JSON.stringify(result));
}
} catch (err) {
console.error("push stack page error: " + err);
}
done()
});
afterEach(async function () {
await Utils.sleep(1000);
console.info("stackAlignContent after each called");
});
/*
* @tc.number SUB_ACE_BASIC_ETS_API_0001
* @tc.name teststackAlignContent0001
* @tc.desic acestackAlignContentEtsTest0001
*/
it('teststackAlignContent0001', 0, async function (done) {
console.info('stackAlignContent teststackAlignContent0001 START');
await Utils.sleep(2000);
let strJson = getInspectorByKey('Stack');
console.info("[teststackAlignContent0001] component width strJson:" + strJson);
let obj = JSON.parse(strJson);
expect(obj.$type).assertEqual('Stack');
expect(obj.$attrs.width).assertEqual("100.00%");
console.info("[teststackAlignContent0001] width value :" + obj.$attrs.width);
done();
});
/*
* @tc.number SUB_ACE_BASIC_ETS_API_0002
* @tc.name teststackAlignContent0002
* @tc.desic acestackAlignContentEtsTest0002
*/
it('teststackAlignContent0002', 0, async function (done) {
console.info('stackAlignContent teststackAlignContent0002 START');
await Utils.sleep(2000);
let strJson = getInspectorByKey('Stack');
console.info("[teststackAlignContent0002] component width strJson:" + strJson);
let obj = JSON.parse(strJson);
expect(obj.$type).assertEqual('Stack');
expect(obj.$attrs.height).assertEqual("150.00vp");
console.info("[teststackAlignContent0002] width value :" + obj.$attrs.width);
done();
});
})
}
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import router from '@system.router';
import {describe, beforeAll, beforeEach, afterEach, afterAll, it, expect} from "hypium/index"
import Utils from './Utils.ets'
export default function tabsBarPositionJsunit() {
describe('tabsBarPositionTest', function () {
beforeAll(async function (done) {
console.info("flex beforeEach start");
let options = {
uri: 'pages/tabs',
}
try {
router.clear();
let pages = router.getState();
console.info("get tabs state success " + JSON.stringify(pages));
if (!("tabs" == pages.name)) {
console.info("get tabs state success " + JSON.stringify(pages.name));
let result = await router.push(options);
await Utils.sleep(2000);
console.info("push tabs page success " + JSON.stringify(result));
}
} catch (err) {
console.error("push tabs page error: " + err);
}
done()
});
afterEach(async function () {
await Utils.sleep(1000);
console.info("tabsBarPosition after each called");
});
/*
* @tc.number SUB_ACE_BASIC_ETS_API_0001
* @tc.name testtabsBarPosition0001
* @tc.desic acetabsBarPositionEtsTest0001
*/
it('testtabsBarPosition0001', 0, async function (done) {
console.info('tabsBarPosition testtabsBarPosition0001 START');
await Utils.sleep(2000);
let strJson = getInspectorByKey('barPositionText');
console.info("[testtabsBarPosition0001] component width strJson:" + strJson);
let obj = JSON.parse(strJson);
expect(obj.$type).assertEqual('Text');
expect(obj.$attrs.width).assertEqual("100.00vp");
console.info("[testtabsBarPosition0001] width value :" + obj.$attrs.width);
done();
});
/*
* @tc.number SUB_ACE_BASIC_ETS_API_0002
* @tc.name testtabsBarPosition0002
* @tc.desic acetabsBarPositionEtsTest0002
*/
it('testtabsBarPosition0002', 0, async function (done) {
console.info('tabsBarPosition testtabsBarPosition0002 START');
await Utils.sleep(2000);
let strJson = getInspectorByKey('barPositionText');
console.info("[testtabsBarPosition0002] component height strJson:" + strJson);
let obj = JSON.parse(strJson);
expect(obj.$type).assertEqual('Text');
expect(obj.$attrs.height).assertEqual("70.00vp");
console.info("[testtabsBarPosition0002] height value :" + obj.$attrs.height);
done();
});
/*
* @tc.number SUB_ACE_BASIC_ETS_API_0003
* @tc.name testtabsBarPosition0003
* @tc.desic acetabsBarPositionEtsTest0003
*/
it('testtabsBarPosition0003', 0, async function (done) {
console.info('tabsBarPosition testtabsBarPosition0003 START');
await Utils.sleep(2000);
let strJson = getInspectorByKey('barPositionText');
console.info("[testtabsBarPosition0003] component fontSize strJson:" + strJson);
let obj = JSON.parse(strJson);
expect(obj.$type).assertEqual('Text');
expect(obj.$attrs.fontSize).assertEqual("20.00fp");
console.info("[testtabsBarPosition0003] fontSize value :" + obj.$attrs.fontSize);
done();
});
/*
* @tc.number SUB_ACE_BASIC_ETS_API_0004
* @tc.name testtabsBarPosition0004
* @tc.desic acetabsBarPositionEtsTest0004
*/
it('testtabsBarPosition0004', 0, async function (done) {
console.info('tabsBarPosition testtabsBarPosition0004 START');
await Utils.sleep(2000);
let strJson = getInspectorByKey('barPositionText');
console.info("[testtabsBarPosition0004] component opacity strJson:" + strJson);
let obj = JSON.parse(strJson);
expect(obj.$type).assertEqual('Text');
expect(obj.$attrs.opacity).assertEqual(1);
console.info("[testtabsBarPosition0004] opacity value :" + obj.$attrs.opacity);
done();
});
/*
* @tc.number SUB_ACE_BASIC_ETS_API_0005
* @tc.name testtabsBarPosition0005
* @tc.desic acetabsBarPositionEtsTest0005
*/
it('testtabsBarPosition0005', 0, async function (done) {
console.info('tabsBarPosition testtabsBarPosition0005 START');
await Utils.sleep(2000);
let strJson = getInspectorByKey('barPositionText');
console.info("[testtabsBarPosition0005] component align strJson:" + strJson);
let obj = JSON.parse(strJson);
expect(obj.$type).assertEqual('Text');
expect(obj.$attrs.align).assertEqual("Alignment.TopStart");
console.info("[testtabsBarPosition0005] align value :" + obj.$attrs.align);
done();
});
/*
* @tc.number SUB_ACE_BASIC_ETS_API_0006
* @tc.name testtabsBarPosition0006
* @tc.desic acetabsBarPositionEtsTest0006
*/
it('testtabsBarPosition0006', 0, async function (done) {
console.info('tabsBarPosition testtabsBarPosition0006 START');
await Utils.sleep(2000);
let strJson = getInspectorByKey('barPositionText');
console.info("[testtabsBarPosition0006] component fontColor strJson:" + strJson);
let obj = JSON.parse(strJson);
expect(obj.$type).assertEqual('Text');
expect(obj.$attrs.fontColor).assertEqual("#FFCCCCCC");
console.info("[testtabsBarPosition0006] fontColor value :" + obj.$attrs.fontColor);
done();
});
/*
* @tc.number SUB_ACE_BASIC_ETS_API_0007
* @tc.name testtabsBarPosition0007
* @tc.desic acetabsBarPositionEtsTest0007
*/
it('testtabsBarPosition0007', 0, async function (done) {
console.info('tabsBarPosition testtabsBarPosition0007 START');
await Utils.sleep(2000);
let strJson = getInspectorByKey('barPositionText');
console.info("[testtabsBarPosition0007] component lineHeight strJson:" + strJson);
let obj = JSON.parse(strJson);
expect(obj.$type).assertEqual('Text');
expect(obj.$attrs.lineHeight).assertEqual("25.00fp");
console.info("[testtabsBarPosition0007] lineHeight value :" + obj.$attrs.lineHeight);
done();
});
/*
* @tc.number SUB_ACE_BASIC_ETS_API_0009
* @tc.name testtabsBarPosition0009
* @tc.desic acetabsBarPositionEtsTest0009
*/
it('testtabsBarPosition0009', 0, async function (done) {
console.info('tabsBarPosition testtabsBarPosition009 START');
await Utils.sleep(2000);
let strJson = getInspectorByKey('barPositionText');
console.info("[testtabsBarPosition0009] component padding strJson:" + strJson);
let obj = JSON.parse(strJson);
expect(obj.$type).assertEqual('Text');
expect(obj.$attrs.padding).assertEqual("10.00vp");
console.info("[testtabsBarPosition0009] padding value :" + obj.$attrs.padding);
done();
});
/*
* @tc.number SUB_ACE_BASIC_ETS_API_0010
* @tc.name testtabsBarPosition0010
* @tc.desic acetabsBarPositionEtsTest0010
*/
it('testtabsBarPosition0010', 0, async function (done) {
console.info('tabsBarPosition testtabsBarPosition0010 START');
await Utils.sleep(2000);
let strJson = getInspectorByKey('barPositionText');
console.info("[testtabsBarPosition0010] component textAlign strJson:" + strJson);
let obj = JSON.parse(strJson);
expect(obj.$type).assertEqual('Text');
expect(obj.$attrs.textAlign).assertEqual("TextAlign.Left");
console.info("[testtabsBarPosition0010] textAlign value :" + obj.$attrs.textAlign);
done();
});
/*
* @tc.number SUB_ACE_BASIC_ETS_API_0011
* @tc.name testtabsBarPosition0011
* @tc.desic acetabsBarPositionEtsTest0011
*/
it('testtabsBarPosition0011', 0, async function (done) {
console.info('tabsBarPosition testtabsBarPosition0011 START');
await Utils.sleep(2000);
let strJson = getInspectorByKey('barPositionTabs');
console.info("[testtabsBarPosition0011] component barPosition strJson:" + strJson);
let obj = JSON.parse(strJson);
expect(obj.$type).assertEqual('Tabs');
expect(obj.$attrs.barPosition).assertEqual("BarPosition.Start");
console.info("[testtabsBarPosition0011] barPosition value :" + obj.$attrs.barPosition);
done();
});
})
}
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册