1. Sample introduction
This Codelab is based on the input component, label component and dialog component to implement the input, required verification and submission of the form page:
1. Set different types for the input component (such as text, email, date, etc.) and complete the form page.
2. Perform required verification on the username, email, and hobby input boxes on the form page.
3. Use the pop-up box to select gender and hobbies.
Related concepts
● Input component : interactive component, including radio button, multi-select box, button and single-line text input box.
● Label component : Define corresponding labels for input, button, and textarea components. When the label is clicked, the click effect of the bound component will be triggered.
● dialog component : custom pop-up window container.
Complete example
2. Environment setup
We first need to complete the establishment of the HarmonyOS development environment. Please refer to the following steps.
Software requirements
● DevEco Studio version: DevEco Studio 3.1 Release and above.
● HarmonyOS SDK version: API version 9 and above.
Hardware requirements
● Device type: Huawei mobile phone or Huawei mobile phone device simulator running on DevEco Studio.
● HarmonyOS system: 3.1.0 Developer Release and above.
Environment build
1. Install DevEco Studio. For details, please refer to Download and Install Software .
2. Set up the DevEco Studio development environment. The DevEco Studio development environment depends on the network environment. You need to be connected to the network to ensure the normal use of the tool. You can configure the development environment according to the following two situations:
● If you have direct access to the Internet, you only need to download the HarmonyOS SDK .
● If the network cannot directly access the Internet, it needs to be accessed through a proxy server. Please refer to Configuring the Development Environment .
1. Developers can refer to the following link to complete the relevant configuration of device debugging:
● Use a real machine for debugging
● Use the simulator for debugging
3. Interpretation of code structure
This Codelab only explains the core code. For the complete code, we will provide it in the source code download or gitee.
├──entry/src/main/js // 代码区│ └──MainAbility│ ├──common│ │ ├──constant│ │ │ └──commonConstants.js // 公共常量│ │ └──images // 图片资源目录│ ├──i18n│ │ ├──en-US.json // 英文国际化│ │ └──zh-CN.json // 中文国际化│ ├──pages│ │ └──index│ │ ├──index.css // 表单页面样式│ │ ├──index.hml // 表单页面│ │ └──index.js // 表单页面逻辑│ └──app.js // 程序入口└──entry/src/main/resource // 应用静态资源目录
4. Page design
The page includes user name, email address, date of birth, height, gender, hobbies input box and submit button. Click the submit button for required verification.
<!-- index.hml --><div class="container">...<div class="user-area"><image class="image" src="{ { urls.user }}"></image><div class="input-label"><image src="{ { urls.required }}"></image><label class="label" target="user">{ { $t('strings.user') }}</label></div><div class="input-div"><input class="input" id="user" type="text" placeholder="{ { $t('strings.user') }}" onchange="inputChange"ontranslate="translate"></input></div></div><div class="input-area"><image src="{ { urls.email }}"></image><div class="input-label"><image src="{ { urls.required }}"></image><label class="label" target="email">{ { $t('strings.email') }}</label></div><div class="input-div"><input class="input" id="email" type="email" placeholder="{ { $t('strings.email') }}"onchange="inputChange"></input></div></div><div class="input-area"><image src="{ { urls.date }}"></image><div class="input-label"><label class="label" target="date">{ { $t('strings.birthday') }}</label></div><div class="input-div"><input class="input" id="date" type="date" placeholder="{ { $t('strings.date') }}" onchange="inputChange"></input></div></div><div class="input-area"><image src="{ { urls.height }}"></image><div class="input-label"><label class="label" target="height">{ { $t('strings.height_holder') }}</label></div><div class="input-div"><input class="input" id="height" type="number" placeholder="{ { $t('strings.height') }}"onchange="inputChange"></input></div></div><div class="input-area"><image src="{ { urls.gender }}"></image><div class="input-label"><label class="label" target="gender">{ { $t('strings.gender') }}</label></div><div class="input-div" onclick="openGender"><input class="input select" id="gender" type="text" placeholder="{ { $t('strings.gender') }}"softkeyboardenabled="false"value="{ { genderObj[gender] }}"></input><image src="{ { urls.spinner }}"></image></div></div><div class="input-area"><image src="{ { urls.hobby }}"></image><div class="input-label"><image src="{ { urls.required }}"></image><label class="label" target="hobbies">{ { $t('strings.hobbies') }}</label></div><div class="input-div" onclick="openHobby"><input class="input select" id="hobbies" type="text" placeholder="{ { $t('strings.hobby') }}"softkeyboardenabled="false" value="{ { hobbies.join(',') }}"></input><image src="{ { urls.spinner }}"></image></div></div><button type="capsule" onclick="buttonClick">{ { $t('strings.submit') }}</button>...</div>
The effect is as shown in the figure:
Click the gender input box to pop up the gender radio button, click the hobby input box to pop up the hobby multi-select box.
<!-- index.hml --><div class="container">...<dialog id="genderDialog"><div class="gender-dialog"><text>{ { $t('strings.gender_select') }}</text><div><text>{ { $t('strings.gender_male') }}</text><input if="{ { gender === 0 }}" class="radio" type="radio" checked="true" name="radio"value="{ { $t('strings.gender_male') }}" onchange="onRadioChange"></input><input if="{ { gender === 1 }}" class="radio" type="radio" checked="false" name="radio"value="{ { $t('strings.gender_male') }}" onchange="onRadioChange"></input></div><divider vertical="false"></divider><div><text>{ { $t('strings.gender_female') }}</text><input if="{ { gender === 0 }}" class="radio" type="radio" checked="false" name="radio"value="{ { $t('strings.gender_female') }}"></input><input if="{ { gender === 1 }}" class="radio" type="radio" checked="true" name="radio"value="{ { $t('strings.gender_female') }}"></input></div><div class="button"><text onclick="closeGender">{ { $t('strings.cancel') }}</text><divider vertical="true"></divider><text onclick="confirmGender">{ { $t('strings.determined') }}</text></div></div></dialog><dialog id="hobbyDialog"><div class="hobby-dialog"><text>{ { $t('strings.hobby') }}</text><div><text>{ { $t('strings.hobby_swim') }}</text><input class="checkbox" type="checkbox" checked="{ { hobbies.indexOf(hobbiesOjb[0]) !== -1 }}"value="{ { hobbiesOjb[0] }}" onchange="checkboxOnChange"></input></div><div><text>{ { $t('strings.hobby_fitness') }}</text><input class="checkbox" type="checkbox" checked="{ { hobbies.indexOf(hobbiesOjb[1]) !== -1 }}"value="{ { hobbiesOjb[1] }}" onchange="checkboxOnChange"></input></div><div><text>{ { $t('strings.hobby_soccer') }}</text><input class="checkbox" type="checkbox" checked="{ { hobbies.indexOf(hobbiesOjb[2]) !== -1 }}"value="{ { hobbiesOjb[2] }}" onchange="checkboxOnChange"></input></div><div><text>{ { $t('strings.hobby_basketball') }}</text><input class="checkbox" type="checkbox" checked="{ { hobbies.indexOf(hobbiesOjb[3]) !== -1 }}"value="{ { hobbiesOjb[3] }}" onchange="checkboxOnChange"></input></div><div><text>{ { $t('strings.hobby_reading_book') }}</text><input class="checkbox" type="checkbox" checked="{ { hobbies.indexOf(hobbiesOjb[4]) !== -1 }}"value="{ { hobbiesOjb[4] }}" onchange="checkboxOnChange"></input></div><div class="button"><text onclick="closeHobby">{ { $t('strings.cancel') }}</text><divider vertical="true"></divider><text onclick="confirmHobby">{ { $t('strings.determined') }}</text></div></div></dialog></div>
The effect is as shown in the figure:
5. Background logic processing
When the values in the user name, email address, date of birth, and height input boxes change, they will be updated in the data object in real time.
// index.jsexport default {data: {...user: '',email: '',date: '',height: '',...},...// 实时保存输入框内容inputChange(event) {let idName = event.target.id;if (idName === CommonConstants.USER) {this.user = event.value;} else if (idName === CommonConstants.EMAIL) {this.email = event.value;} else if (idName === CommonConstants.DATE) {this.date = event.value;} else if (idName === CommonConstants.HEIGHT) {this.height = event.value;}},...}
Select gender and hobbies through customized pop-up boxes. Click the Cancel button in the pop-up box to close the current pop-up box. Click the OK button to set the selected value first and then close the pop-up box.
// index.jsexport default {data: {...genderObj: [],genderTemp: 0,gender: 0,hobbiesOjb: [],hobbiesTemp: [],hobbies: []},...// 打开性别弹框openGender() {this.$element('genderDialog').show();},// 重新选择性别onRadioChange(event) {if (event.checked) {this.genderTemp = 0;} else {this.genderTemp = 1;}},// 关闭性别弹框closeGender() {this.$element('genderDialog').close();},// 性别弹框中点击“确定”confirmGender() {this.gender = this.genderTemp;this.closeGender();},// 打开爱好弹框openHobby() {this.$element('hobbyDialog').show();},// 关闭爱好弹框closeHobby() {this.$element('hobbyDialog').close();},// 在爱好弹开中点击“确定”confirmHobby() {let that = this;let copyHobbies = Object.create(Object.getPrototypeOf(this.hobbiesTemp));Object.getOwnPropertyNames(this.hobbiesTemp).forEach((items) => {let item = Object.getOwnPropertyDescriptor(that.hobbiesTemp, items);Object.defineProperty(copyHobbies, items, item);})this.hobbies = copyHobbies;this.closeHobby();},...// 选择爱好checkboxOnChange(event) {let currentVal = event.currentTarget.attr.value;if (event.checked) {this.hobbiesTemp.push(currentVal);} else {this.hobbiesTemp = this.hobbiesTemp.filter(item => {return item !== currentVal;});}},...}
Before clicking the submit button to submit the form, first perform required verification on the user name, password, email, and hobbies, and then use regular expressions to verify the date of birth in the "yyyy-mm-dd" format and perform an integer verification on the height. Or floating point checksum.
// index.jsexport default {...// 表单提交验证buttonClick() {if (this.user === '') {this.showPrompt(this.$t('strings.user_check_null'));return;}if (this.email === '') {this.showPrompt(this.$t('strings.email_check_null'));return;}if (this.hobbies.length === 0) {this.showPrompt(this.$t('strings.hobby_check_null'));return;}if ((this.date !== '') && (!this.checkDateInput(this.date))) {this.showPrompt(this.$t('strings.date_not_format'));return;}if ((this.height !== '') && (!this.checkHeight(this.height))) {this.showPrompt(this.$t('strings.height_not_format'));return;}this.showPrompt(this.$t('strings.success'));},...// 表单验证结果showPrompt(msg) {prompt.showToast({message: msg,duration: CommonConstants.DURATION});},...}
Summarize
You have completed this Codelab study and learned the following knowledge points:
1. Use of input component.
2. Use of label component.
3. Use of dialog component.