CODEWITHSUNDEEP
javahtmlimageapplet
rebeliagamer
rebeliagamer

Reputation: 1278

Can I load images before java applet loader disappears?

I created a simple memory game in Java Applet. I have a problem with custom loader (added as gif in the special applet attributes - docs.oracle.com/.../special_attributes.html) that disappears too fast leaving white screen for couple of seconds.

index.html

(...)
<body>
    <center>
    <script src="http://www.java.com/js/deployJava.js"></script>
    <script>
        var attributes = {code:'(...).Memo.class', archive:'Memo.jar', width: 1200, height: 900}; 
        var parameters = {image: 'res/loading0.gif', boxbgcolor: 'white', boxborder: 'false', centerimage: 'true'}; 
        deployJava.runApplet(attributes, parameters, '1.6'); 
    </script>
    <noscript>
        (...)
    </noscript>
    <script type="text/javascript" language="JavaScript" src="http://www.oracle.com/ocom/groups/systemobject/@mktg_admin/documents/systemobject/s_code_download.js"></script>
    <script type="text/javascript" language="JavaScript" src="http://www.oracle.com/ocom/groups/systemobject/@mktg_admin/documents/systemobject/s_code.js"></script>
    <script type="text/javascript" language="javascript">var s_code=s.t();if(s_code)document.write(s_code)</script>
    </center>
</body>
(...)

This loader disappears right after applet warning message but I still need to load some images and that takes some time. How can I fix that?

Memo.cs - main class with images loading

public class Memo extends JApplet {

    //...   

    public void init() {
        //...   
        try {
            SwingUtilities.invokeAndWait(new Runnable() { @Override public void run() { createGUI(); }});
        } 
        catch(Exception e) {
            e.printStackTrace();
        }
    }

    private void createGUI() {
        final Model model = new Model(...);
        final View view = new View(model);

        getContentPane().add(view, BorderLayout.CENTER);
        setBackground(backgroundColor);
        setPreferredSize(new Dimension(width, height));

        model.setLoading(loadImages(loadingPath, format, 1));
        model.setCardsImages(loadImages(cardImagePath, format, 13));
        //...
        model.setAppState(AppStates.PROCESS);

        model.startNewGame();
        view.repaint();
    }

    private Image[] loadImages(String path1, String path2, int count) {
        Image[] imgs = new Image[count];        
        for(int i = 0; i < count; ++i) {
            imgs[i] = getImage(getCodeBase(), path1 + i + path2);
        }
        return imgs;
    }
}

------------------- SOLUTION -------------------

Media tracker didn't work very well so I tried with JavaScript. This is my code:

new function in index.html (head)

    <script language="javascript" type="text/javascript">
        function setApplet() 
        {
            document.getElementById('loader').innerHTML = "";
        }
    </script>

loader div and applet div in index.html (body)

Also applet is blank until it's ready.

        <div id="loader" style="font-size: 14pt; font-weight: bold;">
            <p>Loading... Please wait</p>
            <img src="res/loading.gif" alt="Loading... Please wait" />
        </div>
        <div id="applet">
            <script src="http://www.java.com/js/deployJava.js"></script>
            <script>
                var attributes = {code:'(...).Memo.class', archive:'Memo.jar', width: 1200, height: 900}; 
                var parameters = {image: 'res/loading0.gif', boxbgcolor: 'white', boxborder: 'false', centerimage: 'true'}; 
                deployJava.runApplet(attributes, parameters, '1.6'); 
            </script>
            (...)
        </div>

new function in Memo.cs

    private void runJs() throws JSException, Exception {
        JSObject setApplet = null;
        setApplet = (JSObject) JSObject.getWindow(this);
        setApplet.call("setApplet", null);
    }

Upvotes: 1

Views: 325

Answers (1)

Andrew Thompson
Andrew Thompson

Reputation: 168815

I think the best chance of success here can be achieved through Cascading Style Sheets & JavaScript.

CSS

Have the applet load in an element that is set the proper size, but at an absolute location that is not visible on the page. E.G. x = -2000px, y = -2000px. At the same time, display a fixed size (same as the applet) div element where the applet is to appear. The on-screen element shows the 'loading..' image.

JS

Have JS poll a public method of the applet that is set true when ready. When that method returns true, swap the style (that determines position) of the applet and 'loading..' element.

Upvotes: 1

Related Questions