Try to do with a kotlin app (eight)

Click into the details page news list

Use WebView

1. Preparations

Now there is no way to do the whole front end of the site out, it will do a news page. News page should connect to the database, JDBC classes before writing background to use, so I think I can add a "sub" in the original project. It would have to adjust the structure of the original project.

The project structure is such that the adjusted

The following are the problems encountered and solutions

Rename the project idea

If an error occurs javax.management.InstanceNotFoundException: Catalina: of the type = Server , whether in view artifacts also retains the original project

Tip: Caused by: java.lang.IllegalArgumentException: Invalid main set of resources , if there are invalid under the server.xml tomcat in view of the path

After the servlet redirect to jsp, css styles and pictures gone, the solution

2. Write news story page html code & ajax request data

<!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. The client uses webview read page

Give recyclerView add a click event, uses the concept of closure (java method)

Define an interface

public  interface OnItemClickListener {
        fun onClick(pos:Int);
    }

Declare an interface adapter parameters and to construct incoming class

private var listener:OnItemClickListener?=null

    constructor(listener:OnItemClickListener):this(){
        this.listener=listener
    }

In the example of the adapter when the callback method

var adapter=HomePageNewsAdapter(object :HomePageNewsAdapter.OnItemClickListener{
            override fun onClick(pos: Int) {
                Toast.makeText(context,pos.toString(),Toast.LENGTH_SHORT).show()
            }

        });

I had to go a roundabout, the dividing line between news items can also be made of the entry recyclerview. There are other ways to achieve the dividing line. That for now it remains intact.

So on the outside add a judge, if the position is 0,1,3,5,7,9 it would have to deal with, in addition to the news title list title also pass out, or read the database will have a lot of problems, and that this, if newsList (pos) way, ArrayList will crossed the line. . .

So after the judgment in the adapter type of item, and then add the item click event (the fact that the news should have six fishes, the first is a picture index, the other five by the title, but I have not began to consider first, now not being considered)

Examples of such adapter into

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);
            }

        });

In NewsPageActivity, the reception 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. Use html WebView loaded News

wv_newsPage.loadUrl ( "http: // LAN Address: 8080 / Client / temp.html" )
wv_newsPage.webViewClient= WebViewClient()
wv_newsPage.settings.javaScriptEnabled=true

Such pages are found difficult to see, because the original page is too large, it will lead to scroll left and right in the client. Solution can refer to Android in the screen adaptation Webview

I am using

wv_newsPage.settings.useWideViewPort=true
wv_newsPage.settings.loadWithOverviewMode=true

The effect is so

Still quite hard to see, on the one hand is the front page before doing a good job, on the other hand, the page scaled down. But this is not considered a

5. html communicate with, to pass the value of title html5

Click on different headlines, to get the news should be changed. In NewsPageActivity should the value of the title passed to html, then dynamic access to the database of news in html

My God, formerly a start, I do all the preparations, it is to make Android the first communication with html5 ah. . .

Simple communication is

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随便写一下。这样就可以实现点击首页新闻标题进入新闻详情页显示了。显示的效果不好，下次改善一下。

Try to do with a kotlin app (eight)

Guess you like