“This is the 26th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”
A list,
1.1 What is a component
A component is a general term for elements like text, buttons, images, etc
1.2 What is an event
An event is an operation that can be recognized by a component. Common events include click, double click, long press, and swipe.
1.3 What is a Click event
Click events are also called click events. Click events are the most frequently triggered events during normal operations.
1.4 Implementation Procedure
There are four main steps to implement HarmonyOS click events:
- Define a component, assign a unique ID to the component, and then locate the component by its ID
- Bind click events to defined components
- Implement the ClickedListener interface and override the onClick method
- Implement the specific logic in the onClick method to complete the click event related business operations
Second, the case
2.1 Creating a Project
File -> New -> New Project
Select Empty Ability(Java) and click Next;
Fill in the configuration information of the project and click Next.
After the project is created, it looks like this
\
2.2 Defining Components
This step will define a button (button is also a component), and assign a unique ID to the button component, and then locate the button component by ID. Here, it may be necessary to first understand the Ability related technology, so as to better understand the Ability framework and the inclusion relationship between pages. For those of you who are not, check out this article for a simple introduction to HarmonyOS (Ability and Pages).
Find the MainAbilitySlice. Java file, then press CTRL + click Resourcetable. Layout_ability_main to enter the ability_main.xml file
You can also locate the ability_main.xml file directly
\
Component code development
<? The XML version = "1.0" encoding = "utf-8"? > <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:alignment="center" ohos:orientation="vertical"> <! -- oHOs :id Defines the component ID, note the format is fixed $+id: XXXX --> <! --match_content indicates the content of the package, <Button ohos:id="$+id: Button "ohos:width="match_content" ohos:height="match_content" ohos:text=" click on me" ohos:text_size="19fp" ohos:text_color="#FFFFFF" ohos:top_padding="8vp" ohos:bottom_padding="8vp" ohos:right_padding="70vp" ohos:left_padding="70vp" ohos:center_in_parent="true" ohos:margin="10vp" ohos:background_element="#007DFF" /> </DirectionalLayout>Copy the code2.3 Component binding Click events defined
The Component findComponentById(int resID) method returns Component, which is the parent of all components in HarmonyOS. We first find the MainAbilitySlice. Java file and bind the event in the onStart method.
package com.liziba.demo.slice; import com.liziba.demo.ResourceTable; import ohos.aafwk.ability.AbilitySlice; import ohos.aafwk.content.Intent; import ohos.agp.components.Button; import ohos.agp.components.Component; public class MainAbilitySlice extends AbilitySlice { @Override public void onStart(Intent intent) { super.onStart(intent); super.setUIContent(ResourceTable.Layout_ability_main); Button Button = (Button) findComponentById(resourcetable.id_button); / / 2. Binding click event, the code is not complete, need the incoming Component. ClickedListener implementation class button. SetClickedListener (); } @Override public void onActive() { super.onActive(); } @Override public void onForeground(Intent intent) { super.onForeground(intent); }}Copy the code2.4 Implement ClickedListener interface and override onClick method
Here can be used directly MainAbilitySlice implementation Component. ClickedListener interface, has also been defined by the inner class ButtonListener implementation Component. ClickedListener interface, Or other external classes implement Component. ClickedListener interface can, case using the second case.
package com.liziba.demo.slice; import com.liziba.demo.ResourceTable; import ohos.aafwk.ability.AbilitySlice; import ohos.aafwk.content.Intent; import ohos.agp.components.Button; import ohos.agp.components.Component; public class MainAbilitySlice extends AbilitySlice { @Override public void onStart(Intent intent) { super.onStart(intent); super.setUIContent(ResourceTable.Layout_ability_main); Button Button = (Button) findComponentById(resourcetable.id_button); / / 2. Binding button click events. SetClickedListener (new ButtonListener ()); } @Override public void onActive() { super.onActive(); } @Override public void onForeground(Intent intent) { super.onForeground(intent); }} / ClickedListener interface and write the onClick method to realize * * * * / class ButtonListener implements Component. ClickedListener {/ * * * @override public void onClick(component component) {// Override public void onClick(component component) {}Copy the code2.5 Implement the specific logic in the onClick method to complete the relevant business operations of the click event
In the onClick method, the logic of the specific click action is handled by modifying the text in the button to display the click event effect
/ * * * implementation ClickedListener interface and rewrite the onClick method * / class ButtonListener implements Component. ClickedListener {/ * * * @override public void onClick(component component) {// Override public void onClick(component component) {// Override public void onClick(component component) Button button = (Button) component; Button.settext (" Oh, I've been clicked!" ); }}Copy the codeThree, test,
3.1 Logging In to the Remote Emulator
Go to Tools -> Device Manager
Click Login to Login
Log in to the Huawei account and click Permit. If you have not registered an account, register one first
Select P40 as the remote emulator
3.2 Running Projects
Click on the triangle in the upper right to run directly, or click on the Beetle to go into debug mode
Run effect, before clicking
After clicking on
