版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
【移动应用开发技术】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年聚砜PSF合作协议书
- 教育技术革新增强现实在课堂中的探索与实践
- 教育游戏化提升学生自主学习能力的关键
- 学堂在线 形势与政策 章节测试答案
- 探讨教育中的VR技术创新与实践
- 大数据时代下的智慧医疗与教育变革
- 影响施工进度的因素分析
- 中职数学参赛课件
- 探索科技在办公领域的应用与变革
- 2025年广西玉林高中物理高二第二学期期末质量跟踪监视试题含解析
- 2025年四川省高考生物试卷真题（含答案解析）
- 2025年浙江省中考数学试卷真题（含官方标准答案）
- 2025版国家开放大学法学本科《知识产权法》期末纸质考试总题库
- GA/T 947.2-2015单警执法视音频记录系统第2部分：执法记录仪
- 职业技能培训鉴定教材编写规定
- 喷雾干燥器课程设计终稿
- 2023年潍坊市交通投资有限公司招聘笔试题库及答案解析
- 住院医师规范化培训小讲课教学设计课件
- 酸化土壤改良技术规范DB50-T 1146-2021
- 英威腾GD变频器调试说明
- 季节性施工专项施工方案（常用）
评论
0/150
提交评论