BlackBerry - BrowserField takes too long to load a local html file when triying to import a css, and the stylesheet is not even applied

StackOverflow https://stackoverflow.com/questions/22533786

  •  18-06-2023
  •  | 
  •  

Domanda

I'm triyng to load a html file into a BrowserField.

The html file is located inside the res folder.

enter image description here

This is how I build the browserField object:

InputStream content = getClass().getResourceAsStream("/www/html/welcome2.html");     
try {
   byte[] html = IOUtilities.streamToBytes(content);
   BrowserFieldConfig config = new BrowserFieldConfig();
   HttpHeaders headers = new HttpHeaders();
   headers.addProperty(HttpHeaders.HEADER_CONTENT_TYPE, HttpHeaders.CONTENT_TYPE_TEXT_HTML);
   headers.addProperty(HttpHeaders.HEADER_ACCEPT_CHARSET, "UTF-8");
   config.setProperty(BrowserFieldConfig.HTTP_HEADERS, headers);
   BrowserField contentField = new BrowserField(config);
   vfm_r.add(contentField);

   contentField.displayContent(new String(html), "http://localhost");
} catch (IOException e) {
   e.printStackTrace();
}

This is the html file:

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1" />
        <link rel="stylesheet" href="../css/style-preferential.css">

    </head>
    <body id="welcome-page">
        <div class="welcome-header"></div>

        <div id="welcome-access-container">
            <span>acceder mi cuenta</span>
        </div>

        <div id="owl-demo" class="owl-carousel owl-theme">
            <div class="item"><span>Contact</span></div>
            <div class="item"><span>Option 1</span></div>
            <div class="item"><span>Option 2</span></div>
            <div class="item"><span>Option 3</span></div>
            <div class="item"><span>Option 4</span></div>
            <div class="item"><span>Option 5</span></div>
        </div>
        <div id="image-carousel" class="owl-carousel owl-theme">
            <div class="banner"><img src="../img/brown.png"></div>
            <div class="banner"><img src="../img/orange.png"></div>
            <div class="banner"><img src="../img/pink.png"></div>
            <div class="banner"><img src="../img/green.png"></div>
            <div class="banner"><img src="../img/blue.png"></div>
        </div>
        <div class="footer">
            <div id="info-footer"><span>Lorem ipsum dolor sit amet</span></div>
        </div>
    </body>
</html>

The problem is that the browserField takes something like 2 minutes to finish loading and the style is never applied.

When I remove the import to the css

<link rel="stylesheet" href="../css/style-preferential.css">

the browserField loads the page instantly.

1) what should I do to prevent that long delay for the page loading when importing a style.

2) what should I do to make the browserField recognize the css?. Right now, as I mentioned, the html is rendered after a long delay but the style is not applied.

Thanks in advance.

È stato utile?

Soluzione

The issue here is not that the BrowserField does not recognise the css, it is that the BlackBerry does not find the css. It spends sometime looking for localhost as a resource, because BlackBerry devices do not recognise localhost as themselves, and in fact they don't really have an IP address, unless they are WiFi connected.

The 2 minutes delay you see is the BB device trying to find localhost.

So you need to use the "local:" 'protocol' so that the Browser knows to pick up the local files.

Here is some sample code that works for me. Try it, and then play round to get what you want:

body { color: green; }
.item {
    color: blue;
    background-color: red;
}

Above is my test "style-preferential.css" file. 

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1" />
        <link rel="stylesheet" href="/www/css/style-preferential.css">
    </head>
    <body id="welcome-page">
        <div class="welcome-header"></div>
        <div id="welcome-access-container">
            <span>acceder mi cuenta</span>
        </div>
        <div id="owl-demo">
            <div class="item">Contact1</div>
            <div class="item"><span>Option 1</span></div>
            <div class="item"><span>Option 2</span></div>
            <div class="item"><span>Option 3</span></div>
            <div class="item"><span>Option 4</span></div>
            <div class="item"><span>Option 5</span></div>
        </div>
        <div class="banner"><img src="/img/icon.png"></div>
        <div class="footer">
            <div id="info-footer"><span>Lorem ipsum dolor sit amet</span></div>
        </div>
    </body>
</html>

The above is my cut down version of your test html.

And finally this is the change I made to your code:

contentField.displayContent(new String(html), "local:///");

My project looks like this:

Resources structure

and the output looks like this:

BB result

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top