Setting an image as a background in JAVA ME

Question

How do I set an image as a background in a JAVA-ME application?! I have no idea how to start this, I’m new to Java.

This is the Class that takes care of the graphic part:

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package br.edu.estacio.j2me;

import javax.microedition.lcdui.Canvas;
import javax.microedition.lcdui.Graphics;


/**
 *
 * @author paulosilva
 */
public class JogoDaVelhaUI extends Canvas {
    /**
     * métodos para limpar a tela e para desenhar
     */    

    private Graphics graph;
        /**
        * método, provido pela classe <code>Canvas</code>, que é capaz de receber o evento para desenho de tela:
        * o método <code>paint</code>será chamado assim que a classe estiver pronta para ser desenhada e trará 
        * consigo um objeto gráfico (Graphics g) que permitirá desenhar na tela. 
        * Em nosso exemplo, esse objeto gráfico vem através da variável g que é copiada para a variável de classe graph. 
        * Posteriormente, os métodos limparTela e desenharTabuleiro são chamados
        */
        protected void paint(Graphics g) {
            this.graph = g;
            this.limpaTela() ;
            this.desenharTabuleiro();

        } 
            /**
             * Método que limpa a tela
             * O método <code>limparTela</code> faz com que o objeto gráfico defina sua cor de desenho como branca e desenhe um retângulo por toda a tela, 
             * ou seja, tudo na tela é apagado por um enorme retângulo branco. 
             */
        public void limpaTela() {
            /**
             * O método setColor define a cor que o objeto gráfico assumirá e o método fillRect desenha o retângulo.
             * Os três números dentro do método representa as cores na tabela RGB
             */
            this.graph.setColor(255, 255, 255); 
               /**
                * Os quatro números dentro de filltRect são para definir respectivamente 
                * a posição dos eixos x e y, a largura e a altura do retângulo.
                */
            this.graph.fillRect(0, 0, getWidth(), getHeight());
           }

            /**
             * O método desenharTabuleiro utiliza os métodos setColor e filltRect para desenhar os traços do tabuleiro 
             * e utiliza o método drawString para desenhar um número em cada lacuna do jogo,
             */
        public void desenharTabuleiro() { 
                this.graph.setColor (0, 0, 0); 
                this.graph.fillRect (0, 60, 180, 1); 
                this.graph.fillRect(0, 120, 180, 1); 
                this.graph.fillRect(60, 0, 1, 180); 
                this.graph.fillRect(120, 0, 1, 180); 
                this.graph.setColor (100, 100, 0); 
                for (int i = 0, x, y; i < 9; i++) { x = 30 + ( (i % 3) * 60) ; y = 25 + ((i / 3) * 60);
                this.graph.drawString(Integer.toString(i +1), x, y, Graphics.TOP | Graphics.HCENTER);
            }
        }



}

And that’s the part that handles the controls:

package br.edu.estacio.j2me;

import javax.microedition.lcdui.*;
import javax.microedition.midlet.MIDlet;


/** 
 * Classe de MIDlet
 * @author Paulo Roberto
 */
public class VelhaMidlet extends MIDlet implements CommandListener {
    /**
     * Objeto com o texto de boas vindas
     */

    private StringItem boasVindasStringItem;     

    /**
     * Objeto de menu com o botão OK
     */

    private Command okCommand;

    /**
     * objeto que representa o formulario de boas vindas
     */

    private Form boasVindasForm;
/**
 * Inicia a Aplicação
 */
    public void startApp() {
        this.setDisplayable(this.getBoasVindasform());
    }
    /**
     * Pausa a Aplicação
     */
    public void pauseApp() {
    }
    /**
     * Finaliza a aplicação
     * 
     * @param unconditional <code>boolean</code> - se <code>true</code> informa um fechamento incondicional
     */
    public void destroyApp(boolean unconditional) {
    }
    /**
     * Retorna o objeto do Display
     * 
     * @return <code>Display</code> - Objeto Display
     */
    public Display getDisplay(){

        return Display.getDisplay(this);
    }
    /**
     * Define o objeto que sera exibido on objeto Dispaly
     * @param displayable <code> displayable</code> - Objeto displayable
     */
    public void setDisplayable(Displayable displayable){
            this.getDisplay().setCurrent(displayable);
    }

    public StringItem getSaudacaoStringItem(){
        if (this.boasVindasStringItem==null){
            this.boasVindasStringItem = new StringItem(" Jogo da Velha: \n ", " Pressione OK");

        }
        return this.boasVindasStringItem;
    }

    /**
     * Retorna o objeto que contem o menu OK
     * @return <code>command</code> - objeto que contem o menu de ok
     */
    public Command getOKCommand(){
        if (this.okCommand == null){
            this.okCommand = new Command("OK", Command.OK, 1);
        }
            return this.okCommand;
    }

        public Form getBoasVindasform(){
            if (this.boasVindasForm == null){
                this.boasVindasForm = new Form("Bem vindo (a): ", new Item[]{getSaudacaoStringItem()});
                this.boasVindasForm.addCommand(getOKCommand());
                this.boasVindasForm.setCommandListener(this);
            }
                return this.boasVindasForm;
        }

    public void commandAction(Command c, Displayable d) {
        if ((d == this.boasVindasForm) && (c == this.okCommand)){
           // this.sairMIDlet();
            /**
             * modificaremos o comportamento do menu “OK” para que, 
             * ao invés de sair de nossa aplicação, ele abra a classe 
             * JogoDaVelhaUI e exiba a tela que criamos.
             * exibira na tela a nossa classe JogoDaVelhaUI
             */
            this.setDisplayable(new JogoDaVelhaUI());
        }

    }
    /**
     * Sair da aplicação
     */
    public void sairMIDlet(){
        this.setDisplayable(null);
        this.destroyApp(true);
        this.notifyDestroyed();
    }
}

Answer 1

Supposing your wish is to place an image as the background of JogoDaVelhaUI, you can do the following:

• Add the background image to the folder res, for example, fundo.png
• Load image asynchronously, not to lock UI (click image on another Thread)
• Within the method paint(), draw the image through the Graphics, remembering that the class Graphics J2ME is very simple, and does not resize bimtaps in real time.

** It’s not part of the request, but I took the opportunity to remove the field graph, because it really isn’t necessary, and can be replaced by parameters in the other methods

** I removed your comments to simplify code viewing

Here’s the code:

package br.edu.estacio.j2me;

import javax.microedition.lcdui.*;

public class JogoDaVelhaUI extends Canvas {

    private Image imagem;

    public JogoDaVelhaUI() {
        //Cria uma thread para carregar a imagem, sem travar o UI
        (new Thread() {
            public void run() {
                try {
                    imagem = Image.createImage("/fundo.png");
                    repaint();
                } catch (Exception ex) {
                    ex.printStackTrace();
                }
            }
        }).start();
    }

    protected void paint(Graphics g) {
        limpaTela(g);
        desenharTabuleiro(g);
    }

    public void limpaTela(Graphics g) {
        //Se a imagem tiver sido carregada, desenha a imagem,
        //caso contrário, pinta a tela de branco
        if (imagem != null) {
            g.drawImage(imagem, 0, 0, 0);
        } else {
            g.setColor(255, 255, 255); 
            g.fillRect(0, 0, getWidth(), getHeight());
        }
    }

    public void desenharTabuleiro(Graphics g) { 
        g.setColor (0, 0, 0); 
        g.fillRect (0, 60, 180, 1); 
        g.fillRect(0, 120, 180, 1); 
        g.fillRect(60, 0, 1, 180); 
        g.fillRect(120, 0, 1, 180); 
        g.setColor (100, 100, 0); 
        for (int i = 0, x, y; i < 9; i++) {
            x = 30 + ( (i % 3) * 60);
            y = 25 + ((i / 3) * 60);
            g.drawString(Integer.toString(i + 1), x, y, Graphics.TOP | Graphics.HCENTER);
        }
    }
}