HtmlNative
??Html???Android???????????
???Webview, HtmlNative???Html?Css????????????????
- ????????????????????????????HTML+CSS????????
- ???WebView???????????????????????????
- ????????HTML????????????
- ???????????html + css?????
- ???????????html
<script>???? Lua ??????????????????????????API???HNLua API.
??????JavaScript??V8??????????????H5??????
Html????
<a>, <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <input>, <img>, <div>, <br>, <iframe> ???style, onclick????lua?????onclick???????????), id, class, href(for <a>), src(for <img>)css????
????style???? <head>? <style>?????css?????????css?????
???css??
width, height, background, background-color, background-position, background-size, padding, padding-left, padding-right, padding-top, padding-bottom, margin, margin-top, margin-left, margin-right, margin-bottom, visibility
font-size, color, line-height, font-style, font-weight, text-align, word-spacing, text-overflow, text-transform
??????html??????drawable???@????????
background: url(@pic);
color: @colorPrimary;??????
type???
p{
}
div{
}
id??? #id1{
}
class??? .class1{
}
? #id1, #id2{
}
????? div p{
}
???? div > p{
}
????? *{
}
p *{
}
??
??HtmlNative??????:
Html:
<html> <head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<meta name="viewport"
content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1"/>
<style> html{
font-size: 62.5%;
}
body{
margin: 0; padding: 0; color: #3f484f;
}
.header{
color:#3f484f; padding: 2em; background: #db3541; -hn-background-color-size: 1.2em 100%;
}
.article{
padding: 3em
}
p{
padding: 5em 0;
font-size: 4em;
line-height: 120%
}
</style>
<title>article</title> </head> <body> <div class="header">
<span>?? | </span>
<a href="http://www.sina.com.cn/">NewsWebSite</a>
<h1>??????????????????? Uber ???</h1>
<span>?????? 2017-05-09</span> </div> <div class="article">
<h2>??????????????</h2>
<p>????????????????????????????????????????????????????????????????????????????</p>
<div>
<img src="http://www.abc.com/pic.jpg" alt="????"/>
<span>???????</span>
</div>
<img src="http://www.abc.com/pic.jpg"/>
<p>?????????????????????????? 9 ????????????????????????????????????????????????????? Palo Alto
Networks ???????</p>
<p>????????Uber?????·???Charlie Miller?????????????????????????????????????? Uber
???????????2015 ???????????????????????2015 ? 9 ?????Uber??????????</p>
<p>?Twitter??????????????????????????????????????????????????????????????????????????</p> </div> <div>
<img src="coop/banner.png"/> </div> </body> </html>?????
InputStream htmlSource = ...; // ?????view????? HNativeEngine.getInstance().loadView(mActivity, htmlSource, new
HNativeEngine.OnHNViewLoaded() {
@Override
public void onViewLoaded(View v) {
if (mActivity != null && !mActivity.isDestroyed()) {
mActivity.setContentView(v);
}
}
@Override
public void onError(Exception e) {
}
@Override
public void onHead(HNHead head) {
}
}
);
HNLua API
HNLua API??????HtmlNative??????API????API??????????????????url??????????Android??????
???
<html>
<head>
<title>iframe</title>
<meta name="nihao" content="world"/>
<style>
#text1{
background:red;
color:green;
margin: 3em 3em;
padding: 2em;
}
button{
color:yellow
}
#parent{
color: red;
}
</style>
</head>
<body>
<text id="text1">This is an demo of iframe<br/>nihao
</text>
<button onclick="changeText1">click me</button>
<div id="parent" class="claz1 claz2 claz3"></div>
</body>
<script type="text/lua">
toast("hello world")
b = false
local vv = document.createView("p", "")
vv.setAttribute("text:helloworld");
local parent = getElementById("parent")
parent.appendChild(vv)
console.log(vv.toString())
console.log(vv.getAttribute("background"));
function changeText1()
local v = getElementById("text1")
console.log(v.id())
if(b) then
v.setAttribute("background:red;color:#fff")
else
v.setAttribute("background:blue;color:red")
end
b = not(b)
document.jump("http://www.baidu.com")
end
</script> </html>???????HNLuaAPI, ???????????? <p>?????? text???????? id=parent? <div>??
????html???? <button onclick="changeText1">click me</button>?? <button>???????????????????????? changeText1()???????b???????????????????????
?????HNLuaApi???????:
--log??,??HNConsole??????Android Logcat? console.log(msg) console.error(msg) console.info(msg) console.warn(msg) --???? document.version() --????HNLuaApi??? document.jump(url) --???url,?????????????HrefLinkHandler???HNativeEngine??? doucment.createView(tag, style) --?tag?????????????style?????local v = document.createElement("p", "color:red")????????lview?? --??view local lview = document.getElementById(id) --??id??view --lview?? lview.toString() --???stirng lview.setAttribute(style) --???????lview.setAttribute("color:red") lview.id() --??????id lview.className() --??????class??????LuaTable???? lview.appendChild(lviewChild) --??lview??????view??? lview.insertBefore(lviewChild) --??lview??????view???? lview.removeChild(lviewChild) --??view lview.childNodes() --???view????view lview.getAttribute(stylename) --????????stylename???? lview.tagName() --???view?tag???? lview.hasChildNode() --???lview?????view lview.setText(textString) --???? --toast toast("helloworld") --????toast???android only? --???? local callback = {
}
--???????? function l.onResponse(res) --???onResponse?? toast(res.body()) --???????toast????response?body?????res?body(), header()?status()?????????HTTP BODY?RESPONSE HEADER???? end http.get("http://www.abc.com", callback) http.post("http://www.abc.com", postParams, callback)License
Copyright 2016 Hsllany. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.