Android Beginning Bunch: How to split html string as page in android?

How to split html string as page in android?

This post about how to split html string as page based on device height and width .

In my experiment i want to split the html string in multiple page and i did using javascript.

Step 1:

Create html file assest folder "mypage.html" and copy and paste this HTML code(Its included javascript split function).

Html Code

<!DOCTYPE html>

<html>

<head>

</head>

<body>

function makeColumns(text, width, height) {

// Array and String prototypes.

// Internet Explorer 5 didn't have Push, Pop and Shift so here we create them.

// Split and Join are normally supported by every DHTML capable browser,

// but they were broken in IE5/MacOSX, madness.

// push appends new elements to an array, and returns the new length

if (Array.prototype && !Array.prototype.push) {

Array.prototype.push = function() {

for (var i = 0; i < arguments.length; i++) this[this.length] = arguments[i];

return this.length;

};

}

// pop removes the last element from an array and returns it

if (Array.prototype && !Array.prototype.pop) {

Array.prototype.pop = function() {

var lastitem = this.length > 0 ? this[this.length - 1] : undefined;

if (this.length > 0) this.length--;

return lastitem;

};

}

// shift removes the first element from an array and returns it

if (Array.prototype && !Array.prototype.shift) {

Array.prototype.shift = function() {

var firstitem = this.length > 0 ? this[0] : undefined;

for (var i = 0; i < this.length - 1; i++) this[i] = this[i + 1];

if (this.length > 0) this.length--;

return firstitem;

};

}

// join returns a string value consisting of all the elements of an array

// concatenated together and separated by the separator argument

if (Array.prototype && !Array.prototype.join) {

Array.prototype.join = function(separator) {

if (typeof separator != "string") separator = ",";

var s = "";

for (var i = 0; i < this.length; i++) {

if (this[i] != null && this[i] != undefined) s += this[i];

if (i != this.length - 1) s += separator;

}

return s;

};

}

// split returns the array that results when a string is separated into substrings

if (String.prototype && !String.prototype.split) {

String.prototype.split = function(separator, limit) {

var s = "" + this;

var a = new Array();

var sepIndex;

if (typeof separator != "string") return new Array(s);

if (separator == "") {

while (s.length) {

a[a.length] = s.substring(0, 1);

s = s.substring(1);

if (typeof limit == "number" && a.length >= limit) break;

}

} else {

while (s.length) {

sepIndex = s.indexOf(separator);

a[a.length] = s.substring(0, sepIndex);

s = s.substring(sepIndex + separator.length);

if (typeof limit == "number" && a.length >= limit) break;

if (s.length == 0) a[a.length] = s;

}

return a;

};

}

if (!document.getElementById("column_sizer")) {

var _sizer = document.createElement("div");

_sizer.setAttribute("id", "column_sizer");

document.getElementsByTagName('body')[0].appendChild(_sizer);

}

var Columns = {

singleTags: ["br", "img", "hr", "input", "!--"],

devmode: "off", // "on" or "off", if set to "on" some info will be displayed in the statusbar.

cols: new Array(), // Stores the columns during calculations.

onSplitStart: new Function(),

onSplitEnd: new Function(),

onSplit: new Function()

};

// The chop array holds strings that should be removed from the start of every column.

// Don't remove only one part of a tag pair, like </p>, always remove whole pairs, like <p></p>.

Columns.chop = [

'<SPAN class=colbreak></SPAN>',

'<span class="colbreak"></span>',

'<BR>',

'<br>',

'<br/>',

'<br />',

'<p></p>',

'<P></P>'

];

// Splits a load of text into fragments that will fit in the

// specified width and height and returns them in an array.

// It automatically closes unclosed tags and creates opening tags for the following columns.

Columns.splitText = function(text, width, height) {

var self = this;

self.onSplitStart(text, width, height);

self.cols = new Array();

self.innerHTMLHits = 0;

var startDate = new Date();

var x = "";

for (var i = 0; text != ""; i++) {

// put a fitting fragment in cols array and slice it from the text

self.cols[i] = self.getFragment(text, width, height);

text = text.slice(self.cols[i].length);

// remove chop strings from the start of the text

for (var j = 0; j < self.chop.length; j++) {

if (text.charAt(0) == "\n") {

text = text.slice(1);

}

x = self.chop[j];

while (text.indexOf(x) == 0) {

text = text.slice(x.length);

}

// add tags from opentags array

for (var k = self.openTags.length - 1; k >= 0; k--) {

self.cols[i] += "</" + self.openTags[k].split(" ")[0] + ">";

if (text != "") text = "<" + self.openTags[k] + ">" + text;

}

// remove chop strings from the start of the text again

for (var m = 0; m < self.chop.length; m++) {

if (text.charAt(0) == "\n") text = text.slice(1);

x = self.chop[m];

while (text.indexOf(x) == 0) text = text.slice(x.length);

}

// fire onSplit event

self.onSplit(self.cols[i]);

}

if (self.devmode == "on") {

var endDate = new Date();

var message = "Time taken for splitting text = " + (endDate - startDate) / 1000 + " seconds";

message += " Number of unclosed tags found = " + self.openTags.length;

message += " innerHTMLHits = " + self.innerHTMLHits;

defaultStatus = message;

console.log(defaultStatus);

}

self.onSplitEnd(self.cols);

console.log( self.cols);

var message1 = self.cols;

AndroidFunction.showsplitData(self.cols);

// document.getElementById("column_sizer").innerHTML = self.cols;

document.getElementById("column_sizer").innerHTML="";

return self.cols;

};

Columns.getFragment = function(text, width, height) {

var objSizer = document.getElementById("column_sizer");

objSizer.style.width = width + "px";

var i = 0;

var limit = 0;

var add = 0;

var doloop = false;

this.openTags = new Array();

objSizer.innerHTML = text;

//debugger;

if (objSizer.offsetHeight <= height) {

i = text.length;

} else {

doloop = true;

limit = text.length;

}

// This loop determines the raw piece of text that fits in the specified width and height.

// It is the most powerhungry part of the script because of the repeated innerHTML manipulation.

// It uses a binary search between 0 and text.length.

while (doloop) {

add = Math.round((limit - i) / 2);

if (add <= 1) {

doloop = false;

}

if (this.innerHTMLHits > 1000) {

this.innerHTMLHits = 0;

doloop = false;

console.log('too many operations: columns cannot be created');

//break;

return;

} else {

i += add;

objSizer.innerHTML = text.substr(0, i);

//debugger;

if (objSizer.offsetHeight > height) {

limit = i;

i -= add;

}

this.innerHTMLHits++;

}

// Making sure there are no broken words or tags like "<img" at the end of this fragment.

// This also ensures there will be no broken words or tags at the start of the next fragment.

if (text.substr(0, i) != text) {

var lastSpace = text.substr(0, i).lastIndexOf(" ");

var lastNewline = text.substr(0, i).lastIndexOf("\n");

var lastGreater = text.substr(0, i).lastIndexOf(">");

var lastLess = text.substr(0, i).lastIndexOf("<");

if (lastLess <= lastGreater && lastNewline == i - 1) i = i;

else if (lastSpace != -1 && lastSpace > lastGreater && lastGreater > lastLess) i = lastSpace + 1;

else if (lastLess > lastGreater) i = lastLess;

else if (lastGreater != -1) i = lastGreater + 1;

}

// Doing the column breaks.

text = text.substr(0, i).split('<SPAN class=colbreak></SPAN>')[0];

text = text.substr(0, i).split('<span class="colbreak"></span>')[0];

// Seeking unclosed tag pairs in this fragment and storing them in the openTags array.

var doPush = true;

var tags = text.split("<");

tags.shift();

for (var j = 0; j < tags.length; j++) {

// Splitting at ">" and taking the first item.

// Now we have the whole tag with its attributes and without "<" and ">".

tags[j] = tags[j].split(">")[0];

// If it's a selfclosing xhtml or xml tag there's no need to do anything with it.

if (tags[j].charAt(tags[j].length - 1) == "/") continue;

if (tags[j].charAt(0) != "/") {

for (var k = 0; k < this.singleTags.length; k++) {

if (tags[j].split(" ")[0].toLowerCase() == this.singleTags[k]) doPush = false;

}

if (doPush) this.openTags.push(tags[j]);

doPush = true;

} else this.openTags.pop();

}

return text;

};

return Columns.splitText(text, width, height);

}

</script>

</body>

</html>

Activity Code

import android.annotation.SuppressLint;

import android.app.Activity;

import android.app.AlertDialog;

import android.content.Context;

import android.os.Bundle;

import android.util.Log;

import android.view.View;

import android.webkit.JavascriptInterface;

import android.webkit.WebView;

import android.webkit.WebViewClient;

import android.widget.Button;

import android.widget.EditText;

import android.widget.Toast;

public class AndroidHTMLActivity extends Activity {

WebView myBrowser;

EditText Msg;

Button btnSendMsg;

/***

* VIJAYAKUMAR M

/** Called when the activity is first created. */

@SuppressLint({ "JavascriptInterface", "SetJavaScriptEnabled" })

@JavascriptInterface

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

myBrowser = (WebView)findViewById(R.id.mybrowser);

final MyJavaScriptInterface myJavaScriptInterface

= new MyJavaScriptInterface(this);

myBrowser.addJavascriptInterface(myJavaScriptInterface, "AndroidFunction");

myBrowser.getSettings().setJavaScriptEnabled(true);

myBrowser.loadUrl("file:///android_asset/mypage.html");

Msg = (EditText)findViewById(R.id.msg);

btnSendMsg = (Button)findViewById(R.id.sendmsg);

myBrowser.setWebViewClient(new WebViewClient() {

@Override

public void onPageFinished(WebView view, String url)

{

String jscontent = "<div class='Content'>"

+"<p style='color:red'>How to split html string as page in android?<br></p>"

+"<u><p>This post about how to split html string as page based on device height and width .In my experiment i want to split the html string in multiple page and i did using javascript.</p></u>"

+"<p style='color:red'>This post about how to split html string as page based on device height and width .In my experiment i want to split the html string in multiple page and i did using javascript.<br></p>"

+"</div>";

myBrowser.loadUrl("javascript:makeColumns(\""+jscontent+"\" , "+"100"+" , "+"100"+")");

// String str= "javascript:makeColumns(\""+jscontent+"\" , "+"100"+" , "+"100"+")";

}});

}

public class MyJavaScriptInterface {

Context mContext;

MyJavaScriptInterface(Context c) {

mContext = c;

}

@JavascriptInterface

public void showsplitData(String[] splitData){

for(int i =0; i<splitData.length; i++){

Log.e("AN", "Split Html Data :: " +splitData[i]);

}

public void openAndroidDialog(){

}

XML Code mainactivity.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"