4.12创建Android Epoch HTML / JavaScript日历
问题
您需要一个使用JavaScript编写的自定义日历，并且您希望它了解如何在JavaScript和Java之间进行交互。
解
使用WebView组件加载包含Epoch日历JavaScript脚本组件的HTML文件。
一个时代是连续的一组年，例如BC或BCE的记录历史，AD或CE的年份，或从“时间零”开始的年代，现代计算机时间的开始（1970年1月1日在Unix，OS X，Java 1.0的Date类，一些MS Windows时间函数等等）。这里讨论的“时代”是一个JavaScript日历包，它的名字从时代的常规意义。
简单来说，下面是创建此日历应用程序的步骤：
1.从http：//www.javascript kit.com/script/script2/epoch/index.shtml下载Epoch DHTML / JavaScript日历。
2.在Android项目文件夹下创建一个资产目录（例如，TestCalendar / assets /）。
3.编码您的主HTML文件以引用时代日历。
4.创建用于启动Epoch日历的Android活动。
放置在Android资产目录中的文件被引用为file：/// android_asset /（请注??意资产的三重引号和单数拼写）。
讨论
为了实现基于JavaScript的视图层和基于Java的逻辑层之间的交互，需要一个Java-JavaScript桥接接口：MyJavaScriptInterface内部类。示例4-21中所示的onDayClick（）函数显示了如何从Android活动调用JavaScript函数，例如webview.loadUrl（“javascript：popup（）;”）; 。 HTML / JavaScript组件如示例4-21所示。
实例4-21。 calendarview.html
为了调试，创建了一个MyWebChromeClient - 这是最后的内部类
扩展WebChromeClient在主类结束附近定义，特别是onJsAlert（）方法被覆盖。
问题
您需要一个使用JavaScript编写的自定义日历，并且您希望它了解如何在JavaScript和Java之间进行交互。
解
使用WebView组件加载包含Epoch日历JavaScript脚本组件的HTML文件。
一个时代是连续的一组年，例如BC或BCE的记录历史，AD或CE的年份，或从“时间零”开始的年代，现代计算机时间的开始（1970年1月1日在Unix，OS X，Java 1.0的Date类，一些MS Windows时间函数等等）。这里讨论的“时代”是一个JavaScript日历包，它的名字从时代的常规意义。
简单来说，下面是创建此日历应用程序的步骤：
1.从http：//www.javascript kit.com/script/script2/epoch/index.shtml下载Epoch DHTML / JavaScript日历。
2.在Android项目文件夹下创建一个资产目录（例如，TestCalendar / assets /）。
3.编码您的主HTML文件以引用时代日历。
4.创建用于启动Epoch日历的Android活动。
放置在Android资产目录中的文件被引用为file：/// android_asset /（请注??意资产的三重引号和单数拼写）。
讨论
为了实现基于JavaScript的视图层和基于Java的逻辑层之间的交互，需要一个Java-JavaScript桥接接口：MyJavaScriptInterface内部类。示例4-21中所示的onDayClick（）函数显示了如何从Android活动调用JavaScript函数，例如webview.loadUrl（“javascript：popup（）;”）; 。 HTML / JavaScript组件如示例4-21所示。
实例4-21。 calendarview.html
<html>
<head>
<title>My Epoch DHTML JavaScript Calendar</title>
<style type="text/css">
dateheader {
-background-color: #3399FF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-border-radius: 10px;
-padding: 5px;
}
</style>
<style type="text/css">
html {height:100%;}
body {height:100%; margin:0; padding:0;}
#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
#content {position:relative; z-index:1;}
</style>
<!--[if IE 6]>
<style type="text/css">
html {overflow-y:hidden;}
body {overflow-y:auto;}
#page-background {position:absolute; z-index:-1;}
#content {position:static;padding:10px;}
</style>
<![endif]-->
<link rel="stylesheet" type="text/css" href="epoch_v106/epoch_styles.css" />
<script type="text/javascript" src="epoch_v106/epoch_classes.js"></script>
<script type="text/javascript">
/*You can also place this code in a separate
file and link to it like epoch_classes.js*/
var my_cal;
window.onload = function () {
my_cal = new Epoch('epoch_basic','flat',
document.getElementById('basic_container'));
};
function popup() {
var weekday=new Array("Sun","Mon","Tue","Wed","Thur","Fri","Sat");
var monthname=new Array("Jan","Feb","Mar","Apr","May","Jun",
"Jul","Aug","Sep","Oct","Nov","Dec");
var date = my_cal.selectedDates.length > 0 ?
my_cal.selectedDates[0] :
null;
if ( date != null ) {
var day = date.getDate();
var dayOfWeek= date.getDay();
var month = date.getMonth();
var yy = date.getYear();
var year = (yy < 1000) ? yy + 1900 : yy;
/* Set the User selected date in HTML form */
var dateStr= weekday[dayOfWeek] + ", " + day + " " +
monthname[month] + " " + year;
document.getElementById("selected_date").value= dateStr;
/* IMPORTANT:
* Call Android JavaScript->Java bridge setting a
* Java-field variable
*/
window.android.setSelectedDate( date );
window.android.setCalendarButton( date );
}
}
</script>
</head>
<body>
<div id="bg"><img src="bg.png" width="100%" height="100%" alt=""></div>
<div id="content">
<div class="dateheader" align="center">
<form name="form_selected_date">
<span style="color:white">Selected day:</span>
<input id="selected_date" name="selected_date" type="text"
readonly="true">
</form>
</div>
<div id="basic_container" onClick="popup()"></div>
</div>
</body>
</head>>实例4-22。 CalendarViewActivity.java
import java.util.Date;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.Toast;
import com.pfizer.android.R;
import com.pfizer.android.utils.DateUtils;
import com.pfizer.android.view.screens.journal.CreateEntryScreen;
public class CalendarViewActivity extends Activity {
private static final String tag = "CalendarViewActivity";
private ImageView calendarToJournalButton;
private Button calendarDateButton;
private WebView webview;
private Date selectedCalDate;
private final Handler jsHandler = new Handler();
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
Log.d(tag, "Creating View ...");
super.onCreate(savedInstanceState);
// Set the View Layer
Log.d(tag, "Setting-up the View Layer");
setContentView(R.layout.calendar_view);
// Go to CreateJournalEntry
calendarToJournalButton = (ImageView) this.findViewById
(R.id.calendarToJournalButton);
calendarToJournalButton.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
Log.d(tag, "Re-directing -> CreateEntryScreen ...");
Intent intent = intent =
new Intent(getApplicationContext(),
CreateEntryScreen.class);
startActivity(intent);
}
});
// User-Selected Calendar Date
calendarDateButton = (Button) this.findViewById(R.id.calendarDateButton);
// Get access to the WebView holder
webview = (WebView) this.findViewById(R.id.webview);
// Get the settings
WebSettings settings = webview.getSettings();
// Enable JavaScript
settings.setJavaScriptEnabled(true);
// Enable ZoomControls visibility
settings.setSupportZoom(true);
// Add JavaScript Interface
webview.addJavaScriptInterface(new MyJavaScriptInterface(), "android");
// Set the Chrome Client
webview.setWebChromeClient(new MyWebChromeClient());
// Load the URL of the HTML file
webview.loadUrl("file:///android_asset/calendarview.html");
}
public void setCalendarButton(Date selectedCalDate) {
Log.d(tag, jsHandler.obtainMessage().toString());
calendarDateButton.setText(
DateUtils.convertDateToSectionHeaderFormat(
selectedCalDate.getTime()));
}
/**
*
* @param selectedCalDate
*/
public void setSelectedCalDate(Date selectedCalDate) {
this.selectedCalDate = selectedCalDate;
}
/**
*
* @return
*/
public Date getSelectedCalDate() {
return selectedCalDate;
}
/**
* JAVA->JAVASCRIPT INTERFACE
*
* @author wagied
*
*/
final class MyJavaScriptInterface {
private Date jsSelectedDate;
MyJavaScriptInterface() {
// EMPTY;
}
public void onDayClick() {
jsHandler.post(new Runnable() {
public void run() {
// Java telling JavaScript to do things
webview.loadUrl("javascript: popup();");
}
});
}
/**
* NOTE: THIS FUNCTION IS BEING SET IN JAVASCRIPT User-selected Date in
* WebView
*
* @param dateStr
*/
public void setSelectedDate(String dateStr) {
Toast.makeText(getApplicationContext(), dateStr,
Toast.LENGTH_SHORT).show();
Log.d(tag, "User Selected Date: JavaScript -> Java : " + dateStr);
// Set the User Selected Calendar date
setJsSelectedDate(new Date(Date.parse(dateStr)));
Log.d(tag, "java.util.Date Object: " +
Date.parse(dateStr).toString());
}
private void setJsSelectedDate(Date userSelectedDate) {
jsSelectedDate = userSelectedDate;
}
public Date getJsSelectedDate() {
return jsSelectedDate;
}
}
/**
* Alert pop-up for debugging purposes
*
* @author wdavid01
*
*/
final class MyWebChromeClient extends WebChromeClient {
@Override
public boolean onJsAlert(WebView view, String url,
String message, JsResult result) {
Log.d(tag, message);
result.confirm();
return true;
}
}
@Override
public void onDestroy() {
Log.d(tag, "Destroying View!");
super.onDestroy();
}
}为了调试，创建了一个MyWebChromeClient - 这是最后的内部类
扩展WebChromeClient在主类结束附近定义，特别是onJsAlert（）方法被覆盖。