This is the twenty-sixth day of my participation in the Gwen Challenge in November. See the details of the event: the last Gwen Challenge in 2021

How to use Java to make a Alipay balance interface

preface

Recently, I was doing a small program of alipay balance page. Today, I sorted out the idea of doing this. (Only part of it)

drawing

We will use JavaFx, a software for creating graphic pages, to create a desired graphic page

Here is a alipay balance interface I made

With the graphics roughly like this, we’ll give each box an ID to associate with the Java code.

Here the id is added like this:

Select the box where you want to change the ID, enter the id in fx: ID in the right column, and don’t forget to save.

The IDEA of article

First, copy your page file into your Java project
Then it’s time to start building our page frame

To create a framework, you need to inherit the Application class
```
public class MainFrame extends Application 
Copy the code
```
Define the parameters required for the page

    private ChoiceBox yunyingshang;
    private ChoiceBox network;
    private ChoiceBox time01;
    private ChoiceBox time02;
    private ChoiceBox time03;
    private Slider dianliang;
    private ChoiceBox signal;
    private RadioButton show01;
    private RadioButton show02;
    private ChoiceBox status;
    private RadioButton show03;
    private RadioButton show04;
    private Button building;
    private ImageView iv;
    private Button save;
    private TextField money;
    private TextField yuebao;
    private TextField beiyongjin;
Copy the code

4. Create a new scene to get the page size

Scene Scene = new Scene(pane,953,665); primaryStage.setScene(scene); primaryStage.show();Copy the code

5. Get page parameters (pass parameters)

@Override
    public void start(Stage primaryStage) throws Exception {
        Pane pane = (Pane) FXMLLoader.load(MainFrame.class.getClassLoader().getResource("Alipay.fxml"));
        this.yunyingshang = (ChoiceBox)pane.lookup("#yunyingshang");
        this.network = (ChoiceBox) pane.lookup("#network");
        this.time01 = (ChoiceBox) pane.lookup("#time01");
        this.time02 = (ChoiceBox) pane.lookup("#time02");
        this.time03 = (ChoiceBox) pane.lookup("#time03");
        this.dianliang = (Slider) pane.lookup("#dianliang");
        this.signal = (ChoiceBox) pane.lookup("#signal");
        this.show01 = (RadioButton) pane.lookup("#show01");
        this.show02 = (RadioButton) pane.lookup("#show02");
        this.status = (ChoiceBox)pane.lookup("#status");
        this.show03 = (RadioButton) pane.lookup("#show03");
        this.show04 = (RadioButton) pane.lookup("#show04");
        this.building = (Button)pane.lookup("#building");
        this.iv = (ImageView) pane.lookup("#iv");
        this.save = (Button) pane.lookup("#save");
        this.money = (TextField)pane.lookup("#money");
        this.yuebao = (TextField)pane.lookup("#yuebao");
        this.beiyongjin = (TextField)pane.lookup("#beiyongjin");
Copy the code

Note: the parameters here are determined according to the page you make

6. Initialize the data in the drop-down list box and set the default value

Yunyingshang.getitems ().add(" China Mobile "); Yunyingshang.getitems ().add(" China Unicom "); Yunyingshang.getitems ().add(" China Telecom "); Signal. The getItems (). The add (" 1 "); Signal. The getItems (). The add (" 2 "); Signal. The getItems (). The add (" 3 "); Signal. The getItems (). The add (" 4 "); Signal. The getItems (). The add (" 5 "); network.getItems().add("Wifi"); Network. The getItems (). The add (" no "); network.getItems().add("G"); network.getItems().add("E"); network.getItems().add("3G"); network.getItems().add("4G"); time01.getItems().add("-"); Time01. GetItems (). The add (" morning "); Time01. GetItems (). The add (" afternoon "); Status. GetItems (). The add (" normal "); Status.getitems ().add(" charging "); // Set a default value yunyingshang.setValue(" China Mobile "); Signal. SetValue (" 5 "); network.setValue("Wifi"); time01.setValue("-"); show01.setSelected(true); // Set the default value of button. By default, show01 status.setValue(" normal ") is selected. show03.setSelected(true); // Show03 yuebao.settext (" automatic switch to 1.00 yuan ") is selected by default; // Set the default value of TextField beiyongjin. SetText ("500 yuan for 7 days "); For (int I =0; i<=23; i++) { if(i<=9) { time02.getItems().add("0"+i); } else{ time02.getItems().add(i); } } for(int j=0; j<=59; j++) { if(j<=9) { time03.getItems().add("0"+j); } else{ time03.getItems().add(j); }}Copy the code

7. Listen for button click events

Building. SetOnAction (new EventHandler<ActionEvent>() {@override public void handle(ActionEvent event) String money_value = money.getText(); String yuebao_value = yuebao.getText(); String beiyongjin_value = beiyongjin.getText(); if(money_value.equals("")){ Alert alert = new Alert(Alert.AlertType.WARNING); Alert. SetContentText (" Please enter amount!!" ); alert.show(); } else{imageView = image.getimage (); // Tool class BufferedImage BufferedImage = swingFxutils. fromFXImage(image,null); Graphics graphics = bufferedImage.getGraphics(); graphics.setColor(Color.WHITE); // Set the color to white graphics.setfont (new Font(" Microsoft Yahei ",Font.PLAIN,116)); DrawString (money_value,30,350); // set the font graphics.drawString(money_value,30,350); Graphics.setcolor (new Color(180,180,180)); Graphics.setfont (new Font(" Microsoft Yahei ",Font.PLAIN,24)); Graphics. DrawString (yuebao_value, 521715); Graphics. DrawString (beiyongjin_value, 561898); / / graphics. DrawImage (signal, 5, 0, null); / / graphics. DrawImage (wifi, 175, 0, null); / / graphics. DrawImage (logo, 64, 0, null); / / graphics. DrawImage (dl, 671, 0, null); / / graphics. DrawImage (js, 600, 0, null); WritableImage writableImage = SwingFXUtils.toFXImage(bufferedImage,null); iv.setImage(writableImage); }}});Copy the code

8. Listen for button save-time events

save.setOnAction(new EventHandler<ActionEvent>() { @Override public void handle(ActionEvent event) { FileChooser fileChooser = new FileChooser(); fileChooser.setInitialDirectory(new File("e://")); / / save the path (custom) File File = fileChooser. ShowSaveDialog (null); if(file! =null){ Image image = iv.getImage(); BufferedImage bufferedImage = SwingFXUtils.fromFXImage(image, null); try{ ImageIO.write(bufferedImage,"png",file); } catch (IOException e){ e.printStackTrace(); }}}});Copy the code

9. The last main function is written and published

Complete code and page presentation are attached

package com.hbwl.frame;

import javafx.application.Application;
import javafx.embed.swing.SwingFXUtils;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.image.WritableImage;
import javafx.scene.layout.Pane;
import javafx.stage.FileChooser;
import javafx.stage.Stage;

import javax.imageio.ImageIO;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;

public class MainFrame extends Application {
    private ChoiceBox yunyingshang;
    private ChoiceBox network;
    private ChoiceBox time01;
    private ChoiceBox time02;
    private ChoiceBox time03;
    private Slider dianliang;
    private ChoiceBox signal;
    private RadioButton show01;
    private RadioButton show02;
    private ChoiceBox status;
    private RadioButton show03;
    private RadioButton show04;
    private Button building;
    //private TextField money;
    private ImageView iv;
    private Button save;
    private TextField money;
    private TextField yuebao;
    private TextField beiyongjin;

    @Override
    public void start(Stage primaryStage) throws Exception {
        Pane pane = (Pane) FXMLLoader.load(MainFrame.class.getClassLoader().getResource("Alipay.fxml"));
        this.yunyingshang = (ChoiceBox)pane.lookup("#yunyingshang");
        this.network = (ChoiceBox) pane.lookup("#network");
        this.time01 = (ChoiceBox) pane.lookup("#time01");
        this.time02 = (ChoiceBox) pane.lookup("#time02");
        this.time03 = (ChoiceBox) pane.lookup("#time03");
        this.dianliang = (Slider) pane.lookup("#dianliang");
        this.signal = (ChoiceBox) pane.lookup("#signal");
        this.show01 = (RadioButton) pane.lookup("#show01");
        this.show02 = (RadioButton) pane.lookup("#show02");
        this.status = (ChoiceBox)pane.lookup("#status");
        this.show03 = (RadioButton) pane.lookup("#show03");
        this.show04 = (RadioButton) pane.lookup("#show04");
        this.building = (Button)pane.lookup("#building");
        this.iv = (ImageView) pane.lookup("#iv");
        this.save = (Button) pane.lookup("#save");
        this.money = (TextField)pane.lookup("#money");
        this.yuebao = (TextField)pane.lookup("#yuebao");
        this.beiyongjin = (TextField)pane.lookup("#beiyongjin");

        //添加下拉框的初始化数据
        yunyingshang.getItems().add("中国移动");
        yunyingshang.getItems().add("中国联通");
        yunyingshang.getItems().add("中国电信");

        signal.getItems().add("1格");
        signal.getItems().add("2格");
        signal.getItems().add("3格");
        signal.getItems().add("4格");
        signal.getItems().add("5格");

        network.getItems().add("Wifi");
        network.getItems().add("无");
        network.getItems().add("G");
        network.getItems().add("E");
        network.getItems().add("3G");
        network.getItems().add("4G");

        time01.getItems().add("-");
        time01.getItems().add("上午");
        time01.getItems().add("下午");


        status.getItems().add("正常");
        status.getItems().add("充电中");


        //设置一个默认值
        yunyingshang.setValue("中国移动");
        signal.setValue("5格");
        network.setValue("Wifi");
        time01.setValue("-");
        show01.setSelected(true);//设置button的默认值  默认选中show01
        status.setValue("正常");
        show03.setSelected(true);//默认选中show03
        yuebao.setText("已自动转1.00元");//设置TextField的默认值
        beiyongjin.setText("500元用7天");

        //添加手机时间
        for(int i=0;i<=23;i++)
        {
            if(i<=9)
            {
                time02.getItems().add("0"+i);
            }
            else{
                time02.getItems().add(i);
            }
        }
        for(int j=0;j<=59;j++)
        {
            if(j<=9)
            {
                time03.getItems().add("0"+j);
            }
            else{
                time03.getItems().add(j);
            }
        }

        //监听按钮的点击事件
        building.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent event) {
                //获取money的数据
                String money_value = money.getText();
                String yuebao_value = yuebao.getText();
                String beiyongjin_value = beiyongjin.getText();
                //String wifi = logo.

                if(money_value.equals("")){
                    Alert alert = new Alert(Alert.AlertType.WARNING);
                    alert.setContentText("穷屌丝，请输入金额!!");
                    alert.show();
                } else{
                    //先获取到imageView
                    //BufferedImage 才有画笔
                    Image image = iv.getImage();
                    //工具类
                    BufferedImage bufferedImage = SwingFXUtils.fromFXImage(image,null);
                    Graphics graphics = bufferedImage.getGraphics();
                    graphics.setColor(Color.WHITE);
                    graphics.setFont(new Font("微软雅黑",Font.PLAIN,116));
                    graphics.drawString(money_value,30,350);

                    graphics.setColor(new Color(180,180,180));
                    graphics.setFont(new Font("微软雅黑",Font.PLAIN,24));
                    graphics.drawString(yuebao_value,521,715);
                    graphics.drawString(beiyongjin_value,561,898);

//                    graphics.drawImage(signal,5,0,null);
//                    graphics.drawImage(wifi,175,0,null);
//                    graphics.drawImage(logo,64,0,null);
//                    graphics.drawImage(dl,671,0,null);
//                    graphics.drawImage(js,600,0,null);

                    WritableImage writableImage = SwingFXUtils.toFXImage(bufferedImage,null);
                    iv.setImage(writableImage);
                }
            }
        });
        //监听保存的时间
        save.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent event) {
                FileChooser fileChooser = new FileChooser();
                fileChooser.setInitialDirectory(new File("e://"));
                File file = fileChooser.showSaveDialog(null);
                if(file!=null){
                    Image image = iv.getImage();
                    BufferedImage bufferedImage = SwingFXUtils.fromFXImage(image, null);
                    try{
                        ImageIO.write(bufferedImage,"png",file);
                    } catch (IOException e){
                        e.printStackTrace();
                    }
                }
            }
        });

        //新建一个场景
        Scene scene = new Scene(pane,953,665) ;
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}
Copy the code

The last

There are some school functions to improve next time ~

How to use Java to make a Alipay balance interface

How to use Java to make a Alipay balance interface

preface

drawing

The IDEA of article

Complete code and page presentation are attached

The last

Related Posts

Ubuntu16.04/Scala2.11.8 installation tutorial

Implement ORM framework from zero in seven days

Reproduced — Python determines whether the device is networked