1

HTMLファイルをBrowserFieldにロードしようとしています。

html ファイルは res フォルダー内にあります。

ここに画像の説明を入力

これは、browserField オブジェクトを作成する方法です。

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();
}

これはhtmlファイルです：

<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>

問題は、 browserField の読み込みが完了するまでに 2 分ほどかかり、スタイルが適用されないことです。

CSSへのインポートを削除すると

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

browserField はページを即座に読み込みます。

1) スタイルをインポートするときに、ページの読み込みに長い遅延が発生しないようにするにはどうすればよいですか。

2) browserField に css を認識させるにはどうすればよいですか? 現在、前述したように、HTML は長い遅延の後にレンダリングされますが、スタイルは適用されません。

前もって感謝します。

4

1 に答える 1

2

ここでの問題は、BrowserField が css を認識しないことではなく、BlackBerry が css を見つけられないことです。BlackBerry デバイスは localhost を自分自身として認識せず、WiFi 接続されていない限り実際には IP アドレスを持っていないため、リソースとして localhost を探すのに時間がかかります。

表示される 2 分間の遅延は、BB デバイスがローカルホストを見つけようとしていることです。

そのため、ブラウザがローカル ファイルを取得することを認識できるように、「local:」「プロトコル」を使用する必要があります。

ここに私のために働くいくつかのサンプルコードがあります。それを試してから、いろいろ試して欲しいものを手に入れましょう:

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

上記は私のテスト用の「style-preferential.css」ファイルです。 

<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>

上記は、テスト html の縮小版です。

そして最後に、これは私があなたのコードに加えた変更です:

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

私のプロジェクトは次のようになります。

リソース構造

出力は次のようになります。

BB結果

于 2014-03-20T14:37:18.210 に答える