<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Connorhd &#187; phone</title>
	<atom:link href="http://connorhd.co.uk/tag/phone/feed/" rel="self" type="application/rss+xml" />
	<link>http://connorhd.co.uk</link>
	<description>Interesting stuff.</description>
	<lastBuildDate>Sat, 30 Mar 2013 23:35:16 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.1</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>WebApp &#8211; An Android experiment</title>
		<link>http://connorhd.co.uk/2010/02/03/webapp-an-android-experiment/</link>
		<comments>http://connorhd.co.uk/2010/02/03/webapp-an-android-experiment/#comments</comments>
		<pubDate>Wed, 03 Feb 2010 23:56:03 +0000</pubDate>
		<dc:creator>Connorhd</dc:creator>
				<category><![CDATA[Projects]]></category>
		<category><![CDATA[android]]></category>
		<category><![CDATA[ircster]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[phone]]></category>
		<category><![CDATA[planet compsoc]]></category>
		<category><![CDATA[web]]></category>

		<guid isPermaLink="false">http://connorhd.co.uk/?p=115</guid>
		<description><![CDATA[After thinking about a JavaScript API to allow alerts on an Android phone in this post, I came up with a method of adding this using the current Java Android app API. The solution involves starting a Webkit instance in a custom app, and intercepting links with a certain prefix. In this example android://alert/description creates an [...]]]></description>
			<content:encoded><![CDATA[<p>After thinking about a JavaScript API to allow alerts on an Android phone in <a href="http://connorhd.co.uk/2010/02/03/website-based-smartphone-applications/">this post</a>, I came up with a method of adding this using the current Java Android app API. The solution involves starting a Webkit instance in a custom app, and intercepting links with a certain prefix. In this example android://alert/description creates an alert with title &#8220;alert&#8221; and description &#8220;description&#8221;.</p>
<p>To demonstrate here are some screenshots of a <a href="http://connorhd.co.uk/files/WebApp.htm">sample page</a> using a <a href="http://connorhd.co.uk/files/WebApp.apk">sample application</a> (if you have an Android phone you can use that link to download it and try it yourself):</p>
<p>The application when you load it:</p>
<p><a href="http://connorhd.co.uk/wp-content/uploads/2010/02/WebApp1.png"><img class="alignnone size-full wp-image-116" title="WebApp1" src="http://connorhd.co.uk/wp-content/uploads/2010/02/WebApp1.png" alt="" width="320" height="480" /></a></p>
<p>When clicking go an alert is created:</p>
<p><a href="http://connorhd.co.uk/wp-content/uploads/2010/02/WebApp2.png"><img class="alignnone size-full wp-image-117" title="WebApp2" src="http://connorhd.co.uk/wp-content/uploads/2010/02/WebApp2.png" alt="" width="320" height="480" /></a></p>
<p>Viewing the created alert:</p>
<p><a href="http://connorhd.co.uk/wp-content/uploads/2010/02/WebApp3.png"><img class="alignnone size-full wp-image-118" title="WebApp3" src="http://connorhd.co.uk/wp-content/uploads/2010/02/WebApp3.png" alt="" width="320" height="480" /></a></p>
<p>The example page is very simple javascript:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> go<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	window.<span style="color: #660066;">location</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">'android://'</span><span style="color: #339933;">+</span>document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'title'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">value</span>
		<span style="color: #339933;">+</span><span style="color: #3366CC;">'/'</span><span style="color: #339933;">+</span>document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'text'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">value</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>The source for the app follows and is also fairly simple, most of the code is the rather complex way alerts are generated on Android:</p>

<div class="wp_syntax"><div class="code"><pre class="java" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">package</span> <span style="color: #006699;">uk.co.connorhd.android.webapp</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">java.net.URLDecoder</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">uk.co.connorhd.android.webapp.R</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">uk.co.connorhd.android.webapp.WebApp</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">android.app.Activity</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">android.app.Notification</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">android.app.NotificationManager</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">android.app.PendingIntent</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">android.content.Context</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">android.content.Intent</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">android.os.Bundle</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">android.webkit.WebView</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">android.webkit.WebViewClient</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">android.widget.Toast</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">class</span> WebApp <span style="color: #000000; font-weight: bold;">extends</span> Activity <span style="color: #009900;">&#123;</span>
  <span style="color: #008000; font-style: italic; font-weight: bold;">/** Called when the activity is first created. */</span>
  @Override
  <span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">void</span> onCreate<span style="color: #009900;">&#40;</span>Bundle savedInstanceState<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">super</span>.<span style="color: #006633;">onCreate</span><span style="color: #009900;">&#40;</span>savedInstanceState<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    WebView webview <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> WebView<span style="color: #009900;">&#40;</span><span style="color: #000000; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #666666; font-style: italic;">// We're testing, clear the cache.</span>
    webview.<span style="color: #006633;">clearCache</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
    setContentView<span style="color: #009900;">&#40;</span>webview<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
    webview.<span style="color: #006633;">getSettings</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #006633;">setJavaScriptEnabled</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #000000; font-weight: bold;">final</span> Activity activity <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">this</span><span style="color: #339933;">;</span>
    webview.<span style="color: #006633;">setWebViewClient</span><span style="color: #009900;">&#40;</span><span style="color: #000000; font-weight: bold;">new</span> WebViewClient<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      <span style="color: #000066; font-weight: bold;">int</span> alert <span style="color: #339933;">=</span> <span style="color: #cc66cc;">1</span><span style="color: #339933;">;</span>
&nbsp;
      <span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">void</span> onReceivedError<span style="color: #009900;">&#40;</span>WebView view, <span style="color: #000066; font-weight: bold;">int</span> errorCode,
          <span style="color: #003399;">String</span> description, <span style="color: #003399;">String</span> failingUrl<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        Toast.<span style="color: #006633;">makeText</span><span style="color: #009900;">&#40;</span>activity, <span style="color: #0000ff;">&quot;Oh no! &quot;</span> <span style="color: #339933;">+</span> description,
            Toast.<span style="color: #006633;">LENGTH_SHORT</span><span style="color: #009900;">&#41;</span>.<span style="color: #006633;">show</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
      <span style="color: #009900;">&#125;</span>
&nbsp;
      <span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">boolean</span> shouldOverrideUrlLoading<span style="color: #009900;">&#40;</span>WebView view, <span style="color: #003399;">String</span> url<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #666666; font-style: italic;">// Is it a hack?</span>
        <span style="color: #000000; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>url.<span style="color: #006633;">startsWith</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;android&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
          <span style="color: #003399;">String</span> ns <span style="color: #339933;">=</span> <span style="color: #003399;">Context</span>.<span style="color: #006633;">NOTIFICATION_SERVICE</span><span style="color: #339933;">;</span>
          NotificationManager mNotificationManager <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>NotificationManager<span style="color: #009900;">&#41;</span> getSystemService<span style="color: #009900;">&#40;</span>ns<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
          <span style="color: #000066; font-weight: bold;">int</span> icon <span style="color: #339933;">=</span> R.<span style="color: #006633;">drawable</span>.<span style="color: #006633;">icon</span><span style="color: #339933;">;</span>
          CharSequence tickerText <span style="color: #339933;">=</span> <span style="color: #0000ff;">&quot;WebApp Alert!&quot;</span><span style="color: #339933;">;</span>
          <span style="color: #000066; font-weight: bold;">long</span> when <span style="color: #339933;">=</span> <span style="color: #003399;">System</span>.<span style="color: #006633;">currentTimeMillis</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
          Notification notification <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> Notification<span style="color: #009900;">&#40;</span>icon,
              tickerText, when<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
          notification.<span style="color: #006633;">flags</span> <span style="color: #339933;">=</span> Notification.<span style="color: #006633;">FLAG_AUTO_CANCEL</span><span style="color: #339933;">;</span>
          <span style="color: #003399;">Context</span> context <span style="color: #339933;">=</span> getApplicationContext<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
          <span style="color: #003399;">String</span><span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span> split <span style="color: #339933;">=</span> url.<span style="color: #006633;">split</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;/&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
          CharSequence contentTitle <span style="color: #339933;">=</span> <span style="color: #003399;">URLDecoder</span>.<span style="color: #006633;">decode</span><span style="color: #009900;">&#40;</span>split<span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">2</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
          CharSequence contentText <span style="color: #339933;">=</span> <span style="color: #003399;">URLDecoder</span>.<span style="color: #006633;">decode</span><span style="color: #009900;">&#40;</span>split<span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">3</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
          Intent notificationIntent <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> Intent<span style="color: #009900;">&#40;</span>activity,
              WebApp.<span style="color: #000000; font-weight: bold;">class</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
          PendingIntent contentIntent <span style="color: #339933;">=</span> PendingIntent.<span style="color: #006633;">getActivity</span><span style="color: #009900;">&#40;</span>
              activity, <span style="color: #cc66cc;">0</span>, notificationIntent, <span style="color: #cc66cc;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
          notification.<span style="color: #006633;">setLatestEventInfo</span><span style="color: #009900;">&#40;</span>context, contentTitle,
              contentText, contentIntent<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
          mNotificationManager.<span style="color: #006633;">notify</span><span style="color: #009900;">&#40;</span>alert<span style="color: #339933;">++</span>, notification<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span> <span style="color: #000000; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
          view.<span style="color: #006633;">loadUrl</span><span style="color: #009900;">&#40;</span>url<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
        <span style="color: #000000; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">true</span><span style="color: #339933;">;</span>
      <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
    webview.<span style="color: #006633;">loadUrl</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;http://connorhd.co.uk/files/WebApp.htm&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>This could easily be extended (and I may try to do this myself for Ircster) to provide all the standard browser functionality (for example the back button doesn&#8217;t currently work) and a more complete API to interface with Android.</p>
]]></content:encoded>
			<wfw:commentRss>http://connorhd.co.uk/2010/02/03/webapp-an-android-experiment/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>
