• This is the 8th day of my participation in the August More Text Challenge.

Bounced components

  • HarmonyOS uses two types of popups:
  1. The first is a normal cartridge (CommonDialog), prompt the user and let the user carry out the corresponding operation, for example, when using taxi software, if the mobile phone does not open positioning, there will be a pop-up prompt, let you open positioning in the mobile phone, this is a common pop-up box, give you as a message prompt, and do some operations.

2. The second message prompt box (ToastDialog), such as: every time you open the “Small station” APP, there will be a prompt, these are also pop-up boxes. These pop-ups don’t need to be selected by the user, they just tell the user something

1. CommonDialog composition and usage

  • In Hongmeng, the normal and pop-ups actually have a default layout
  • There are at most three select buttons below

  • The popbox does not pop up immediately when the APP starts, generally there are two situations:
  1. It pops up when you click the button
  2. It also pops up when the program meets certain requirements

Project Case:

  • New project:DialogApplication

ability_main


      
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical">

    <Button
        ohos:id="$+id:but1"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="点我"
        ohos:text_size="40vp"
        ohos:background_element="red"/>

</DirectionalLayout>
Copy the code

MainAbilitySlice

package com.xdr630.dialogapplication.slice;

import com.xdr630.dialogapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
import ohos.agp.components.Component;
import ohos.agp.window.dialog.CommonDialog;
import ohos.agp.window.dialog.IDialog;

public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);

        //1. Find the button
        Button but1 = (Button) findComponentById(ResourceTable.Id_but1);

        //2. Add the click event to the button
        but1.setClickedListener(this);

    }

    @Override
    public void onActive(a) {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }

    @Override
    public void onClick(Component component) {
        // Just pop out the normal popbox
        //1. Create a pop-up object
        // this: The current pop-up box is displayed in the current interface
        CommonDialog cd = new CommonDialog(this);
        //2. There is a default layout inside the popbox
        // Set the title
        cd.setTitleText("System Location service is disabled.");
        // Set the content
        cd.setContentText("Please turn on the GPS service so that the driver can pick you up correctly.");
        // Set button
        // Parameter 1: index 0 1 2 of the button
        // Argument 2: text on the button
        // Parameter 3: What can I do after I click the button
        cd.setButton(0."Settings".new IDialog.ClickedListener() {
            @Override
            public void onClick(IDialog iDialog, int i) {
                // Write what to do when you click Settings
                // If you don't need to do anything after clicking, just pass null in the third argument

                // Because there is no way to jump to the interface where the Settings are located after clicking the Settings here, so I don't write it for now, and I will add it here after I learn it later}});// Set the cancel button
        cd.setButton(1."Cancel".null);

        // Display the popboxcd.show(); }}Copy the code
  • Run:

  • After the click:

  • When I click againGray areaThere was no response
  • Click orcancelThere is no response to the button because it is set up therenull

There are two general cases of clicking the popbox:

  1. Clicking on the gray area can not be cancelled, you must click the Cancel button to cancel the pop-up box
  2. Click the gray area or cancel button to cancel the pop-up effect

Let’s implement the above two cases:

  1. Clicking on the grey area can also cancel the case of the button, which is added below based on the code above

2. When the mouse click on the cancel button can also make the pop-up box disappear, set the cancel button abovenullSet to:

  • Run, click:

  • Both of the above are implemented

2. CommonDialog custom layout use

  • CommonDialog has a default layout that consists of three parts:

  • So just call the method and put some text in it
  • The following is an introduction to the content of the custom pop-up box

An example is as follows: There is a button on the main screen, and a pop-up box will appear after clicking a button

  • There are three things inside: a line of text and two buttons

  • When the OK button is clicked, the text above will change to “hit OK button”, and when the cancel button is clicked, the pop-up box will disappear

Here is the implementation:

  • New project:DialogLayoutApplication

ability_main


      
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical">

    <Button
        ohos:id="$+id:but"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="点我"
        ohos:text_size="40fp"
        ohos:background_element="red"/>


</DirectionalLayout>
Copy the code
  • The contents of the popbox can also be written in XML. Create a new layout file

  • The file name cannot be uppercase

  • The above frame consists of a Text Text + two buttons
  • After generating the layout file of the popbox, change the size of the layout file first. By default, the layout file fills the entire screen

  • The content of the text is set in the Java code because it changes

  • Two buttons will squeeze together if they are not margins, so add a margin

messagedialog


      
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_content"
    ohos:width="match_content"
    ohos:orientation="vertical">

    <Text
        ohos:id="$+id:message"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text_size="40fp"/>
    
    <Button
        ohos:id="$+id:submit"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="Sure"
        ohos:text_size="40fp"
        ohos:background_element="red"/>

    <Button
        ohos:id="$+id:cancel"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="Cancel"
        ohos:text_size="40fp"
        ohos:background_element="blue"
        ohos:top_margin="10vp"
        />


</DirectionalLayout>
Copy the code

MainAbilitySlice

package com.xdr630.dialoglayoutapplication.slice;

import com.xdr630.dialoglayoutapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.*;
import ohos.agp.window.dialog.CommonDialog;

public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);

        //1. Locate the buttons in the layout
        Button but = (Button) findComponentById(ResourceTable.Id_but);

        // add a click event
        but.setClickedListener(this);
    }

    @Override
    public void onActive(a) {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }

    @Override
    public void onClick(Component component) {
        // Display the popbox
        // Create a popbox object
        CommonDialog cd = new CommonDialog(this);
        // The size is the default package content
        // The popbox is centered by default
        // Pop-ups are transparent by default
        // The popup box defaults to a right Angle, which can be set to a rounded Angle
        cd.setCornerRadius(15);


        // Load the MESSageDialog XML file into memory, hand it to the popbox and display it

        // Load the XML file and get a layout object
        // Parse method: Load an XML file and return a layout object
        // Parameter one: the XML file to load
        // Parameter two: Whether the XML file is related to other XML files. If the irrelevant is independent, null will do the job
        // If the file is independent, write false
        DirectionalLayout dl = (DirectionalLayout) LayoutScatter.getInstance(this).parse(ResourceTable.Layout_messagedialog, null.false);

        // Set events or modify content for text and buttons in the layout
        // Call the component in the layout with dl
        Text title = (Text) dl.findComponentById(ResourceTable.Id_message);
        Button submit = (Button) dl.findComponentById(ResourceTable.Id_submit);
        Button cancel = (Button) dl.findComponentById(ResourceTable.Id_cancel);

        // Set the content for the title title
        title.setText("Please select the button below and click.");

        // You also need to add click events for both buttons
        submit.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                title.setText("Hit ok"); }});// Cancel buttons also add click events
        cancel.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                // Close the popup box after clicking the Cancel buttoncd.destroy(); }});// There is no relationship between the layout object and the frame
        // You also need to pass the layout object to the popbox
        cd.setContentCustomComponent(dl);

        // Let the popbox be displayedcd.show(); }}Copy the code
  • Run:

  • Click on it, and it will pop up

  • Click the OK button in the pop-up box to change the text content

  • After clicking the cancel button, the pop-up box disappears and the original interface is restored

3. Optimize code — extract popbox tool class

  • In the work, if you need to use more than one popbox, and each time write the same as above, it will cause code redundancy, inconvenient management
  • The following is to extract the frame into a tool class, when using a frame, directly call the method in the tool class can be
  • Create a utility class

  • Create a popbox tool class:MyDialog

  • When the outside world calls this method, a pop-up box appears

  • Cut the code from the OnClick method above into the showDialog method above

  • After pasting in, some of the code in the MyDialog class changes as follows

  • MainAbilitySlice class modified as follows, directly calledMyDialogMethod, pass the parameter

  • Run:

  • When you click ok, you see that the Text content is passed in from the previous method