Step 4: Add flip transition for front and back of card

ClassicFlickrConcentration.java

package com.codename1.demos.flickrconcentration;


import com.codename1.components.SpanLabel;
import com.codename1.ui.Button;
import com.codename1.ui.Container;
import com.codename1.ui.Display;
import com.codename1.ui.EncodedImage;
import com.codename1.ui.Form;
import com.codename1.ui.TextField;
import com.codename1.ui.layouts.BorderLayout;
import com.codename1.ui.layouts.BoxLayout;
import com.codename1.ui.layouts.GridLayout;
import com.codename1.ui.plaf.UIManager;
import com.codename1.ui.util.Resources;
import java.io.IOException;


public class ClassicFlickrConcentration {

    
    private int rows = 4;
    private int cols = 4;
    EncodedImage cardBack;
           
    
    
    private Resources theme;
    
    // Create a Card component.  This will be a container
    // that keeps a reference to two buttons: front and back
    public class Card extends Container {
        
        private Button front, back;
        /**
         * 
         * @param url The url for the image we will use for the front of the card.
         */
        public Card(String url) {
            setLayout(new BorderLayout());
            back = new Button(cardBack);
            back.setUIID("Label");
            
            // TODO : Create the front button with the same image
            
            // TODO : Add action listeners to both front and back
            // buttons to call flip()
                  
            
            addComponent(BorderLayout.CENTER, back);
        }
        
        /**
         * Flips the card.  If it is currently showing front, we'll
         * change it to show back.  If showing back, we'll flip it to show front.
         */
        public void flip() {
            
            // Use Container.replaceAndWait() method with FlipTransition
            // to flip between front and back
            
        }
        
    }
    
    
    public void init(Object context) {
        try {
            theme = Resources.openLayered("/theme");
            UIManager.getInstance().setThemeProps(theme.getTheme(theme.getThemeResourceNames()[0]));
        } catch(IOException e){
            e.printStackTrace();
        }
        
        cardBack = (EncodedImage)theme.getImage("card-back-1024x1024.png")
                .scaled(
                        Display.getInstance().getDisplayWidth()/cols, 
                        Display.getInstance().getDisplayHeight()/rows
                );
    }
    
    public void start() {
        
        newGameForm();
    }
    
    
    /**
     * The entry form for the app.  Allows user to enter a search for flickr images.
     */
    public void newGameForm() {
        Form f = new Form("Classic Flickr Concentration");
        f.setLayout(new BoxLayout(BoxLayout.Y_AXIS));
        f.addComponent(new SpanLabel("Welcome to Classic Flickr Concentration.  "
                + "A card matching game that uses flickr images."));
        f.addComponent(new SpanLabel("Begin by entering a keyword to search for matching images."));
        TextField searchField = new TextField();
        f.addComponent(searchField);
        Button searchButton = new Button("Start Game");
        searchButton.addActionListener((evt) -> {
            showBoard(searchField.getText());
        });
        
        f.addComponent(searchButton);
        f.show();        
    }
    
    public void showBoard(String search) {
        Form f = new Form("Game Board");
        f.setLayout(new BorderLayout());
        
        Container grid = new Container();
        grid.setLayout(new GridLayout(rows, cols));
        
        int numCards = rows * cols;
        for (int i=0; i<numCards; i++) {
            grid.addComponent(new Card(null));
        }
        
        f.addComponent(BorderLayout.CENTER, grid);
        
        Button newGameButton = new Button("New Game");
            newGameButton.addActionListener((evt) -> {
                newGameForm();
            });
            f.addComponent(BorderLayout.SOUTH, newGameButton);
        f.show();
    }

    public void stop() {
        
    }
    
    public void destroy() {
    }


}