版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
【移动应用开发技术】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. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 随州市专职消防员招聘考试题及答案
- 石嘴山市专职消防员招聘考试题及答案
- 绍兴市护士招聘面试题及答案
- 26年随访服务中西医协同
- 医学26年：肝内胆管结石诊疗 查房课件
- 26年肝转移检测质控手册
- 供养孩子协议书
- 发款写罚款协议书
- 取消投资建设协议书
- 征收补偿协议合同
- 2026年航空障碍灯行业分析报告及未来发展趋势报告
- 2026年网络安全管理专业知识测试题
- 《红楼梦》中的贵族生活
- 第46届世界技能大赛湖南省选拔赛“时装技术”项目样题及技术标准(含评分标准、评分细则、面料规格)
- 《难忘的歌》 单元作业设计
- 绘画治疗-五个维度测验课件
- 高中英语-My 100 Days With MSF教学设计学情分析教材分析课后反思
- 2023学年完整公开课版双晶的观察
- 城市地理学城市空间分布体系
- 省体育网后台发布信息教学
- GB/T 4668-1995机织物密度的测定
评论
0/150
提交评论