How to set Background image to a JTextArea in a JPanel

Question

I want to set a custom background image on a JTextArea. I had looked in google but without a result, the background could be a logo, also I want to know how to set the background's resolution.

I Have only one class in a package. I have a MySQL connector driver as Referenced Library, my workbench is Eclipse, exporting jar with the Fat-jar plugin

Code:

public class  panel extends JPanel implements ActionListener {
    protected JTextField textField, textField2;
    protected static JTextArea textArea;
    private final static String newline = "\n";

    public panel() {
        super(new GridBagLayout());
        textField = new JTextField(30);
        textField.addActionListener(this);
        textField.setBackground(Color.LIGHT_GRAY);

        textField2 = new JTextField(30);
        textField2.addActionListener(this);
        textField2.setEnabled(false);



        textArea = new JTextArea(30, 100);
        textArea.setEditable(false);
        JScrollPane scrollPane = new JScrollPane(textArea);

        //Add Components to this panel.
        GridBagConstraints c = new GridBagConstraints();
        c.gridwidth = GridBagConstraints.REMAINDER;

        c.fill = GridBagConstraints.HORIZONTAL;
        add(textField, c);
        add(textField2, c);

        c.fill = GridBagConstraints.BOTH;
        c.weightx = 1.0;
        c.weighty = 1.0;
        add(scrollPane, c);
    }

    public void actionPerformed(ActionEvent evt) {
        String select = textField.getText();
        if(textField.getText().equalsIgnoreCase("connect")){
            textArea.setForeground(Color.BLACK);
            connect();
            textField.setText("");
        }else if(textField.getText().equalsIgnoreCase("select test")){
            textArea.setForeground(Color.BLACK);
            viewTest();
            textField.setText("");;
        }else if(textField.getText().equalsIgnoreCase("clear")){
            textArea.setForeground(Color.BLACK);
            textField.setText("");
            clear();
        }else if(textField.getText().equalsIgnoreCase("commands")){
            textArea.setForeground(Color.BLACK);
            commandsmenu();
            textField.setText("");
        }else if(textField.getText().equalsIgnoreCase("insertinto test")){
            textField2.setEnabled(true);
            if(textField2.getText().equals("")){

            textArea.append("Please add the VALUES of the table on the second textfield! Syntax: 'Agevaulue', namevalue, adressvalue !" + newline);
            }else{

                textArea.setForeground(Color.BLACK);
                InsertIntoTest();
                textField2.setText("");
                textField2.setEnabled(false);
            }

        }



        else {
            clear();
            textArea.setForeground(Color.RED);
            textArea.append("Uknown Command -- use: commands --  to see all commands!");
            textField.selectAll();
        }

        //Make sure the new text is visible, even if there
        //was a selection in the text area.
        textArea.setCaretPosition(textArea.getDocument().getLength());
    }

    /**
     * Create the GUI and show it.  For thread safety,
     * this method should be invoked from the
     * event dispatch thread.
     */
    private static void createAndShowGUI() {
        //Create and set up the window.
        JFrame frame = new JFrame("Java + MySQL Example");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        //Add contents to the window.
        frame.add(new panel());

        //Display the window.
        frame.pack();
        frame.setVisible(true);
    }
    public void connect(){
        Connection conn = null;
        try
        {
          String url = "jdbc:mysql://localhost/users";

          Class.forName("com.mysql.jdbc.Driver");
          textArea.append("Database connection established");
          conn = DriverManager.getConnection(url, "root", "kristian76");

        }
        catch (Exception e){
            e.printStackTrace();
        }
    }
    public void viewTest()
          {
            Connection conn = null;
            try{
            String url = "jdbc:mysql://localhost/users";

            Class.forName("com.mysql.jdbc.Driver");
            conn = DriverManager.getConnection(url, "root", "kristian76");

            String query = "SELECT * FROM test";
            Statement stmt = conn.createStatement();
            ResultSet rs = stmt.executeQuery(query);
            while (rs.next()){
                int age = rs.getInt("age");
                String name = rs.getString("name");
                String adress = rs.getString("adress");
                textArea.append("AGE: " + age + " |Name: " + name + " |Adress: " + adress + newline);
            }
          }catch(Exception e){
              textArea.setForeground(Color.RED);
              textArea.append("Got an Exception!" + newline);
              textArea.append(e.getMessage());
          }
            }public void InsertIntoTest() {
                Connection conn = null;
                try{
                    String url = "jdbc:mysql://localhost/users";
                    Class.forName("com.mysql.jdbc.Driver");
                    conn = DriverManager.getConnection(url, "root", "kristian76");

                    String query = "INSERT INTO test(age, name, adress)VALUES(" + textField2.getText() + ")";
                    Statement stmt = conn.createStatement();
                    stmt.executeUpdate("INSERT INTO test(age, name, adress)VALUES(" + textField2.getText() + ")");
                    textArea.append("Data Imported!" + newline);
                }catch(Exception e){
                    textArea.setForeground(Color.RED);
                    textArea.append("Got an Exception" + newline);
                    textArea.append(e.getMessage());

                }
            }
    public void clear(){
        textArea.setText("");
    }
    public void commandsmenu() {
        textArea.append("select <table> -  read a <table>" + newline);
        textArea.append("clear - clear output" + newline);
        textArea.append("commands - see Commands" + newline);
        textArea.append("insertinto <table> - insert data into <table>" + newline);

    }

    public static void main(String[] args) {
        //Schedule a job for the event dispatch thread:
        //creating and showing this application's GUI.
        javax.swing.SwingUtilities.invokeLater(new Runnable() {
            public void run() {
                createAndShowGUI();
            }
        });
    }
}

Answer 1

This is very simple, you just need to create your own TextArea class that extends from JTextArea and then override the paintComponent method to include your background image, here is the class:

public class MyTextArea extends JTextArea {

    private Image img;

    public MyTextArea(int a, int b) {
        super(a,b);
        try{
            img = ImageIO.read(new File("background.jpg"));
        } catch(IOException e) {
            System.out.println(e.toString());
        }
    }

    @Override
    protected void paintComponent(Graphics g) {
        g.drawImage(img,0,0,null);
        super.paintComponent(g);
    }
}

Then in panel you can still use the type JTextArea in your code:

protected static JTextArea textArea;

But when initializing call the constructor of your recently created class:

textArea = new MyTextArea(30, 100);

Like this, the text will not let you see the image in the background, so we need to make it transparent:

textArea.setBackground(new Color(1,1,1, (float) 0.01));

I didn't see your code in detail, but a good programming practice is to CamelCase the name of the class, but since "Panel" is a Java keyword (Panel is a AWT component) then you can name it something like MyPanel or SQLPanel.

Answer 2

The first thought you might have is to paint the image within the paintComponent method of the text area, while this might seem to work, once you start trying to type text, you'll find that, what is suppose to be the background image, is actually a foreground image and paints over the text.

Okay, so, you could paint the image first and then call super.paintComponent after it, but the background color is actually painted as part of the paintComponent call...

What you need to do, is trick the component into not painting the background color. The simplest solution would be to make the component transparent, for example...

public class CustomTextArea extends JTextArea {

    private BufferedImage image;

    public CustomTextArea() {
        super(20, 20);
        setOpaque(false);
        try {
            image = ImageIO.read(new File("..."));
        } catch (IOException ex) {
            ex.printStackTrace();
        }
    }

    @Override
    protected void paintComponent(Graphics g) {
        Graphics2D g2d = (Graphics2D) g.create();
        g2d.setColor(getBackground());
        g2d.fillRect(0, 0, getWidth(), getHeight());
        if (image != null) {
            int x = getWidth() - image.getWidth();
            int y = getHeight() - image.getHeight();
            g2d.drawImage(image, x, y, this);    
        }
        super.paintComponent(g2d);
        g2d.dispose();
    }

}

This is based on this Inserting an image under a JTextArea answer

Another option would be to render the image within the scrollPane, this gives you options on how you want to control the scrolling of the image (with the component or sticky), for example see Add background image in JTable

Answer 3

This is not really difficult if you use HTML. Your code could look like this:

textPane = new JTextPane(30, 100);
textPane.setEditable(false);

// load image
ByteArrayOutputStream out = new ByteArrayOutputStream();
FileInputStream in = new FileInputStream("/path/to/your/image.png");
byte[] buf = new byte[4096]; int read;
while ((read = in.read(buf)) != -1)
   out.write(buf, 0, read);
in.close();

// set image
textPane.setContentType("text/html");
textPane.setText("<html><head><style type=\"text/css\"> body {"
    + "background-image: url(data:image/png;base64,"
    + Base64.getEncoder().encodeToString(out.toByteArray())
    + "); } </style></head><body>ENTER YOUR TEXT HERE</body></html>");