BlackBerry Java 应用中使用html 做九宫格功能导航



在BlackBerry 9850上面的运行效果


BlackBerry Java 应用中使用html 做九宫格功能导航_第1张图片

<!DOCTYPE html> 
<html> 
	<head> 
	<meta charset="utf-8">
	<title>jMovies</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="jqm/jquery.mobile.1.1.0.min.css" /> 
	<style>
		/* center icons */
		.ui-grid-a { text-align: center; }
		
		/* set row height */
		.ui-block-a, .ui-block-b { height: 100px; position: relative; }
		
		/* set label size and color */
		.icon-label { color: #FFF; display: block; font-size:12px; }
		
		/* position the icons at the bottom of the block to adjust for uneven icon heights */
		.icon-springboard { position: absolute; bottom: 0; width: 100%; }
		
		a:link,	a:visited, a:hover, a:active { text-decoration:none; }
	</style>
	<script src="jqm/jquery.min.js"></script>
	<script src="jqm/jquery.mobile.1.1.0.min.js"></script>
</head> 
<body> 

<div data-role="page" id="home" style="background:grey;">
	<div data-role="header" data-theme="b">
		<h1>jMovies</h1>
	</div>

	<div data-role="content" >
		<div class="ui-grid-a">
			<div class="ui-block-a">
			  	<div class="icon-springboard">
			   		<a href="#">
				  		<img src="images/45-movie-1-lg.png" alt="Now Playing">
				  		<span class="icon-label">Now Playing</span>
			    	</a>
			  	</div>
			</div>	
			
			<div class="ui-block-b">
			   	<div class="icon-springboard">	
				 	<a href="#">
				  		<img src="images/12-eye-lg.png" alt="Coming Soon">
						<span class="icon-label">Coming Soon</span>
				  	</a>
			  	</div>
			</div>
			
			<div class="ui-block-a">
			  	<div style="position: absolute; bottom: 0; width:100%;">
			  		<a href="#">
						<img src="images/15-tags-lg.png" alt="Tickets">
						<span class="icon-label">Tickets</span>
			  		</a>	
			  	</div>
			</div>	
			
			<div class="ui-block-b">
			  	<div style="position: absolute; bottom: 0; width:100%;">
			  		<a href="ch4/contact-us.html">
						<img src="images/112-group-lg.png" alt="Contact Us">
						<span class="icon-label">Contact Us</span>
			  		</a>
			  	</div>
			</div>
		</div>
	</div>
</div>
</body>
</html>


package mypackage;

import net.rim.device.api.browser.field2.*;
import net.rim.device.api.script.ScriptableFunction;
import net.rim.device.api.ui.*;
import net.rim.device.api.ui.component.Dialog;
import net.rim.device.api.ui.container.*;

public class MyApp extends UiApplication
{
    public static void main(String[] args)
    {
        MyApp app = new MyApp();
        app.enterEventDispatcher();
    }

    public MyApp()
    {
        pushScreen(new BrowserFieldDemoScreen());
    }
}

class BrowserFieldDemoScreen extends MainScreen
{
    public BrowserFieldDemoScreen()
    {
        BrowserFieldConfig myBrowserFieldConfig = new BrowserFieldConfig();
        myBrowserFieldConfig.setProperty(BrowserFieldConfig.NAVIGATION_MODE,BrowserFieldConfig.NAVIGATION_MODE_POINTER);
        myBrowserFieldConfig.setProperty(BrowserFieldConfig.USE_FIXED_LAYOUT_HEIGHT, Boolean.TRUE);
        
        BrowserField browserField = new BrowserField(myBrowserFieldConfig);
        
        add(browserField);
        String url = "http://www.blackberry.com";
        url = "local:///index.html";
        
	//TODO browserField.extendScriptEngine
browserField.requestContent(url); }}


你可能感兴趣的:(java,html,Class,div,BlackBerry,stylesheet)