版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
【移动应用开发技术】jQueryMobile怎么设计Android通讯录
页面流程结构/upload/information/20210522/379/540864.jpg/upload/information/20210522/379/540865.jpg/upload/information/20210522/379/540868.jpg/upload/information/20210522/379/540870.jpg/upload/information/20210522/379/540872.jpg/upload/information/20210522/379/540873.jpgjQueryMobile页面设计<div
data-role="page">
<div
data-role="header">...</div>
<div
id="contentWithHeaderAndFooter1"
data-role="content">...</div>
<div
data-role="footer">...</div>
<div
data-role="header">...</div>
<div
id="contentWithHeaderAndFooter2"
data-role="content">...</div>
<div
data-role="footer">...</div>
<div
id="contentWithNoHeaderAndFooter"
data-role="content">...</div>
</div>/upload/information/20210522/379/540874.jpg如何整合前端代码和Android后端Java代码/upload/information/20210522/379/540876.jpgimport
android.webkit.WebView;
import
android.app.Activity;
...
public
class
ContactsActivity
extends
Activity
{
WebView
webView;
...
public
void
onCreate(Bundle
savedInstanceState)
{
...
webView
=
new
WebView(this);
...
webView.addJavascriptInterface(this,
"contactSupport");
...
}
public
void
deleteContact(String
contactId,
String
displayPage){
...
}<script>
...
function
someJavaScriptFunction(){
..
contactSupport.deleteContact(contactIdVar.val(),'ListPage.html');
}
...
</script>AndroidJava代码如何访问前端Javascript代码/upload/information/20210522/379/540878.jpgimport
android.webkit.WebView;
import
android.app.Activity;
import
android.os.Handler;
...
public
class
ContactsActivity
extends
Activity
{
WebView
webView;
private
Handler
handler
=
null;
...
public
void
onCreate(Bundle
savedInstanceState)
{
...
webView
=
new
WebView(this);
...
handler
=
new
Handler();
...
}
public
void
deleteContact(String
contactId,
String
displayPage){
ContactUtility.deleteContact(contactId,...);
loadPage(displayPage);
}
public
void
loadPage(String
in){
final
String
url
=
"file:///android_asset/www/"
+
in;
loadURL(url);
}
private
void
loadURL(final
String
in){
handler.post(new
Runnable()
{
public
void
run()
{
webView.loadUrl(in);
}
});
}如何调用前端的JavaScriptpublic
class
ContactsActivity
extends
Activity
{
...
public
void
getAllContacts(String
callback,
String
accountCallback){
final
String
accountCallbackFunction
=
"javascript:"
+
accountCallback
+
"()";
if(accountName
==
null){
loadURL(accountCallbackFunction);
return;
}
final
String
json
=
ContactUtility.getAllContactDisplaysJSON(getContentResolver());
final
String
callbackFunction
=
"javascript:"
+
callback
+
"('"
+
json
+
"')";
loadURL(callbackFunction);
}<script>
$(document).ready(function
()
{
...
contactSupport.getAllContacts('setContactsList','showAccount');
});
</script>在前后端交互中参数的类型问题程序入口介绍public
class
ContactsActivity
extends
Activity
{
WebView
webView;
private
Handler
handler
=
null;
private
String
accountType
=
null;
private
String
accountName
=
null;
...
public
void
onCreate(Bundle
savedInstanceState)
{
super.onCreate(savedInstanceState);
//
初始化WebView
webView
=
new
WebView(this);
setContentView(webView);
//允许使用Javscript
webView.getSettings().setJavaScriptEnabled(true);
//检查应用中的帐号是否已经建立
accountType
=
"com.jquerymobile.demo.contact";
Account[]
accounts
=
AccountManager.get(this).getAccountsByType(accountType);
if(accounts.length
!=
0){
accountName
=
accounts[0].name;
}
handler
=
new
Handler();
webView.addJavascriptInterface(this,
"contactSupport");
//
装载index.html页
loadPage("index.html");
}
...
}ListPage.html<html>
<head>
<B><!--
jQuery
Mobile
Libraries
--></B>
<link
rel="stylesheet"
href="css-js/jquery.mobile-1.0a3.min.css"
/>
<script
src="css-js/jquery-1.5.min.js"></script>
<script
src="css-js/jquery.mobile-1.0a3.min.js"></script>
</head>
<body>
<B><!--
Container
Page
--></B>
<div
data-role="page"
data-theme="c"
id="containerPage">
<B><!--
Contact
List
--></B>
<div
data-role="header"
id="hdrList"
data-nobackbtn="true">
<h2><img
align="top"
src="img/contacts.png">
Contacts</h2>
<a
id="buttonAddContact"
data-icon="plus"
class="ui-btn-right"
href="<B>javascript:addContact();</B>return
false;"
data-role="button"
data-inline="true">Add</a>
</div>
<div
data-role="content"
id="contentList"
data-theme="c">
<ul
data-role="listview"
data-dividertheme="c"
id="contactSelections"></ul>
</div>
<div
data-role="footer"
id="ftrList"></div>
<B><!--
Progress
--></B>
<div
data-role="header"
id="hdrProgress"
data-nobackbtn="true"
data-theme="c">
<h2>Processing...</h2>
</div>
<div
data-role="content"
id="contentProgress"
data-theme="c">
<div
align="CENTER"><h5>Please
wait.</h5></div>
<div
align="CENTER"><img
id="spin"
src="img/wait.gif"/></div>
</div>
<div
data-role="footer"
id="ftrProgress"
data-theme="c"></div>
<B><!--
Create
Account
--></B>
<div
data-role="header"
id="hdrAccount"
data-nobackbtn="true"
data-theme="c">
<h2>Create
Account</h2>
</div>
<div
data-role="content"
id="contentAccount"
data-theme="c">
<div
align="CENTER"><img
src="img/contacts-master-bgd.png"></div>
<div
align="CENTER"><h5>Please
enter
name
of
the
new
account
for
this
application</h5></div>
<div
align="CENTER">Contacts
created
with
this
application
will
be
associated
with
the
new
account
specified
below.
Other
contacts
can
be
viewed,
however,
cannot
be
deleted
or
modified
with
this
application.</div>
<div
align="CENTER"
id="accountDiv"
data-role="fieldcontain">
<input
id="accountName"
type="text"
/>
</div>
<div
align="CENTER">
<a
href="javascript:createAccount();return
false;"
<B>data-role="button"
data-inline="true"</B>>Save</a>
</div>
...
</div>
<div
data-role="footer"
id="ftrAccount"
data-theme="c"></div>
</div>
<B><!--
Container
Page
Ends
Here
--></B>
...以上的代码中，注意如下几点<script>
var
hdrListVar;
var
contentListVar;
var
ftrListVar;
var
hdrProgressVar;
var
contentProgressVar;
var
ftrProgressVar;
var
hdrAccountVar;
var
contentAccountVar;
var
ftrAccountVar;
$(document).ready(function
()
{
//
Initialize
commonly
used
variables
hdrListVar
=
$('#hdrList');
contentListVar
=
$('#contentList');
ftrListVar
=
$('#ftrList');
hdrProgressVar
=
$('#hdrProgress');
contentProgressVar
=
$('#contentProgress');
ftrProgressVar
=
$('#ftrProgress');
hdrAccountVar
=
$('#hdrAccount');
contentAccountVar
=
$('#contentAccount');
ftrAccountVar
=
$('#ftrAccount');
...
});
...
function
hideList(){
hdrListVar.hide();
contentListVar.hide();
ftrListVar.hide();
}
function
showList(){
hideProgress();
hideAccount();
hdrListVar.show();
contentListVar.show();
ftrListVar.show();
}
function
hideProgress(){
hdrProgressVar.hide();
contentProgressVar.hide();
ftrProgressVar.hide();
}
...
</script>public
void
getAllContacts(String
callback,
String
accountCallback){
final
String
accountCallbackFunction
=
"javascript:"
+
accountCallback
+
"()";
if(accountName
==
null){
loadURL(accountCallbackFunction);
return;
}
final
String
json
=
ContactUtility.getAllContactDisplaysJSON(getContentResolver());
final
String
callbackFunction
=
"javascript:"
+
callback
+
"('"
+
json
+
"')";
loadURL(callbackFunction);
}{"contacts":[
{"key":"A","values":[
{"contactId":"257","displayName":"Aach
Herb","key":"A"},
...,
{"contactId":"256","displayName":"Aaker
David","key":"A"}
]
},
{"key":"B","values":[
{"contactId":"259","displayName":"Belanger
Andre","key":"B"},
...,
{"contactId":"260","displayName":"Bohme
Jacob","key":"B"}
]
},
...
]
}<div
data-role="content"
id="contentList"
data-theme="c">
<ul
data-role="listview"
data-dividertheme="c"
id="contactSelections"></ul>
</div>
...
<script>
...
//
Commonly
used
variables
...
var
contactSelectionsVar;
$(document).ready(function
()
{
//
Initialize
commonly
used
variables
...
contactSelectionsVar
=
$('#contactSelections');
...
}
...
function
setContactsList(jsonText){
var
tmpJson
=
$.parseJSON(jsonText);
if(tmpJson
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 急性腹膜炎病人的护理
- 2025年锥虫焦虫病防治药合作协议书
- 尿路感染的治疗与护理
- 护理学新生儿黄疸
- 2025年电网系统电力电缆项目合作计划书
- 2025年中小学生安全教育日活动方案
- 陕西航空职业技术学院《生涯辅导》2023-2024学年第二学期期末试卷
- 陕西铁路工程职业技术学院《安全工程专业英语》2023-2024学年第二学期期末试卷
- 随州市广水市2025届五年级数学第二学期期末调研模拟试题含答案
- 2025年交联电力电缆项目合作计划书
- 2024-2025学年二年级语文下册统编版第三单元基础达标卷(单元测试)（含答案）
- 2024年全国单招护理专业综合题库
- (完整版)最新版线束标准
- 金融科技课件(完整版)
- 网络直播行业税收检查指引
- 初中三年主题班会整体规划
- 喷塑车间员工培训课件
- 操作系统信号量PV操作题若干
- 小学人教版六年级下册第三单元作文：六年级下册语文第三单元作文：我的理想作文800字
- 涵洞水力计算
- JJF（浙）1077-2012 崩解仪校准规范
评论
0/150
提交评论