android webview doesn't render bullets properly - android

I have an android email client. When it receives message from an outlook2011 in mac, I get a html data like this:
<html><head></head><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; color: rgb(0, 0, 0); font-size: 14px; font-family: Calibri, sans-serif; "><ol><li>One</li><li>Two</li><li>Three</li></ol></body></html>
And it shows the bullets properly.
However, When I receive similar message from Outlook2013 in Windows, I get this html data:
<html>
<head>
<style>
<!--
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri","sans-serif"}
-->
</style>
</head>
<body lang="EN-US" link="#0563C1" vlink="#954F72">
<div class="WordSection1">
<p class="MsoListParagraph" style="text-indent:-.25in"><span style="">1.<span style="font:7.0pt "Times New Roman"">
</span></span>one</p>
<p class="MsoListParagraph" style="text-indent:-.25in"><span style="">2.<span style="font:7.0pt "Times New Roman"">
</span></span>two</p>
<p class="MsoListParagraph" style="text-indent:-.25in"><span style="">3.<span style="font:7.0pt "Times New Roman"">
</span></span>three</p>
</div>
</body>
</html>
And the webview in my app fails to render the bullets. It shows the text, but no bullets (numbered list).
The webview code is simple one.
private WebView mMessageContentView; //declaration
onCreate() {
mMessageContentView = whatever.getView(view, R.id.message_content);
//setup some zoom settings etc etc
mMessageContentView.setWebViewClient(someWebViewClientInstance);
}
private void setMessageHtml(String html) {
if (html == null) {
html = "";
}
if (mMessageContentView != null) {
mMessageContentView.loadDataWithBaseURL("email://", html, "text/html", "utf-8", null);
}
}
How can I fix this?

I added the following definition in style.css file in assets folder.
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:Cambria;}
p.MsoListParagraph, li.MsoListParagraph, div.MsoListParagraph
{margin-top:0in;
margin-right:0in;
margin-bottom:0in;
margin-left:.5in;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:Cambria;}
.MsoChpDefault
{font-family:Helvetica;}
Then the following code edit to add the external css file.
private void setMessageHtml(String html) {
if (html == null) {
html = "";
}
if (mMessageContentView != null) {
String htmlWithExternalCSS = addStyleDefinition(html);
mMessageContentView.loadDataWithBaseURL("email://", htmlWithExternalCSS, "text/html", "utf-8", null);
}
}
private String addStyleDefinition(String html) {
//insert at the end of <head> tag
String headTag = "<head>";
int index = html.indexOf(headTag);
StringBuffer buff = new StringBuffer(html);
buff.insert(index+headTag.length(), "<link rel=\"stylesheet\" type=\"text/css\" href=\"file:///android_asset/style.css\" />";);
return buff.toString();
}

Related

Interfacing with Html And Android

I have developed a media player in Html.Now my job is to play streaming Url in Html coded media player coming from Android activity.So i have need to pass url from android activity to Html media player files where it will be play.I have searched lot but haven't find any good solution.please suggest me. Thanks
Java Code
setContentView(R.layout.main);
// String LocalFile = "file:///android_asset/android.html";
WebView webView = (WebView) findViewById(R.id.webView1);
String html = "<embed src=\"file:///android_asset/"
+ "android.html"
+ " \"play=\"true\" loop=\"true\" width=\"100%\" height=\"100%\"> <embed>";
webView.getSettings().setPluginState(WebSettings.PluginState.OFF);
webView.getSettings().setPluginsEnabled(true);
webView.getSettings().setAllowFileAccess(true);
webView.getSettings().setJavaScriptEnabled(true);
webView.loadDataWithBaseURL("file:///android_asset/", html,
"text/html", "utf-8", null);
String str = "rtmp://23.21.155.146:554/9016012507701502509011502505116016019xm150.sdp";
webView.loadUrl("javascript:passWebUrl('" + str + "')");
My Code for media player
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<style type="text/css" media="screen">
html, body{
margin:0;
padding:0;
height:100%;
}
#altContent{
width:100%;
height:100%;
}
</style>
<title>YOUR TITLE HERE!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
function passWebUrl(url)
{
alert(url);
}
flashvars.HaloColor = "0x0086db";
flashvars.ToolTips = "true";
flashvars.AutoPlay = "true";
flashvars.VolumeLevel = "50";
flashvars.CaptionURL = "YOUR CAPTION HERE";
flashvars.Title = "YOUR TITLE HERE";
flashvars.Logo = "";
flashvars.SRC = "Here is my url link should comes from Android Activity";
flashvars.BufferTime = "5";
flashvars.AutoHideControls = "false";
flashvars.IsLive = "true";
var params = {};
params.wmode = "transparent";
params.allowfullscreen = "true";
var attributes = {};
attributes.id = "L3MP";
swfobject.embedSWF("http://media-player.cdn.level3.net/flash/v1_1_1/Level3MediaPlayer.swf", "altContent", "100%", "100%", "10.1.0","http://media-player.cdn.level3.net/flash/v1_1_1/expressInstall.swf", flashvars, params, attributes);
</script>
</head>
<body>
<div id="altContent">
<center> <BR><BR><span style="color:red"><b>Please Install Adobe Flash Player</b>
</span><BR><BR>
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</center>
</div>
</body>
</html>
</script>
</html>
For passing the value of variable from your java class to the javascript function in your html page you have to use this code. Try this:
String str = "variable_value";
webView.loadUrl("javascript:functionName('"+ str +"')");
EDIT : -
function passWebUrl(url)
{
alert(url);
}

Text without css tags in Android

I have an email body and it has html,css tags and I am trying to retrieve only the body text in Android.
I used;
String.valueOf(Html.fromHtml(body);
and that gave me the text with css tags. What should I do for retrieve only the text?
Result is holding in a String
Normally (when I first receive body );
<html>
<head>
<style><!--
.hmmessage P
{
margin:0px;
padding:0px
}
body.hmmessage
{
font-size: 10pt;
font-family:Tahoma
}
--></style></head>
<body class='hmmessage'><div dir='ltr'>
TEXTONE<div>TEXTTWO</div> </div></body>
</html>
After String.valueOf(Html.fromHtml(body);
<!-- .hmmessage P { margin:0px; padding:0px } body.hmmessage { font-size: 10pt; font-family:Tahoma } -->
TEXTONE
TEXTTWO
I just want to receive TEXTONE and TEXTTWO
fromHtml() supports only common HTML tags. HTML comments are not considered as tags, and are ignored. List of the tags, supported by fromHtml() can be found here.
Following code should fix your problem:
s = String.valueOf(Html.fromHtml(body);
s = s.replaceAll("(?s)<!--.*?-->", "");

Different encoding issue

I'm writing an android app that implements a web server that sends pages containing text messages.
By client side I developed a web interface. This interface contains some DIVs that are filled using ajax and in particular with this functions that gets a page and put it into a specified div:
function getElementFromId(myElement) {
var elem;
if(document.getElementById)
elem = document.getElementById(myElement);
else
elem = document.all[myElement];
return elem;
}
function getXMLHttpRequest() {
var XHR = null, browser = navigator.userAgent.toUpperCase();
if(typeof(XMLHttpRequest) == "function" || typeof(XMLHttpRequest) == "object")
XHR = new XMLHttpRequest();
else if(window.ActiveXObject && browser.indexOf("MSIE 4") < 0) {
if(browser.indexOf("MSIE 5") < 0)
XHR = new ActiveXObject("Msxml2.XMLHTTP");
else
XHR = new ActiveXObject("Microsoft.XMLHTTP");
}
return XHR;
}
function pageInDiv(nomeFile,divId) {
var ajax = getXMLHttpRequest(), elem = getElementFromId(divId),
usaLink = true;
if(ajax) {
usaLink = false;
ajax.open("get", nomeFile, true);
//ajax.setRequestHeader("connection", "close");
ajax.onreadystatechange = function() {
if(ajax.readyState == 4) {
if(ajax.status == 200)
elem.innerHTML = ajax.responseText;
else
elem.innerHTML += "Error: " + statusText[ajax.status];
}
}
ajax.send(null);
}
return usaLink;
}
Now there's the problem! When I call pageInDiv("pageWithText.html",myDiv) the div is filled correctly, except for accented caracters. If the text contains àèìòù, the div will contain strange symbols, but (this is the strangest thing) if I open the page http://.../pageWithText.html directly in the browser it appears perfectly!
What's the problem? Thank you in advice
Update
This a piece of the web interface code:
<body onLoad=" pageInDiv('conversations.html', 'conversations');>
And this is the code of conversations.html:
<div id="conversations" class="list">
<div id="main">
<div id="msgTitle">Io</div>
<div id="message"><div id="img">
<img class="convimg" src="contactphoto_8259.jpg"></div>
<div id="text">������</div></div><div id="line"></div>
</div>
You should try to include the following code in the html page where you have these encoding problems
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
...
</head>
If this encoding it's not working (I doubt it) you can try with different code from this page.

How to display a MapView and a StreetView simultaneously?

I want to display a MapView that may be used to select a point to be displayed by StreetView in a separate area. I know that the API disallows multiple MapViews in a single process.
How can I cause StreetView to display in a different area than that which displays MapView?
I have been able to grab a static streetview without any problems, but I want to have dynamic StreetView and MapView.
aTdHvAaNnKcSe (THANKS in ADVANCE)
You can load 360 degree panoramic Google street-view in your WebView.
Try following activity in which both google-street-view and google-map can be navigated simultaneously in single Activity :
public class StreetViewActivity extends Activity {
private WebView webView;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mappingWidgets();
}
private void mappingWidgets() {
webView = (WebView) findViewById(R.id.webView);
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);
webView.getSettings().setSupportZoom(false);
// If you want to load it from assets (you can customize it if you want)
//Uri uri = Uri.parse("file:///android_asset/streetviewscript.html");
// If you want to load it directly
Uri uri = Uri.parse("https://google-developers.appspot.com/maps/documentation/javascript/examples/full/streetview-simple");
webView.loadUrl(uri.toString());
}
}
You can place this as static HTML page in assets folder of your application and then you can modify it's java-script according to your needs using Google street-view API.
Here I am posting sample streetviewscript.html that you can put in assets folder of your application and customize it according to your needs :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Google Maps JavaScript API v3 Example: Street View Layer</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
<script>
function initialize() {
var fenway = new google.maps.LatLng(42.345573,-71.098326);
var mapOptions = {
center: fenway,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById('map_canvas'), mapOptions);
var panoramaOptions = {
position: fenway,
pov: {
heading: 34,
pitch: 10,
zoom: 1
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'),panoramaOptions);
map.setStreetView(panorama);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 800px; height: 800px"></div>
<div id="pano" style="position:absolute; left:810px; top: 8px; width: 800px; height: 800px;"></div>
</body>
</html>
Edit : For simultaneously navigating two street views, load following HTML from assets :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Google Maps JavaScript API v3 Example: Street View Events</title>
<STYLE type="text/css">
body, html { height:100%; padding:0; margin:0;}
#pano { float:left }
#pano1 { float:right }
</STYLE>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var cafe = new google.maps.LatLng(37.869085,-122.254775);
var heading_value = 270;
var pitch_value = 0;
var zoom_value = 1;
function initialize() {
var panoramaOptions = {
position: cafe,
pov: {
heading: heading_value,
pitch: pitch_value,
zoom: zoom_value
},
visible: true
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);
var panorama2 = new google.maps.StreetViewPanorama(document.getElementById('pano1'), panoramaOptions);
google.maps.event.addListener(panorama, 'pano_changed', function() {
var panoCell = document.getElementById('pano_cell');
panoCell.innerHTML = panorama.getPano();
panorama2.setPano(panorama.getPano());
});
google.maps.event.addListener(panorama, 'links_changed', function() {
var linksTable = document.getElementById('links_table');
while(linksTable.hasChildNodes()) {
linksTable.removeChild(linksTable.lastChild);
};
var links = panorama.getLinks();
panorama2.setLinks(panorama.getLinks());
for (var i in links) {
var row = document.createElement('tr');
linksTable.appendChild(row);
var labelCell = document.createElement('td');
labelCell.innerHTML = '<b>Link: ' + i + '</b>';
var valueCell = document.createElement('td');
valueCell.innerHTML = links[i].description;
linksTable.appendChild(labelCell);
linksTable.appendChild(valueCell);
}
});
google.maps.event.addListener(panorama, 'position_changed', function() {
var positionCell = document.getElementById('position_cell');
positionCell.firstChild.nodeValue = panorama.getPosition();
panorama2.setPosition(panorama.getPosition());
});
google.maps.event.addListener(panorama, 'pov_changed', function() {
var headingCell = document.getElementById('heading_cell');
var pitchCell = document.getElementById('pitch_cell');
headingCell.firstChild.nodeValue = panorama.getPov().heading;
panorama2.setPov(panorama.getPov());
pitchCell.firstChild.nodeValue = panorama.getPov().pitch;
});
}
</script>
</head>
<body onload="initialize()">
<div style="width:100%; height :100%; background-color:Lime;">
<div id="pano" style="width:50%; height:100%; background-color:Blue;">
</div>
<div id="pano1" style="width:50%; height:100%; background-color:Gray;">
</div>
</div>
<div id="panoInfo" style="width: 425px; height: 240 px;float:left; display: none;">
<table>
<tr>
<td><b>Position</b></td><td id="position_cell"> </td>
</tr>
<tr>
<td><b>POV Heading</b></td><td id="heading_cell">270</td>
</tr>
<tr>
<td><b>POV Pitch</b></td><td id="pitch_cell">0.0</td>
</tr>
<tr>
<td><b>Pano ID</b></td><td id="pano_cell"> </td>
</tr>
<table id="links_table"></table>
</table>
</div>
</body>
</html>
How can I cause StreetView to display in a different area than that which displays MapView?
Street View is only available on the device as its own activity (from its own application) and therefore cannot be displayed alongside any of your own widgets.
On Android have a look at the sample Street View Panorama and Map available at https://developers.google.com/maps/documentation/android/code-samples. But i am not sure if it will also do for custom street views.

Android Chinese characters in WebView

I have a html code which I saved in home.txt file and placed it raw folder. Now I want to display the same in a WebView. I used the following code for it.
homeWebview = (WebView) findViewById(R.id.homeWebview);
InputStream fileStream = getResources().openRawResource(R.raw.home);
int fileLen = fileStream.available();
// Read the entire resource into a local byte buffer.
byte[] fileBuffer = new byte[fileLen];
fileStream.read(fileBuffer);
fileStream.close();
displayText = new String(fileBuffer);
//Display content.
homeWebview.loadData(displayText, "text/html", "utf-8");
It is working fine. Now I have to display some Chinese characters in the html. I added the Chinese character in home.txt. Here it is the html code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Language</title>
<style type="text/css">
body {font-family: HelveticaExt-normal, Helvetica, Arial, sans-serif;margin:0;font-size:20px;color:#000000;}
.mainWrapper {margin:0;}
p {margin: 10px;}
p.bodytext {margin: 0 10px 20px;}
.headerText { background:#eeeeee; background: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#e0e0e0));border-top: 2px solid #000000;padding-bottom:7px;}
.headerText p {margin: 10px 10px 0 10px;}
a {color:#324f85;text-decoration:underline;}
.headerbar {border-top:2px solid #000000;border-bottom:2px solid #000000;height:34px;font-family:HelveticaExt-bold, Helvetica, Sans-serif;color:#fff;font-size:18px;padding-left:10px;line-height:34px;margin:0;
background:-webkit-gradient(linear, left top, left bottom, from(#494e4f), to(#787a7c));
}
.navigationList {list-style-type:none;padding:0;margin:0;}
.navigationList li {height:60px;border-bottom:2px solid #e0e0e0;background-position:10px center;background-repeat:no-repeat;padding-left:60px;line-height:28px;
}
</style>
</head>
<body>
<div class="mainWrapper">
<div class="headerText">
<p欢迎您到泰国语言主持人!www.test.com 欲了解更多信息!</p>
</div>
</div>
</body>
Now it is displaying the common characters well, but all the Chinese char is showing as unknown char. What is the prob in my code?
use webView.loadDataWithBaseURL (null, text, "text/html", "utf-8", null);
The home.txt file was not in UTF-8 encoded, I open it in notepad++ and change the encoding. Now it is showing properly.
I think problem in this line:
displayText = new String(fileBuffer);
You should change to
displayText = new String(fileBuffer, "UTF-8");

Categories

Resources