diff --git a/UI/JSMenu/README_zh.md b/UI/JSMenu/README_zh.md new file mode 100644 index 0000000000000000000000000000000000000000..ed18dfb719ad214b0f7f88990939b4dad932b1f6 --- /dev/null +++ b/UI/JSMenu/README_zh.md @@ -0,0 +1,19 @@ +# JS菜单 + + + +### 简介 + +本示例展示了JS中和组件的使用，可作为和的子组件。开发者可自行定义控件的位置、样式、响应事件等属性信息。 + +在点击控件后会弹出相应的菜单，用户可以点击菜单选项进行选择。 + +### 使用说明 + +1、点击**菜单选项**进入菜单选项界面，此界面使用作为的子组件展示了主菜、小吃、饮料三个菜单，点击对应文本会弹出菜单，点击菜单选项可以进行选择，选择的内容会显示在底部选单详情中。点击**清除订单**可以清空选单详情中的内容，点击**提交订单**会弹出提交订单成功的提示并清除选单详情中的内容。 + +2、点击**选择选项**进入选择选项界面，此界面使用作为的子组件展示了主菜、小吃、饮料三个菜单，点击对应文本会弹出菜单，点击菜单选项可以进行选择，选择的内容会显示在底部选单详情中。点击**清除订单**可以清空选单详情中的内容，点击**提交订单**会弹出提交订单成功的提示并清除选单详情中的内容。 + +### 约束与限制 + +本示例支持标准系统上运行。 diff --git a/UI/JSMenu/build.gradle b/UI/JSMenu/build.gradle new file mode 100644 index 0000000000000000000000000000000000000000..e993f18a48c3684613500e007cd5ea1990d2c459 --- /dev/null +++ b/UI/JSMenu/build.gradle @@ -0,0 +1,35 @@ +// Top-level build file where you can add configuration options common to all sub-projects/modules. +apply plugin: 'com.huawei.ohos.app' + +//For instructions on signature configuration, see https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ide_debug_device-0000001053822404#section1112183053510 +ohos { + compileSdkVersion 6 + defaultConfig { + compatibleSdkVersion 6 + } +} + +buildscript { + repositories { + maven { + url 'https://repo.huaweicloud.com/repository/maven/' + } + maven { + url 'https://developer.huawei.com/repo/' + } + } + dependencies { + classpath 'com.huawei.ohos:hap:2.4.4.3-RC' + } +} + +allprojects { + repositories { + maven { + url 'https://repo.huaweicloud.com/repository/maven/' + } + maven { + url 'https://developer.huawei.com/repo/' + } + } +} diff --git a/UI/JSMenu/entry/build.gradle b/UI/JSMenu/entry/build.gradle new file mode 100644 index 0000000000000000000000000000000000000000..138dc6a7f91cc18d280d3c29414b7e59eb96c9dc --- /dev/null +++ b/UI/JSMenu/entry/build.gradle @@ -0,0 +1,17 @@ +apply plugin: 'com.huawei.ohos.hap' +//For instructions on signature configuration, see https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ide_debug_device-0000001053822404#section1112183053510 +ohos { + compileSdkVersion 6 + defaultConfig { + compatibleSdkVersion 6 + } + buildTypes { + release { + proguardOpt { + proguardEnabled false + rulesFiles 'proguard-rules.pro' + } + } + } + supportSystem "standard" +} diff --git a/UI/JSMenu/entry/src/main/config.json b/UI/JSMenu/entry/src/main/config.json new file mode 100644 index 0000000000000000000000000000000000000000..e39d2db4ecb673fea10dcc7f9b869f3da07e3e84 --- /dev/null +++ b/UI/JSMenu/entry/src/main/config.json @@ -0,0 +1,59 @@ +{ + "app": { + "bundleName": "ohos.samples.jsmenu", + "vendor": "samples", + "version": { + "code": 1000000, + "name": "1.0.0" + } + }, + "deviceConfig": {}, + "module": { + "package": "ohos.samples.jsmenu", + "name": ".MyApplication", + "mainAbility": "ohos.samples.jsmenu.MainAbility", + "deviceType": [ + "phone" + ], + "distro": { + "deliveryWithInstall": true, + "moduleName": "entry", + "moduleType": "entry", + "installationFree": false + }, + "abilities": [ + { + "skills": [ + { + "entities": [ + "entity.system.home" + ], + "actions": [ + "action.system.home" + ] + } + ], + "name": "ohos.samples.jsmenu.MainAbility", + "icon": "$media:icon", + "description": "$string:mainability_description", + "label": "$string:app_name", + "type": "page", + "launchType": "standard" + } + ], + "js": [ + { + "pages": [ + "pages/index/index", + "pages/menu/index", + "pages/select/index" + ], + "name": "default", + "window": { + "designWidth": 720, + "autoDesignWidth": true + } + } + ] + } +} \ No newline at end of file diff --git a/UI/JSMenu/entry/src/main/js/default/app.js b/UI/JSMenu/entry/src/main/js/default/app.js new file mode 100644 index 0000000000000000000000000000000000000000..8e47afff13e928a74fdcc01a108e4422404b9ac9 --- /dev/null +++ b/UI/JSMenu/entry/src/main/js/default/app.js @@ -0,0 +1,23 @@ +/* + * Copyright (c) 2021 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export default { + onCreate() { + console.info('AceApplication onCreate'); + }, + onDestroy() { + console.info('AceApplication onDestroy'); + } +}; diff --git a/UI/JSMenu/entry/src/main/js/default/common/comm.css b/UI/JSMenu/entry/src/main/js/default/common/comm.css new file mode 100644 index 0000000000000000000000000000000000000000..ed91a975ec2040df9fb0bce10975ee0c78f59cde --- /dev/null +++ b/UI/JSMenu/entry/src/main/js/default/common/comm.css @@ -0,0 +1,67 @@ +/* + * Copyright (c) 2021 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.container { + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; +} + +.menu-text { + width: 85px; + margin: 20px; + font-size: 25px; + color: black; +} + +.menu-option { + font-size: 20px; + color: blue; +} + +.snack-option { + font-size: 20px; + color: chocolate; +} + +.drink-option { + font-size: 20px; + color: blueviolet; +} + +.button { + margin: 10px; + font-size: 20px; + padding: 5px; + text-color: white; + width: 70%; + height: 48px; +} + +.div-btn { + width: 100%; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.result-text { + margin: 10px; + padding-left: 10px; + padding-right: 10px; + font-size: 20px; + width: 100%; + color: royalblue; +} \ No newline at end of file diff --git a/UI/JSMenu/entry/src/main/js/default/i18n/en-US.json b/UI/JSMenu/entry/src/main/js/default/i18n/en-US.json new file mode 100644 index 0000000000000000000000000000000000000000..072511a811b7f056f3c0b304bcf343be42ff0cd5 --- /dev/null +++ b/UI/JSMenu/entry/src/main/js/default/i18n/en-US.json @@ -0,0 +1,47 @@ +{ + "strings": { + "menu_option": "Menu option", + "select_option": "Select option", + "menu": "Dishes:", + "snack": "Snack:", + "drink": "Drink:", + "clear_oder": "Clear Oder", + "submit_oder": "Submit Oder", + "finish_oder": "Submit Oder succeed", + "empty_order": "Empty Oder", + "resultStr": "Your menu details are as follows:", + "menus": [ + { + "name": "Mapo Tofu" + }, + { + "name": "Spicy Crayfish" + }, + { + "name": "Dry Pot Bullfrog" + } + ], + "snacks": [ + { + "name": "Meat clip buns" + }, + { + "name": "Rolling dough" + }, + { + "name": "You Tiao" + } + ], + "drinks": [ + { + "name": "Ice Peak" + }, + { + "name": "Soy Milk" + }, + { + "name": "Soy Milk" + } + ] + } +} \ No newline at end of file diff --git a/UI/JSMenu/entry/src/main/js/default/i18n/zh-CN.json b/UI/JSMenu/entry/src/main/js/default/i18n/zh-CN.json new file mode 100644 index 0000000000000000000000000000000000000000..c1438dd47daff66acdac0e9356fe485e34700687 --- /dev/null +++ b/UI/JSMenu/entry/src/main/js/default/i18n/zh-CN.json @@ -0,0 +1,47 @@ +{ + "strings": { + "menu_option": "菜单选项", + "select_option": "选择选项", + "menu": "主菜:", + "snack": "小吃:", + "drink": "饮料:", + "clear_oder": "清除订单", + "submit_oder": "提交订单", + "finish_oder": "提交订单成功", + "empty_order": "空的订单", + "resultStr": "您的选单详情如下:", + "menus": [ + { + "name": "麻婆豆腐" + }, + { + "name": "香辣小龙虾" + }, + { + "name": "干锅牛蛙" + } + ], + "snacks": [ + { + "name": "肉夹馍" + }, + { + "name": "擀面皮" + }, + { + "name": "油条" + } + ], + "drinks": [ + { + "name": "冰峰" + }, + { + "name": "豆奶" + }, + { + "name": "啤酒" + } + ] + } +} \ No newline at end of file diff --git a/UI/JSMenu/entry/src/main/js/default/pages/index/index.css b/UI/JSMenu/entry/src/main/js/default/pages/index/index.css new file mode 100644 index 0000000000000000000000000000000000000000..b92c653bfca559148c131508f06d594953d15a9f --- /dev/null +++ b/UI/JSMenu/entry/src/main/js/default/pages/index/index.css @@ -0,0 +1,31 @@ +/* + * Copyright (c) 2021 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.container { + width: 100%; + height: 100%; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.button { + margin: 10px; + font-size: 20px; + padding: 5px; + text-color: white; + width: 80%; + height: 48px; +} \ No newline at end of file diff --git a/UI/JSMenu/entry/src/main/js/default/pages/index/index.hml b/UI/JSMenu/entry/src/main/js/default/pages/index/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..cb50c06fb32080d5defeb197d490563d30303725 --- /dev/null +++ b/UI/JSMenu/entry/src/main/js/default/pages/index/index.hml @@ -0,0 +1,19 @@ + + +
+ + +
diff --git a/UI/JSMenu/entry/src/main/js/default/pages/index/index.js b/UI/JSMenu/entry/src/main/js/default/pages/index/index.js new file mode 100644 index 0000000000000000000000000000000000000000..8b97109a8ec1cf8c702b502131a198284dedb063 --- /dev/null +++ b/UI/JSMenu/entry/src/main/js/default/pages/index/index.js @@ -0,0 +1,29 @@ +/* + * Copyright (c) 2021 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import router from '@system.router'; + +export default { + onMenuClick() { + router.push({ + uri: "pages/menu/index" + }) + }, + onSelectClick() { + router.push({ + uri: "pages/select/index" + }) + } +} diff --git a/UI/JSMenu/entry/src/main/js/default/pages/menu/index.css b/UI/JSMenu/entry/src/main/js/default/pages/menu/index.css new file mode 100644 index 0000000000000000000000000000000000000000..63f7b5fc4cd6a48303b7116e17a22af3a8e64a71 --- /dev/null +++ b/UI/JSMenu/entry/src/main/js/default/pages/menu/index.css @@ -0,0 +1,35 @@ +/* + * Copyright (c) 2021 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@import '../../common/comm.css'; + +.div-menu-text { + align-items: flex-start; + justify-content: flex-start; + flex-direction: row; +} + +.menu-title { + margin-top: 15px; + width: 200px; + font-size: 20px; + text-color: black; + border-color: black; + border-style: solid; + border-width: 1px; + padding: 5px; + text-align: center; + max-lines: 1; +} \ No newline at end of file diff --git a/UI/JSMenu/entry/src/main/js/default/pages/menu/index.hml b/UI/JSMenu/entry/src/main/js/default/pages/menu/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..045037383b3d8e0aee51d932933d09ec033c78bd --- /dev/null +++ b/UI/JSMenu/entry/src/main/js/default/pages/menu/index.hml @@ -0,0 +1,43 @@ + +
+
+ {{ $t('strings.menu') }} + {{ menu_result }} + + + +
+
+ {{ $t('strings.snack') }} + {{ snack_result }} + + + +
+
+ {{ $t('strings.drink') }} + {{ drink_result }} + + + +
+ {{ $t('strings.resultStr') }} + {{ result }} +
+ + +
+
diff --git a/UI/JSMenu/entry/src/main/js/default/pages/menu/index.js b/UI/JSMenu/entry/src/main/js/default/pages/menu/index.js new file mode 100644 index 0000000000000000000000000000000000000000..68d884f28521f1bef67647d765b0bcab5f26e7ea --- /dev/null +++ b/UI/JSMenu/entry/src/main/js/default/pages/menu/index.js @@ -0,0 +1,88 @@ +/* + * Copyright (c) 2021 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import prompt from '@system.prompt'; + +export default { + data: { + result: "", + menus: [], + snacks:[], + drinks:[], + menu_result:"", + snack_result:"", + drink_result:"" + }, + onInit() { + this.menus = this.$t('strings.menus') + this.snacks = this.$t('strings.snacks') + this.drinks = this.$t('strings.drinks') + this.menu_result = this.menus[0].name + this.snack_result = this.snacks[0].name + this.drink_result = this.drinks[0].name + }, + onMenuSelected(e) { + this.menu_result = e.value + this.onSelect(e) + }, + onSnackSelected(e) { + this.snack_result = e.value + this.onSelect(e) + }, + onDrinkSelected(e) { + this.drink_result = e.value + this.onSelect(e) + }, + onSelect(e) { + if (this.result.length > 0) { + this.result = this.result + "," + e.value + } else { + this.result = e.value + } + }, + onMenuClick() { + this.$element("menu").show({ + x: 130, + y: 45 + }); + }, + onSnackClick() { + this.$element("snackMenu").show({ + x: 130, + y: 120 + }); + }, + onDrinkClick() { + this.$element("drinkMenu").show({ + x: 130, + y: 190 + }); + }, + onClearClick() { + this.result = "" + }, + onFinishClick() { + if (this.result.length > 0) { + prompt.showToast({ + message: this.$t('strings.finish_oder') + }) + } else { + prompt.showToast({ + message: this.$t('strings.empty_order') + }) + } + this.result = "" + } +} diff --git a/UI/JSMenu/entry/src/main/js/default/pages/select/index.css b/UI/JSMenu/entry/src/main/js/default/pages/select/index.css new file mode 100644 index 0000000000000000000000000000000000000000..6b10fa529ff2ac096ce9f5ab1dc08a00ff61ab2a --- /dev/null +++ b/UI/JSMenu/entry/src/main/js/default/pages/select/index.css @@ -0,0 +1,29 @@ +/* + * Copyright (c) 2021 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@import '../../common/comm.css'; + +.div-select { + flex-direction: row; + justify-content: flex-start; + align-items: center; +} + +.select { + font-size: 20px; + border-color: black; + border-style: solid; + border-width: 1px; +} diff --git a/UI/JSMenu/entry/src/main/js/default/pages/select/index.hml b/UI/JSMenu/entry/src/main/js/default/pages/select/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..f798bd460886dc6a44e787c34cd852f0df15f3fd --- /dev/null +++ b/UI/JSMenu/entry/src/main/js/default/pages/select/index.hml @@ -0,0 +1,41 @@ + + +
+
+ {{ $t('strings.menu') }} + +
+
+ {{ $t('strings.snack') }} + +
+
+ {{ $t('strings.drink') }} + +
+ {{ $t('strings.resultStr') }} + {{ result }} +
+ + +
+
diff --git a/UI/JSMenu/entry/src/main/js/default/pages/select/index.js b/UI/JSMenu/entry/src/main/js/default/pages/select/index.js new file mode 100644 index 0000000000000000000000000000000000000000..3c989300f2a8f33264bd0e1f7827bb3600363cc4 --- /dev/null +++ b/UI/JSMenu/entry/src/main/js/default/pages/select/index.js @@ -0,0 +1,62 @@ +/* + * Copyright (c) 2021 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import prompt from '@system.prompt'; + +export default { + data: { + result: "", + menus: [], + snacks: [], + drinks: [] + }, + onInit() { + this.menus = this.$t('strings.menus') + this.snacks = this.$t('strings.snacks') + this.drinks = this.$t('strings.drinks') + }, + onMenuChange(e) { + this.onSelect(e) + }, + onSnackChange(e) { + this.onSelect(e) + }, + onDrinkChange(e) { + this.onSelect(e) + }, + onSelect(e) { + console.info("onSelect:" + e.newValue) + if (this.result.length > 0) { + this.result = this.result + "," + e.newValue + } else { + this.result = e.newValue + } + }, + onClearClick() { + this.result = "" + }, + onFinishClick() { + if (this.result.length > 0) { + prompt.showToast({ + message: this.$t('strings.finish_oder') + }) + } else { + prompt.showToast({ + message: this.$t('strings.empty_order') + }) + } + this.result = "" + } +} diff --git a/UI/JSMenu/entry/src/main/resources/base/element/string.json b/UI/JSMenu/entry/src/main/resources/base/element/string.json new file mode 100644 index 0000000000000000000000000000000000000000..8092848cb183c7ef824d18d7d747dbe350253715 --- /dev/null +++ b/UI/JSMenu/entry/src/main/resources/base/element/string.json @@ -0,0 +1,12 @@ +{ + "string": [ + { + "name": "app_name", + "value": "JSMenu" + }, + { + "name": "mainability_description", + "value": "JSMenu Ability" + } + ] +} \ No newline at end of file diff --git a/UI/JSMenu/entry/src/main/resources/base/media/icon.png b/UI/JSMenu/entry/src/main/resources/base/media/icon.png new file mode 100644 index 0000000000000000000000000000000000000000..ce307a8827bd75456441ceb57d530e4c8d45d36c Binary files /dev/null and b/UI/JSMenu/entry/src/main/resources/base/media/icon.png differ diff --git a/UI/JSMenu/screenshots/devices/main.png b/UI/JSMenu/screenshots/devices/main.png new file mode 100644 index 0000000000000000000000000000000000000000..4afc58e1a6bdc394e105a15d68fd3734ad907a71 Binary files /dev/null and b/UI/JSMenu/screenshots/devices/main.png differ diff --git a/UI/JSMenu/screenshots/devices/menu_option.png b/UI/JSMenu/screenshots/devices/menu_option.png new file mode 100644 index 0000000000000000000000000000000000000000..f8ab5442f9ba66e069cadae6a382c099e2d772cd Binary files /dev/null and b/UI/JSMenu/screenshots/devices/menu_option.png differ diff --git a/UI/JSMenu/screenshots/devices/select_option.png b/UI/JSMenu/screenshots/devices/select_option.png new file mode 100644 index 0000000000000000000000000000000000000000..cd93228f74af5ae1b5e631d8170101afcd2b980e Binary files /dev/null and b/UI/JSMenu/screenshots/devices/select_option.png differ diff --git a/UI/JSMenu/settings.gradle b/UI/JSMenu/settings.gradle new file mode 100644 index 0000000000000000000000000000000000000000..4773db73233a570c2d0c01a22e75321acfbf7a07 --- /dev/null +++ b/UI/JSMenu/settings.gradle @@ -0,0 +1 @@ +include ':entry'