diff --git a/README.en.md b/README.en.md new file mode 100644 index 0000000000000000000000000000000000000000..c4dbbbfe287a29597c99e4a6763b1d3a05b0d559 --- /dev/null +++ b/README.en.md @@ -0,0 +1,85 @@ +# Typical Setting Page + +### Overview + +This sample shows a typical page for setting an application. The page has different display effects in the small window and large window, reflecting the capability of one-time development for multi-device deployment. + +1. The adaptive layout and responsive layout are used to ensure that the app can be properly displayed on devices irrespective of screen sizes. +2. The **Navigation** component is used to display a small window in one column and a large window in two columns. + +### Preview + +Below shows the display effects of this sample in different window sizes. + +![](screenshots/devices/img4.en.png) + +![settings.gif](screenshots/devices/settings.en.gif) + +### How to Use + +1. Start the app and check tits display effect in full screen mode. +2. Go to `WLAN` > `More settings` to check the display effect of the app. +3. Choose `More Connections` > `NFC` to check the display effect of the app. + +### Project Directory +``` +├──features/settingitems/src/main/ets // Code area +│ ├──components +│ │ ├──ItemDescription.ets // Title description of each unit group module +│ │ ├──ItemGroup.ets // Unit group +│ │ ├──MainItem.ets // Main framework +│ │ ├──SearchBox.ets // Search box +│ │ ├──SubItemArrow.ets // Arrow jump component +│ │ ├──SubItemToggle.ets // Status button component +│ │ └──SubItemWifi.ets // Subnet list module +│ ├──moreconnections +│ │ ├──MoreConnectionsItem.ets // More connections module +│ │ └──Nfc.ets // NFC object operation class +│ ├──settinglist +│ │ └──SettingList.ets // Setting page +│ └──wlan +│ ├──WlanMoreSetting.ets // More network settings +│ └──WlanSettingItem.ets // Network setting module +└──entry/src/main/resources // App resources + +``` + +### How to Implement +This sample describes how to implement the single-column and dual-column design scenarios under different breakpoints. +#### Single-/Dual-Column Display +The **Navigation** component is used to implement single-column or dual-column display. It consists of two areas: **Navbar** (main page) and **Content** (subpage). The **Navigation** component supports the **Stack**, **Split**, and **Auto** modes. +1. Stack mode: The navigation bar and content area are displayed independently, which is equivalent to multiple pages. Display effect: The page jumps to **Content1** (WLAN page) from the **Navbar** page and then to Content2 (more WLAN modes). +2. Split mode: The navigation bar and content are displayed in two columns. Display effect: Navbar+Content1. +3. Auto mode: The **Navigation** component can automatically select a proper mode based on the application window size. If the window width is less than 520 vp, the **Stack** mode is applied. If the window width is greater than or equal to 520 vp, the **Split** mode is applied. When the window size changes, the **Navigation** component automatically switches between the Stack mode and the Split mode. For details about the source code, see [Source Code Reference] (products/default/src/main/ets/pages/Index.ets). + +#### Redirect or Re-render upon a Tap +The **Navigation** component is usually used together with the **NavRouter** and **NavDestination** components. +* The **NavRouter** component controls the page content display and re-renders of the **Navigation** component. It includes two child nodes. +1. Container component: directly controls the display effect of **NavRouter**. +2. **NavDestination** component: re-renders the content area of the **Navigation** component. +3. The **NavRouter** component notifies you of the **NavRouter** status through the **onStateChange** callback event. When a user taps **NavRouter**, activates it, and loads its child component, the **onStateChange(true)** is called. +4. **onStateChange(false)** is called when the **NavDestination** child component is not displayed. +* The **NavDestination** component is used to re-render the **Content** area of the **Navigation** component. +* In this sample, the WLAN function item is the first child node of **NavRouter**, and the redirected subpage WLAN is its second child node. For details about the source code, see [Source code reference](features/settingitems/src/main/ets/wlan/WlanSettingItem.ets). +#### Multi-level jump +The **Navigation** component can automatically switch between the single- and dual-column mode. In addition, the component can add the back button and respond to the back button event called by the system based on the current state. For details about the source code, see [Source Code Reference](features/settingitems/src/main/ets/wlan/WlanMoreSetting.ets). +1. Activate **WLANSettingItem** in **SettingList** to load and display **WlanSetting**. +2. Activate **WlanMoreSettingItem** in **WlanSetting** to load and display **WlanMoreSetting**. + +### Required Permissions + +N/A + +### Dependencies + +N/A + +### Constraints + +1. The sample app is supported only on Huawei phones running the standard system. + +2. The HarmonyOS version must be HarmonyOS NEXT Developer Beta1 or later. + +3. The DevEco Studio version must be DevEco Studio NEXT Developer Beta1 or later. + +4. The HarmonyOS SDK version must be HarmonyOS NEXT Developer Beta1 or later. diff --git a/features/settingitems/src/main/resources/base/element/string.json b/features/settingitems/src/main/resources/base/element/string.json index c2debbd30a814be7ea3d3e9ef30dcfb766d1ad5b..82f7f1fba4f4c0429af4533ecf46fd8b36a2b225 100644 --- a/features/settingitems/src/main/resources/base/element/string.json +++ b/features/settingitems/src/main/resources/base/element/string.json @@ -2,19 +2,19 @@ "string": [ { "name": "enabled", - "value": "已开启" + "value": "On" }, { "name": "disabled", - "value": "已关闭" + "value": "Off" }, { "name": "settings", - "value": "设置" + "value": "Settings" }, { "name": "searchHint", - "value": "搜索设置项" + "value": "Search" }, { "name": "wifiTab", @@ -22,95 +22,95 @@ }, { "name": "wifiTipConnectedWLAN", - "value": "已连接WLAN" + "value": "Connected WLAN" }, { "name": "wifiTipValidWLAN", - "value": "可用WLAN" + "value": "Valid WLAN" }, { "name": "wifiInfoTitleFrequency", - "value": "频率" + "value": "Frequency" }, { "name": "wifiSummaryConnected", - "value": "已连接" + "value": "Connected" }, { "name": "wifiSummaryConnecting", - "value": "连接中..." + "value": "Connecting..." }, { "name": "wifiSummarySaveEncrypted", - "value": "已保存，加密" + "value": "Saved, Encrypted" }, { "name": "wifiSummarySaveOpen", - "value": "已保存，开放" + "value": "Saved, Open" }, { "name": "wifiSummaryEncrypted", - "value": "加密" + "value": "Encrypted" }, { "name": "wifiSummaryOpen", - "value": "开放" + "value": "Open" }, { "name": "brightnessTab", - "value": "显示与亮度" + "value": "Display & Brightness" }, { "name": "applyTab", - "value": "应用" + "value": "Apps" }, { "name": "aboutTab", - "value": "关于设备" + "value": "About Device" }, { "name": "volumeControlTab", - "value": "声音" + "value": "Sounds" }, { "name": "wifiList", - "value": "可用WLAN列表" + "value": "WLAN-List which can be used" }, { "name": "usersAccountsTab", - "value": "用户和帐户" + "value": "Users & Accounts" }, { "name": "systemTab", - "value": "系统" + "value": "System & Updates" }, { "name": "privacy", - "value": "隐私" + "value": "Privacy" }, { "name": "permissionManager", - "value": "权限管理" + "value": "Permission Manager" }, { "name": "storageTab", - "value": "存储" + "value": "Storage" }, { "name": "security", - "value": "安全" + "value": "security" }, { "name": "privacyTab", - "value": "隐私" + "value": "privacyTab" }, { "name": "biometricsAndPassword", - "value": "生物识别和密码" + "value": "Biometrics & Password" }, { "name": "moreConnectionsTab", - "value": "更多连接" + "value": "More Connections" }, { "name": "NFC", @@ -118,19 +118,19 @@ }, { "name": "nfcTips", - "value": "若要进行移动支付、钥匙验证、碰一碰等操作，可将本设备背部触碰其他终端 NFC 感应区。" + "value": "To perform mobile payment, key verification, and touch, touch the back of the device to the NFC sensor area of another terminal." }, { "name": "bluetoothTab", - "value": "蓝牙" + "value": "Bluetooth" }, { "name": "mobileData", - "value": "移动数据" + "value": "Mobile Data" }, { "name": "moreWlanSettings", - "value": "更多WLAN设置" + "value": "More settings" }, { "name": "wlanPlus", @@ -138,27 +138,27 @@ }, { "name": "wlanPlusTip", - "value": "提升网络智能连接体验" + "value": "Automatically switch between WLAN and mobile data to stay online." }, { "name": "wlanDirect", - "value": "WLAN直连" + "value": "WLAN Direct" }, { "name": "wlanSecurityCheck", - "value": "WLAN安全检测" + "value": "WLAN security check" }, { "name": "wlanSecurityCheckTip", - "value": "通过管家对已经连接的热点进行联网安全检测，并暂停自动连接存在安全风险的热点" + "value": "Check the security of connected WLAN networks, and avoid connecting to known networks that pose security risks." }, { "name": "savedWlan", - "value": "已保存的网络" + "value": "Saved WLAN" }, { "name": "installCertificates", - "value": "安装证书" + "value": "Install certificates" } ] } \ No newline at end of file diff --git a/screenshots/devices/img4.en.png b/screenshots/devices/img4.en.png new file mode 100644 index 0000000000000000000000000000000000000000..398810e95f84aceadb19f550861a3f39be22c608 Binary files /dev/null and b/screenshots/devices/img4.en.png differ diff --git a/screenshots/devices/settings.en.gif b/screenshots/devices/settings.en.gif new file mode 100644 index 0000000000000000000000000000000000000000..3a46fd9b5a7cd23f26d9760dc49d254ad251d013 Binary files /dev/null and b/screenshots/devices/settings.en.gif differ