diff --git a/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/ProgressPage.ets b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/ProgressPage.ets index 397e9da46a72a08bf0e28d47f7a5ce7ab5093185..5d12fd07115799e35ade865a66e8bbeda7864b40 100644 --- a/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/ProgressPage.ets +++ b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/ProgressPage.ets @@ -69,6 +69,7 @@ struct ProgressPage { .color(this.color) .value(this.value) .width(200) + .backgroundColor(this.backColor) .key('pro1') Progress({ value: 10 }).width(100).key('pro2') @@ -104,6 +105,12 @@ struct ProgressPage { .value(50) .width(100) .height(50) + Progress({ value: this.value, total: 150, type: ProgressType.Linear}) + .style({ strokeWidth: 20, scaleCount: 30, scaleWidth: 20 ,strokeRadius:2}) + .color(this.color) + .value(50) + .width(100) + .height(50) } }.width('100%').margin({ top: 30 }) } diff --git a/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/animateAdd.ets b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/animateAdd.ets index 5397bfc9bd0e8e8235cbb11a18df19cc13598888..b6ac4068d667cffcd9ac9e18d7ab592fe7bef2b5 100644 --- a/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/animateAdd.ets +++ b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/animateAdd.ets @@ -67,6 +67,14 @@ struct TransitionEffectExample2 { TransitionEffect.IDENTITY ) ) + + Image($r('app.media.icon')).width(200).height(200).margin({ top: 100 }) + .transition( + TransitionEffect.asymmetric( + TransitionEffect.move(TransitionEdge.START), + TransitionEffect.SLIDE + ) + ) } }.width('100%') } diff --git a/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/navigation_add.ets b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/navigation_add.ets index e97635eb9c1ac02cbe713816ee24d0ea8a9525b1..803823296c53bd33662b89c61d22aacde444f589 100644 --- a/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/navigation_add.ets +++ b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/navigation_add.ets @@ -157,6 +157,11 @@ struct NavigationExample2 { .onClick(() => { // 点击后滑到下一页 this.navPathStack.getIndexByName("navidesnation_add") }).margin({ top: 400, left: 20 }) + Button('pushPaht') + .height('5%') + .onClick(() => { // 点击后滑到下一页 + this.navPathStack.pushPath(new NavPathInfo("","")) + }).margin({ top: 400, left: 20 }) }.width('100%').height('100%').backgroundColor(0xDCDCDC) diff --git a/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/richEditor.ets b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/richEditor.ets new file mode 100644 index 0000000000000000000000000000000000000000..4b0c4e16b8b17cfd4b0eb2d3ffbe73300e0af9d3 --- /dev/null +++ b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/richEditor.ets @@ -0,0 +1,176 @@ +/** + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@Entry +@Component +struct richeditor2 { + controller: RichEditorController = new RichEditorController(); + options: RichEditorOptions = { controller: this.controller }; + private start: number = -1; + private end: number = -1; + @State message: string = "[-1, -1]" + @State content: string = "" + + @Builder + SubMenu() { + Menu() { + MenuItem({ content: "取消", labelInfo: "Ctrl+S" }) + MenuItem({ content: "确认", labelInfo: "ENTER" }) + } + } + + + build() { + Column() { + Column() { + Text("selection range:").width("100%") + Text() { + Span(this.message) + }.width("100%") + Text("selection content:").width("100%") + Text() { + Span(this.content) + }.width("100%") + } + .borderWidth(1) + .borderColor(Color.Red) + .width("100%") + .height("20%") + + Row() { + Button("更新样式:加粗").onClick(() => { + this.controller.updateSpanStyle({ + start: this.start, + end: this.end, + textStyle: + { + fontWeight: FontWeight.Bolder + } + }) + }) + Button("closeSelectionMenu").onClick(() => { + this.controller.closeSelectionMenu(); + }) + + Button("获取选择内容").onClick(() => { + this.content = ""; + this.controller.getSpans({ + start: this.start, + end: this.end + }).forEach(item => { + if ("imageStyle" in item) { + this.content += item.valueResourceStr; + this.content += "\n" + } else { + this.content += item.value; + this.content += "\n" + } + }) + }) + Button("删除选择内容").onClick(() => { + this.controller.deleteSpans({ + start: this.start, + end: this.end + }) + this.start = -1; + this.end = -1; + this.message = "[" + this.start + ", " + this.end + "]" + }) + } + .borderWidth(1) + .borderColor(Color.Red) + .width("100%") + .height("10%") + + Column() { + RichEditor(this.options) + .copyOptions(CopyOptions.InApp) + .onReady(() => { + this.controller.addTextSpan("0123456789", + { + style: + { + fontColor: Color.Orange, + fontSize: 30 + } + }) + this.controller.addImageSpan($r("app.media.icon"), + { + imageStyle: + { + size: ["57px", "57px"] + } + }) + this.controller.addTextSpan("0123456789", + { + style: + { + fontColor: Color.Black, + fontSize: 30 + } + }) + }) + .key('richEditor') + .bindSelectionMenu(RichEditorSpanType.TEXT,this.SubMenu(),ResponseType.RightClick) + .onSelect((value: RichEditorSelection) => { + [this.start, this.end] = value.selection; + this.message = "[" + this.start + ", " + this.end + "]" + }) + .aboutToIMEInput((value: RichEditorInsertValue) => { + console.log("---------------------- aboutToIMEInput ----------------------") + console.log("insertOffset:" + value.insertOffset) + console.log("insertValue:" + value.insertValue) + return true; + }) + .onIMEInputComplete((value: RichEditorTextSpanResult) => { + console.log("---------------------- onIMEInputComplete ---------------------") + console.log("spanIndex:" + value.spanPosition.spanIndex) + console.log("spanRange:[" + value.spanPosition.spanRange[0] + "," + value.spanPosition.spanRange[1] + "]") + console.log("offsetInSpan:[" + value.offsetInSpan[0] + "," + value.offsetInSpan[1] + "]") + console.log("value:" + value.value) + }) + .aboutToDelete((value: RichEditorDeleteValue) => { + console.log("---------------------- aboutToDelete --------------------------") + console.log("offset:" + value.offset) + console.log("direction:" + value.direction) + console.log("length:" + value.length) + value.richEditorDeleteSpans.forEach(item => { + console.log("---------------------- item --------------------------") + console.log("spanIndex:" + item.spanPosition.spanIndex) + console.log("spanRange:[" + item.spanPosition.spanRange[0] + "," + item.spanPosition.spanRange[1] + "]") + console.log("offsetInSpan:[" + item.offsetInSpan[0] + "," + item.offsetInSpan[1] + "]") + if ("imageStyle" in item) { + console.log("image:" + item.valueResourceStr) + } else { + console.log("text:" + item.value) + } + }) + return true; + }) + .onDeleteComplete(() => { + console.log("---------------------- onDeleteComplete ------------------------") + }) + .borderWidth(1) + .borderColor(Color.Green) + .width("100%") + .height("30%") + } + .borderWidth(1) + .borderColor(Color.Red) + .width("100%") + .height("70%") + } + } +} diff --git a/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/richEditorCustomKeyBoard.ets b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/richEditorCustomKeyBoard.ets new file mode 100644 index 0000000000000000000000000000000000000000..55d2825418c96d9b7861daec69138b7e8996fc9c --- /dev/null +++ b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/richEditorCustomKeyBoard.ets @@ -0,0 +1,52 @@ +/** + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@Entry +@Component +struct RichEditorExample { + controller: RichEditorController = new RichEditorController() + + // 自定义键盘组件 + @Builder CustomKeyboardBuilder() { + Column() { + Grid() { + ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'], (item) => { + GridItem() { + Button(item + "") + .width(110).onClick(() => { + this.controller.addTextSpan(item + '', { + style: + { + fontColor: Color.Orange, + fontSize: 30 + } + }) + }) + } + }) + }.maxCount(3).columnsGap(10).rowsGap(10).padding(5) + }.backgroundColor(Color.Gray) + } + + build() { + Column() { + RichEditor({ controller: this.controller }) + // 绑定自定义键盘 + .key('richEditor1') + .customKeyboard(this.CustomKeyboardBuilder()).margin(10).border({ width: 1 }) + .height(200) + } + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/search_add.ets b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/search_add.ets index ae50a494999a4dfc6d279184401c9e949c0499c4..d2f0e1ca917cad07055af450166ece42d2038759 100644 --- a/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/search_add.ets +++ b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/search_add.ets @@ -22,6 +22,21 @@ struct SearchExample { @State isHidden:boolean = false @State value1: string = '' @State value2: string = '' + + // 自定义键盘组件 + @Builder CustomKeyboardBuilder() { + Column() { + Grid() { + ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'], (item) => { + GridItem() { + Button(item + "") + .width(110) + } + }) + }.maxCount(3).columnsGap(10).rowsGap(10).padding(5) + }.backgroundColor(Color.Gray) + } + build() { Column() { Text('onSubmit:' + this.submitValue).fontSize(18).margin(15) @@ -38,6 +53,7 @@ struct SearchExample { .enableKeyboardOnFocus(true) .selectionMenuHidden(this.isHidden) .placeholderFont({ size: 14, weight: 400 }) + .customKeyboard(this.CustomKeyboardBuilder()) .onContentScroll((totalOffsetX: number, totalOffsetY: number) =>{ }) .onTextSelectionChange((selectionStart: number, selectionEnd: number)=>{ diff --git a/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/textArea_add.ets b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/textArea_add.ets index ffb2805a594cb87431f65811bae6c96a3bf6da80..f9ca6057c771b196e0b9f8c4eeaf81b81ebaad9b 100644 --- a/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/textArea_add.ets +++ b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/textArea_add.ets @@ -19,6 +19,21 @@ struct TextAreaExample { controller: TextAreaController = new TextAreaController() @State value1: string = '' @State value2: string = '' + + // 自定义键盘组件 + @Builder CustomKeyboardBuilder() { + Column() { + Grid() { + ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'], (item) => { + GridItem() { + Button(item + "") + .width(110) + } + }) + }.maxCount(3).columnsGap(10).rowsGap(10).padding(5) + }.backgroundColor(Color.Gray) + } + build() { Column() { Text('value1:' + this.value1).fontSize(18).margin(15) @@ -34,6 +49,7 @@ struct TextAreaExample { .enableKeyboardOnFocus(true) .selectionMenuHidden(false) .margin(20) + .customKeyboard(this.CustomKeyboardBuilder()) .barState(BarState.On) .style(TextContentStyle.INLINE) .key('textAreaAdd') diff --git a/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/textinput_add.ets b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/textinput_add.ets index fae7bf7bbbb4e03da1020c1c8b4888f874dab18d..d49c5f2d5df9c5526b8d523b31cfba5194fd8272 100644 --- a/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/textinput_add.ets +++ b/arkui/ace_ets_component_ui/entry/src/main/ets/MainAbility/pages/textinput_add.ets @@ -20,6 +20,21 @@ struct TextInputExample { @State isHidden:boolean = false @State value1: string = '' @State value2: string = '' + + // 自定义键盘组件 + @Builder CustomKeyboardBuilder() { + Column() { + Grid() { + ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'], (item) => { + GridItem() { + Button(item + "") + .width(110) + } + }) + }.maxCount(3).columnsGap(10).rowsGap(10).padding(5) + }.backgroundColor(Color.Gray) + } + build() { Column() { Text('value1:' + this.value1).fontSize(18).margin(15) @@ -34,6 +49,7 @@ struct TextInputExample { .barState(BarState.On) .key('textInputAdd') .fontSize(14) + .customKeyboard(this.CustomKeyboardBuilder()) .onContentScroll((totalOffsetX: number, totalOffsetY: number) =>{ }) .onTextSelectionChange((selectionStart: number, selectionEnd: number)=>{ diff --git a/arkui/ace_ets_component_ui/entry/src/main/ets/test/ApiCommponentAddJsunit.test.ets b/arkui/ace_ets_component_ui/entry/src/main/ets/test/ApiCommponentAddJsunit.test.ets index 4115fb7beff846d1fec3cf83fea226b3689d7878..6f1ad7e3c7eee33a896e69dead5f53dc6c83d5a9 100644 --- a/arkui/ace_ets_component_ui/entry/src/main/ets/test/ApiCommponentAddJsunit.test.ets +++ b/arkui/ace_ets_component_ui/entry/src/main/ets/test/ApiCommponentAddJsunit.test.ets @@ -627,6 +627,65 @@ export default function ApiCommponentAddJsunit() { done(); }); + it('apiCommponentAddJsunit_2400', 0, async function (done) { + console.info("[apiCommponentAddJsunit_2400] START" ); + ohosrouter.clear(); + ohosrouter.pushUrl({ + url: 'MainAbility/pages/richEditor', + params: { + data1: 'message', + data2: { + data3: [123, 456, 789] + } + } + }).then(() => { + // success + }).catch(err => { + console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`); + }) + await CommonFunc.sleep(1000); + let strJson = getInspectorByKey('richEditor'); + let obj = JSON.parse(strJson); + console.info("[apiCommponentAddJsunit_2400'] component obj is: " + obj.$type); + expect(obj.$type).assertEqual('RichEditor'); + done(); + }); + + it('apiCommponentAddJsunit_2500', 0, async function (done) { + console.info("[apiCommponentAddJsunit_2500] START" ); + ohosrouter.clear(); + ohosrouter.pushUrl({ + url: 'MainAbility/pages/richEditorCustomKeyBoard', + params: { + data1: 'message', + data2: { + data3: [123, 456, 789] + } + } + }).then(() => { + // success + }).catch(err => { + console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`); + }) + await CommonFunc.sleep(1000); + let strJson = getInspectorByKey('richEditor1'); + let obj = JSON.parse(strJson); + console.info("[apiCommponentAddJsunit_2500'] component obj is: " + obj.$type); + expect(obj.$type).assertEqual('RichEditor'); + done(); + }); + + it('apiCommponentAddJsunit_2600', 0, async function (done) { + console.info('apiCommponentAddJsunit_2600 START'); + try { + expect(DialogButtonStyle.HIGHLIGHT).assertEqual(1); + } catch(err) { + console.error("apiCommponentAddJsunit_2600 error " + JSON.stringify(err)); + } + done(); + }); + + }) diff --git a/arkui/ace_ets_component_ui/entry/src/main/resources/base/profile/main_pages.json b/arkui/ace_ets_component_ui/entry/src/main/resources/base/profile/main_pages.json index 07b25278bccedfd8e0733dac179866852a36aa15..3c138fe21179c65f41df776dd444621567dd3b68 100644 --- a/arkui/ace_ets_component_ui/entry/src/main/resources/base/profile/main_pages.json +++ b/arkui/ace_ets_component_ui/entry/src/main/resources/base/profile/main_pages.json @@ -91,6 +91,8 @@ "MainAbility/pages/RouteType1", "MainAbility/pages/RouteType2", "MainAbility/pages/navition3", - "MainAbility/pages/DragController" + "MainAbility/pages/DragController", + "MainAbility/pages/richEditor", + "MainAbility/pages/richEditorCustomKeyBoard" ] } \ No newline at end of file