Auto. JS learning notes 15:ui interface basics of autojs Chapter 2

Common basic controls , Mainly in the autojs Display relevant operation interfaces on the .

Catalog

Linear layout : linear

Vertical layout : vertical

Vertical layout : horizontal

Frame layout : frame

Relative layout : relative

slide : scroll

Text control : text

Button control : button

Input box control : input

The image control : img

Check box control : checkbox

Select box control : radio  Select box layout : radiogroup

The whole part UI Code

---

Affirming ： Here we mainly introduce the basic controls and their properties .

no ui Write the basic can see ：Auto.js Learning notes 5：autojs Of UI Interface Basics 1

Linear layout : linear

actually , Both vertical and horizontal layouts are linear layouts . Linear layout has a orientation Properties of , Used to specify the orientation of the layout , The optional value is vertical and horizontal.

for example <linear orientation="vertical"></linear> amount to <vertical></vertical>.

The default orientation for linear layouts is horizontal , therefore , One doesn't specify orientation The linear layout of attributes is the horizontal layout .

<linear orientation="vertical" w = "*" h = "auto" gravity = "center" >  
</linear>

Vertical layout : vertical

<vertical id = "configView" w = "*" h = "auto" gravity = "center" >  
</vertical>

Vertical layout : horizontal

<horizontal id = "configView" w = "*" h = "auto" gravity = "center" >  
</horizontal>

Frame layout : frame

"ui";
ui.layout(
    <frame>
        <button id="ok" text=" determine "/>
    </frame>
);

Relative layout : relative

"ui";
ui.layout(
    <relative w = "auto" h = "auto">
    </relative>
);

slide : scroll

<scroll>
    <relative w = "*" h = "*">
    </relative>
</scroll>

Text control : text

<text id = "configJsonTxt" textStyle = "italic" padding="1 1 1 1" bg = "#34b1e7" textColor = "black" textSize="10sp"> Detailed configuration information                          
</text>

Button control : button

ui;

ui.layout(
    <button id = "testServerAPI" align="center"> Test the interface to get data </button>
);

/* Click event */
ui.testServerAPI.click(()=>{
     // Handle related click events 
});

Input box control : input

<input id = "qunNameIt" singleLine = 'true' text=" Group 1" hint=" Enter the group name or user name "></input>

The image control : img

"ui";
ui.layout(
    <frame>
        <img src="https://www.baidu.com/img/bd_logo1.png"/>
    </frame>
);

Check box control : checkbox

ui;
ui.layout(
     <checkbox id="ck" text=" rotate " gravity="center"></checkbox>
);

if (ui.ck.checked) {
    ...
}

Select box control : radio  Select box layout : radiogroup

ui;
ui.layout(
    <radiogroup id = "objectRGp" orientation = "horizontal" w = "*" h = "auto">
       <radio id = "aRo"  checked = "true" text = "A" marginRight ="10"/>
       <radio id = "bRo" text = "B"/>
       <radio id = "cRo" text = "C" marginRight ="10"/>
    </radiogroup>
);

// Selection status 
ui.aRo.isChecked()

The whole part UI Code

ui;

/*  The dynamic variables related to the timed restart of the device  */
const restartDays = 5*(24*60*60*1000); // Restart days 
var exeRestartState = false;    // Allow restart 
var exeRestartTime = "17:35";   // Allowable time 
var idTimeout;                  // Timer id
var send_content = "";          // Wechat sending content with expired data and closing words 
var curGroNameIndex = 0;        // Current group subscript 

var SharedPrefersUtilsClass = {
    keyWxAutoConfig:function(){"send_info"},
    storageWxAutoConfig:function(){
        let storage = storages.create("wx_auto_send_file");
        return storage;
    },
     Omit other logical variables ...
}

/**  Wechat sends configuration information  */
var wxAutoConfigObj = {
    ip              : "http://192.168.168.28:8080", // Interface ip
    areaCode        : "",       // Area parameters 
    groupNameString : "",       // Group information set string ( The actual configuration content )
    endHint         : " Please go to the above counties （ City ） Departments go to the government service platform to read and handle ", // Conclusion 
    days            : 1,        // Expiration days 
    timingTime      : "9:00",   // Scheduled message sending time 
    curGroupName    : "",       // Current group 
    restartState    : false,    // Device restart timing status 
    openState       : false,    //true It is allowed to send information regularly 
};
 Omit other logical variables ...

ui.layout(
    <vertical id = "setConfigView" w = "*" h = "auto" layout_centerInParent="true" >
      <Switch id = "openSwh"  w = "auto" h = "auto" textStyle = "bold" textColor = "red" 
           text = " Accessibility    "  textSize="16sp" marginBottom = "15"  marginRight ="10"/>
      <Switch id = "timingRestartS"  w = "auto" h = "auto"  textStyle = "bold" 
            text = " Restart the device regularly every week （17:30）" textSize="16sp" marginBottom = "15"  marginRight ="10"/>  
      <vertical>
          <text id = "timePickerModeText" text = " Sliding time selection :" textColor = "black" textSize="16sp" marginTop="5" />
          <timepicker id = "timePickerMode"  timePickerMode="spinner" />
      </vertical>
      <input id = "IpIt" singleLine = 'true' text="" hint=" Interface IP"></input>
      <text textStyle = "italic" padding="1 1 1 1" bg = "#34b1e7" 
              textColor = "black" textSize="10sp">
                   Interface IP：http://192.168.168.28:8080
      </text>
      <input id = "qunNameIt" singleLine = 'true' text=" Government affairs center " hint=" Enter the group name or user name "></input>
      <text textStyle = "italic" padding="1 1 1 1" bg = "#34b1e7" 
              textColor = "black" textSize="10sp">
                   for example ： Group name 1
      </text>
      <input id = "areaCodeIt" singleLine = "true" hint=" for example ： Zigong City " 
              text=' Zigong City , Panzhihua City , Bazhong '></input>
      <text textStyle = "italic" padding="1 1 1 1" bg = "#34b1e7" 
            textColor = "black" textSize="10sp">
                 Multiple areas such as ： name , name 
      </text>
      <input id = "countIt" digit="1234567890" singleLine = "true" text = "3"
              hint=" Enter the expiration days " ></input>
      <text textStyle = "italic" padding="1 1 1 1" bg = "#34b1e7" 
              textColor = "black" textSize="10sp">
                  Set expiration days , Must be greater than 0
      </text>
      <input id = "endTxt" text = ""></input>
      <text textStyle = "italic" padding="1 1 1 1" bg = "#34b1e7" 
              textColor = "black" textSize="10sp">
                  You can customize the content of the closing words 
      </text>
      <radiogroup id = "objectRGp" orientation = "horizontal" w = "*" h = "auto">
              <radio id = "qunRo"  checked = "true" text = " Group chat " marginRight ="10"/>
              <radio id = "userRo" text = " Designated user "/>
              <radio id = "otherRo" text = " Other " marginRight ="10"/>
      </radiogroup>
   </vertical>
);

onListen();

/** ui Button monitoring settings  */
function onListen(){
    ui.timePickerMode.setIs24HourView(true);// Set the current time control to 24 hourly 
    ui.timePickerMode.setHour(9);   // Set the current hour 
    ui.timePickerMode.setMinute(0); // Set current score （0-59）
    ui.timePickerMode.setOnTimeChangedListener({
    onTimeChanged: function (v, h, m) {
        //h  Get the value of   by 24 Hour format 
        wxAutoConfigObj.timingTime = h + ":" + m ;
        ui.timePickerModeText.setText(" Sliding time selection : " + wxAutoConfigObj.timingTime);
        }
    });

    // Regular restart button monitoring 
    ui.timingRestartS.on("check", function(checked) {
        if(auto.root==null){
            alert(" Configuration information error ", " System is root This feature is not available ");
            ui.timingRestartS.setChecked(false);
            return;
        }

        if(!checked||!myUtils.isEmpty(wxAutoConfigObj.areaCode)||
            !myUtils.isEmpty(wxAutoConfigObj.groupNameList)){
               //  When users check the accessibility option , Jump to the page and let the user open it 
                wxAutoConfigObj.restartState = checked;
                if(checked){
                    idTimeout = setTimeout(function(){
                        exeRestartState = true;
                    }, restartDays);
                    alert(" Periodically restart the device ", " Enable the function of regularly restarting the device ");
                }else{
                    alert(" Periodically restart the device ", " Cancel the scheduled restart device function ")
                    clearTimeout(idTimeout)
                }
                SharedPrefersUtilsClass.setWxAutoSendConfig(wxAutoConfigObj);
            }else{
                alert(" Configuration information error ", " Please fill in the correct wechat automatic publishing configuration information ！");
                ui.timingRestartS.setChecked(false);
        }
    });
    // More code is omitted ...
    
}

It's no use just looking without knocking
After reading, we must practice
Be sure to type the code
Be sure to run trial and error
This is meaningful learning