提交 deb78999 编写于 作者: Y yamila

update semicolon

Signed-off-by: Nyamila <tianyu55@huawei.com>
上级 c853f403
...@@ -64,7 +64,7 @@ struct GaugeExample { ...@@ -64,7 +64,7 @@ struct GaugeExample {
// 参数设置当前值为75,属性设置值为25,属性设置优先级高 // 参数设置当前值为75,属性设置值为25,属性设置优先级高
Gauge({ value: 75 }) Gauge({ value: 75 })
.value(25) //属性和参数都设置时以参数为准 .value(25) // 属性和参数都设置时以参数为准
.width(200).height(200) .width(200).height(200)
.colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]]) .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]])
......
...@@ -353,17 +353,17 @@ struct ImageExample3 { ...@@ -353,17 +353,17 @@ struct ImageExample3 {
### 渲染沙箱路径图片 ### 渲染沙箱路径图片
``` ```
import fileio from '@ohos.fileio'; import fileio from '@ohos.fileio'
import image from '@ohos.multimedia.image'; import image from '@ohos.multimedia.image'
const EMPTY_PATH = 'file://'; const EMPTY_PATH = 'file://'
@Entry @Entry
@Component @Component
struct LoadImageExample { struct LoadImageExample {
@State fileContent: string = ''; @State fileContent: string = ''
@State path: string = EMPTY_PATH; @State path: string = EMPTY_PATH
@State accountInfoHeadPic: any = ''; @State accountInfoHeadPic: any = ''
build() { build() {
Column() { Column() {
...@@ -371,22 +371,22 @@ struct LoadImageExample { ...@@ -371,22 +371,22 @@ struct LoadImageExample {
.margin({ bottom: 10 }) .margin({ bottom: 10 })
.onClick(() => { .onClick(() => {
try { try {
this.path = EMPTY_PATH; this.path = EMPTY_PATH
let context = getContext(this); let context = getContext(this)
let path = context.getApplicationContext().filesDir + '/icon.png'; let path = context.getApplicationContext().filesDir + '/icon.png'
console.log(`读取沙箱图片=========>${path}`); console.log(`读取沙箱图片=========>${path}`)
let fd = fileio.openSync(path, 0o100, 0o666); let fd = fileio.openSync(path, 0o100, 0o666)
console.log(`create file========>${fd}`); console.log(`create file========>${fd}`)
let srcPath = context.bundleCodeDir + '/entry/resource/base/media/icon.png'; let srcPath = context.bundleCodeDir + '/entry/resource/base/media/icon.png'
fileio.copyFileSync(srcPath, path); fileio.copyFileSync(srcPath, path)
console.log(`error:=============>${e.message}`); console.log(`error:=============>${e.message}`)
} }
}) })
Button('读取资源图片') Button('读取资源图片')
.margin({ bottom: 10 }) .margin({ bottom: 10 })
.onClick(() => { .onClick(() => {
this.path = EMPTY_PATH; this.path = EMPTY_PATH;
this.path += getContext(this.bundleCodeDir + '/entry/resource/base/media/icon.png'); this.path += getContext(this.bundleCodeDir + '/entry/resource/base/media/icon.png')
}) })
Text(`图片路径:${this.path}`) Text(`图片路径:${this.path}`)
.fontSize(20) .fontSize(20)
......
...@@ -66,9 +66,9 @@ reset(): void ...@@ -66,9 +66,9 @@ reset(): void
@Entry @Entry
@Component @Component
struct PatternLockExample { struct PatternLockExample {
@State passwords: Number[] = []; @State passwords: Number[] = []
@State message: string = 'please input password!'; @State message: string = 'please input password!'
private patternLockController: PatternLockController = new PatternLockController(); private patternLockController: PatternLockController = new PatternLockController()
build() { build() {
Column() { Column() {
...@@ -85,29 +85,29 @@ struct PatternLockExample { ...@@ -85,29 +85,29 @@ struct PatternLockExample {
.onPatternComplete((input: Array<number>) => { .onPatternComplete((input: Array<number>) => {
// 输入的密码长度小于5时,提示重新输入 // 输入的密码长度小于5时,提示重新输入
if (input === null || input === undefined || input.length < 5) { if (input === null || input === undefined || input.length < 5) {
this.message = 'The password length needs to be greater than 5, please enter again.'; this.message = 'The password length needs to be greater than 5, please enter again.'
return; return
} }
// 判断密码长度是否大于0 // 判断密码长度是否大于0
if (this.passwords.length > 0) { if (this.passwords.length > 0) {
// 判断两次输入的密码是否相同,相同则提示密码设置成功,否则提示重新输入 // 判断两次输入的密码是否相同,相同则提示密码设置成功,否则提示重新输入
if (this.passwords.toString() === input.toString()) { if (this.passwords.toString() === input.toString()) {
this.passwords = input; this.passwords = input
this.message = 'Set password successfully: ' + this.passwords.toString(); this.message = 'Set password successfully: ' + this.passwords.toString()
} else { } else {
this.message = 'Inconsistent passwords, please enter again.'; this.message = 'Inconsistent passwords, please enter again.'
} }
} else { } else {
// 提示第二次输入密码 // 提示第二次输入密码
this.passwords = input; this.passwords = input
this.message = "Please enter again."; this.message = "Please enter again."
} }
}) })
Button('Reset PatternLock').margin(30).onClick(() => { Button('Reset PatternLock').margin(30).onClick(() => {
// 重置密码锁 // 重置密码锁
this.patternLockController.reset(); this.patternLockController.reset()
this.passwords = []; this.passwords = []
this.message = 'Please input password'; this.message = 'Please input password'
}) })
}.width('100%').height('100%') }.width('100%').height('100%')
} }
......
...@@ -75,9 +75,9 @@ caretPosition(value: number): void ...@@ -75,9 +75,9 @@ caretPosition(value: number): void
@Entry @Entry
@Component @Component
struct SearchExample { struct SearchExample {
@State changeValue: string = ''; @State changeValue: string = ''
@State submitValue: string = ''; @State submitValue: string = ''
controller: SearchController = new SearchController(); controller: SearchController = new SearchController()
build() { build() {
Column() { Column() {
...@@ -92,16 +92,16 @@ struct SearchExample { ...@@ -92,16 +92,16 @@ struct SearchExample {
.placeholderFont({ size: 14, weight: 400 }) .placeholderFont({ size: 14, weight: 400 })
.textFont({ size: 14, weight: 400 }) .textFont({ size: 14, weight: 400 })
.onSubmit((value: string) => { .onSubmit((value: string) => {
this.submitValue = value; this.submitValue = value
}) })
.onChange((value: string) => { .onChange((value: string) => {
this.changeValue = value; this.changeValue = value
}) })
.margin(20) .margin(20)
Button('Set caretPosition 1') Button('Set caretPosition 1')
.onClick(() => { .onClick(() => {
// 设置光标位置到输入的第一个字符后 // 设置光标位置到输入的第一个字符后
this.controller.caretPosition(1); this.controller.caretPosition(1)
}) })
}.width('100%') }.width('100%')
} }
......
...@@ -75,14 +75,14 @@ Slider(options?: {value?: number, min?: number, max?: number, step?: number, sty ...@@ -75,14 +75,14 @@ Slider(options?: {value?: number, min?: number, max?: number, step?: number, sty
@Entry @Entry
@Component @Component
struct SliderExample { struct SliderExample {
@State outSetValueOne: number = 40; @State outSetValueOne: number = 40
@State inSetValueOne: number = 40; @State inSetValueOne: number = 40
@State outSetValueTwo: number = 40; @State outSetValueTwo: number = 40
@State inSetValueTwo: number = 40; @State inSetValueTwo: number = 40
@State vOutSetValueOne: number = 40; @State vOutSetValueOne: number = 40
@State vInSetValueOne: number = 40; @State vInSetValueOne: number = 40
@State vOutSetValueTwo: number = 40; @State vOutSetValueTwo: number = 40
@State vInSetValueTwo: number = 40; @State vInSetValueTwo: number = 40
build() { build() {
Column({ space: 8 }) { Column({ space: 8 }) {
...@@ -96,8 +96,8 @@ struct SliderExample { ...@@ -96,8 +96,8 @@ struct SliderExample {
}) })
.showTips(true) .showTips(true)
.onChange((value: number, mode: SliderChangeMode) => { .onChange((value: number, mode: SliderChangeMode) => {
this.outSetValueOne = value; this.outSetValueOne = value
console.info('value:' + value + 'mode:' + mode.toString()); console.info('value:' + value + 'mode:' + mode.toString())
}) })
// toFixed(0)将滑动条返回值处理为整数精度 // toFixed(0)将滑动条返回值处理为整数精度
Text(this.outSetValueOne.toFixed(0)).fontSize(12) Text(this.outSetValueOne.toFixed(0)).fontSize(12)
...@@ -111,8 +111,8 @@ struct SliderExample { ...@@ -111,8 +111,8 @@ struct SliderExample {
}) })
.showSteps(true) .showSteps(true)
.onChange((value: number, mode: SliderChangeMode) => { .onChange((value: number, mode: SliderChangeMode) => {
this.outSetValueTwo = value; this.outSetValueTwo = value
console.info('value:' + value + 'mode:' + mode.toString()); console.info('value:' + value + 'mode:' + mode.toString())
}) })
Text(this.outSetValueTwo.toFixed(0)).fontSize(12) Text(this.outSetValueTwo.toFixed(0)).fontSize(12)
} }
...@@ -131,8 +131,8 @@ struct SliderExample { ...@@ -131,8 +131,8 @@ struct SliderExample {
.selectedColor('#4169E1') .selectedColor('#4169E1')
.showTips(true) .showTips(true)
.onChange((value: number, mode: SliderChangeMode) => { .onChange((value: number, mode: SliderChangeMode) => {
this.inSetValueOne = value; this.inSetValueOne = value
console.info('value:' + value + 'mode:' + mode.toString()); console.info('value:' + value + 'mode:' + mode.toString())
}) })
Text(this.inSetValueOne.toFixed(0)).fontSize(12) Text(this.inSetValueOne.toFixed(0)).fontSize(12)
} }
...@@ -148,8 +148,8 @@ struct SliderExample { ...@@ -148,8 +148,8 @@ struct SliderExample {
.selectedColor('#4169E1') .selectedColor('#4169E1')
.showSteps(true) .showSteps(true)
.onChange((value: number, mode: SliderChangeMode) => { .onChange((value: number, mode: SliderChangeMode) => {
this.inSetValueTwo = value; this.inSetValueTwo = value
console.info('value:' + value + 'mode:' + mode.toString()); console.info('value:' + value + 'mode:' + mode.toString())
}) })
Text(this.inSetValueTwo.toFixed(0)).fontSize(12) Text(this.inSetValueTwo.toFixed(0)).fontSize(12)
} }
...@@ -169,8 +169,8 @@ struct SliderExample { ...@@ -169,8 +169,8 @@ struct SliderExample {
.selectedColor('#4169E1') .selectedColor('#4169E1')
.showTips(true) .showTips(true)
.onChange((value: number, mode: SliderChangeMode) => { .onChange((value: number, mode: SliderChangeMode) => {
this.vOutSetValueOne = value; this.vOutSetValueOne = value
console.info('value:' + value + 'mode:' + mode.toString()); console.info('value:' + value + 'mode:' + mode.toString())
}) })
Slider({ Slider({
value: this.vOutSetValueTwo, value: this.vOutSetValueTwo,
...@@ -183,8 +183,8 @@ struct SliderExample { ...@@ -183,8 +183,8 @@ struct SliderExample {
.selectedColor('#4169E1') .selectedColor('#4169E1')
.showSteps(true) .showSteps(true)
.onChange((value: number, mode: SliderChangeMode) => { .onChange((value: number, mode: SliderChangeMode) => {
this.vOutSetValueTwo = value; this.vOutSetValueTwo = value
console.info('value:' + value + 'mode:' + mode.toString()); console.info('value:' + value + 'mode:' + mode.toString())
}) })
} }
}.width('50%').height(300) }.width('50%').height(300)
...@@ -200,8 +200,8 @@ struct SliderExample { ...@@ -200,8 +200,8 @@ struct SliderExample {
}) })
.showTips(true) .showTips(true)
.onChange((value: number, mode: SliderChangeMode) => { .onChange((value: number, mode: SliderChangeMode) => {
this.vInSetValueOne = value; this.vInSetValueOne = value
console.info('value:' + value + 'mode:' + mode.toString()); console.info('value:' + value + 'mode:' + mode.toString())
}) })
Slider({ Slider({
value: this.vInSetValueTwo, value: this.vInSetValueTwo,
...@@ -212,8 +212,8 @@ struct SliderExample { ...@@ -212,8 +212,8 @@ struct SliderExample {
}) })
.showSteps(true) .showSteps(true)
.onChange((value: number, mode: SliderChangeMode) => { .onChange((value: number, mode: SliderChangeMode) => {
this.vInSetValueTwo = value; this.vInSetValueTwo = value
console.info('value:' + value + 'mode:' + mode.toString()); console.info('value:' + value + 'mode:' + mode.toString())
}) })
} }
}.width('50%').height(300) }.width('50%').height(300)
......
...@@ -48,10 +48,10 @@ Stepper(value?: { index?: number }) ...@@ -48,10 +48,10 @@ Stepper(value?: { index?: number })
@Entry @Entry
@Component @Component
struct StepperExample { struct StepperExample {
@State currentIndex: number = 0; @State currentIndex: number = 0
@State firstState: ItemState = ItemState.Normal; @State firstState: ItemState = ItemState.Normal
@State secondState: ItemState = ItemState.Normal; @State secondState: ItemState = ItemState.Normal
@State thirdState: ItemState = ItemState.Normal; @State thirdState: ItemState = ItemState.Normal
build() { build() {
Stepper({ Stepper({
...@@ -67,7 +67,7 @@ struct StepperExample { ...@@ -67,7 +67,7 @@ struct StepperExample {
.margin({ top: 250, bottom: 50 }) .margin({ top: 250, bottom: 50 })
Button('change status:' + this.firstState) Button('change status:' + this.firstState)
.onClick(() => { .onClick(() => {
this.firstState = this.firstState === ItemState.Skip ? ItemState.Normal : ItemState.Skip; this.firstState = this.firstState === ItemState.Skip ? ItemState.Normal : ItemState.Skip
}) })
}.width('100%') }.width('100%')
} }
...@@ -83,7 +83,7 @@ struct StepperExample { ...@@ -83,7 +83,7 @@ struct StepperExample {
.margin({ top: 250, bottom: 50 }) .margin({ top: 250, bottom: 50 })
Button('change status:' + this.secondState) Button('change status:' + this.secondState)
.onClick(() => { .onClick(() => {
this.secondState = this.secondState === ItemState.Disabled ? ItemState.Normal : ItemState.Disabled; this.secondState = this.secondState === ItemState.Disabled ? ItemState.Normal : ItemState.Disabled
}) })
}.width('100%') }.width('100%')
} }
...@@ -100,7 +100,7 @@ struct StepperExample { ...@@ -100,7 +100,7 @@ struct StepperExample {
.margin({ top: 250, bottom: 50 }) .margin({ top: 250, bottom: 50 })
Button('change status:' + this.thirdState) Button('change status:' + this.thirdState)
.onClick(() => { .onClick(() => {
this.thirdState = this.thirdState === ItemState.Waiting ? ItemState.Normal : ItemState.Waiting; this.thirdState = this.thirdState === ItemState.Waiting ? ItemState.Normal : ItemState.Waiting
}) })
}.width('100%') }.width('100%')
} }
...@@ -119,14 +119,14 @@ struct StepperExample { ...@@ -119,14 +119,14 @@ struct StepperExample {
} }
.onFinish(() => { .onFinish(() => {
// 此处可处理点击最后一页的Finish时的逻辑,例如路由跳转等 // 此处可处理点击最后一页的Finish时的逻辑,例如路由跳转等
console.info('onFinish'); console.info('onFinish')
}) })
.onSkip(() => { .onSkip(() => {
// 此处可处理点击跳过时的逻辑,例如动态修改Stepper的index值使其跳转到某一步骤页等 // 此处可处理点击跳过时的逻辑,例如动态修改Stepper的index值使其跳转到某一步骤页等
console.info('onSkip'); console.info('onSkip')
}) })
.onChange((prevIndex: number, index: number) => { .onChange((prevIndex: number, index: number) => {
this.currentIndex = index; this.currentIndex = index
}) })
} }
} }
......
...@@ -85,7 +85,7 @@ struct TextAreaExample { ...@@ -85,7 +85,7 @@ struct TextAreaExample {
build() { build() {
Column() { Column() {
TextArea({ placeholder: 'input your word', controller: this.controller }) TextArea({ placeholder: 'The text area can hold an unlimited amount of text. input your word', controller: this.controller })
.placeholderFont({ size: 14, weight: 400 }) .placeholderFont({ size: 14, weight: 400 })
.width(400) .width(400)
.height(50) .height(50)
......
...@@ -112,8 +112,8 @@ caretPosition(value:&nbsp;number): void ...@@ -112,8 +112,8 @@ caretPosition(value:&nbsp;number): void
@Entry @Entry
@Component @Component
struct TextInputExample { struct TextInputExample {
@State text: string = ''; @State text: string = ''
controller: TextInputController = new TextInputController(); controller: TextInputController = new TextInputController()
build() { build() {
Column() { Column() {
...@@ -127,14 +127,14 @@ struct TextInputExample { ...@@ -127,14 +127,14 @@ struct TextInputExample {
.fontSize(14) .fontSize(14)
.fontColor(Color.Black) .fontColor(Color.Black)
.onChange((value: string) => { .onChange((value: string) => {
this.text = value; this.text = value
}) })
Text(this.text) Text(this.text)
Button('Set caretPosition 1') Button('Set caretPosition 1')
.margin(15) .margin(15)
.onClick(() => { .onClick(() => {
// 将光标移动至第一个字符后 // 将光标移动至第一个字符后
this.controller.caretPosition(1); this.controller.caretPosition(1)
}) })
// 密码输入框 // 密码输入框
TextInput({ placeholder: 'input your password...' }) TextInput({ placeholder: 'input your password...' })
......
...@@ -37,7 +37,7 @@ Web(options: { src: ResourceStr, controller: WebController | WebviewController}) ...@@ -37,7 +37,7 @@ Web(options: { src: ResourceStr, controller: WebController | WebviewController})
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
...@@ -52,7 +52,7 @@ Web(options: { src: ResourceStr, controller: WebController | WebviewController}) ...@@ -52,7 +52,7 @@ Web(options: { src: ResourceStr, controller: WebController | WebviewController})
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController(); controller: web_webview.WebviewController = new web_webview.WebviewController()
build() { build() {
Column() { Column() {
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
...@@ -67,7 +67,7 @@ Web(options: { src: ResourceStr, controller: WebController | WebviewController}) ...@@ -67,7 +67,7 @@ Web(options: { src: ResourceStr, controller: WebController | WebviewController})
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Web({ src: $rawfile("index.html"), controller: this.controller }) Web({ src: $rawfile("index.html"), controller: this.controller })
...@@ -109,7 +109,7 @@ domStorageAccess(domStorageAccess: boolean) ...@@ -109,7 +109,7 @@ domStorageAccess(domStorageAccess: boolean)
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
...@@ -138,7 +138,7 @@ fileAccess(fileAccess: boolean) ...@@ -138,7 +138,7 @@ fileAccess(fileAccess: boolean)
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
...@@ -167,7 +167,7 @@ fileFromUrlAccess(fileFromUrlAccess: boolean) ...@@ -167,7 +167,7 @@ fileFromUrlAccess(fileFromUrlAccess: boolean)
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
...@@ -195,7 +195,7 @@ imageAccess(imageAccess: boolean) ...@@ -195,7 +195,7 @@ imageAccess(imageAccess: boolean)
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
...@@ -228,16 +228,16 @@ javaScriptProxy(javaScriptProxy: { object: object, name: string, methodList: Arr ...@@ -228,16 +228,16 @@ javaScriptProxy(javaScriptProxy: { object: object, name: string, methodList: Arr
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
testObj = { testObj = {
test: (data1, data2, data3) => { test: (data1, data2, data3) => {
console.log("data1:" + data1); console.log("data1:" + data1)
console.log("data2:" + data2); console.log("data2:" + data2)
console.log("data3:" + data3); console.log("data3:" + data3)
return "AceString"; return "AceString"
}, },
toString: () => { toString: () => {
console.log('toString' + "interface instead."); console.log('toString' + "interface instead.")
} }
} }
build() { build() {
...@@ -261,16 +261,16 @@ javaScriptProxy(javaScriptProxy: { object: object, name: string, methodList: Arr ...@@ -261,16 +261,16 @@ javaScriptProxy(javaScriptProxy: { object: object, name: string, methodList: Arr
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController(); controller: web_webview.WebviewController = new web_webview.WebviewController()
testObj = { testObj = {
test: (data1, data2, data3) => { test: (data1, data2, data3) => {
console.log("data1:" + data1); console.log("data1:" + data1)
console.log("data2:" + data2); console.log("data2:" + data2)
console.log("data3:" + data3); console.log("data3:" + data3)
return "AceString"; return "AceString"
}, },
toString: () => { toString: () => {
console.log('toString' + "interface instead."); console.log('toString' + "interface instead.")
} }
} }
build() { build() {
...@@ -307,7 +307,7 @@ javaScriptAccess(javaScriptAccess: boolean) ...@@ -307,7 +307,7 @@ javaScriptAccess(javaScriptAccess: boolean)
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
...@@ -336,8 +336,8 @@ mixedMode(mixedMode: MixedMode) ...@@ -336,8 +336,8 @@ mixedMode(mixedMode: MixedMode)
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
@State mode: MixedMode = MixedMode.All; @State mode: MixedMode = MixedMode.All
build() { build() {
Column() { Column() {
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
...@@ -366,7 +366,7 @@ onlineImageAccess(onlineImageAccess: boolean) ...@@ -366,7 +366,7 @@ onlineImageAccess(onlineImageAccess: boolean)
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
...@@ -395,7 +395,7 @@ zoomAccess(zoomAccess: boolean) ...@@ -395,7 +395,7 @@ zoomAccess(zoomAccess: boolean)
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
...@@ -424,7 +424,7 @@ overviewModeAccess(overviewModeAccess: boolean) ...@@ -424,7 +424,7 @@ overviewModeAccess(overviewModeAccess: boolean)
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
...@@ -453,7 +453,7 @@ databaseAccess(databaseAccess: boolean) ...@@ -453,7 +453,7 @@ databaseAccess(databaseAccess: boolean)
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
...@@ -482,7 +482,7 @@ geolocationAccess(geolocationAccess: boolean) ...@@ -482,7 +482,7 @@ geolocationAccess(geolocationAccess: boolean)
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
...@@ -511,8 +511,8 @@ mediaPlayGestureAccess(access: boolean) ...@@ -511,8 +511,8 @@ mediaPlayGestureAccess(access: boolean)
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
@State access: boolean = true; @State access: boolean = true
build() { build() {
Column() { Column() {
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
...@@ -541,7 +541,7 @@ multiWindowAccess(multiWindow: boolean) ...@@ -541,7 +541,7 @@ multiWindowAccess(multiWindow: boolean)
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
...@@ -570,8 +570,8 @@ cacheMode(cacheMode: CacheMode) ...@@ -570,8 +570,8 @@ cacheMode(cacheMode: CacheMode)
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
@State mode: CacheMode = CacheMode.None; @State mode: CacheMode = CacheMode.None
build() { build() {
Column() { Column() {
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
...@@ -600,8 +600,8 @@ textZoomRatio(textZoomRatio: number) ...@@ -600,8 +600,8 @@ textZoomRatio(textZoomRatio: number)
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
@State atio: number = 150; @State atio: number = 150
build() { build() {
Column() { Column() {
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
...@@ -630,8 +630,8 @@ userAgent(userAgent: string) ...@@ -630,8 +630,8 @@ userAgent(userAgent: string)
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
@State userAgent:string = 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36'; @State userAgent:string = 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36'
build() { build() {
Column() { Column() {
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
...@@ -660,8 +660,8 @@ webDebuggingAccess(webDebuggingAccess: boolean) ...@@ -660,8 +660,8 @@ webDebuggingAccess(webDebuggingAccess: boolean)
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
@State webDebuggingAccess: boolean = true; @State webDebuggingAccess: boolean = true
build() { build() {
Column() { Column() {
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
...@@ -706,7 +706,7 @@ onAlert(callback: (event?: { url: string; message: string; result: JsResult }) = ...@@ -706,7 +706,7 @@ onAlert(callback: (event?: { url: string; message: string; result: JsResult }) =
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
...@@ -730,7 +730,7 @@ onAlert(callback: (event?: { url: string; message: string; result: JsResult }) = ...@@ -730,7 +730,7 @@ onAlert(callback: (event?: { url: string; message: string; result: JsResult }) =
event.result.handleCancel() event.result.handleCancel()
} }
}) })
return true; return true
}) })
} }
} }
...@@ -764,14 +764,14 @@ onBeforeUnload(callback: (event?: { url: string; message: string; result: JsResu ...@@ -764,14 +764,14 @@ onBeforeUnload(callback: (event?: { url: string; message: string; result: JsResu
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
.onBeforeUnload((event) => { .onBeforeUnload((event) => {
console.log("event.url:" + event.url); console.log("event.url:" + event.url)
console.log("event.message:" + event.message); console.log("event.message:" + event.message)
AlertDialog.show({ AlertDialog.show({
title: 'onBeforeUnload', title: 'onBeforeUnload',
message: 'text', message: 'text',
...@@ -791,7 +791,7 @@ onBeforeUnload(callback: (event?: { url: string; message: string; result: JsResu ...@@ -791,7 +791,7 @@ onBeforeUnload(callback: (event?: { url: string; message: string; result: JsResu
event.result.handleCancel() event.result.handleCancel()
} }
}) })
return true; return true
}) })
} }
} }
...@@ -825,15 +825,15 @@ onConfirm(callback: (event?: { url: string; message: string; result: JsResult }) ...@@ -825,15 +825,15 @@ onConfirm(callback: (event?: { url: string; message: string; result: JsResult })
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
.onConfirm((event) => { .onConfirm((event) => {
console.log("event.url:" + event.url); console.log("event.url:" + event.url)
console.log("event.message:" + event.message); console.log("event.message:" + event.message)
console.log("event.result:" + event.result); console.log("event.result:" + event.result)
AlertDialog.show({ AlertDialog.show({
title: 'onConfirm', title: 'onConfirm',
message: 'text', message: 'text',
...@@ -853,7 +853,7 @@ onConfirm(callback: (event?: { url: string; message: string; result: JsResult }) ...@@ -853,7 +853,7 @@ onConfirm(callback: (event?: { url: string; message: string; result: JsResult })
event.result.handleCancel() event.result.handleCancel()
} }
}) })
return true; return true
}) })
} }
} }
...@@ -885,15 +885,15 @@ onPrompt(callback: (event?: { url: string; message: string; value: string; resul ...@@ -885,15 +885,15 @@ onPrompt(callback: (event?: { url: string; message: string; value: string; resul
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
.onPrompt((event) => { .onPrompt((event) => {
console.log("url:" + event.url); console.log("url:" + event.url)
console.log("message:" + event.message); console.log("message:" + event.message)
console.log("value:" + event.value); console.log("value:" + event.value)
AlertDialog.show({ AlertDialog.show({
title: 'onPrompt', title: 'onPrompt',
message: 'text', message: 'text',
...@@ -913,7 +913,7 @@ onPrompt(callback: (event?: { url: string; message: string; value: string; resul ...@@ -913,7 +913,7 @@ onPrompt(callback: (event?: { url: string; message: string; value: string; resul
event.result.handleCancel() event.result.handleCancel()
} }
}) })
return true; return true
}) })
} }
} }
...@@ -945,17 +945,17 @@ onConsole(callback: (event?: { message: ConsoleMessage }) => boolean) ...@@ -945,17 +945,17 @@ onConsole(callback: (event?: { message: ConsoleMessage }) => boolean)
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
.onConsole((event) => { .onConsole((event) => {
console.log('getMessage:' + event.message.getMessage()); console.log('getMessage:' + event.message.getMessage())
console.log('getSourceId:' + event.message.getSourceId()); console.log('getSourceId:' + event.message.getSourceId())
console.log('getLineNumber:' + event.message.getLineNumber()); console.log('getLineNumber:' + event.message.getLineNumber())
console.log('getMessageLevel:' + event.message.getMessageLevel()); console.log('getMessageLevel:' + event.message.getMessageLevel())
return false; return false
}) })
} }
} }
...@@ -982,17 +982,17 @@ onDownloadStart(callback: (event?: { url: string, userAgent: string, contentDisp ...@@ -982,17 +982,17 @@ onDownloadStart(callback: (event?: { url: string, userAgent: string, contentDisp
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
.onDownloadStart((event) => { .onDownloadStart((event) => {
console.log('url:' + event.url); console.log('url:' + event.url)
console.log('userAgent:' + event.userAgent); console.log('userAgent:' + event.userAgent)
console.log('contentDisposition:' + event.contentDisposition); console.log('contentDisposition:' + event.contentDisposition)
console.log('contentLength:' + event.contentLength); console.log('contentLength:' + event.contentLength)
console.log('mimetype:' + event.mimetype); console.log('mimetype:' + event.mimetype)
}) })
} }
} }
...@@ -1019,23 +1019,23 @@ onErrorReceive(callback: (event?: { request: WebResourceRequest, error: WebResou ...@@ -1019,23 +1019,23 @@ onErrorReceive(callback: (event?: { request: WebResourceRequest, error: WebResou
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
.onErrorReceive((event) => { .onErrorReceive((event) => {
console.log('getErrorInfo:' + event.error.getErrorInfo()); console.log('getErrorInfo:' + event.error.getErrorInfo())
console.log('getErrorCode:' + event.error.getErrorCode()); console.log('getErrorCode:' + event.error.getErrorCode())
console.log('url:' + event.request.getRequestUrl()); console.log('url:' + event.request.getRequestUrl())
console.log('isMainFrame:' + event.request.isMainFrame()); console.log('isMainFrame:' + event.request.isMainFrame())
console.log('isRedirect:' + event.request.isRedirect()); console.log('isRedirect:' + event.request.isRedirect())
console.log('isRequestGesture:' + event.request.isRequestGesture()); console.log('isRequestGesture:' + event.request.isRequestGesture())
console.log('getRequestHeader_headerKey:' + event.request.getRequestHeader().toString()); console.log('getRequestHeader_headerKey:' + event.request.getRequestHeader().toString())
let result = event.request.getRequestHeader(); let result = event.request.getRequestHeader()
console.log('The request header result size is ' + result.length); console.log('The request header result size is ' + result.length)
for (let i of result) { for (let i of result) {
console.log('The request header key is : ' + i.headerKey + ', value is : ' + i.headerValue); console.log('The request header key is : ' + i.headerKey + ', value is : ' + i.headerValue)
} }
}) })
} }
...@@ -1063,30 +1063,30 @@ onHttpErrorReceive(callback: (event?: { request: WebResourceRequest, response: W ...@@ -1063,30 +1063,30 @@ onHttpErrorReceive(callback: (event?: { request: WebResourceRequest, response: W
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
.onHttpErrorReceive((event) => { .onHttpErrorReceive((event) => {
console.log('url:' + event.request.getRequestUrl()); console.log('url:' + event.request.getRequestUrl())
console.log('isMainFrame:' + event.request.isMainFrame()); console.log('isMainFrame:' + event.request.isMainFrame())
console.log('isRedirect:' + event.request.isRedirect()); console.log('isRedirect:' + event.request.isRedirect())
console.log('isRequestGesture:' + event.request.isRequestGesture()); console.log('isRequestGesture:' + event.request.isRequestGesture())
console.log('getResponseData:' + event.response.getResponseData()); console.log('getResponseData:' + event.response.getResponseData())
console.log('getResponseEncoding:' + event.response.getResponseEncoding()); console.log('getResponseEncoding:' + event.response.getResponseEncoding())
console.log('getResponseMimeType:' + event.response.getResponseMimeType()); console.log('getResponseMimeType:' + event.response.getResponseMimeType())
console.log('getResponseCode:' + event.response.getResponseCode()); console.log('getResponseCode:' + event.response.getResponseCode())
console.log('getReasonMessage:' + event.response.getReasonMessage()); console.log('getReasonMessage:' + event.response.getReasonMessage())
let result = event.request.getRequestHeader(); let result = event.request.getRequestHeader()
console.log('The request header result size is ' + result.length); console.log('The request header result size is ' + result.length)
for (let i of result) { for (let i of result) {
console.log('The request header key is : ' + i.headerKey + ' , value is : ' + i.headerValue); console.log('The request header key is : ' + i.headerKey + ' , value is : ' + i.headerValue)
} }
let resph = event.response.getResponseHeader(); let resph = event.response.getResponseHeader()
console.log('The response header result size is ' + resph.length); console.log('The response header result size is ' + resph.length)
for (let i of resph) { for (let i of resph) {
console.log('The response header key is : ' + i.headerKey + ' , value is : ' + i.headerValue); console.log('The response header key is : ' + i.headerKey + ' , value is : ' + i.headerValue)
} }
}) })
} }
...@@ -1114,13 +1114,13 @@ onPageBegin(callback: (event?: { url: string }) => void) ...@@ -1114,13 +1114,13 @@ onPageBegin(callback: (event?: { url: string }) => void)
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
.onPageBegin((event) => { .onPageBegin((event) => {
console.log('url:' + event.url); console.log('url:' + event.url)
}) })
} }
} }
...@@ -1147,13 +1147,13 @@ onPageEnd(callback: (event?: { url: string }) => void) ...@@ -1147,13 +1147,13 @@ onPageEnd(callback: (event?: { url: string }) => void)
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
.onPageEnd((event) => { .onPageEnd((event) => {
console.log('url:' + event.url); console.log('url:' + event.url)
}) })
} }
} }
...@@ -1179,7 +1179,7 @@ onProgressChange(callback: (event?: { newProgress: number }) => void) ...@@ -1179,7 +1179,7 @@ onProgressChange(callback: (event?: { newProgress: number }) => void)
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
...@@ -1211,7 +1211,7 @@ onTitleReceive(callback: (event?: { title: string }) => void) ...@@ -1211,7 +1211,7 @@ onTitleReceive(callback: (event?: { title: string }) => void)
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
...@@ -1244,13 +1244,13 @@ onRefreshAccessedHistory(callback: (event?: { url: string, isRefreshed: boolean ...@@ -1244,13 +1244,13 @@ onRefreshAccessedHistory(callback: (event?: { url: string, isRefreshed: boolean
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
.onRefreshAccessedHistory((event) => { .onRefreshAccessedHistory((event) => {
console.log('url:' + event.url + ' isReload:' + event.isRefreshed); console.log('url:' + event.url + ' isReload:' + event.isRefreshed)
}) })
} }
} }
...@@ -1276,13 +1276,13 @@ onRenderExited(callback: (event?: { renderExitReason: RenderExitReason }) => voi ...@@ -1276,13 +1276,13 @@ onRenderExited(callback: (event?: { renderExitReason: RenderExitReason }) => voi
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Web({ src: 'chrome://crash/', controller: this.controller }) Web({ src: 'chrome://crash/', controller: this.controller })
.onRenderExited((event) => { .onRenderExited((event) => {
console.log('reason:' + event.renderExitReason); console.log('reason:' + event.renderExitReason)
}) })
} }
} }
...@@ -1315,7 +1315,7 @@ onShowFileSelector(callback: (event?: { result: FileSelectorResult, fileSelector ...@@ -1315,7 +1315,7 @@ onShowFileSelector(callback: (event?: { result: FileSelectorResult, fileSelector
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
...@@ -1338,7 +1338,7 @@ onShowFileSelector(callback: (event?: { result: FileSelectorResult, fileSelector ...@@ -1338,7 +1338,7 @@ onShowFileSelector(callback: (event?: { result: FileSelectorResult, fileSelector
event.result.handleFileList(fileList) event.result.handleFileList(fileList)
} }
}) })
return true; return true
}) })
} }
} }
...@@ -1370,14 +1370,14 @@ onUrlLoadIntercept(callback: (event?: { data:string | WebResourceRequest }) => b ...@@ -1370,14 +1370,14 @@ onUrlLoadIntercept(callback: (event?: { data:string | WebResourceRequest }) => b
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
.onUrlLoadIntercept((event) => { .onUrlLoadIntercept((event) => {
console.log('onUrlLoadIntercept ' + event.data.toString()) console.log('onUrlLoadIntercept ' + event.data.toString())
return true; return true
}) })
} }
} }
...@@ -1409,9 +1409,9 @@ onInterceptRequest(callback: (event?: { request: WebResourceRequest}) => WebReso ...@@ -1409,9 +1409,9 @@ onInterceptRequest(callback: (event?: { request: WebResourceRequest}) => WebReso
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
responseweb: WebResourceResponse = new WebResourceResponse(); responseweb: WebResourceResponse = new WebResourceResponse()
heads:Header[] = new Array(); heads:Header[] = new Array()
@State webdata: string = "<!DOCTYPE html>\n" + @State webdata: string = "<!DOCTYPE html>\n" +
"<html>\n"+ "<html>\n"+
"<head>\n"+ "<head>\n"+
...@@ -1425,7 +1425,7 @@ onInterceptRequest(callback: (event?: { request: WebResourceRequest}) => WebReso ...@@ -1425,7 +1425,7 @@ onInterceptRequest(callback: (event?: { request: WebResourceRequest}) => WebReso
Column() { Column() {
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
.onInterceptRequest((event) => { .onInterceptRequest((event) => {
console.log('url:' + event.request.getRequestUrl()); console.log('url:' + event.request.getRequestUrl())
var head1:Header = { var head1:Header = {
headerKey:"Connection", headerKey:"Connection",
headerValue:"keep-alive" headerValue:"keep-alive"
...@@ -1434,15 +1434,15 @@ onInterceptRequest(callback: (event?: { request: WebResourceRequest}) => WebReso ...@@ -1434,15 +1434,15 @@ onInterceptRequest(callback: (event?: { request: WebResourceRequest}) => WebReso
headerKey:"Cache-Control", headerKey:"Cache-Control",
headerValue:"no-cache" headerValue:"no-cache"
} }
var length = this.heads.push(head1); var length = this.heads.push(head1)
length = this.heads.push(head2); length = this.heads.push(head2)
this.responseweb.setResponseHeader(this.heads); this.responseweb.setResponseHeader(this.heads)
this.responseweb.setResponseData(this.webdata); this.responseweb.setResponseData(this.webdata)
this.responseweb.setResponseEncoding('utf-8'); this.responseweb.setResponseEncoding('utf-8')
this.responseweb.setResponseMimeType('text/html'); this.responseweb.setResponseMimeType('text/html')
this.responseweb.setResponseCode(200); this.responseweb.setResponseCode(200)
this.responseweb.setReasonMessage('OK'); this.responseweb.setReasonMessage('OK')
return this.responseweb; return this.responseweb
}) })
} }
} }
...@@ -1477,8 +1477,8 @@ onHttpAuthRequest(callback: (event?: { handler: HttpAuthHandler, host: string, r ...@@ -1477,8 +1477,8 @@ onHttpAuthRequest(callback: (event?: { handler: HttpAuthHandler, host: string, r
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
httpAuth: boolean = false; httpAuth: boolean = false
build() { build() {
Column() { Column() {
...@@ -1490,13 +1490,13 @@ onHttpAuthRequest(callback: (event?: { handler: HttpAuthHandler, host: string, r ...@@ -1490,13 +1490,13 @@ onHttpAuthRequest(callback: (event?: { handler: HttpAuthHandler, host: string, r
primaryButton: { primaryButton: {
value: 'cancel', value: 'cancel',
action: () => { action: () => {
event.handler.cancel(); event.handler.cancel()
} }
}, },
secondaryButton: { secondaryButton: {
value: 'ok', value: 'ok',
action: () => { action: () => {
this.httpAuth = event.handler.isHttpAuthInfoSaved(); this.httpAuth = event.handler.isHttpAuthInfoSaved()
if (this.httpAuth == false) { if (this.httpAuth == false) {
web_webview.WebDataBase.saveHttpAuthCredentials( web_webview.WebDataBase.saveHttpAuthCredentials(
event.host, event.host,
...@@ -1504,15 +1504,15 @@ onHttpAuthRequest(callback: (event?: { handler: HttpAuthHandler, host: string, r ...@@ -1504,15 +1504,15 @@ onHttpAuthRequest(callback: (event?: { handler: HttpAuthHandler, host: string, r
"2222", "2222",
"2222" "2222"
) )
event.handler.cancel(); event.handler.cancel()
} }
} }
}, },
cancel: () => { cancel: () => {
event.handler.cancel(); event.handler.cancel()
} }
}) })
return true; return true
}) })
} }
} }
...@@ -1539,7 +1539,7 @@ onSslErrorEventReceive(callback: (event: { handler: SslErrorHandler, error: SslE ...@@ -1539,7 +1539,7 @@ onSslErrorEventReceive(callback: (event: { handler: SslErrorHandler, error: SslE
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
...@@ -1551,20 +1551,20 @@ onSslErrorEventReceive(callback: (event: { handler: SslErrorHandler, error: SslE ...@@ -1551,20 +1551,20 @@ onSslErrorEventReceive(callback: (event: { handler: SslErrorHandler, error: SslE
primaryButton: { primaryButton: {
value: 'confirm', value: 'confirm',
action: () => { action: () => {
event.handler.handleConfirm(); event.handler.handleConfirm()
} }
}, },
secondaryButton: { secondaryButton: {
value: 'cancel', value: 'cancel',
action: () => { action: () => {
event.handler.handleCancel(); event.handler.handleCancel()
} }
}, },
cancel: () => { cancel: () => {
event.handler.handleCancel(); event.handler.handleCancel()
} }
}) })
return true; return true
}) })
} }
} }
...@@ -1594,7 +1594,7 @@ onClientAuthenticationRequest(callback: (event: {handler : ClientAuthenticationH ...@@ -1594,7 +1594,7 @@ onClientAuthenticationRequest(callback: (event: {handler : ClientAuthenticationH
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
...@@ -1606,20 +1606,20 @@ onClientAuthenticationRequest(callback: (event: {handler : ClientAuthenticationH ...@@ -1606,20 +1606,20 @@ onClientAuthenticationRequest(callback: (event: {handler : ClientAuthenticationH
primaryButton: { primaryButton: {
value: 'confirm', value: 'confirm',
action: () => { action: () => {
event.handler.confirm("/system/etc/user.pk8", "/system/etc/chain-user.pem"); event.handler.confirm("/system/etc/user.pk8", "/system/etc/chain-user.pem")
} }
}, },
secondaryButton: { secondaryButton: {
value: 'cancel', value: 'cancel',
action: () => { action: () => {
event.handler.cancel(); event.handler.cancel()
} }
}, },
cancel: () => { cancel: () => {
event.handler.ignore(); event.handler.ignore()
} }
}) })
return true; return true
}) })
} }
} }
...@@ -1645,7 +1645,7 @@ onPermissionRequest(callback: (event?: { request: PermissionRequest }) => void) ...@@ -1645,7 +1645,7 @@ onPermissionRequest(callback: (event?: { request: PermissionRequest }) => void)
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
...@@ -1656,17 +1656,17 @@ onPermissionRequest(callback: (event?: { request: PermissionRequest }) => void) ...@@ -1656,17 +1656,17 @@ onPermissionRequest(callback: (event?: { request: PermissionRequest }) => void)
primaryButton: { primaryButton: {
value: 'deny', value: 'deny',
action: () => { action: () => {
event.request.deny(); event.request.deny()
} }
}, },
secondaryButton: { secondaryButton: {
value: 'onConfirm', value: 'onConfirm',
action: () => { action: () => {
event.request.grant(event.request.getAccessibleResource()); event.request.grant(event.request.getAccessibleResource())
} }
}, },
cancel: () => { cancel: () => {
event.request.deny(); event.request.deny()
} }
}) })
}) })
...@@ -1701,14 +1701,14 @@ onContextMenuShow(callback: (event?: { param: WebContextMenuParam, result: WebCo ...@@ -1701,14 +1701,14 @@ onContextMenuShow(callback: (event?: { param: WebContextMenuParam, result: WebCo
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
.onContextMenuShow((event) => { .onContextMenuShow((event) => {
console.info("x coord = " + event.param.x()); console.info("x coord = " + event.param.x())
console.info("link url = " + event.param.getLinkUrl()); console.info("link url = " + event.param.getLinkUrl())
return true; return true
}) })
} }
} }
...@@ -1735,13 +1735,13 @@ onScroll(callback: (event: {xOffset: number, yOffset: number}) => void) ...@@ -1735,13 +1735,13 @@ onScroll(callback: (event: {xOffset: number, yOffset: number}) => void)
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
.onScroll((event) => { .onScroll((event) => {
console.info("x = " + event.xOffset); console.info("x = " + event.xOffset)
console.info("y = " + event.yOffset); console.info("y = " + event.yOffset)
}) })
} }
} }
...@@ -1768,7 +1768,7 @@ onGeolocationShow(callback: (event?: { origin: string, geolocation: JsGeolocatio ...@@ -1768,7 +1768,7 @@ onGeolocationShow(callback: (event?: { origin: string, geolocation: JsGeolocatio
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller:WebController = new WebController(); controller:WebController = new WebController()
build() { build() {
Column() { Column() {
Web({ src:'www.example.com', controller:this.controller }) Web({ src:'www.example.com', controller:this.controller })
...@@ -1780,11 +1780,11 @@ onGeolocationShow(callback: (event?: { origin: string, geolocation: JsGeolocatio ...@@ -1780,11 +1780,11 @@ onGeolocationShow(callback: (event?: { origin: string, geolocation: JsGeolocatio
confirm: { confirm: {
value: 'onConfirm', value: 'onConfirm',
action: () => { action: () => {
event.geolocation.invoke(event.origin, true, true); event.geolocation.invoke(event.origin, true, true)
} }
}, },
cancel: () => { cancel: () => {
event.geolocation.invoke(event.origin, false, true); event.geolocation.invoke(event.origin, false, true)
} }
}) })
}) })
...@@ -1812,14 +1812,14 @@ onFullScreenEnter(callback: (event: { handler: FullScreenExitHandler }) => void) ...@@ -1812,14 +1812,14 @@ onFullScreenEnter(callback: (event: { handler: FullScreenExitHandler }) => void)
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller:WebController = new WebController(); controller:WebController = new WebController()
handler: FullScreenExitHandler = null; handler: FullScreenExitHandler = null
build() { build() {
Column() { Column() {
Web({ src:'www.example.com', controller:this.controller }) Web({ src:'www.example.com', controller:this.controller })
.onFullScreenEnter((event) => { .onFullScreenEnter((event) => {
console.log("onFullScreenEnter..."); console.log("onFullScreenEnter...")
this.handler = event.handler; this.handler = event.handler
}) })
} }
} }
...@@ -1845,17 +1845,17 @@ onFullScreenExit(callback: () => void) ...@@ -1845,17 +1845,17 @@ onFullScreenExit(callback: () => void)
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller:WebController = new WebController(); controller:WebController = new WebController()
handler: FullScreenExitHandler = null; handler: FullScreenExitHandler = null
build() { build() {
Column() { Column() {
Web({ src:'www.example.com', controller:this.controller }) Web({ src:'www.example.com', controller:this.controller })
.onFullScreenExit(() => { .onFullScreenExit(() => {
console.log("onFullScreenExit..."); console.log("onFullScreenExit...")
this.handler.exitFullScreen(); this.handler.exitFullScreen()
}) })
.onFullScreenEnter((event) => { .onFullScreenEnter((event) => {
this.handler = event.handler; this.handler = event.handler
}) })
} }
} }
...@@ -1884,15 +1884,15 @@ onWindowNew(callback: (event: {isAlert: boolean, isUserTrigger: boolean, targetU ...@@ -1884,15 +1884,15 @@ onWindowNew(callback: (event: {isAlert: boolean, isUserTrigger: boolean, targetU
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller:WebController = new WebController(); controller:WebController = new WebController()
build() { build() {
Column() { Column() {
Web({ src:'www.example.com', controller: this.controller }) Web({ src:'www.example.com', controller: this.controller })
.multiWindowAccess(true) .multiWindowAccess(true)
.onWindowNew((event) => { .onWindowNew((event) => {
console.log("onWindowNew..."); console.log("onWindowNew...")
var popController: WebController = new WebController(); var popController: WebController = new WebController()
event.handler.setWebController(popController); event.handler.setWebController(popController)
}) })
} }
} }
...@@ -1918,12 +1918,12 @@ onWindowExit(callback: () => void) ...@@ -1918,12 +1918,12 @@ onWindowExit(callback: () => void)
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller:WebController = new WebController(); controller:WebController = new WebController()
build() { build() {
Column() { Column() {
Web({ src:'www.example.com', controller: this.controller }) Web({ src:'www.example.com', controller: this.controller })
.onWindowExit((event) => { .onWindowExit((event) => {
console.log("onWindowExit..."); console.log("onWindowExit...")
}) })
} }
} }
...@@ -2619,13 +2619,13 @@ requestFocus() ...@@ -2619,13 +2619,13 @@ requestFocus()
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('requestFocus') Button('requestFocus')
.onClick(() => { .onClick(() => {
this.controller.requestFocus(); this.controller.requestFocus()
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -2652,14 +2652,14 @@ accessBackward(): boolean ...@@ -2652,14 +2652,14 @@ accessBackward(): boolean
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('accessBackward') Button('accessBackward')
.onClick(() => { .onClick(() => {
let result = this.controller.accessBackward(); let result = this.controller.accessBackward()
console.log('result:' + result); console.log('result:' + result)
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -2686,14 +2686,14 @@ accessForward(): boolean ...@@ -2686,14 +2686,14 @@ accessForward(): boolean
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('accessForward') Button('accessForward')
.onClick(() => { .onClick(() => {
let result = this.controller.accessForward(); let result = this.controller.accessForward()
console.log('result:' + result); console.log('result:' + result)
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -2726,15 +2726,15 @@ accessStep(step: number): boolean ...@@ -2726,15 +2726,15 @@ accessStep(step: number): boolean
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
@State steps: number = 2; @State steps: number = 2
build() { build() {
Column() { Column() {
Button('accessStep') Button('accessStep')
.onClick(() => { .onClick(() => {
let result = this.controller.accessStep(this.steps); let result = this.controller.accessStep(this.steps)
console.log('result:' + result); console.log('result:' + result)
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -2755,13 +2755,13 @@ backward(): void ...@@ -2755,13 +2755,13 @@ backward(): void
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('backward') Button('backward')
.onClick(() => { .onClick(() => {
this.controller.backward(); this.controller.backward()
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -2782,13 +2782,13 @@ forward(): void ...@@ -2782,13 +2782,13 @@ forward(): void
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('forward') Button('forward')
.onClick(() => { .onClick(() => {
this.controller.forward(); this.controller.forward()
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -2815,14 +2815,14 @@ backOrForward(step: number): void ...@@ -2815,14 +2815,14 @@ backOrForward(step: number): void
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
@State step: number = -2; @State step: number = -2
build() { build() {
Column() { Column() {
Button('backOrForward') Button('backOrForward')
.onClick(() => { .onClick(() => {
this.controller.backOrForward(this.step); this.controller.backOrForward(this.step)
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -2849,14 +2849,14 @@ deleteJavaScriptRegister(name: string) ...@@ -2849,14 +2849,14 @@ deleteJavaScriptRegister(name: string)
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
@State name: string = 'Object'; @State name: string = 'Object'
build() { build() {
Column() { Column() {
Button('deleteJavaScriptRegister') Button('deleteJavaScriptRegister')
.onClick(() => { .onClick(() => {
this.controller.deleteJavaScriptRegister(this.name); this.controller.deleteJavaScriptRegister(this.name)
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -2883,14 +2883,14 @@ getHitTest(): HitTestType ...@@ -2883,14 +2883,14 @@ getHitTest(): HitTestType
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('getHitTest') Button('getHitTest')
.onClick(() => { .onClick(() => {
let hitType = this.controller.getHitTest(); let hitType = this.controller.getHitTest()
console.log("hitType: " + hitType); console.log("hitType: " + hitType)
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -2916,15 +2916,15 @@ getHitTestValue(): HitTestValue ...@@ -2916,15 +2916,15 @@ getHitTestValue(): HitTestValue
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('getHitTestValue') Button('getHitTestValue')
.onClick(() => { .onClick(() => {
let hitValue = this.controller.getHitTestValue(); let hitValue = this.controller.getHitTestValue()
console.log("hitType: " + hitValue.getType()); console.log("hitType: " + hitValue.getType())
console.log("extra: " + hitValue.getExtra()); console.log("extra: " + hitValue.getExtra())
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -2950,14 +2950,14 @@ getWebId(): number ...@@ -2950,14 +2950,14 @@ getWebId(): number
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('getWebId') Button('getWebId')
.onClick(() => { .onClick(() => {
let id = this.controller.getWebId(); let id = this.controller.getWebId()
console.log("id: " + id); console.log("id: " + id)
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -2983,14 +2983,14 @@ getTitle(): string ...@@ -2983,14 +2983,14 @@ getTitle(): string
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('getTitle') Button('getTitle')
.onClick(() => { .onClick(() => {
let title = this.controller.getTitle(); let title = this.controller.getTitle()
console.log("title: " + title); console.log("title: " + title)
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -3016,14 +3016,14 @@ getPageHeight(): number ...@@ -3016,14 +3016,14 @@ getPageHeight(): number
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('getPageHeight') Button('getPageHeight')
.onClick(() => { .onClick(() => {
let pageHeight = this.controller.getPageHeight(); let pageHeight = this.controller.getPageHeight()
console.log("pageHeight: " + pageHeight); console.log("pageHeight: " + pageHeight)
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -3049,14 +3049,14 @@ getDefaultUserAgent(): string ...@@ -3049,14 +3049,14 @@ getDefaultUserAgent(): string
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('getDefaultUserAgent') Button('getDefaultUserAgent')
.onClick(() => { .onClick(() => {
let userAgent = this.controller.getDefaultUserAgent(); let userAgent = this.controller.getDefaultUserAgent()
console.log("userAgent: " + userAgent); console.log("userAgent: " + userAgent)
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -3091,7 +3091,7 @@ baseUrl为空时,通过”data“协议加载指定的一段字符串。 ...@@ -3091,7 +3091,7 @@ baseUrl为空时,通过”data“协议加载指定的一段字符串。
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
...@@ -3101,7 +3101,7 @@ baseUrl为空时,通过”data“协议加载指定的一段字符串。 ...@@ -3101,7 +3101,7 @@ baseUrl为空时,通过”data“协议加载指定的一段字符串。
data: "<html><body bgcolor=\"white\">Source:<pre>source</pre></body></html>", data: "<html><body bgcolor=\"white\">Source:<pre>source</pre></body></html>",
mimeType: "text/html", mimeType: "text/html",
encoding: "UTF-8" encoding: "UTF-8"
}); })
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -3133,13 +3133,13 @@ loadUrl(options: { url: string | Resource, headers?: Array\<Header\> }) ...@@ -3133,13 +3133,13 @@ loadUrl(options: { url: string | Resource, headers?: Array\<Header\> })
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('loadUrl') Button('loadUrl')
.onClick(() => { .onClick(() => {
this.controller.loadUrl({ url: 'www.example.com' }); this.controller.loadUrl({ url: 'www.example.com' })
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -3160,13 +3160,13 @@ onActive(): void ...@@ -3160,13 +3160,13 @@ onActive(): void
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('onActive') Button('onActive')
.onClick(() => { .onClick(() => {
this.controller.onActive(); this.controller.onActive()
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -3187,13 +3187,13 @@ onInactive(): void ...@@ -3187,13 +3187,13 @@ onInactive(): void
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('onInactive') Button('onInactive')
.onClick(() => { .onClick(() => {
this.controller.onInactive(); this.controller.onInactive()
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -3219,14 +3219,14 @@ zoom(factor: number): void ...@@ -3219,14 +3219,14 @@ zoom(factor: number): void
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
@State factor: number = 1; @State factor: number = 1
build() { build() {
Column() { Column() {
Button('zoom') Button('zoom')
.onClick(() => { .onClick(() => {
this.controller.zoom(this.factor); this.controller.zoom(this.factor)
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -3252,14 +3252,14 @@ zoomIn(): boolean ...@@ -3252,14 +3252,14 @@ zoomIn(): boolean
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('zoomIn') Button('zoomIn')
.onClick(() => { .onClick(() => {
let result = this.controller.zoomIn(); let result = this.controller.zoomIn()
console.log("result: " + result); console.log("result: " + result)
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -3285,14 +3285,14 @@ zoomOut(): boolean ...@@ -3285,14 +3285,14 @@ zoomOut(): boolean
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('zoomOut') Button('zoomOut')
.onClick(() => { .onClick(() => {
let result = this.controller.zoomOut(); let result = this.controller.zoomOut()
console.log("result: " + result); console.log("result: " + result)
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -3313,13 +3313,13 @@ refresh() ...@@ -3313,13 +3313,13 @@ refresh()
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('refresh') Button('refresh')
.onClick(() => { .onClick(() => {
this.controller.refresh(); this.controller.refresh()
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -3351,10 +3351,10 @@ registerJavaScriptProxy(options: { object: object, name: string, methodList: Arr ...@@ -3351,10 +3351,10 @@ registerJavaScriptProxy(options: { object: object, name: string, methodList: Arr
controller: WebController = new WebController() controller: WebController = new WebController()
testObj = { testObj = {
test: (data) => { test: (data) => {
return "ArkUI Web Component"; return "ArkUI Web Component"
}, },
toString: () => { toString: () => {
console.log('Web Component toString'); console.log('Web Component toString')
} }
} }
build() { build() {
...@@ -3365,7 +3365,7 @@ registerJavaScriptProxy(options: { object: object, name: string, methodList: Arr ...@@ -3365,7 +3365,7 @@ registerJavaScriptProxy(options: { object: object, name: string, methodList: Arr
object: this.testObj, object: this.testObj,
name: "objName", name: "objName",
methodList: ["test", "toString"], methodList: ["test", "toString"],
}); })
}) })
} }
Web({ src: $rawfile('index.html'), controller: this.controller }) Web({ src: $rawfile('index.html'), controller: this.controller })
...@@ -3385,8 +3385,8 @@ registerJavaScriptProxy(options: { object: object, name: string, methodList: Arr ...@@ -3385,8 +3385,8 @@ registerJavaScriptProxy(options: { object: object, name: string, methodList: Arr
</body> </body>
<script type="text/javascript"> <script type="text/javascript">
function htmlTest() { function htmlTest() {
str = objName.test("test function"); str = objName.test("test function")
console.log('objName.test result:'+ str); console.log('objName.test result:'+ str)
} }
</script> </script>
</html> </html>
...@@ -3413,7 +3413,7 @@ runJavaScript(options: { script: string, callback?: (result: string) => void }) ...@@ -3413,7 +3413,7 @@ runJavaScript(options: { script: string, callback?: (result: string) => void })
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
@State webResult: string = '' @State webResult: string = ''
build() { build() {
Column() { Column() {
...@@ -3426,8 +3426,8 @@ runJavaScript(options: { script: string, callback?: (result: string) => void }) ...@@ -3426,8 +3426,8 @@ runJavaScript(options: { script: string, callback?: (result: string) => void })
callback: (result: string)=> { callback: (result: string)=> {
this.webResult = result this.webResult = result
console.info(`The test() return value is: ${result}`) console.info(`The test() return value is: ${result}`)
}}); }})
console.info('url: ', e.url); console.info('url: ', e.url)
}) })
} }
} }
...@@ -3444,7 +3444,7 @@ runJavaScript(options: { script: string, callback?: (result: string) => void }) ...@@ -3444,7 +3444,7 @@ runJavaScript(options: { script: string, callback?: (result: string) => void })
</body> </body>
<script type="text/javascript"> <script type="text/javascript">
function test() { function test() {
console.log('Ark WebComponent'); console.log('Ark WebComponent')
return "This value is from index.html" return "This value is from index.html"
} }
</script> </script>
...@@ -3465,13 +3465,13 @@ stop() ...@@ -3465,13 +3465,13 @@ stop()
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('stop') Button('stop')
.onClick(() => { .onClick(() => {
this.controller.stop(); this.controller.stop()
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -3492,13 +3492,13 @@ clearHistory(): void ...@@ -3492,13 +3492,13 @@ clearHistory(): void
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('clearHistory') Button('clearHistory')
.onClick(() => { .onClick(() => {
this.controller.clearHistory(); this.controller.clearHistory()
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -3519,13 +3519,13 @@ clearSslCache(): void ...@@ -3519,13 +3519,13 @@ clearSslCache(): void
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('clearSslCache') Button('clearSslCache')
.onClick(() => { .onClick(() => {
this.controller.clearSslCache(); this.controller.clearSslCache()
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -3546,13 +3546,13 @@ clearClientAuthenticationCache(): void ...@@ -3546,13 +3546,13 @@ clearClientAuthenticationCache(): void
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('clearClientAuthenticationCache') Button('clearClientAuthenticationCache')
.onClick(() => { .onClick(() => {
this.controller.clearClientAuthenticationCache(); this.controller.clearClientAuthenticationCache()
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -3579,13 +3579,13 @@ getCookieManager(): WebCookie ...@@ -3579,13 +3579,13 @@ getCookieManager(): WebCookie
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('getCookieManager') Button('getCookieManager')
.onClick(() => { .onClick(() => {
let cookieManager = this.controller.getCookieManager(); let cookieManager = this.controller.getCookieManager()
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -3613,13 +3613,13 @@ createWebMessagePorts(): Array\<WebMessagePort\> ...@@ -3613,13 +3613,13 @@ createWebMessagePorts(): Array\<WebMessagePort\>
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
ports: WebMessagePort[] = null; ports: WebMessagePort[] = null
build() { build() {
Column() { Column() {
Button('createWebMessagePorts') Button('createWebMessagePorts')
.onClick(() => { .onClick(() => {
this.ports = this.controller.createWebMessagePorts(); this.ports = this.controller.createWebMessagePorts()
console.log("createWebMessagePorts size:" + this.ports.length) console.log("createWebMessagePorts size:" + this.ports.length)
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
...@@ -3648,10 +3648,10 @@ postMessage(options: { message: WebMessageEvent, uri: string}): void ...@@ -3648,10 +3648,10 @@ postMessage(options: { message: WebMessageEvent, uri: string}): void
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
ports: WebMessagePort[] = null; ports: WebMessagePort[] = null
@State sendFromEts: string = 'Send this message from ets to HTML'; @State sendFromEts: string = 'Send this message from ets to HTML'
@State receivedFromHtml: string = 'Display received message send from HTML'; @State receivedFromHtml: string = 'Display received message send from HTML'
build() { build() {
Column() { Column() {
...@@ -3660,41 +3660,41 @@ postMessage(options: { message: WebMessageEvent, uri: string}): void ...@@ -3660,41 +3660,41 @@ postMessage(options: { message: WebMessageEvent, uri: string}): void
// 输入框的内容发送到HTML // 输入框的内容发送到HTML
TextInput({placeholder: 'Send this message from ets to HTML'}) TextInput({placeholder: 'Send this message from ets to HTML'})
.onChange((value: string) => { .onChange((value: string) => {
this.sendFromEts = value; this.sendFromEts = value
}) })
// 1、创建两个消息端口 // 1、创建两个消息端口
Button('1.CreateWebMessagePorts') Button('1.CreateWebMessagePorts')
.onClick(() => { .onClick(() => {
this.ports = this.controller.createWebMessagePorts(); this.ports = this.controller.createWebMessagePorts()
console.log("createWebMessagePorts size:" + this.ports.length) console.log("createWebMessagePorts size:" + this.ports.length)
}) })
// 2、将其中一个消息端口发送到HTML侧,由HTML侧保存并使用。 // 2、将其中一个消息端口发送到HTML侧,由HTML侧保存并使用。
Button('2.PostMessagePort') Button('2.PostMessagePort')
.onClick(() => { .onClick(() => {
var sendPortArray = new Array(this.ports[1]); var sendPortArray = new Array(this.ports[1])
var msgEvent = new WebMessageEvent(); var msgEvent = new WebMessageEvent()
msgEvent.setData("__init_port__"); msgEvent.setData("__init_port__")
msgEvent.setPorts(sendPortArray); msgEvent.setPorts(sendPortArray)
this.controller.postMessage({message: msgEvent, uri: "*"}); this.controller.postMessage({message: msgEvent, uri: "*"})
}) })
// 3、另一个消息端口在应用侧注册回调事件。 // 3、另一个消息端口在应用侧注册回调事件。
Button('3.RegisterCallback') Button('3.RegisterCallback')
.onClick(() => { .onClick(() => {
this.ports[0].onMessageEvent((result: string) => { this.ports[0].onMessageEvent((result: string) => {
var msg = 'Got msg from HTML: ' + result; var msg = 'Got msg from HTML: ' + result
this.receivedFromHtml = msg; this.receivedFromHtml = msg
}) })
}) })
// 4、使用应用侧的端口给另一个已经发送到HTML的消息端口发送消息。 // 4、使用应用侧的端口给另一个已经发送到HTML的消息端口发送消息。
Button('4.SendDataToHtml5') Button('4.SendDataToHtml5')
.onClick(() => { .onClick(() => {
var msg = new WebMessageEvent(); var msg = new WebMessageEvent()
msg.setData(this.sendFromEts); msg.setData(this.sendFromEts)
this.ports[0].postMessageEvent(msg); this.ports[0].postMessageEvent(msg)
}) })
Web({ src: $rawfile("index.html"), controller: this.controller }) Web({ src: $rawfile("index.html"), controller: this.controller })
.javaScriptAccess(true) .javaScriptAccess(true)
...@@ -3758,12 +3758,12 @@ getUrl(): string ...@@ -3758,12 +3758,12 @@ getUrl(): string
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('getUrl') Button('getUrl')
.onClick(() => { .onClick(() => {
console.log("url: " + this.controller.getUrl()); console.log("url: " + this.controller.getUrl())
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -3826,14 +3826,14 @@ setCookie(url: string, value: string): boolean ...@@ -3826,14 +3826,14 @@ setCookie(url: string, value: string): boolean
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('setCookie') Button('setCookie')
.onClick(() => { .onClick(() => {
let result = this.controller.getCookieManager().setCookie("www.example.com", "a=b"); let result = this.controller.getCookieManager().setCookie("www.example.com", "a=b")
console.log("result: " + result); console.log("result: " + result)
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -3859,14 +3859,14 @@ saveCookieSync(): boolean ...@@ -3859,14 +3859,14 @@ saveCookieSync(): boolean
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('saveCookieSync') Button('saveCookieSync')
.onClick(() => { .onClick(() => {
let result = this.controller.getCookieManager().saveCookieSync(); let result = this.controller.getCookieManager().saveCookieSync()
console.log("result: " + result); console.log("result: " + result)
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -3899,14 +3899,14 @@ getCookie(url: string): string ...@@ -3899,14 +3899,14 @@ getCookie(url: string): string
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('getCookie') Button('getCookie')
.onClick(() => { .onClick(() => {
let value = webview.WebCookieManager.getCookie('www.example.com'); let value = webview.WebCookieManager.getCookie('www.example.com')
console.log("value: " + value); console.log("value: " + value)
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -3940,14 +3940,14 @@ setCookie(url: string, value: string): boolean ...@@ -3940,14 +3940,14 @@ setCookie(url: string, value: string): boolean
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('setCookie') Button('setCookie')
.onClick(() => { .onClick(() => {
let result = web_webview.WebCookieManager.setCookie('www.example.com', 'a=b'); let result = web_webview.WebCookieManager.setCookie('www.example.com', 'a=b')
console.log("result: " + result); console.log("result: " + result)
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -3974,14 +3974,14 @@ saveCookieSync(): boolean ...@@ -3974,14 +3974,14 @@ saveCookieSync(): boolean
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('saveCookieSync') Button('saveCookieSync')
.onClick(() => { .onClick(() => {
let result = web_webview.WebCookieManager.saveCookieSync(); let result = web_webview.WebCookieManager.saveCookieSync()
console.log("result: " + result); console.log("result: " + result)
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -4008,7 +4008,7 @@ saveCookieAsync(): Promise\<boolean> ...@@ -4008,7 +4008,7 @@ saveCookieAsync(): Promise\<boolean>
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
...@@ -4016,11 +4016,11 @@ saveCookieAsync(): Promise\<boolean> ...@@ -4016,11 +4016,11 @@ saveCookieAsync(): Promise\<boolean>
.onClick(() => { .onClick(() => {
web_webview.WebCookieManager.saveCookieAsync() web_webview.WebCookieManager.saveCookieAsync()
.then (function(result) { .then (function(result) {
console.log("result: " + result); console.log("result: " + result)
}) })
.catch(function(error) { .catch(function(error) {
console.error("error: " + error); console.error("error: " + error)
}); })
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -4047,15 +4047,15 @@ saveCookieAsync(callback: AsyncCallback\<boolean>): void ...@@ -4047,15 +4047,15 @@ saveCookieAsync(callback: AsyncCallback\<boolean>): void
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('saveCookieAsync') Button('saveCookieAsync')
.onClick(() => { .onClick(() => {
web_webview.WebCookieManager.saveCookieAsync(function(result) { web_webview.WebCookieManager.saveCookieAsync(function(result) {
console.log("result: " + result); console.log("result: " + result)
}); })
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -4082,14 +4082,14 @@ isCookieAllowed(): boolean ...@@ -4082,14 +4082,14 @@ isCookieAllowed(): boolean
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('isCookieAllowed') Button('isCookieAllowed')
.onClick(() => { .onClick(() => {
let result = web_webview.WebCookieManager.isCookieAllowed(); let result = web_webview.WebCookieManager.isCookieAllowed()
console.log("result: " + result); console.log("result: " + result)
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -4116,13 +4116,13 @@ putAcceptCookieEnabled(accept: boolean): void ...@@ -4116,13 +4116,13 @@ putAcceptCookieEnabled(accept: boolean): void
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('putAcceptCookieEnabled') Button('putAcceptCookieEnabled')
.onClick(() => { .onClick(() => {
web_webview.WebCookieManager.putAcceptCookieEnabled(false); web_webview.WebCookieManager.putAcceptCookieEnabled(false)
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -4149,14 +4149,14 @@ isThirdCookieAllowed(): boolean ...@@ -4149,14 +4149,14 @@ isThirdCookieAllowed(): boolean
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('isThirdPartyCookieAllowed') Button('isThirdPartyCookieAllowed')
.onClick(() => { .onClick(() => {
let result = web_webview.WebCookieManager.isThirdPartyCookieAllowed(); let result = web_webview.WebCookieManager.isThirdPartyCookieAllowed()
console.log("result: " + result); console.log("result: " + result)
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -4183,13 +4183,13 @@ putAcceptThirdPartyCookieEnabled(accept: boolean): void ...@@ -4183,13 +4183,13 @@ putAcceptThirdPartyCookieEnabled(accept: boolean): void
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('putAcceptThirdPartyCookieEnabled') Button('putAcceptThirdPartyCookieEnabled')
.onClick(() => { .onClick(() => {
web_webview.WebCookieManager.putAcceptThirdPartyCookieEnabled(false); web_webview.WebCookieManager.putAcceptThirdPartyCookieEnabled(false)
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -4216,14 +4216,14 @@ existCookie(): boolean ...@@ -4216,14 +4216,14 @@ existCookie(): boolean
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('existCookie') Button('existCookie')
.onClick(() => { .onClick(() => {
let result = web_webview.WebCookieManager.existCookie(); let result = web_webview.WebCookieManager.existCookie()
console.log("result: " + result); console.log("result: " + result)
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -4244,13 +4244,13 @@ deleteEntireCookie(): void ...@@ -4244,13 +4244,13 @@ deleteEntireCookie(): void
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('deleteEntireCookie') Button('deleteEntireCookie')
.onClick(() => { .onClick(() => {
web_webview.WebCookieManager.deleteEntireCookie(); web_webview.WebCookieManager.deleteEntireCookie()
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -4271,13 +4271,13 @@ deleteSessionCookie(): void ...@@ -4271,13 +4271,13 @@ deleteSessionCookie(): void
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('deleteSessionCookie') Button('deleteSessionCookie')
.onClick(() => { .onClick(() => {
webview.WebCookieManager.deleteSessionCookie(); webview.WebCookieManager.deleteSessionCookie()
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -4308,14 +4308,14 @@ static existHttpAuthCredentials(): boolean ...@@ -4308,14 +4308,14 @@ static existHttpAuthCredentials(): boolean
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('existHttpAuthCredentials') Button('existHttpAuthCredentials')
.onClick(() => { .onClick(() => {
let result = web_webview.WebDataBase.existHttpAuthCredentials(); let result = web_webview.WebDataBase.existHttpAuthCredentials()
console.log('result: ' + result); console.log('result: ' + result)
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -4337,13 +4337,13 @@ static deleteHttpAuthCredentials(): void ...@@ -4337,13 +4337,13 @@ static deleteHttpAuthCredentials(): void
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('deleteHttpAuthCredentials') Button('deleteHttpAuthCredentials')
.onClick(() => { .onClick(() => {
web_webview.WebDataBase.deleteHttpAuthCredentials(); web_webview.WebDataBase.deleteHttpAuthCredentials()
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -4378,18 +4378,18 @@ static getHttpAuthCredentials(host: string, realm: string): Array\<string\> ...@@ -4378,18 +4378,18 @@ static getHttpAuthCredentials(host: string, realm: string): Array\<string\>
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
host: string = "www.spincast.org"; host: string = "www.spincast.org"
realm: string = "protected example"; realm: string = "protected example"
username_password: string[]; username_password: string[]
build() { build() {
Column() { Column() {
Button('getHttpAuthCredentials') Button('getHttpAuthCredentials')
.onClick(() => { .onClick(() => {
this.username_password = web_webview.WebDataBase.getHttpAuthCredentials(this.host, this.realm); this.username_password = web_webview.WebDataBase.getHttpAuthCredentials(this.host, this.realm)
console.log('num: ' + this.username_password.length); console.log('num: ' + this.username_password.length)
ForEach(this.username_password, (item) => { ForEach(this.username_password, (item) => {
console.log('username_password: ' + item); console.log('username_password: ' + item)
}, item => item) }, item => item)
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
...@@ -4421,14 +4421,14 @@ static saveHttpAuthCredentials(host: string, realm: string, username: string, pa ...@@ -4421,14 +4421,14 @@ static saveHttpAuthCredentials(host: string, realm: string, username: string, pa
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
host: string = "www.spincast.org"; host: string = "www.spincast.org"
realm: string = "protected example"; realm: string = "protected example"
build() { build() {
Column() { Column() {
Button('saveHttpAuthCredentials') Button('saveHttpAuthCredentials')
.onClick(() => { .onClick(() => {
web_webview.WebDataBase.saveHttpAuthCredentials(this.host, this.realm, "Stromgol", "Laroche"); web_webview.WebDataBase.saveHttpAuthCredentials(this.host, this.realm, "Stromgol", "Laroche")
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -4456,17 +4456,17 @@ static allowGeolocation(origin: string): void ...@@ -4456,17 +4456,17 @@ static allowGeolocation(origin: string): void
```ts ```ts
// xxx.ets // xxx.ets
import web_webview from '@ohos.web.webview'; import web_webview from '@ohos.web.webview'
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
origin: string = "file:///"; origin: string = "file:///"
build() { build() {
Column() { Column() {
Button('allowGeolocation') Button('allowGeolocation')
.onClick(() => { .onClick(() => {
web_webview.GeolocationPermissions.allowGeolocation(this.origin); web_webview.GeolocationPermissions.allowGeolocation(this.origin)
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -4490,17 +4490,17 @@ static deleteGeolocation(origin: string): void ...@@ -4490,17 +4490,17 @@ static deleteGeolocation(origin: string): void
```ts ```ts
// xxx.ets // xxx.ets
import web_webview from '@ohos.web.webview'; import web_webview from '@ohos.web.webview'
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
origin: string = "file:///"; origin: string = "file:///"
build() { build() {
Column() { Column() {
Button('deleteGeolocation') Button('deleteGeolocation')
.onClick(() => { .onClick(() => {
web_webview.GeolocationPermissions.deleteGeolocation(this.origin); web_webview.GeolocationPermissions.deleteGeolocation(this.origin)
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -4518,16 +4518,16 @@ static deleteAllGeolocation(): void ...@@ -4518,16 +4518,16 @@ static deleteAllGeolocation(): void
```ts ```ts
// xxx.ets // xxx.ets
import web_webview from '@ohos.web.webview'; import web_webview from '@ohos.web.webview'
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('deleteAllGeolocation') Button('deleteAllGeolocation')
.onClick(() => { .onClick(() => {
web_webview.GeolocationPermissions.deleteAllGeolocation(); web_webview.GeolocationPermissions.deleteAllGeolocation()
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -4552,23 +4552,23 @@ static getAccessibleGeolocation(origin: string, callback: AsyncCallback\<boolean ...@@ -4552,23 +4552,23 @@ static getAccessibleGeolocation(origin: string, callback: AsyncCallback\<boolean
```ts ```ts
// xxx.ets // xxx.ets
import web_webview from '@ohos.web.webview'; import web_webview from '@ohos.web.webview'
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
origin: string = "file:///"; origin: string = "file:///"
build() { build() {
Column() { Column() {
Button('getAccessibleGeolocationAsync') Button('getAccessibleGeolocationAsync')
.onClick(() => { .onClick(() => {
web_webview.GeolocationPermissions.getAccessibleGeolocation(this.origin, (error, result) => { web_webview.GeolocationPermissions.getAccessibleGeolocation(this.origin, (error, result) => {
if (error) { if (error) {
console.log('getAccessibleGeolocationAsync error: ' + JSON.stringify(error)); console.log('getAccessibleGeolocationAsync error: ' + JSON.stringify(error))
return; return
} }
console.log('getAccessibleGeolocationAsync result: ' + result); console.log('getAccessibleGeolocationAsync result: ' + result)
}); })
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -4598,21 +4598,21 @@ static getAccessibleGeolocation(origin: string): Promise\<boolean\> ...@@ -4598,21 +4598,21 @@ static getAccessibleGeolocation(origin: string): Promise\<boolean\>
```ts ```ts
// xxx.ets // xxx.ets
import web_webview from '@ohos.web.webview'; import web_webview from '@ohos.web.webview'
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
origin: string = "file:///"; origin: string = "file:///"
build() { build() {
Column() { Column() {
Button('getAccessibleGeolocationPromise') Button('getAccessibleGeolocationPromise')
.onClick(() => { .onClick(() => {
web_webview.GeolocationPermissions.getAccessibleGeolocation(this.origin).then(result => { web_webview.GeolocationPermissions.getAccessibleGeolocation(this.origin).then(result => {
console.log('getAccessibleGeolocationPromise result: ' + result); console.log('getAccessibleGeolocationPromise result: ' + result)
}).catch(error => { }).catch(error => {
console.log('getAccessibleGeolocationPromise error: ' + JSON.stringify(error)); console.log('getAccessibleGeolocationPromise error: ' + JSON.stringify(error))
}); })
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -4636,23 +4636,23 @@ static getStoredGeolocation(callback: AsyncCallback\<Array\<string\>\>): void ...@@ -4636,23 +4636,23 @@ static getStoredGeolocation(callback: AsyncCallback\<Array\<string\>\>): void
```ts ```ts
// xxx.ets // xxx.ets
import web_webview from '@ohos.web.webview'; import web_webview from '@ohos.web.webview'
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('getStoredGeolocationAsync') Button('getStoredGeolocationAsync')
.onClick(() => { .onClick(() => {
web_webview.GeolocationPermissions.getStoredGeolocation((error, origins) => { web_webview.GeolocationPermissions.getStoredGeolocation((error, origins) => {
if (error) { if (error) {
console.log('getStoredGeolocationAsync error: ' + JSON.stringify(error)); console.log('getStoredGeolocationAsync error: ' + JSON.stringify(error))
return; return
} }
let origins_str: string = origins.join(); let origins_str: string = origins.join()
console.log('getStoredGeolocationAsync origins: ' + origins_str); console.log('getStoredGeolocationAsync origins: ' + origins_str)
}); })
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -4682,21 +4682,21 @@ static getStoredGeolocation(): Promise\<Array\<string\>\> ...@@ -4682,21 +4682,21 @@ static getStoredGeolocation(): Promise\<Array\<string\>\>
```ts ```ts
// xxx.ets // xxx.ets
import web_webview from '@ohos.web.webview'; import web_webview from '@ohos.web.webview'
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('getStoredGeolocationPromise') Button('getStoredGeolocationPromise')
.onClick(() => { .onClick(() => {
web_webview.GeolocationPermissions.getStoredGeolocation().then(origins => { web_webview.GeolocationPermissions.getStoredGeolocation().then(origins => {
let origins_str: string = origins.join(); let origins_str: string = origins.join()
console.log('getStoredGeolocationPromise origins: ' + origins_str); console.log('getStoredGeolocationPromise origins: ' + origins_str)
}).catch(error => { }).catch(error => {
console.log('getStoredGeolocationPromise error: ' + JSON.stringify(error)); console.log('getStoredGeolocationPromise error: ' + JSON.stringify(error))
}); })
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -4719,12 +4719,12 @@ static deleteAllData(): void ...@@ -4719,12 +4719,12 @@ static deleteAllData(): void
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('deleteAllData') Button('deleteAllData')
.onClick(() => { .onClick(() => {
web_webview.WebStorage.deleteAllData(); web_webview.WebStorage.deleteAllData()
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
.databaseAccess(true) .databaseAccess(true)
...@@ -4752,13 +4752,13 @@ static deleteOrigin(origin : string): void ...@@ -4752,13 +4752,13 @@ static deleteOrigin(origin : string): void
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
origin: string = "origin"; origin: string = "origin"
build() { build() {
Column() { Column() {
Button('getHttpAuthCredentials') Button('getHttpAuthCredentials')
.onClick(() => { .onClick(() => {
web_webview.WebStorage.deleteOrigin(this.origin); web_webview.WebStorage.deleteOrigin(this.origin)
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
.databaseAccess(true) .databaseAccess(true)
...@@ -4786,21 +4786,21 @@ static getOrigins(callback: AsyncCallback\<Array\<WebStorageOrigin>>) : void ...@@ -4786,21 +4786,21 @@ static getOrigins(callback: AsyncCallback\<Array\<WebStorageOrigin>>) : void
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
origin: string = "origin"; origin: string = "origin"
build() { build() {
Column() { Column() {
Button('getOrigins') Button('getOrigins')
.onClick(() => { .onClick(() => {
web_webview.WebStorage.getOrigins((error, origins) => { web_webview.WebStorage.getOrigins((error, origins) => {
if (error) { if (error) {
console.log('error: ' + error); console.log('error: ' + error)
return; return
} }
for (let i = 0; i < origins.length; i++) { for (let i = 0; i < origins.length; i++) {
console.log('origin: ' + origins[i].origin); console.log('origin: ' + origins[i].origin)
console.log('usage: ' + origins[i].usage); console.log('usage: ' + origins[i].usage)
console.log('quota: ' + origins[i].quota); console.log('quota: ' + origins[i].quota)
} }
}) })
}) })
...@@ -4830,8 +4830,8 @@ static getOrigins() : Promise\<Array\<WebStorageOrigin>> ...@@ -4830,8 +4830,8 @@ static getOrigins() : Promise\<Array\<WebStorageOrigin>>
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
origin: string = "origin"; origin: string = "origin"
build() { build() {
Column() { Column() {
Button('getOrigins') Button('getOrigins')
...@@ -4839,13 +4839,13 @@ static getOrigins() : Promise\<Array\<WebStorageOrigin>> ...@@ -4839,13 +4839,13 @@ static getOrigins() : Promise\<Array\<WebStorageOrigin>>
web_webview.WebStorage.getOrigins() web_webview.WebStorage.getOrigins()
.then(origins => { .then(origins => {
for (let i = 0; i < origins.length; i++) { for (let i = 0; i < origins.length; i++) {
console.log('origin: ' + origins[i].origin); console.log('origin: ' + origins[i].origin)
console.log('usage: ' + origins[i].usage); console.log('usage: ' + origins[i].usage)
console.log('quota: ' + origins[i].quota); console.log('quota: ' + origins[i].quota)
} }
}) })
.catch(error => { .catch(error => {
console.log('error: ' + error); console.log('error: ' + error)
}) })
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
...@@ -4875,18 +4875,18 @@ static getOriginQuota(origin : string, callback : AsyncCallback\<number>) : void ...@@ -4875,18 +4875,18 @@ static getOriginQuota(origin : string, callback : AsyncCallback\<number>) : void
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
origin: string = "origin"; origin: string = "origin"
build() { build() {
Column() { Column() {
Button('getOriginQuota') Button('getOriginQuota')
.onClick(() => { .onClick(() => {
web_webview.WebStorage.getOriginQuota(this.origin, (error, quota) => { web_webview.WebStorage.getOriginQuota(this.origin, (error, quota) => {
if (error) { if (error) {
console.log('error: ' + error); console.log('error: ' + error)
return; return
} }
console.log('quota: ' + quota); console.log('quota: ' + quota)
}) })
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
...@@ -4922,17 +4922,17 @@ static getOriginQuota(origin : string) : Promise\<number> ...@@ -4922,17 +4922,17 @@ static getOriginQuota(origin : string) : Promise\<number>
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController();
origin: string = "origin"; origin: string = "origin"
build() { build() {
Column() { Column() {
Button('getOriginQuota') Button('getOriginQuota')
.onClick(() => { .onClick(() => {
web_webview.WebStorage.getOriginQuota(this.origin) web_webview.WebStorage.getOriginQuota(this.origin)
.then(quota => { .then(quota => {
console.log('quota: ' + quota); console.log('quota: ' + quota)
}) })
.catch(error => { .catch(error => {
console.log('error: ' + error); console.log('error: ' + error)
}) })
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
...@@ -4963,17 +4963,17 @@ static getOriginUsage(origin : string, callback : AsyncCallback\<number>) : void ...@@ -4963,17 +4963,17 @@ static getOriginUsage(origin : string, callback : AsyncCallback\<number>) : void
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController();
origin: string = "origin"; origin: string = "origin"
build() { build() {
Column() { Column() {
Button('getOriginUsage') Button('getOriginUsage')
.onClick(() => { .onClick(() => {
web_webview.WebStorage.getOriginUsage(this.origin, (error, usage) => { web_webview.WebStorage.getOriginUsage(this.origin, (error, usage) => {
if (error) { if (error) {
console.log('error: ' + error); console.log('error: ' + error)
return; return
} }
console.log('usage: ' + usage); console.log('usage: ' + usage)
}) })
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
...@@ -5009,17 +5009,17 @@ static getOriginUsage(origin : string) : Promise\<number> ...@@ -5009,17 +5009,17 @@ static getOriginUsage(origin : string) : Promise\<number>
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController();
origin: string = "origin"; origin: string = "origin"
build() { build() {
Column() { Column() {
Button('getOriginQuota') Button('getOriginQuota')
.onClick(() => { .onClick(() => {
web_webview.WebStorage.getOriginUsage(this.origin) web_webview.WebStorage.getOriginUsage(this.origin)
.then(usage => { .then(usage => {
console.log('usage: ' + usage); console.log('usage: ' + usage)
}) })
.catch(error => { .catch(error => {
console.log('error: ' + error); console.log('error: ' + error)
}) })
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
...@@ -5047,27 +5047,27 @@ searchAllAsync(searchString: string): void ...@@ -5047,27 +5047,27 @@ searchAllAsync(searchString: string): void
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
@State searchString: string = "xxx"; @State searchString: string = "xxx"
build() { build() {
Column() { Column() {
Button('searchString') Button('searchString')
.onClick(() => { .onClick(() => {
this.controller.searchAllAsync(this.searchString); this.controller.searchAllAsync(this.searchString)
}) })
Button('clearMatches') Button('clearMatches')
.onClick(() => { .onClick(() => {
this.controller.clearMatches(); this.controller.clearMatches()
}) })
Button('searchNext') Button('searchNext')
.onClick(() => { .onClick(() => {
this.controller.searchNext(true); this.controller.searchNext(true)
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
.onSearchResultReceive(ret => { .onSearchResultReceive(ret => {
console.log("on search result receive:" + "[cur]" + ret.activeMatchOrdinal + console.log("on search result receive:" + "[cur]" + ret.activeMatchOrdinal +
"[total]" + ret.numberOfMatches + "[isDone]"+ ret.isDoneCounting); "[total]" + ret.numberOfMatches + "[isDone]"+ ret.isDoneCounting)
}) })
} }
} }
...@@ -5087,13 +5087,13 @@ clearMatches(): void ...@@ -5087,13 +5087,13 @@ clearMatches(): void
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('clearMatches') Button('clearMatches')
.onClick(() => { .onClick(() => {
this.controller.clearMatches(); this.controller.clearMatches()
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -5121,13 +5121,13 @@ searchNext(forward: boolean): void ...@@ -5121,13 +5121,13 @@ searchNext(forward: boolean): void
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('searchNext') Button('searchNext')
.onClick(() => { .onClick(() => {
this.controller.searchNext(true); this.controller.searchNext(true)
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -5156,14 +5156,14 @@ onSearchResultReceive(callback: (event?: {activeMatchOrdinal: number, numberOfMa ...@@ -5156,14 +5156,14 @@ onSearchResultReceive(callback: (event?: {activeMatchOrdinal: number, numberOfMa
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
.onSearchResultReceive(ret => { .onSearchResultReceive(ret => {
console.log("on search result receive:" + "[cur]" + ret.activeMatchOrdinal + console.log("on search result receive:" + "[cur]" + ret.activeMatchOrdinal +
"[total]" + ret.numberOfMatches + "[isDone]"+ ret.isDoneCounting); "[total]" + ret.numberOfMatches + "[isDone]"+ ret.isDoneCounting)
}) })
} }
} }
...@@ -5290,17 +5290,17 @@ storeWebArchive(baseName: string, autoName: boolean, callback: AsyncCallback<str ...@@ -5290,17 +5290,17 @@ storeWebArchive(baseName: string, autoName: boolean, callback: AsyncCallback<str
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
build() { build() {
Column() { Column() {
Button('saveWebArchive') Button('saveWebArchive')
.onClick(() => { .onClick(() => {
let webAsyncController = new web_webview.WebAsyncController(this.controller); let webAsyncController = new web_webview.WebAsyncController(this.controller)
webAsyncController.storeWebArchive("/data/storage/el2/base/", true, (filename) => { webAsyncController.storeWebArchive("/data/storage/el2/base/", true, (filename) => {
if (filename != null) { if (filename != null) {
console.info(`save web archive success: ${filename}`) console.info(`save web archive success: ${filename}`)
} }
}); })
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -5381,16 +5381,16 @@ postMessageEvent(message: WebMessageEvent): void ...@@ -5381,16 +5381,16 @@ postMessageEvent(message: WebMessageEvent): void
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
ports: WebMessagePort[] = null; ports: WebMessagePort[] = null
build() { build() {
Column() { Column() {
Button('postMessageEvent') Button('postMessageEvent')
.onClick(() => { .onClick(() => {
var msg = new WebMessageEvent(); var msg = new WebMessageEvent()
msg.setData("post message from ets to html5"); msg.setData("post message from ets to html5")
this.ports[0].postMessageEvent(msg); this.ports[0].postMessageEvent(msg)
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -5416,8 +5416,8 @@ onMessageEvent(callback: (result: string) => void): void ...@@ -5416,8 +5416,8 @@ onMessageEvent(callback: (result: string) => void): void
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
ports: WebMessagePort[] = null; ports: WebMessagePort[] = null
build() { build() {
Column() { Column() {
...@@ -5461,9 +5461,9 @@ getData(): string ...@@ -5461,9 +5461,9 @@ getData(): string
Button('getPorts') Button('getPorts')
.onClick(() => { .onClick(() => {
var msgEvent = new WebMessageEvent(); var msgEvent = new WebMessageEvent();
msgEvent.setData("message event data"); msgEvent.setData("message event data")
var messageData = msgEvent.getData(); var messageData = msgEvent.getData()
console.log("message is:" + messageData); console.log("message is:" + messageData)
}) })
} }
} }
...@@ -5488,16 +5488,16 @@ setData(data: string): void ...@@ -5488,16 +5488,16 @@ setData(data: string): void
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
ports: WebMessagePort[] = null; ports: WebMessagePort[] = null
build() { build() {
Column() { Column() {
Button('setData') Button('setData')
.onClick(() => { .onClick(() => {
var msg = new WebMessageEvent(); var msg = new WebMessageEvent()
msg.setData("post message from ets to HTML5"); msg.setData("post message from ets to HTML5")
this.ports[0].postMessageEvent(msg); this.ports[0].postMessageEvent(msg)
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
...@@ -5522,16 +5522,16 @@ getPorts(): Array\<WebMessagePort\> ...@@ -5522,16 +5522,16 @@ getPorts(): Array\<WebMessagePort\>
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
ports: WebMessagePort[] = null; ports: WebMessagePort[] = null
build() { build() {
Column() { Column() {
Button('getPorts') Button('getPorts')
.onClick(() => { .onClick(() => {
var sendPortArray = new Array(this.ports[0]); var sendPortArray = new Array(this.ports[0])
var msgEvent = new WebMessageEvent(); var msgEvent = new WebMessageEvent()
msgEvent.setPorts(sendPortArray); msgEvent.setPorts(sendPortArray)
var getPorts = msgEvent.getPorts(); var getPorts = msgEvent.getPorts()
console.log("Ports is:" + getPorts); console.log("Ports is:" + getPorts)
}) })
} }
} }
...@@ -5556,18 +5556,18 @@ setPorts(ports: Array\<WebMessagePort\>): void ...@@ -5556,18 +5556,18 @@ setPorts(ports: Array\<WebMessagePort\>): void
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: WebController = new WebController(); controller: WebController = new WebController()
ports: WebMessagePort[] = null; ports: WebMessagePort[] = null
build() { build() {
Column() { Column() {
Button('setPorts') Button('setPorts')
.onClick(() => { .onClick(() => {
var sendPortArray = new Array(this.ports[1]); var sendPortArray = new Array(this.ports[1])
var msgEvent = new WebMessageEvent(); var msgEvent = new WebMessageEvent()
msgEvent.setData("__init_ports__"); msgEvent.setData("__init_ports__")
msgEvent.setPorts(sendPortArray); msgEvent.setPorts(sendPortArray)
this.controller.postMessage({message: msgEvent, uri: "*"}); this.controller.postMessage({message: msgEvent, uri: "*"})
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
......
...@@ -107,7 +107,7 @@ getXComponentContext() ...@@ -107,7 +107,7 @@ getXComponentContext()
```ts ```ts
// xxx.ets // xxx.ets
import camera from '@ohos.multimedia.camera'; import camera from '@ohos.multimedia.camera'
@Entry @Entry
@Component @Component
struct PreviewArea { struct PreviewArea {
...@@ -122,9 +122,9 @@ struct PreviewArea { ...@@ -122,9 +122,9 @@ struct PreviewArea {
}) })
.onLoad(() => { .onLoad(() => {
this.xcomponentController.setXComponentSurfaceSize({surfaceWidth:1920,surfaceHeight:1080}); this.xcomponentController.setXComponentSurfaceSize({surfaceWidth:1920,surfaceHeight:1080});
this.surfaceId = this.xcomponentController.getXComponentSurfaceId(); this.surfaceId = this.xcomponentController.getXComponentSurfaceId()
camera.createPreviewOutput(this.surfaceId).then((previewOutput) => { camera.createPreviewOutput(this.surfaceId).then((previewOutput) => {
console.log('Promise returned with the PreviewOutput instance'); console.log('Promise returned with the PreviewOutput instance')
}) })
}) })
.width('640px') .width('640px')
......
...@@ -36,7 +36,7 @@ LongPressGesture(value?: { fingers?: number, repeat?: boolean, duration?: number ...@@ -36,7 +36,7 @@ LongPressGesture(value?: { fingers?: number, repeat?: boolean, duration?: number
@Entry @Entry
@Component @Component
struct LongPressGestureExample { struct LongPressGestureExample {
@State count: number = 0; @State count: number = 0
build() { build() {
Column() { Column() {
...@@ -47,12 +47,12 @@ struct LongPressGestureExample { ...@@ -47,12 +47,12 @@ struct LongPressGestureExample {
// 由于repeat设置为true,长按动作存在时会连续触发,触发间隔为duration(默认值500ms) // 由于repeat设置为true,长按动作存在时会连续触发,触发间隔为duration(默认值500ms)
.onAction((event: GestureEvent) => { .onAction((event: GestureEvent) => {
if (event.repeat) { if (event.repeat) {
this.count++; this.count++
} }
}) })
// 长按动作一结束触发 // 长按动作一结束触发
.onActionEnd(() => { .onActionEnd(() => {
this.count = 0; this.count = 0
}) })
) )
} }
......
...@@ -75,11 +75,11 @@ PanGestureOptions(value?: { fingers?: number; direction?: PanDirection; distance ...@@ -75,11 +75,11 @@ PanGestureOptions(value?: { fingers?: number; direction?: PanDirection; distance
@Entry @Entry
@Component @Component
struct PanGestureExample { struct PanGestureExample {
@State offsetX: number = 0; @State offsetX: number = 0
@State offsetY: number = 0; @State offsetY: number = 0
@State positionX: number = 0; @State positionX: number = 0
@State positionY: number = 0; @State positionY: number = 0
private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.Left | PanDirection.Right }); private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.Left | PanDirection.Right })
build() { build() {
Column() { Column() {
...@@ -96,24 +96,24 @@ struct PanGestureExample { ...@@ -96,24 +96,24 @@ struct PanGestureExample {
.gesture( .gesture(
PanGesture(this.panOption) PanGesture(this.panOption)
.onActionStart((event: GestureEvent) => { .onActionStart((event: GestureEvent) => {
console.info('Pan start'); console.info('Pan start')
}) })
.onActionUpdate((event: GestureEvent) => { .onActionUpdate((event: GestureEvent) => {
this.offsetX = this.positionX + event.offsetX; this.offsetX = this.positionX + event.offsetX
this.offsetY = this.positionY + event.offsetY; this.offsetY = this.positionY + event.offsetY
}) })
.onActionEnd(() => { .onActionEnd(() => {
this.positionX = this.offsetX; this.positionX = this.offsetX
this.positionY = this.offsetY; this.positionY = this.offsetY
console.info('Pan end'); console.info('Pan end')
}) })
) )
Button('修改PanGesture触发条件') Button('修改PanGesture触发条件')
.onClick(() => { .onClick(() => {
// 将PanGesture手势事件触发条件改为双指以任意方向拖动 // 将PanGesture手势事件触发条件改为双指以任意方向拖动
this.panOption.setDirection(PanDirection.All); this.panOption.setDirection(PanDirection.All)
this.panOption.setFingers(2); this.panOption.setFingers(2)
}) })
} }
} }
......
...@@ -36,10 +36,10 @@ PinchGesture(value?: { fingers?: number, distance?: number }) ...@@ -36,10 +36,10 @@ PinchGesture(value?: { fingers?: number, distance?: number })
@Entry @Entry
@Component @Component
struct PinchGestureExample { struct PinchGestureExample {
@State scaleValue: number = 1; @State scaleValue: number = 1
@State pinchValue: number = 1; @State pinchValue: number = 1
@State pinchX: number = 0; @State pinchX: number = 0
@State pinchY: number = 0; @State pinchY: number = 0
build() { build() {
Column() { Column() {
...@@ -57,16 +57,16 @@ struct PinchGestureExample { ...@@ -57,16 +57,16 @@ struct PinchGestureExample {
.gesture( .gesture(
PinchGesture({ fingers: 3 }) PinchGesture({ fingers: 3 })
.onActionStart((event: GestureEvent) => { .onActionStart((event: GestureEvent) => {
console.info('Pinch start'); console.info('Pinch start')
}) })
.onActionUpdate((event: GestureEvent) => { .onActionUpdate((event: GestureEvent) => {
this.scaleValue = this.pinchValue * event.scale; this.scaleValue = this.pinchValue * event.scale
this.pinchX = event.pinchCenterX; this.pinchX = event.pinchCenterX
this.pinchY = event.pinchCenterY; this.pinchY = event.pinchCenterY
}) })
.onActionEnd(() => { .onActionEnd(() => {
this.pinchValue = this.scaleValue; this.pinchValue = this.scaleValue
console.info('Pinch end'); console.info('Pinch end')
}) })
) )
}.width('100%') }.width('100%')
......
...@@ -36,8 +36,8 @@ RotationGesture(value?: { fingers?: number, angle?: number }) ...@@ -36,8 +36,8 @@ RotationGesture(value?: { fingers?: number, angle?: number })
@Entry @Entry
@Component @Component
struct RotationGestureExample { struct RotationGestureExample {
@State angle: number = 0; @State angle: number = 0
@State rotateValue: number = 0; @State rotateValue: number = 0
build() { build() {
Column() { Column() {
...@@ -54,14 +54,14 @@ struct RotationGestureExample { ...@@ -54,14 +54,14 @@ struct RotationGestureExample {
.gesture( .gesture(
RotationGesture() RotationGesture()
.onActionStart((event: GestureEvent) => { .onActionStart((event: GestureEvent) => {
console.info('Rotation start'); console.info('Rotation start')
}) })
.onActionUpdate((event: GestureEvent) => { .onActionUpdate((event: GestureEvent) => {
this.angle = this.rotateValue + event.angle; this.angle = this.rotateValue + event.angle
}) })
.onActionEnd(() => { .onActionEnd(() => {
this.rotateValue = this.angle; this.rotateValue = this.angle
console.info('Rotation end'); console.info('Rotation end')
}) })
) )
}.width('100%') }.width('100%')
......
...@@ -42,8 +42,8 @@ SwipeGesture(value?: { fingers?: number; direction?: SwipeDirection; speed?: num ...@@ -42,8 +42,8 @@ SwipeGesture(value?: { fingers?: number; direction?: SwipeDirection; speed?: num
@Entry @Entry
@Component @Component
struct SwipeGestureExample { struct SwipeGestureExample {
@State rotateAngle: number = 0; @State rotateAngle: number = 0
@State speed: number = 1; @State speed: number = 1
build() { build() {
Column() { Column() {
...@@ -60,8 +60,8 @@ struct SwipeGestureExample { ...@@ -60,8 +60,8 @@ struct SwipeGestureExample {
.gesture( .gesture(
SwipeGesture({ direction: SwipeDirection.Vertical }) SwipeGesture({ direction: SwipeDirection.Vertical })
.onAction((event: GestureEvent) => { .onAction((event: GestureEvent) => {
this.speed = event.speed; this.speed = event.speed
this.rotateAngle = event.angle; this.rotateAngle = event.angle
}) })
) )
}.width('100%') }.width('100%')
......
...@@ -33,7 +33,7 @@ TapGesture(value?: { count?: number, fingers?: number }) ...@@ -33,7 +33,7 @@ TapGesture(value?: { count?: number, fingers?: number })
@Entry @Entry
@Component @Component
struct TapGestureExample { struct TapGestureExample {
@State value: string = ''; @State value: string = ''
build() { build() {
Column() { Column() {
...@@ -42,7 +42,7 @@ struct TapGestureExample { ...@@ -42,7 +42,7 @@ struct TapGestureExample {
.gesture( .gesture(
TapGesture({ count: 2 }) TapGesture({ count: 2 })
.onAction((event: GestureEvent) => { .onAction((event: GestureEvent) => {
this.value = JSON.stringify(event.fingerList[0]); this.value = JSON.stringify(event.fingerList[0])
}) })
) )
Text(this.value) Text(this.value)
......
...@@ -66,8 +66,8 @@ RenderingContextSettings(antialias?: boolean) ...@@ -66,8 +66,8 @@ RenderingContextSettings(antialias?: boolean)
@Entry @Entry
@Component @Component
struct FillStyleExample { struct FillStyleExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -96,8 +96,8 @@ struct FillStyleExample { ...@@ -96,8 +96,8 @@ struct FillStyleExample {
@Entry @Entry
@Component @Component
struct LineWidthExample { struct LineWidthExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -126,8 +126,8 @@ struct LineWidthExample { ...@@ -126,8 +126,8 @@ struct LineWidthExample {
@Entry @Entry
@Component @Component
struct StrokeStyleExample { struct StrokeStyleExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -158,8 +158,8 @@ struct StrokeStyleExample { ...@@ -158,8 +158,8 @@ struct StrokeStyleExample {
@Entry @Entry
@Component @Component
struct LineCapExample { struct LineCapExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -192,8 +192,8 @@ struct LineCapExample { ...@@ -192,8 +192,8 @@ struct LineCapExample {
@Entry @Entry
@Component @Component
struct LineJoinExample { struct LineJoinExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -227,8 +227,8 @@ struct LineJoinExample { ...@@ -227,8 +227,8 @@ struct LineJoinExample {
@Entry @Entry
@Component @Component
struct MiterLimit { struct MiterLimit {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -262,8 +262,8 @@ struct MiterLimit { ...@@ -262,8 +262,8 @@ struct MiterLimit {
@Entry @Entry
@Component @Component
struct Fonts { struct Fonts {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -292,8 +292,8 @@ struct Fonts { ...@@ -292,8 +292,8 @@ struct Fonts {
@Entry @Entry
@Component @Component
struct CanvasExample { struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -337,8 +337,8 @@ struct CanvasExample { ...@@ -337,8 +337,8 @@ struct CanvasExample {
@Entry @Entry
@Component @Component
struct TextBaseline { struct TextBaseline {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -382,8 +382,8 @@ struct TextBaseline { ...@@ -382,8 +382,8 @@ struct TextBaseline {
@Entry @Entry
@Component @Component
struct GlobalAlpha { struct GlobalAlpha {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -415,8 +415,8 @@ struct GlobalAlpha { ...@@ -415,8 +415,8 @@ struct GlobalAlpha {
@Entry @Entry
@Component @Component
struct LineDashOffset { struct LineDashOffset {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -427,8 +427,8 @@ struct LineDashOffset { ...@@ -427,8 +427,8 @@ struct LineDashOffset {
.onReady(() =>{ .onReady(() =>{
this.context.arc(100, 75, 50, 0, 6.28) this.context.arc(100, 75, 50, 0, 6.28)
this.context.setLineDash([10,20]) this.context.setLineDash([10,20])
this.context.lineDashOffset = 10.0; this.context.lineDashOffset = 10.0
this.context.stroke(); this.context.stroke()
}) })
} }
.width('100%') .width('100%')
...@@ -461,8 +461,8 @@ struct LineDashOffset { ...@@ -461,8 +461,8 @@ struct LineDashOffset {
@Entry @Entry
@Component @Component
struct GlobalCompositeOperation { struct GlobalCompositeOperation {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -499,8 +499,8 @@ struct GlobalCompositeOperation { ...@@ -499,8 +499,8 @@ struct GlobalCompositeOperation {
@Entry @Entry
@Component @Component
struct ShadowBlur { struct ShadowBlur {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -531,8 +531,8 @@ struct ShadowBlur { ...@@ -531,8 +531,8 @@ struct ShadowBlur {
@Entry @Entry
@Component @Component
struct ShadowColor { struct ShadowColor {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -563,8 +563,8 @@ struct ShadowColor { ...@@ -563,8 +563,8 @@ struct ShadowColor {
@Entry @Entry
@Component @Component
struct ShadowOffsetX { struct ShadowOffsetX {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -596,8 +596,8 @@ struct ShadowOffsetX { ...@@ -596,8 +596,8 @@ struct ShadowOffsetX {
@Entry @Entry
@Component @Component
struct ShadowOffsetY { struct ShadowOffsetY {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context) Canvas(this.context)
...@@ -628,9 +628,9 @@ struct ShadowOffsetY { ...@@ -628,9 +628,9 @@ struct ShadowOffsetY {
@Entry @Entry
@Component @Component
struct ImageSmoothingEnabled { struct ImageSmoothingEnabled {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg"); private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -677,8 +677,8 @@ fillRect(x: number, y: number, w: number, h: number): void ...@@ -677,8 +677,8 @@ fillRect(x: number, y: number, w: number, h: number): void
@Entry @Entry
@Component @Component
struct FillRect { struct FillRect {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -721,8 +721,8 @@ strokeRect(x: number, y: number, w: number, h: number): void ...@@ -721,8 +721,8 @@ strokeRect(x: number, y: number, w: number, h: number): void
@Entry @Entry
@Component @Component
struct StrokeRect { struct StrokeRect {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -765,8 +765,8 @@ clearRect(x: number, y: number, w: number, h: number): void ...@@ -765,8 +765,8 @@ clearRect(x: number, y: number, w: number, h: number): void
@Entry @Entry
@Component @Component
struct ClearRect { struct ClearRect {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -811,8 +811,8 @@ fillText(text: string, x: number, y: number, maxWidth?: number): void ...@@ -811,8 +811,8 @@ fillText(text: string, x: number, y: number, maxWidth?: number): void
@Entry @Entry
@Component @Component
struct FillText { struct FillText {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -856,8 +856,8 @@ strokeText(text: string, x: number, y: number, maxWidth?:number): void ...@@ -856,8 +856,8 @@ strokeText(text: string, x: number, y: number, maxWidth?:number): void
@Entry @Entry
@Component @Component
struct StrokeText { struct StrokeText {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -925,8 +925,8 @@ measureText(text: string): TextMetrics ...@@ -925,8 +925,8 @@ measureText(text: string): TextMetrics
@Entry @Entry
@Component @Component
struct MeasureText { struct MeasureText {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -968,8 +968,8 @@ stroke(path?: Path2D): void ...@@ -968,8 +968,8 @@ stroke(path?: Path2D): void
@Entry @Entry
@Component @Component
struct Stroke { struct Stroke {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1008,8 +1008,8 @@ beginPath(): void ...@@ -1008,8 +1008,8 @@ beginPath(): void
@Entry @Entry
@Component @Component
struct BeginPath { struct BeginPath {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1055,8 +1055,8 @@ moveTo(x: number, y: number): void ...@@ -1055,8 +1055,8 @@ moveTo(x: number, y: number): void
@Entry @Entry
@Component @Component
struct MoveTo { struct MoveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1100,8 +1100,8 @@ lineTo(x: number, y: number): void ...@@ -1100,8 +1100,8 @@ lineTo(x: number, y: number): void
@Entry @Entry
@Component @Component
struct LineTo { struct LineTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1138,8 +1138,8 @@ closePath(): void ...@@ -1138,8 +1138,8 @@ closePath(): void
@Entry @Entry
@Component @Component
struct ClosePath { struct ClosePath {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1176,7 +1176,7 @@ createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern | nu ...@@ -1176,7 +1176,7 @@ createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern | nu
| 参数 | 类型 | 必填 | 描述 | | 参数 | 类型 | 必填 | 描述 |
| ---------- | -------------------------------------------------- | ---- | ------------------------------------------------------------ | | ---------- | -------------------------------------------------- | ---- | ------------------------------------------------------------ |
| image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 是 | 图源对象,具体参考ImageBitmap对象。 | | image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 是 | 图源对象,具体参考ImageBitmap对象。 |
| repetition | string | 是 | 设置图像重复的方式,取值为:'repeat'、'repeat-x'、&nbsp;'repeat-y'、'no-repeat'。<br/>默认值:'' | | repetition | string | 是 | 设置图像重复的方式,取值为:'repeat'、'repeat-x'、&nbsp'repeat-y'、'no-repeat'。<br/>默认值:'' |
**返回值:** **返回值:**
...@@ -1191,9 +1191,9 @@ createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern | nu ...@@ -1191,9 +1191,9 @@ createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern | nu
@Entry @Entry
@Component @Component
struct CreatePattern { struct CreatePattern {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg"); private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1240,8 +1240,8 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, ...@@ -1240,8 +1240,8 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
@Entry @Entry
@Component @Component
struct BezierCurveTo { struct BezierCurveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1287,8 +1287,8 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void ...@@ -1287,8 +1287,8 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
@Entry @Entry
@Component @Component
struct QuadraticCurveTo { struct QuadraticCurveTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1297,10 +1297,10 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void ...@@ -1297,10 +1297,10 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
this.context.beginPath(); this.context.beginPath()
this.context.moveTo(20, 20); this.context.moveTo(20, 20)
this.context.quadraticCurveTo(100, 100, 200, 20); this.context.quadraticCurveTo(100, 100, 200, 20)
this.context.stroke(); this.context.stroke()
}) })
} }
.width('100%') .width('100%')
...@@ -1336,8 +1336,8 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, ...@@ -1336,8 +1336,8 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
@Entry @Entry
@Component @Component
struct Arc { struct Arc {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1383,8 +1383,8 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void ...@@ -1383,8 +1383,8 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
@Entry @Entry
@Component @Component
struct ArcTo { struct ArcTo {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1393,9 +1393,9 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void ...@@ -1393,9 +1393,9 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
this.context.moveTo(100, 20); this.context.moveTo(100, 20)
this.context.arcTo(150, 20, 150, 70, 50); this.context.arcTo(150, 20, 150, 70, 50)
this.context.stroke(); this.context.stroke()
}) })
} }
.width('100%') .width('100%')
...@@ -1433,8 +1433,8 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number ...@@ -1433,8 +1433,8 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
@Entry @Entry
@Component @Component
struct CanvasExample { struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1479,8 +1479,8 @@ rect(x: number, y: number, w: number, h: number): void ...@@ -1479,8 +1479,8 @@ rect(x: number, y: number, w: number, h: number): void
@Entry @Entry
@Component @Component
struct CanvasExample { struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1522,8 +1522,8 @@ fill(fillRule?: CanvasFillRule): void ...@@ -1522,8 +1522,8 @@ fill(fillRule?: CanvasFillRule): void
@Entry @Entry
@Component @Component
struct Fill { struct Fill {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1574,17 +1574,17 @@ struct Fill { ...@@ -1574,17 +1574,17 @@ struct Fill {
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
let region = new Path2D(); let region = new Path2D()
region.moveTo(30, 90); region.moveTo(30, 90)
region.lineTo(110, 20); region.lineTo(110, 20)
region.lineTo(240, 130); region.lineTo(240, 130)
region.lineTo(60, 130); region.lineTo(60, 130)
region.lineTo(190, 20); region.lineTo(190, 20)
region.lineTo(270, 90); region.lineTo(270, 90)
region.closePath(); region.closePath()
// Fill path // Fill path
this.context.fillStyle = 'green'; this.context.fillStyle = 'green'
this.context.fill(region, "evenodd"); this.context.fill(region, "evenodd")
}) })
} }
.width('100%') .width('100%')
...@@ -1615,8 +1615,8 @@ clip(fillRule?: CanvasFillRule): void ...@@ -1615,8 +1615,8 @@ clip(fillRule?: CanvasFillRule): void
@Entry @Entry
@Component @Component
struct Clip { struct Clip {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1669,9 +1669,9 @@ struct Clip { ...@@ -1669,9 +1669,9 @@ struct Clip {
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
let region = new Path2D(); let region = new Path2D()
region.rect(80,10,20,130); region.rect(80,10,20,130)
region.rect(40,50,100,50); region.rect(40,50,100,50)
this.context.clip(region,"evenodd") this.context.clip(region,"evenodd")
this.context.fillStyle = "rgb(255,0,0)" this.context.fillStyle = "rgb(255,0,0)"
this.context.fillRect(0, 0, this.context.width, this.context.height) this.context.fillRect(0, 0, this.context.width, this.context.height)
...@@ -1739,8 +1739,8 @@ rotate(angle: number): void ...@@ -1739,8 +1739,8 @@ rotate(angle: number): void
@Entry @Entry
@Component @Component
struct Rotate { struct Rotate {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1782,8 +1782,8 @@ scale(x: number, y: number): void ...@@ -1782,8 +1782,8 @@ scale(x: number, y: number): void
@Entry @Entry
@Component @Component
struct Scale { struct Scale {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1838,8 +1838,8 @@ transform方法对应一个变换矩阵,想对一个图形进行变化的时 ...@@ -1838,8 +1838,8 @@ transform方法对应一个变换矩阵,想对一个图形进行变化的时
@Entry @Entry
@Component @Component
struct Transform { struct Transform {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1891,8 +1891,8 @@ setTransform方法使用的参数和transform()方法相同,但setTransform() ...@@ -1891,8 +1891,8 @@ setTransform方法使用的参数和transform()方法相同,但setTransform()
@Entry @Entry
@Component @Component
struct SetTransform { struct SetTransform {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1942,8 +1942,8 @@ translate(x: number, y: number): void ...@@ -1942,8 +1942,8 @@ translate(x: number, y: number): void
@Entry @Entry
@Component @Component
struct Translate { struct Translate {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -1998,9 +1998,9 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sw: number, sh: ...@@ -1998,9 +1998,9 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sw: number, sh:
@Entry @Entry
@Component @Component
struct ImageExample { struct ImageExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private img:ImageBitmap = new ImageBitmap("common/images/example.jpg"); private img:ImageBitmap = new ImageBitmap("common/images/example.jpg")
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -2009,7 +2009,7 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sw: number, sh: ...@@ -2009,7 +2009,7 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sw: number, sh:
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
this.context.drawImage( this.img,0,0,500,500,0,0,400,200); this.context.drawImage( this.img,0,0,500,500,0,0,400,200)
}) })
} }
.width('100%') .width('100%')
...@@ -2102,8 +2102,8 @@ getImageData(sx: number, sy: number, sw: number, sh: number): ImageData ...@@ -2102,8 +2102,8 @@ getImageData(sx: number, sy: number, sw: number, sh: number): ImageData
@Entry @Entry
@Component @Component
struct GetImageData { struct GetImageData {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private img:ImageBitmap = new ImageBitmap("/common/images/1234.png") private img:ImageBitmap = new ImageBitmap("/common/images/1234.png")
build() { build() {
...@@ -2113,9 +2113,9 @@ struct GetImageData { ...@@ -2113,9 +2113,9 @@ struct GetImageData {
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
this.context.drawImage(this.img,0,0,130,130); this.context.drawImage(this.img,0,0,130,130)
var imagedata = this.context.getImageData(50,50,130,130); var imagedata = this.context.getImageData(50,50,130,130)
this.context.putImageData(imagedata,150,150); this.context.putImageData(imagedata,150,150)
}) })
} }
.width('100%') .width('100%')
...@@ -2154,8 +2154,8 @@ putImageData(imageData: ImageData, dx: number, dy: number, dirtyX: number, dirty ...@@ -2154,8 +2154,8 @@ putImageData(imageData: ImageData, dx: number, dy: number, dirtyX: number, dirty
@Entry @Entry
@Component @Component
struct PutImageData { struct PutImageData {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -2268,7 +2268,7 @@ struct CanvasGetLineDash { ...@@ -2268,7 +2268,7 @@ struct CanvasGetLineDash {
.onReady(() => { .onReady(() => {
this.context.arc(100, 75, 50, 0, 6.28) this.context.arc(100, 75, 50, 0, 6.28)
this.context.setLineDash([10,20]) this.context.setLineDash([10,20])
this.context.stroke(); this.context.stroke()
let res = this.context.getLineDash() let res = this.context.getLineDash()
}) })
} }
...@@ -2382,7 +2382,7 @@ struct ToDataURL { ...@@ -2382,7 +2382,7 @@ struct ToDataURL {
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
var dataURL = this.context.toDataURL(); var dataURL = this.context.toDataURL()
}) })
} }
.width('100%') .width('100%')
...@@ -2405,8 +2405,8 @@ restore(): void ...@@ -2405,8 +2405,8 @@ restore(): void
@Entry @Entry
@Component @Component
struct CanvasExample { struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -2415,11 +2415,11 @@ restore(): void ...@@ -2415,11 +2415,11 @@ restore(): void
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
this.context.save(); // save the default state this.context.save() // save the default state
this.context.fillStyle = "green"; this.context.fillStyle = "green"
this.context.fillRect(20, 20, 100, 100); this.context.fillRect(20, 20, 100, 100)
this.context.restore(); // restore to the default state this.context.restore() // restore to the default state
this.context.fillRect(150, 75, 100, 100); this.context.fillRect(150, 75, 100, 100)
}) })
} }
.width('100%') .width('100%')
...@@ -2443,8 +2443,8 @@ save(): void ...@@ -2443,8 +2443,8 @@ save(): void
@Entry @Entry
@Component @Component
struct CanvasExample { struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -2453,11 +2453,11 @@ save(): void ...@@ -2453,11 +2453,11 @@ save(): void
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
this.context.save(); // save the default state this.context.save() // save the default state
this.context.fillStyle = "green"; this.context.fillStyle = "green"
this.context.fillRect(20, 20, 100, 100); this.context.fillRect(20, 20, 100, 100)
this.context.restore(); // restore to the default state this.context.restore() // restore to the default state
this.context.fillRect(150, 75, 100, 100); this.context.fillRect(150, 75, 100, 100)
}) })
} }
.width('100%') .width('100%')
...@@ -2490,8 +2490,8 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void ...@@ -2490,8 +2490,8 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void
@Entry @Entry
@Component @Component
struct CreateLinearGradient { struct CreateLinearGradient {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -2541,8 +2541,8 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, ...@@ -2541,8 +2541,8 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
@Entry @Entry
@Component @Component
struct CreateRadialGradient { struct CreateRadialGradient {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......
...@@ -39,12 +39,12 @@ GestureGroup(mode: GestureMode, ...gesture: GestureType[]) ...@@ -39,12 +39,12 @@ GestureGroup(mode: GestureMode, ...gesture: GestureType[])
@Entry @Entry
@Component @Component
struct GestureGroupExample { struct GestureGroupExample {
@State count: number = 0; @State count: number = 0
@State offsetX: number = 0; @State offsetX: number = 0
@State offsetY: number = 0; @State offsetY: number = 0
@State positionX: number = 0; @State positionX: number = 0
@State positionY: number = 0; @State positionY: number = 0
@State borderStyles: BorderStyle = BorderStyle.Solid; @State borderStyles: BorderStyle = BorderStyle.Solid
build() { build() {
Column() { Column() {
...@@ -57,37 +57,37 @@ struct GestureGroupExample { ...@@ -57,37 +57,37 @@ struct GestureGroupExample {
.margin(20) .margin(20)
.border({ width: 3, style: this.borderStyles }) .border({ width: 3, style: this.borderStyles })
.gesture( .gesture(
//以下组合手势为顺序识别,当长按手势事件未正常触发时则不会触发拖动手势事件 // 以下组合手势为顺序识别,当长按手势事件未正常触发时则不会触发拖动手势事件
GestureGroup(GestureMode.Sequence, GestureGroup(GestureMode.Sequence,
LongPressGesture({ repeat: true }) LongPressGesture({ repeat: true })
.onAction((event: GestureEvent) => { .onAction((event: GestureEvent) => {
if (event.repeat) { if (event.repeat) {
this.count++; this.count++
} }
console.info('LongPress onAction'); console.info('LongPress onAction')
}) })
.onActionEnd(() => { .onActionEnd(() => {
console.info('LongPress end'); console.info('LongPress end')
}), }),
PanGesture() PanGesture()
.onActionStart(() => { .onActionStart(() => {
this.borderStyles = BorderStyle.Dashed; this.borderStyles = BorderStyle.Dashed
console.info('pan start'); console.info('pan start')
}) })
.onActionUpdate((event: GestureEvent) => { .onActionUpdate((event: GestureEvent) => {
this.offsetX = this.positionX + event.offsetX; this.offsetX = this.positionX + event.offsetX
this.offsetY = this.positionY + event.offsetY; this.offsetY = this.positionY + event.offsetY
console.info('pan update'); console.info('pan update')
}) })
.onActionEnd(() => { .onActionEnd(() => {
this.positionX = this.offsetX; this.positionX = this.offsetX
this.positionY = this.offsetY; this.positionY = this.offsetY
this.borderStyles = BorderStyle.Solid; this.borderStyles = BorderStyle.Solid
console.info('pan end'); console.info('pan end')
}) })
) )
.onCancel(() => { .onCancel(() => {
console.info('sequence gesture canceled'); console.info('sequence gesture canceled')
}) })
) )
} }
......
...@@ -10,10 +10,10 @@ ImageBitmap对象可以存储canvas渲染的像素数据。 ...@@ -10,10 +10,10 @@ ImageBitmap对象可以存储canvas渲染的像素数据。
## 属性 ## 属性
| 属性 | 类型 | 描述 | | 属性 | 类型 | 描述 |
| -------- | -------- | -------- | | -------- | -------- | -------- |
| width | number | ImageBitmap的像素宽度。 | | width | number | ImageBitmap的像素宽度。 |
| height | number | ImageBitmap的像素高度。 | | height | number | ImageBitmap的像素高度。 |
**示例:** **示例:**
...@@ -22,9 +22,9 @@ ImageBitmap对象可以存储canvas渲染的像素数据。 ...@@ -22,9 +22,9 @@ ImageBitmap对象可以存储canvas渲染的像素数据。
@Entry @Entry
@Component @Component
struct ImageExample { struct ImageExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private img:ImageBitmap = new ImageBitmap("common/images/example.jpg"); private img:ImageBitmap = new ImageBitmap("common/images/example.jpg")
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -33,7 +33,7 @@ ImageBitmap对象可以存储canvas渲染的像素数据。 ...@@ -33,7 +33,7 @@ ImageBitmap对象可以存储canvas渲染的像素数据。
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
this.context.drawImage( this.img,0,0,500,500,0,0,400,200); this.context.drawImage( this.img,0,0,500,500,0,0,400,200)
}) })
} }
.width('100%') .width('100%')
......
...@@ -10,11 +10,11 @@ ImageData对象可以存储canvas渲染的像素数据。 ...@@ -10,11 +10,11 @@ ImageData对象可以存储canvas渲染的像素数据。
## 属性 ## 属性
| 属性 | 类型 | 描述 | | 属性 | 类型 | 描述 |
| -------- | -------- | -------- | | -------- | -------- | -------- |
| width | number | 矩形区域实际像素宽度。 | | width | number | 矩形区域实际像素宽度。 |
| height | number | 矩形区域实际像素高度。 | | height | number | 矩形区域实际像素高度。 |
| data | Uint8ClampedArray | 一维数组,保存了相应的颜色数据,数据值范围为0到255。 | | data | Uint8ClampedArray | 一维数组,保存了相应的颜色数据,数据值范围为0到255。 |
**示例:** **示例:**
...@@ -23,8 +23,8 @@ ImageData对象可以存储canvas渲染的像素数据。 ...@@ -23,8 +23,8 @@ ImageData对象可以存储canvas渲染的像素数据。
@Entry @Entry
@Component @Component
struct Translate { struct Translate {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private img:ImageBitmap = new ImageBitmap("/common/images/1234.png") private img:ImageBitmap = new ImageBitmap("/common/images/1234.png")
build() { build() {
...@@ -34,9 +34,9 @@ struct Translate { ...@@ -34,9 +34,9 @@ struct Translate {
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
this.context.drawImage(this.img,0,0,130,130); this.context.drawImage(this.img,0,0,130,130)
var imagedata = this.context.getImageData(50,50,130,130); var imagedata = this.context.getImageData(50,50,130,130)
this.context.putImageData(imagedata,150,150); this.context.putImageData(imagedata,150,150)
}) })
} }
.width('100%') .width('100%')
......
...@@ -65,10 +65,10 @@ struct MyComponent { ...@@ -65,10 +65,10 @@ struct MyComponent {
}, },
}) })
.onConnect(() => { .onConnect(() => {
console.log('AbilityComponent connect'); console.log('AbilityComponent connect')
}) })
.onDisconnect(() => { .onDisconnect(() => {
console.log('AbilityComponent disconnect'); console.log('AbilityComponent disconnect')
}) })
} }
} }
......
...@@ -6,10 +6,6 @@ ...@@ -6,10 +6,6 @@
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 > 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 子组件 ## 子组件
可以包含子组件。 可以包含子组件。
...@@ -24,10 +20,10 @@ Counter() ...@@ -24,10 +20,10 @@ Counter()
不支持通用事件和手势, 仅支持如下事件: 不支持通用事件和手势, 仅支持如下事件:
| 名称 | 功能描述 | | 名称 | 功能描述 |
| -------- | -------- | | -------- | -------- |
| onInc(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 监听数值增加事件。 | | onInc(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 监听数值增加事件。 |
| onDec(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 监听数值减少事件。 | | onDec(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 监听数值减少事件。 |
## 示例 ## 示例
......
...@@ -168,8 +168,8 @@ scrollBy(dx: Length, dy: Length): void ...@@ -168,8 +168,8 @@ scrollBy(dx: Length, dy: Length): void
@Entry @Entry
@Component @Component
struct ScrollExample { struct ScrollExample {
scroller: Scroller = new Scroller(); scroller: Scroller = new Scroller()
private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
build() { build() {
Stack({ alignContent: Alignment.TopStart }) { Stack({ alignContent: Alignment.TopStart }) {
...@@ -193,33 +193,33 @@ struct ScrollExample { ...@@ -193,33 +193,33 @@ struct ScrollExample {
.scrollBarWidth(30) // 滚动条宽度 .scrollBarWidth(30) // 滚动条宽度
.edgeEffect(EdgeEffect.None) .edgeEffect(EdgeEffect.None)
.onScroll((xOffset: number, yOffset: number) => { .onScroll((xOffset: number, yOffset: number) => {
console.info(xOffset + ' ' + yOffset); console.info(xOffset + ' ' + yOffset)
}) })
.onScrollEdge((side: Edge) => { .onScrollEdge((side: Edge) => {
console.info('To the edge'); console.info('To the edge')
}) })
.onScrollEnd(() => { .onScrollEnd(() => {
console.info('Scroll Stop'); console.info('Scroll Stop')
}) })
Button('scroll 150') Button('scroll 150')
.onClick(() => { // 点击后下滑指定距离150.0vp .onClick(() => { // 点击后下滑指定距离150.0vp
this.scroller.scrollBy(0,150); this.scroller.scrollBy(0,150)
}) })
.margin({ top: 10, left: 20 }) .margin({ top: 10, left: 20 })
Button('scroll 100') Button('scroll 100')
.onClick(() => { // 点击后滑动到指定位置,即下滑100.0vp的距离 .onClick(() => { // 点击后滑动到指定位置,即下滑100.0vp的距离
this.scroller.scrollTo({ xOffset: 0, yOffset: this.scroller.currentOffset().yOffset + 100 }); this.scroller.scrollTo({ xOffset: 0, yOffset: this.scroller.currentOffset().yOffset + 100 })
}) })
.margin({ top: 60, left: 20 }) .margin({ top: 60, left: 20 })
Button('back top') Button('back top')
.onClick(() => { // 点击后回到顶部 .onClick(() => { // 点击后回到顶部
this.scroller.scrollEdge(Edge.Top); this.scroller.scrollEdge(Edge.Top)
}) })
.margin({ top: 110, left: 20 }) .margin({ top: 110, left: 20 })
Button('next page') Button('next page')
.onClick(() => { // 点击后滑到下一页 .onClick(() => { // 点击后滑到下一页
this.scroller.scrollPage({ next: true }); this.scroller.scrollPage({ next: true })
}) })
.margin({ top: 170, left: 20 }) .margin({ top: 170, left: 20 })
}.width('100%').height('100%').backgroundColor(0xDCDCDC) }.width('100%').height('100%').backgroundColor(0xDCDCDC)
...@@ -235,8 +235,8 @@ struct ScrollExample { ...@@ -235,8 +235,8 @@ struct ScrollExample {
@Component @Component
struct NestedScroll { struct NestedScroll {
@State listPosition: number = 0; // 0代表滚动到List顶部,1代表中间值,2代表滚动到List底部。 @State listPosition: number = 0; // 0代表滚动到List顶部,1代表中间值,2代表滚动到List底部。
private arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; private arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
private scroller: Scroller = new Scroller(); private scroller: Scroller = new Scroller()
build() { build() {
Flex() { Flex() {
...@@ -257,17 +257,17 @@ struct NestedScroll { ...@@ -257,17 +257,17 @@ struct NestedScroll {
} }
.width("100%").height("50%").edgeEffect(EdgeEffect.None) .width("100%").height("50%").edgeEffect(EdgeEffect.None)
.onReachStart(() => { .onReachStart(() => {
this.listPosition = 0; this.listPosition = 0
}) })
.onReachEnd(() => { .onReachEnd(() => {
this.listPosition = 2; this.listPosition = 2
}) })
.onScrollBegin((dx: number, dy: number) => { .onScrollBegin((dx: number, dy: number) => {
if ((this.listPosition == 0 && dy >= 0) || (this.listPosition == 2 && dy <= 0)) { if ((this.listPosition == 0 && dy >= 0) || (this.listPosition == 2 && dy <= 0)) {
this.scroller.scrollBy(0, -dy); this.scroller.scrollBy(0, -dy)
return { dxRemain: dx, dyRemain: 0 }; return { dxRemain: dx, dyRemain: 0 }
} }
this.listPosition = 1; this.listPosition = 1
return { dxRemain: dx, dyRemain: dy }; return { dxRemain: dx, dyRemain: dy };
}) })
......
...@@ -152,12 +152,12 @@ struct ShapeExample { ...@@ -152,12 +152,12 @@ struct ShapeExample {
@Entry @Entry
@Component @Component
struct ShapeMeshExample { struct ShapeMeshExample {
@State columnVal: number = 0; @State columnVal: number = 0
@State rowVal: number = 0; @State rowVal: number = 0
@State count: number = 0; @State count: number = 0
@State verts: Array<number> = []; @State verts: Array<number> = []
@State shapeWidth: number = 600; @State shapeWidth: number = 600
@State shapeHeight: number = 600; @State shapeHeight: number = 600
build() { build() {
Column() { Column() {
...@@ -186,34 +186,34 @@ struct ShapeMeshExample { ...@@ -186,34 +186,34 @@ struct ShapeMeshExample {
.height(this.shapeHeight + 'px') .height(this.shapeHeight + 'px')
// 手指触摸Shape组件时会显示mesh扭曲效果 // 手指触摸Shape组件时会显示mesh扭曲效果
.onTouch((event: TouchEvent) => { .onTouch((event: TouchEvent) => {
var touchX = event.touches[0].x * 2; var touchX = event.touches[0].x * 2
var touchY = event.touches[0].y * 2; var touchY = event.touches[0].y * 2
this.columnVal = 20; this.columnVal = 20
this.rowVal = 20; this.rowVal = 20
this.count = (this.columnVal + 1) * (this.rowVal + 1); this.count = (this.columnVal + 1) * (this.rowVal + 1)
var orig = [this.count * 2]; var orig = [this.count * 2]
var index = 0; var index = 0
for (var i = 0; i <= this.rowVal; i++) { for (var i = 0; i <= this.rowVal; i++) {
var fy = this.shapeWidth * i / this.rowVal; var fy = this.shapeWidth * i / this.rowVal
for (var j = 0; j <= this.columnVal; j++) { for (var j = 0; j <= this.columnVal; j++) {
var fx = this.shapeWidth * j / this.columnVal; var fx = this.shapeWidth * j / this.columnVal
orig[index * 2 + 0] = this.verts[index * 2 + 0] = fx; orig[index * 2 + 0] = this.verts[index * 2 + 0] = fx
orig[index * 2 + 1] = this.verts[index * 2 + 1] = fy; orig[index * 2 + 1] = this.verts[index * 2 + 1] = fy
index++; index++;
} }
} }
for (var k = 0; k < this.count * 2; k += 2) { for (var k = 0; k < this.count * 2; k += 2) {
var dx = touchX - orig[k + 0]; var dx = touchX - orig[k + 0]
var dy = touchY - orig[k + 1]; var dy = touchY - orig[k + 1]
var dd = dx * dx + dy * dy; var dd = dx * dx + dy * dy
var d = Math.sqrt(dd); var d = Math.sqrt(dd)
var pull = 80000 / (dd * d); var pull = 80000 / (dd * d)
if (pull >= 1) { if (pull >= 1) {
this.verts[k + 0] = touchX; this.verts[k + 0] = touchX
this.verts[k + 1] = touchY; this.verts[k + 1] = touchY
} else { } else {
this.verts[k + 0] = orig[k + 0] + dx * pull; this.verts[k + 0] = orig[k + 0] + dx * pull
this.verts[k + 1] = orig[k + 1] + dy * pull; this.verts[k + 1] = orig[k + 1] + dy * pull
} }
} }
}) })
......
...@@ -85,8 +85,8 @@ ...@@ -85,8 +85,8 @@
@Entry @Entry
@Component @Component
struct GestureSettingsExample { struct GestureSettingsExample {
@State priorityTestValue: string = ''; @State priorityTestValue: string = ''
@State parallelTestValue: string = ''; @State parallelTestValue: string = ''
build() { build() {
Column() { Column() {
...@@ -95,7 +95,7 @@ struct GestureSettingsExample { ...@@ -95,7 +95,7 @@ struct GestureSettingsExample {
.gesture( .gesture(
TapGesture() TapGesture()
.onAction(() => { .onAction(() => {
this.priorityTestValue += '\nText'; this.priorityTestValue += '\nText'
})) }))
} }
.height(200) .height(200)
...@@ -107,7 +107,7 @@ struct GestureSettingsExample { ...@@ -107,7 +107,7 @@ struct GestureSettingsExample {
.priorityGesture( .priorityGesture(
TapGesture() TapGesture()
.onAction((event: GestureEvent) => { .onAction((event: GestureEvent) => {
this.priorityTestValue += '\nColumn'; this.priorityTestValue += '\nColumn'
}), GestureMask.IgnoreInternal) }), GestureMask.IgnoreInternal)
Column() { Column() {
...@@ -115,7 +115,7 @@ struct GestureSettingsExample { ...@@ -115,7 +115,7 @@ struct GestureSettingsExample {
.gesture( .gesture(
TapGesture() TapGesture()
.onAction(() => { .onAction(() => {
this.parallelTestValue += '\nText'; this.parallelTestValue += '\nText'
})) }))
} }
.height(200) .height(200)
...@@ -127,7 +127,7 @@ struct GestureSettingsExample { ...@@ -127,7 +127,7 @@ struct GestureSettingsExample {
.parallelGesture( .parallelGesture(
TapGesture() TapGesture()
.onAction((event: GestureEvent) => { .onAction((event: GestureEvent) => {
this.parallelTestValue += '\nColumn'; this.parallelTestValue += '\nColumn'
}), GestureMask.Normal) }), GestureMask.Normal)
} }
} }
......
...@@ -41,13 +41,13 @@ struct TimePickerDialogExample { ...@@ -41,13 +41,13 @@ struct TimePickerDialogExample {
onAccept: (value: TimePickerResult) => { onAccept: (value: TimePickerResult) => {
// 设置selectTime为按下确定按钮时的时间,这样当弹窗再次弹出时显示选中的为上一次确定的时间 // 设置selectTime为按下确定按钮时的时间,这样当弹窗再次弹出时显示选中的为上一次确定的时间
this.selectTime.setHours(value.hour, value.minute) this.selectTime.setHours(value.hour, value.minute)
console.info("TimePickerDialog:onAccept()" + JSON.stringify(value)); console.info("TimePickerDialog:onAccept()" + JSON.stringify(value))
}, },
onCancel: () => { onCancel: () => {
console.info("TimePickerDialog:onCancel()"); console.info("TimePickerDialog:onCancel()")
}, },
onChange: (value: TimePickerResult) => { onChange: (value: TimePickerResult) => {
console.info("TimePickerDialog:onChange()" + JSON.stringify(value)); console.info("TimePickerDialog:onChange()" + JSON.stringify(value))
} }
}) })
}) })
...@@ -59,13 +59,13 @@ struct TimePickerDialogExample { ...@@ -59,13 +59,13 @@ struct TimePickerDialogExample {
useMilitaryTime: true, useMilitaryTime: true,
onAccept: (value: TimePickerResult) => { onAccept: (value: TimePickerResult) => {
this.selectTime.setHours(value.hour, value.minute) this.selectTime.setHours(value.hour, value.minute)
console.info("TimePickerDialog:onAccept()" + JSON.stringify(value)); console.info("TimePickerDialog:onAccept()" + JSON.stringify(value))
}, },
onCancel: () => { onCancel: () => {
console.info("TimePickerDialog:onCancel()"); console.info("TimePickerDialog:onCancel()")
}, },
onChange: (value: TimePickerResult) => { onChange: (value: TimePickerResult) => {
console.info("TimePickerDialog:onChange()" + JSON.stringify(value)); console.info("TimePickerDialog:onChange()" + JSON.stringify(value))
} }
}) })
}) })
......
...@@ -67,8 +67,8 @@ struct FillStyleExample { ...@@ -67,8 +67,8 @@ struct FillStyleExample {
.onReady(() =>{ .onReady(() =>{
this.offContext.fillStyle = '#0000ff' this.offContext.fillStyle = '#0000ff'
this.offContext.fillRect(20, 160, 150, 100) this.offContext.fillRect(20, 160, 150, 100)
var image = this.offContext.transferToImageBitmap(); var image = this.offContext.transferToImageBitmap()
this.context.transferFromImageBitmap(image); this.context.transferFromImageBitmap(image)
}) })
} }
.width('100%') .width('100%')
...@@ -445,8 +445,8 @@ struct LineDashOffset { ...@@ -445,8 +445,8 @@ struct LineDashOffset {
.onReady(() =>{ .onReady(() =>{
this.offContext.arc(100, 75, 50, 0, 6.28) this.offContext.arc(100, 75, 50, 0, 6.28)
this.offContext.setLineDash([10,20]) this.offContext.setLineDash([10,20])
this.offContext.lineDashOffset = 10.0; this.offContext.lineDashOffset = 10.0
this.offContext.stroke(); this.offContext.stroke()
var image = this.offContext.transferToImageBitmap() var image = this.offContext.transferToImageBitmap()
this.context.transferFromImageBitmap(image) this.context.transferFromImageBitmap(image)
}) })
...@@ -1016,7 +1016,7 @@ stroke(path?: Path2D): void ...@@ -1016,7 +1016,7 @@ stroke(path?: Path2D): void
| path | [Path2D](ts-components-canvas-path2d.md) | 否 | null | 需要绘制的Path2D。 | | path | [Path2D](ts-components-canvas-path2d.md) | 否 | null | 需要绘制的Path2D。 |
**示例:** **示例:**
```ts ```ts
// xxx.ets // xxx.ets
@Entry @Entry
...@@ -1373,10 +1373,10 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void ...@@ -1373,10 +1373,10 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
this.offContext.beginPath(); this.offContext.beginPath()
this.offContext.moveTo(20, 20); this.offContext.moveTo(20, 20)
this.offContext.quadraticCurveTo(100, 100, 200, 20); this.offContext.quadraticCurveTo(100, 100, 200, 20)
this.offContext.stroke(); this.offContext.stroke()
var image = this.offContext.transferToImageBitmap() var image = this.offContext.transferToImageBitmap()
this.context.transferFromImageBitmap(image) this.context.transferFromImageBitmap(image)
}) })
...@@ -1475,9 +1475,9 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void ...@@ -1475,9 +1475,9 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
this.offContext.moveTo(100, 20); this.offContext.moveTo(100, 20)
this.offContext.arcTo(150, 20, 150, 70, 50); this.offContext.arcTo(150, 20, 150, 70, 50)
this.offContext.stroke(); this.offContext.stroke()
var image = this.offContext.transferToImageBitmap() var image = this.offContext.transferToImageBitmap()
this.context.transferFromImageBitmap(image) this.context.transferFromImageBitmap(image)
}) })
...@@ -1664,17 +1664,17 @@ struct Fill { ...@@ -1664,17 +1664,17 @@ struct Fill {
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
let region = new Path2D(); let region = new Path2D()
region.moveTo(30, 90); region.moveTo(30, 90)
region.lineTo(110, 20); region.lineTo(110, 20)
region.lineTo(240, 130); region.lineTo(240, 130)
region.lineTo(60, 130); region.lineTo(60, 130)
region.lineTo(190, 20); region.lineTo(190, 20)
region.lineTo(270, 90); region.lineTo(270, 90)
region.closePath(); region.closePath()
// Fill path // Fill path
this.offContext.fillStyle = 'green'; this.offContext.fillStyle = 'green'
this.offContext.fill(region, "evenodd"); this.offContext.fill(region, "evenodd")
var image = this.offContext.transferToImageBitmap() var image = this.offContext.transferToImageBitmap()
this.context.transferFromImageBitmap(image) this.context.transferFromImageBitmap(image)
}) })
...@@ -1766,9 +1766,9 @@ struct Clip { ...@@ -1766,9 +1766,9 @@ struct Clip {
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
let region = new Path2D(); let region = new Path2D()
region.rect(80,10,20,130); region.rect(80,10,20,130)
region.rect(40,50,100,50); region.rect(40,50,100,50)
this.offContext.clip(region,"evenodd") this.offContext.clip(region,"evenodd")
this.offContext.fillStyle = "rgb(255,0,0)" this.offContext.fillStyle = "rgb(255,0,0)"
this.offContext.fillRect(0, 0, 600, 600) this.offContext.fillRect(0, 0, 600, 600)
...@@ -2214,8 +2214,8 @@ getImageData(sx: number, sy: number, sw: number, sh: number): ImageData ...@@ -2214,8 +2214,8 @@ getImageData(sx: number, sy: number, sw: number, sh: number): ImageData
@Entry @Entry
@Component @Component
struct GetImageData { struct GetImageData {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings) private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
private img:ImageBitmap = new ImageBitmap("/common/images/1234.png") private img:ImageBitmap = new ImageBitmap("/common/images/1234.png")
...@@ -2226,9 +2226,9 @@ struct GetImageData { ...@@ -2226,9 +2226,9 @@ struct GetImageData {
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
this.offContext.drawImage(this.img,0,0,130,130); this.offContext.drawImage(this.img,0,0,130,130)
var imagedata = this.offContext.getImageData(50,50,130,130); var imagedata = this.offContext.getImageData(50,50,130,130)
this.offContext.putImageData(imagedata,150,150); this.offContext.putImageData(imagedata,150,150)
var image = this.offContext.transferToImageBitmap() var image = this.offContext.transferToImageBitmap()
this.context.transferFromImageBitmap(image) this.context.transferFromImageBitmap(image)
}) })
...@@ -2330,7 +2330,7 @@ struct SetLineDash { ...@@ -2330,7 +2330,7 @@ struct SetLineDash {
.onReady(() =>{ .onReady(() =>{
this.offContext.arc(100, 75, 50, 0, 6.28) this.offContext.arc(100, 75, 50, 0, 6.28)
this.offContext.setLineDash([10,20]) this.offContext.setLineDash([10,20])
this.offContext.stroke(); this.offContext.stroke()
var image = this.offContext.transferToImageBitmap() var image = this.offContext.transferToImageBitmap()
this.context.transferFromImageBitmap(image) this.context.transferFromImageBitmap(image)
}) })
...@@ -2384,7 +2384,7 @@ struct OffscreenCanvasGetLineDash { ...@@ -2384,7 +2384,7 @@ struct OffscreenCanvasGetLineDash {
.onReady(() => { .onReady(() => {
this.offContext.arc(100, 75, 50, 0, 6.28) this.offContext.arc(100, 75, 50, 0, 6.28)
this.offContext.setLineDash([10,20]) this.offContext.setLineDash([10,20])
this.offContext.stroke(); this.offContext.stroke()
let res = this.offContext.getLineDash() let res = this.offContext.getLineDash()
var image = this.offContext.transferToImageBitmap() var image = this.offContext.transferToImageBitmap()
this.context.transferFromImageBitmap(image) this.context.transferFromImageBitmap(image)
...@@ -2437,7 +2437,7 @@ struct ToDataURL { ...@@ -2437,7 +2437,7 @@ struct ToDataURL {
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
var dataURL = this.offContext.toDataURL(); var dataURL = this.offContext.toDataURL()
}) })
} }
.width('100%') .width('100%')
...@@ -2534,11 +2534,11 @@ struct CanvasExample { ...@@ -2534,11 +2534,11 @@ struct CanvasExample {
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
this.offContext.save(); // save the default state this.offContext.save() // save the default state
this.offContext.fillStyle = "green"; this.offContext.fillStyle = "green"
this.offContext.fillRect(20, 20, 100, 100); this.offContext.fillRect(20, 20, 100, 100)
this.offContext.restore(); // restore to the default state this.offContext.restore() // restore to the default state
this.offContext.fillRect(150, 75, 100, 100); this.offContext.fillRect(150, 75, 100, 100)
var image = this.offContext.transferToImageBitmap() var image = this.offContext.transferToImageBitmap()
this.context.transferFromImageBitmap(image) this.context.transferFromImageBitmap(image)
}) })
...@@ -2575,11 +2575,11 @@ struct CanvasExample { ...@@ -2575,11 +2575,11 @@ struct CanvasExample {
.height('100%') .height('100%')
.backgroundColor('#ffff00') .backgroundColor('#ffff00')
.onReady(() =>{ .onReady(() =>{
this.offContext.save(); // save the default state this.offContext.save() // save the default state
this.offContext.fillStyle = "green"; this.offContext.fillStyle = "green"
this.offContext.fillRect(20, 20, 100, 100); this.offContext.fillRect(20, 20, 100, 100)
this.offContext.restore(); // restore to the default state this.offContext.restore() // restore to the default state
this.offContext.fillRect(150, 75, 100, 100); this.offContext.fillRect(150, 75, 100, 100)
var image = this.offContext.transferToImageBitmap() var image = this.offContext.transferToImageBitmap()
this.context.transferFromImageBitmap(image) this.context.transferFromImageBitmap(image)
}) })
......
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
@Entry @Entry
@Component @Component
struct Index { struct Index {
@State outSetValue: number = 40; @State outSetValue: number = 40
build() { build() {
Row() { Row() {
...@@ -63,8 +63,8 @@ struct Index { ...@@ -63,8 +63,8 @@ struct Index {
}) })
.margin({ top: 30 }) .margin({ top: 30 })
.onChange((value: number, mode: SliderChangeMode) => { .onChange((value: number, mode: SliderChangeMode) => {
this.outSetValue = value; this.outSetValue = value
console.info('value:' + value + 'mode:' + mode.toString()); console.info('value:' + value + 'mode:' + mode.toString())
}) })
} }
.width('100%') .width('100%')
......
...@@ -63,7 +63,7 @@ struct FocusableExample { ...@@ -63,7 +63,7 @@ struct FocusableExample {
.width(165) .width(165)
.height(40) .height(40)
.fontColor(Color.White) .fontColor(Color.White)
.focusOnTouch(true) //该Button组件点击后可获焦 .focusOnTouch(true) // 该Button组件点击后可获焦
Row({ space: 5 }) { Row({ space: 5 }) {
Button() Button()
.width(80) .width(80)
...@@ -73,7 +73,7 @@ struct FocusableExample { ...@@ -73,7 +73,7 @@ struct FocusableExample {
.width(80) .width(80)
.height(40) .height(40)
.fontColor(Color.White) .fontColor(Color.White)
.focusOnTouch(true) //该Button组件点击后可获焦 .focusOnTouch(true) // 该Button组件点击后可获焦
} }
Row({ space: 5 }) { Row({ space: 5 }) {
Button() Button()
...@@ -86,7 +86,7 @@ struct FocusableExample { ...@@ -86,7 +86,7 @@ struct FocusableExample {
.fontColor(Color.White) .fontColor(Color.White)
} }
}.borderWidth(2).borderColor(Color.Red).borderStyle(BorderStyle.Dashed) }.borderWidth(2).borderColor(Color.Red).borderStyle(BorderStyle.Dashed)
.tabIndex(1) //该Column组件为按TAB键走焦的第一个获焦的组件 .tabIndex(1) // 该Column组件为按TAB键走焦的第一个获焦的组件
Column({ space: 5 }) { Column({ space: 5 }) {
Button('Group2') Button('Group2')
.width(165) .width(165)
...@@ -101,7 +101,7 @@ struct FocusableExample { ...@@ -101,7 +101,7 @@ struct FocusableExample {
.width(80) .width(80)
.height(40) .height(40)
.fontColor(Color.White) .fontColor(Color.White)
.groupDefaultFocus(true) //该Button组件上级Column组件获焦时获焦 .groupDefaultFocus(true) // 该Button组件上级Column组件获焦时获焦
} }
Row({ space: 5 }) { Row({ space: 5 }) {
Button() Button()
...@@ -114,14 +114,14 @@ struct FocusableExample { ...@@ -114,14 +114,14 @@ struct FocusableExample {
.fontColor(Color.White) .fontColor(Color.White)
} }
}.borderWidth(2).borderColor(Color.Green).borderStyle(BorderStyle.Dashed) }.borderWidth(2).borderColor(Color.Green).borderStyle(BorderStyle.Dashed)
.tabIndex(2) //该Column组件为按TAB键走焦的第二个获焦的组件 .tabIndex(2) // 该Column组件为按TAB键走焦的第二个获焦的组件
} }
Column({ space: 5 }) { Column({ space: 5 }) {
TextInput({placeholder: 'input', text: this.inputValue}) TextInput({placeholder: 'input', text: this.inputValue})
.onChange((value: string) => { .onChange((value: string) => {
this.inputValue = value this.inputValue = value
}) })
.defaultFocus(true) //该TextInput组件为页面的初始默认焦点 .defaultFocus(true) // 该TextInput组件为页面的初始默认焦点
Button('Group3') Button('Group3')
.width(165) .width(165)
.height(40) .height(40)
...@@ -165,7 +165,7 @@ struct FocusableExample { ...@@ -165,7 +165,7 @@ struct FocusableExample {
.fontColor(Color.White) .fontColor(Color.White)
} }
}.borderWidth(2).borderColor(Color.Orange).borderStyle(BorderStyle.Dashed) }.borderWidth(2).borderColor(Color.Orange).borderStyle(BorderStyle.Dashed)
.tabIndex(3) //该Column组件为按TAB键走焦的第三个获焦的组件 .tabIndex(3) // 该Column组件为按TAB键走焦的第三个获焦的组件
}.alignItems(VerticalAlign.Top) }.alignItems(VerticalAlign.Top)
} }
} }
...@@ -200,7 +200,7 @@ focusControl.requestFocus示例代码: ...@@ -200,7 +200,7 @@ focusControl.requestFocus示例代码:
使用focusContrl.requestFocus接口使指定组件获取焦点。 使用focusContrl.requestFocus接口使指定组件获取焦点。
```ts ```ts
// requestFocus.ets // requestFocus.ets
import prompt from '@system.prompt'; import prompt from '@ohos.prompt'
@Entry @Entry
@Component @Component
...@@ -250,7 +250,7 @@ struct RequestFocusExample { ...@@ -250,7 +250,7 @@ struct RequestFocusExample {
Button("RequestFocus") Button("RequestFocus")
.width(200).height(70).fontColor(Color.White) .width(200).height(70).fontColor(Color.White)
.onClick(() => { .onClick(() => {
var res = focusControl.requestFocus(this.selectId) //使选中的this.selectId的组件获焦 var res = focusControl.requestFocus(this.selectId) // 使选中的this.selectId的组件获焦
if (res) { if (res) {
prompt.showToast({message: 'Request success'}) prompt.showToast({message: 'Request success'})
} else { } else {
......
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
struct BlurEffectsExample { struct BlurEffectsExample {
build() { build() {
Column({ space: 10 }) { Column({ space: 10 }) {
// 对字体进行模糊 // 对字体进行模糊
Text('font blur').fontSize(15).fontColor(0xCCCCCC).width('90%') Text('font blur').fontSize(15).fontColor(0xCCCCCC).width('90%')
Flex({ alignItems: ItemAlign.Center }) { Flex({ alignItems: ItemAlign.Center }) {
Text('original text').margin(10) Text('original text').margin(10)
......
...@@ -20,8 +20,6 @@ ...@@ -20,8 +20,6 @@
| -------------------------| ------------------------------------------------| -----| ----------------------------------------- | | -------------------------| ------------------------------------------------| -----| ----------------------------------------- |
| message | string | 是 | 弹窗信息内容。 | | message | string | 是 | 弹窗信息内容。 |
| placementOnTop | boolean | 否 | 是否在组件上方显示,默认值为false。 | | placementOnTop | boolean | 否 | 是否在组件上方显示,默认值为false。 |
| arrowOffset<sup>9+</sup> | [Length](ts-types.md#length) | 否 | popup箭头在弹窗处的偏移。箭头在气泡上下方时,数值为0表示箭头居最左侧,偏移量为箭头至最左侧的距离,默认居中。箭头在气泡左右侧时,偏移量为箭头至最上侧的距离,默认居中。 |
| showInSubWindow<sup>9+</sup> | boolean | 否 | 是否在子窗口显示气泡,默认值为false。 |
| primaryButton | {<br/>value:&nbsp;string,<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否 | 第一个按钮。<br/>value:&nbsp;弹窗里主按钮的文本。<br/>action:&nbsp;点击主按钮的回调函数。 | | primaryButton | {<br/>value:&nbsp;string,<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否 | 第一个按钮。<br/>value:&nbsp;弹窗里主按钮的文本。<br/>action:&nbsp;点击主按钮的回调函数。 |
| secondaryButton | {<br/>value:&nbsp;string,<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否 | 第二个按钮。<br/>value:&nbsp;弹窗里辅助按钮的文本。<br/>action:&nbsp;点击辅助按钮的回调函数。 | | secondaryButton | {<br/>value:&nbsp;string,<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否 | 第二个按钮。<br/>value:&nbsp;弹窗里辅助按钮的文本。<br/>action:&nbsp;点击辅助按钮的回调函数。 |
| onStateChange | (event:&nbsp;{&nbsp;isVisible:&nbsp;boolean&nbsp;})&nbsp;=&gt;&nbsp;void | 否 | 弹窗状态变化事件回调,参数isVisible为弹窗当前的显示状态。 | | onStateChange | (event:&nbsp;{&nbsp;isVisible:&nbsp;boolean&nbsp;})&nbsp;=&gt;&nbsp;void | 否 | 弹窗状态变化事件回调,参数isVisible为弹窗当前的显示状态。 |
...@@ -34,8 +32,6 @@ ...@@ -34,8 +32,6 @@
| -------------------------| ------------------------- | ---- | ---------------------------------------------------- | | -------------------------| ------------------------- | ---- | ---------------------------------------------------- |
| builder | [CustomBuilder](ts-types.md#custombuilder8) | 是 | 提示气泡内容的构造器。 | | builder | [CustomBuilder](ts-types.md#custombuilder8) | 是 | 提示气泡内容的构造器。 |
| placement | [Placement](ts-appendix-enums.md#placement8) | 否 | 气泡组件优先显示的位置,当前位置显示不下时,会自动调整位置。<br/>默认值:Placement.Bottom | | placement | [Placement](ts-appendix-enums.md#placement8) | 否 | 气泡组件优先显示的位置,当前位置显示不下时,会自动调整位置。<br/>默认值:Placement.Bottom |
| arrowOffset<sup>9+</sup> | [Length](ts-types.md#length) | 否 | popup箭头在弹窗处的偏移。箭头在气泡上下方时,数值为0表示箭头居最左侧,偏移量为箭头至最左侧的距离,默认居中。箭头在气泡左右侧时,偏移量为箭头至最上侧的距离,默认居中。 |
| showInSubWindow<sup>9+</sup> | boolean | 否 | 是否在子窗口显示气泡,默认值为false。 |
| maskColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 提示气泡遮障层的颜色。 | | maskColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 提示气泡遮障层的颜色。 |
| popupColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 提示气泡的颜色。 | | popupColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 提示气泡的颜色。 |
| enableArrow | boolean | 否 | 是否显示箭头。<br/>从API Version 9开始,如果箭头所在方位侧的气泡长度不足以显示下箭头,则会默认不显示箭头。比如:placement设置为Left,但气泡高度小于箭头的宽度(32vp),则实际不会显示箭头。<br/>默认值:true | | enableArrow | boolean | 否 | 是否显示箭头。<br/>从API Version 9开始,如果箭头所在方位侧的气泡长度不足以显示下箭头,则会默认不显示箭头。比如:placement设置为Left,但气泡高度小于箭头的宽度(32vp),则实际不会显示箭头。<br/>默认值:true |
......
...@@ -50,12 +50,12 @@ ...@@ -50,12 +50,12 @@
@Entry @Entry
@Component @Component
struct DragExample { struct DragExample {
@State numbers: string[] = ['one', 'two', 'three', 'four', 'five', 'six']; @State numbers: string[] = ['one', 'two', 'three', 'four', 'five', 'six']
@State text: string = ''; @State text: string = ''
@State bool: boolean = false; @State bool: boolean = false
@State appleVisible: Visibility = Visibility.Visible; @State appleVisible: Visibility = Visibility.Visible
@State orangeVisible: Visibility = Visibility.Visible; @State orangeVisible: Visibility = Visibility.Visible
@State bananaVisible: Visibility = Visibility.Visible; @State bananaVisible: Visibility = Visibility.Visible
// 自定义拖拽过程中显示的内容 // 自定义拖拽过程中显示的内容
@Builder pixelMapBuilder() { @Builder pixelMapBuilder() {
...@@ -87,10 +87,10 @@ struct DragExample { ...@@ -87,10 +87,10 @@ struct DragExample {
.backgroundColor(0xAFEEEE) .backgroundColor(0xAFEEEE)
.visibility(this.appleVisible) .visibility(this.appleVisible)
.onDragStart(() => { .onDragStart(() => {
this.bool = true; this.bool = true
this.text = 'apple'; this.text = 'apple'
this.appleVisible = Visibility.None; this.appleVisible = Visibility.None
return this.pixelMapBuilder; return this.pixelMapBuilder
}) })
Text('orange') Text('orange')
.width('25%') .width('25%')
...@@ -100,10 +100,10 @@ struct DragExample { ...@@ -100,10 +100,10 @@ struct DragExample {
.backgroundColor(0xAFEEEE) .backgroundColor(0xAFEEEE)
.visibility(this.orangeVisible) .visibility(this.orangeVisible)
.onDragStart(() => { .onDragStart(() => {
this.bool = true; this.bool = true
this.text = 'orange'; this.text = 'orange'
this.orangeVisible = Visibility.None; this.orangeVisible = Visibility.None
return this.pixelMapBuilder; return this.pixelMapBuilder
}) })
Text('banana') Text('banana')
.width('25%') .width('25%')
...@@ -113,11 +113,11 @@ struct DragExample { ...@@ -113,11 +113,11 @@ struct DragExample {
.backgroundColor(0xAFEEEE) .backgroundColor(0xAFEEEE)
.visibility(this.bananaVisible) .visibility(this.bananaVisible)
.onDragStart((event: DragEvent, extraParams: string) => { .onDragStart((event: DragEvent, extraParams: string) => {
console.log('Text onDragStart, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY()); console.log('Text onDragStart, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY())
this.bool = true; this.bool = true
this.text = 'banana'; this.text = 'banana'
this.bananaVisible = Visibility.None; this.bananaVisible = Visibility.None
return this.pixelMapBuilder; return this.pixelMapBuilder
}) })
}.padding({ top: 10, bottom: 10 }).margin(10) }.padding({ top: 10, bottom: 10 }).margin(10)
...@@ -147,20 +147,20 @@ struct DragExample { ...@@ -147,20 +147,20 @@ struct DragExample {
.padding(15) .padding(15)
.divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 })
.onDragEnter((event: DragEvent, extraParams: string) => { .onDragEnter((event: DragEvent, extraParams: string) => {
console.log('List onDragEnter, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY()); console.log('List onDragEnter, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY())
}) })
.onDragMove((event: DragEvent, extraParams: string) => { .onDragMove((event: DragEvent, extraParams: string) => {
console.log('List onDragMove, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY()); console.log('List onDragMove, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY())
}) })
.onDragLeave((event: DragEvent, extraParams: string) => { .onDragLeave((event: DragEvent, extraParams: string) => {
console.log('List onDragLeave, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY()); console.log('List onDragLeave, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY())
}) })
.onDrop((event: DragEvent, extraParams: string) => { .onDrop((event: DragEvent, extraParams: string) => {
var jsonString = JSON.parse(extraParams); var jsonString = JSON.parse(extraParams);
if (this.bool) { if (this.bool) {
// 通过splice方法插入元素 // 通过splice方法插入元素
this.numbers.splice(jsonString.insertIndex, 0, this.text); this.numbers.splice(jsonString.insertIndex, 0, this.text)
this.bool = false; this.bool = false
} }
}) })
}.width('100%').height('100%').padding({ top: 20 }).margin({ top: 20 }) }.width('100%').height('100%').padding({ top: 20 }).margin({ top: 20 })
......
...@@ -36,20 +36,20 @@ ...@@ -36,20 +36,20 @@
@Entry @Entry
@Component @Component
struct KeyEventExample { struct KeyEventExample {
@State text: string = ''; @State text: string = ''
@State eventType: string = ''; @State eventType: string = ''
build() { build() {
Column() { Column() {
Button('KeyEvent') Button('KeyEvent')
.onKeyEvent((event: KeyEvent) => { .onKeyEvent((event: KeyEvent) => {
if (event.type === KeyType.Down) { if (event.type === KeyType.Down) {
this.eventType = 'Down'; this.eventType = 'Down'
} }
if (event.type === KeyType.Up) { if (event.type === KeyType.Up) {
this.eventType = 'Up'; this.eventType = 'Up'
} }
this.text = 'KeyType:' + this.eventType + '\nkeyCode:' + event.keyCode + '\nkeyText:' + event.keyText; this.text = 'KeyType:' + this.eventType + '\nkeyCode:' + event.keyCode + '\nkeyText:' + event.keyText
}) })
Text(this.text).padding(15) Text(this.text).padding(15)
}.height(300).width('100%').padding(35) }.height(300).width('100%').padding(35)
......
...@@ -19,32 +19,32 @@ ...@@ -19,32 +19,32 @@
```ts ```ts
// xxx.ets // xxx.ets
import prompt from '@ohos.prompt'; import prompt from '@ohos.prompt'
@Entry @Entry
@Component @Component
struct AppearExample { struct AppearExample {
@State isShow: boolean = true; @State isShow: boolean = true
@State changeAppear: string = 'Hide Text'; @State changeAppear: string = 'Hide Text'
private myText: string = 'Text for onAppear'; private myText: string = 'Text for onAppear'
build() { build() {
Column() { Column() {
Button(this.changeAppear) Button(this.changeAppear)
.onClick(() => { .onClick(() => {
this.isShow = !this.isShow; this.isShow = !this.isShow
}).margin(15) }).margin(15)
if (this.isShow) { if (this.isShow) {
Text(this.myText).fontSize(26).fontWeight(FontWeight.Bold) Text(this.myText).fontSize(26).fontWeight(FontWeight.Bold)
.onAppear(() => { .onAppear(() => {
this.changeAppear = 'Hide Text'; this.changeAppear = 'Hide Text'
prompt.showToast({ prompt.showToast({
message: 'The text is shown', message: 'The text is shown',
duration: 2000 duration: 2000
}) })
}) })
.onDisAppear(() => { .onDisAppear(() => {
this.changeAppear = 'Show Text'; this.changeAppear = 'Show Text'
prompt.showToast({ prompt.showToast({
message: 'The text is hidden', message: 'The text is hidden',
duration: 2000 duration: 2000
......
...@@ -45,42 +45,42 @@ ...@@ -45,42 +45,42 @@
@Entry @Entry
@Component @Component
struct TouchExample { struct TouchExample {
@State text: string = ''; @State text: string = ''
@State eventType: string = ''; @State eventType: string = ''
build() { build() {
Column() { Column() {
Button('Touch').height(40).width(100) Button('Touch').height(40).width(100)
.onTouch((event: TouchEvent) => { .onTouch((event: TouchEvent) => {
if (event.type === TouchType.Down) { if (event.type === TouchType.Down) {
this.eventType = 'Down'; this.eventType = 'Down'
} }
if (event.type === TouchType.Up) { if (event.type === TouchType.Up) {
this.eventType = 'Up'; this.eventType = 'Up'
} }
if (event.type === TouchType.Move) { if (event.type === TouchType.Move) {
this.eventType = 'Move'; this.eventType = 'Move'
} }
this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: ' this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: '
+ event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\nComponent globalPos:(' + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\nComponent globalPos:('
+ event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:' + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:'
+ event.target.area.width + '\nheight:' + event.target.area.height; + event.target.area.width + '\nheight:' + event.target.area.height
}) })
Button('Touch').height(50).width(200).margin(20) Button('Touch').height(50).width(200).margin(20)
.onTouch((event: TouchEvent) => { .onTouch((event: TouchEvent) => {
if (event.type === TouchType.Down) { if (event.type === TouchType.Down) {
this.eventType = 'Down'; this.eventType = 'Down'
} }
if (event.type === TouchType.Up) { if (event.type === TouchType.Up) {
this.eventType = 'Up'; this.eventType = 'Up'
} }
if (event.type === TouchType.Move) { if (event.type === TouchType.Move) {
this.eventType = 'Move'; this.eventType = 'Move'
} }
this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: ' this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: '
+ event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\nComponent globalPos:(' + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\nComponent globalPos:('
+ event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:' + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:'
+ event.target.area.width + '\nheight:' + event.target.area.height; + event.target.area.width + '\nheight:' + event.target.area.height
}) })
Text(this.text) Text(this.text)
}.width('100%').padding(30) }.width('100%').padding(30)
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册