嘗試用kotlin作一個app（八）

時間  2020-08-09
標籤 嘗試 kotlin 一個 app 简体版
原文   原文鏈接

點擊新聞列表進入詳情頁javascript

使用WebViewcss

1.準備工做html

如今沒有辦法把整個網站前端都作出來，就先作一個新聞頁面吧。新聞頁面也要鏈接數據庫，要使用以前寫後臺的JDBC類，因此我想能夠在原來項目中增長一個「子項目」。那就要調整一下原來項目的結構。前端

調整後的項目結構是這樣的html5

 

 如下是遇到的問題和解決方法java

idea項目重命名web

若是出現錯誤javax.management.InstanceNotFoundException: Catalina:type=Server，查看artifacts下的是否還保留了原來的項目ajax

提示:Caused by: java.lang.IllegalArgumentException: 指定的主資源集無效，查看tomcat下的server.xml下是否存在無效的路徑數據庫

servlet重定向到jsp後，css樣式和圖片都沒了，解決辦法api

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="做者：&nbsp;&nbsp"+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="做者：&nbsp;&nbsp"+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隨便寫一下。這樣就能夠實現點擊首頁新聞標題進入新聞詳情頁顯示了。顯示的效果很差，下次改善一下。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程