点击新闻列表进入详情页
使用WebView
1.准备工作
现在没有办法把整个网站前端都做出来，就先做一个新闻页面吧。新闻页面也要连接数据库，要使用之前写后台的JDBC类，所以我想可以在原来项目中增加一个“子项目”。那就要调整一下原来项目的结构。
调整后的项目结构是这样的
以下是遇到的问题和解决方法
如果出现错误javax.management.InstanceNotFoundException: Catalina:type=Server，查看artifacts下的是否还保留了原来的项目
提示:Caused by: java.lang.IllegalArgumentException: 指定的主资源集无效，查看tomcat下的server.xml下是否存在无效的路径
servlet重定向到jsp后，css样式和图片都没了，解决办法
2.写新闻详情页的html代码&ajax请求数据
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>新闻标题</title> <style type="text/css"> body{ margin:0; padding:0; } .newsheader{ width:1000px; margin:0 auto; background-color:#f2f2f2; padding:0,0,15,0; border-bottom:1px solid #e5e5e5; } h1,h2{ margin:0; padding:0; } .newsheadtitle{ } .headappend{ color:#666; padding-left:10px; } .headappend a{ text-decoration:none; color:#666; } .headappend a:hover{ text-decoration:underline; } .headpubdate{ display:inline-block; } .icon_1{ background: url(icon/icon_comment1.png) bottom no-repeat; width:20px; height:20px; display:inline-block; margin-left:10px; } .headorigin{ padding-left:10px; display:inline-block; } .newscontent{ width:1000px; margin:0 auto; } .newscontent p{ font-size:18px; color:#333; line-height:1.4em; text-indent:2em; margin:0; padding:0; } .newsnote{ font-style:italic; padding:20px 45px 0px 30px; } .newstext{ padding:20px 45px 30px 30px; } .newsediter{ color:#666; font-size:14px !important; display:inline-block; float:right; padding-right:45px !important; } </style> <script type="text/javascript"> window.onload=function(){ loadData(); } function loadData(){ if(window.XMLHttpRequest){ var xmlhttp=new XMLHttpRequest(); }else if(window.ActiveXObject){ xmlhttp=new ActiveXObject('Microsoft.XMLHTTP'); } xmlhttp.onreadystatechange=function(){ var result=xmlhttp.responseText; //var data=eval("("+result+")"); //console.log(result) var data=eval("("+result+")") //console.log(data.result[0].title) var maintitle=data.result[0].title; var content=data.result[0].content; var pubdate=data.result[0].pubdate; var author=data.result[0].author; var href=data.result[0].href; var origin=data.result[0].origin; document.getElementById("maintitle").innerHTML=maintitle; document.getElementById("newstext").innerHTML=content; document.getElementById("newsediter").innerHTML="作者：  "+author; document.getElementById("headorigin").innerHTML=origin document.getElementById("pubdate").innerHTML=(new Date(parseInt(pubdate))).toLocaleString(); }; xmlhttp.open("get","/clientapi/api?news=1",false); xmlhttp.send(null); } </script> </head> <body> <div class="newsheader"> <div class="newsheadtitle"> <h1 id="maintitle"></h2> <h2 id="subtitle"></h3> <div class="headappend"> <span id="pubdate" class="headpubdate"></span> <span class="headorigin" id="headorigin"><a href="#">来源：JustTest</a></span> <span><a href="#" class="icon_1" title="评论"></a></span> <span><a href="#" id="commentCount">3</a></span> </div> </div> </div> <div class="newscontent"> <div class="newsnote"> <p id="newsnote"></p> </div> <div class="newstext" > <p id="newstext"></p> </div> <p class="newsediter" id="newsediter"></p> </div> <div class="newscomment"> <div class="shape"></div> </div> </body> </html>
3.客户端使用webview读取页面
先给recyclerView添加点击事件，用到了闭包的概念（java方法）
定义一个接口
public interface OnItemClickListener{ fun onClick(pos:Int); }
声明接口，并以adapter类的构造参数传入
private var listener:OnItemClickListener?=null constructor(listener:OnItemClickListener):this(){ this.listener=listener }
在实例化adapter的时候，使用回调方法
var adapter=HomePageNewsAdapter(object :HomePageNewsAdapter.OnItemClickListener{
override fun onClick(pos: Int) {
Toast.makeText(context,pos.toString(),Toast.LENGTH_SHORT).show()
}
});
我之前走了一个弯路，把新闻条目之间的分割线也做成recyclerview的条目了。有其他的办法实现分割线。那现在先保持原样吧。
所以在外面加个判断，如果position是0，1,3,5,7,9那就要处理，此外还要把新闻标题列表中的标题也传出来，不然读取数据库会有很多问题，那这个，如果使用newsList(pos)的方式，ArrayList就会越界了。。。
所以在adapter中判断了item的类型之后，再添加item的点击事件（事实应该有六条新闻才对，第一条是由图片索引，其他五条由标题。但是我开始就没考虑第一条，现在暂时也不考虑）
实例化adapter变成这样
override fun initData() { homepage_news_container.layoutManager = LinearLayoutManager(context) var adapter=HomePageNewsAdapter(object :HomePageNewsAdapter.OnItemClickListener{ override fun onClick(pos: Int,title:String?) { //Toast.makeText(context,"位置$pos,标题$title",Toast.LENGTH_SHORT).show() var intent:Intent?=null intent=Intent(context,NewsPageActivity::class.java) intent.putExtra("title",title)
startActivity(intent); } });
在NewsPageActivity中，接收title
class NewsPageActivity:BaseActivity() { override fun getLayoutId(): Int { return R.layout.activity_newspage } override fun initData() { var title=intent.getStringExtra("title"); Toast.makeText(baseContext,"haha$title",Toast.LENGTH_SHORT).show() } }
4.使用WebView加载新闻的html
wv_newsPage.loadUrl("http://局域网地址:8080/client/temp.html")
wv_newsPage.webViewClient= WebViewClient()
wv_newsPage.settings.javaScriptEnabled=true
这样发现页是很难看的，因为原来的网页太大，导致在客户端中左右都会滚动。解决办法可以参考Android 中Webview 自适应屏幕
我使用的是
wv_newsPage.settings.useWideViewPort=true wv_newsPage.settings.loadWithOverviewMode=true
效果是这样
还是挺难看的，一方面是之前前端的页面做得不好，另一方面，把页面按比例缩小了。但是先不考虑这个了
5.与html通信，传title的值给html5
点击不同的新闻标题，获得到的新闻应该是变化的。在NewsPageActivity中应该把title的值传给html，再在html中动态获取数据库中的新闻
我的天，从前一篇开始，我做的所有准备，都是为了让安卓与html5的一次通信啊。。。
简单的通信是这样
wv_newsPage.settings.useWideViewPort=true wv_newsPage.settings.loadWithOverviewMode=true //wv_newsPage.getSettings().setDomStorageEnabled(true); wv_newsPage.addJavascriptInterface(JavascriptMethods(baseContext,title),"jsInterface");
class JavascriptMethods { private var mContext:Context?=null private var title:String?=null constructor(mContext:Context,title:String){ this.mContext=mContext this.title=title } @JavascriptInterface fun getTitle():String?{ return title } }
html中
var origin=data.result[0].origin; var maintitle=window.jsInterface.getTitle(); document.getElementById("maintitle").innerHTML=maintitle;
现在要在html中改变一下ajax的请求接口：根据标题请求新闻的内容。。
function loadData(){ if(window.XMLHttpRequest){ var xmlhttp=new XMLHttpRequest(); }else if(window.ActiveXObject){ xmlhttp=new ActiveXObject('Microsoft.XMLHTTP'); } xmlhttp.onreadystatechange=function(){ var result=xmlhttp.responseText; var data=eval("("+result+")") //console.log(data.result[0].title) var maintitle=data.result.title; var content=data.result.content; var pubdate=data.result.pubdate; var author=data.result.author; var href=data.result.href; var origin=data.result.origin; document.getElementById("maintitle").innerHTML=maintitle; document.getElementById("newstext").innerHTML=content; document.getElementById("newsediter").innerHTML="作者：  "+author; document.getElementById("headorigin").innerHTML=origin document.getElementById("pubdate").innerHTML=(new Date(parseInt(pubdate))).toLocaleString(); }; var title=window.jsInterface.getTitle(); var str="/clientapi/api?title="+title; xmlhttp.open("get",str,false); xmlhttp.send(null); }
另外请求api随便写一下。这样就可以实现点击首页新闻标题进入新闻详情页显示了。显示的效果不好，下次改善一下。