Osama Oransa's Blog: March 2012

Tuesday, March 20, 2012

Developing HTML 5 Application for Android

Developing HTML 5 Application for Android is an easy process, we will list the few steps needed to achieve this..

1) Create Your Normal Android Project:
-Define the activity and package name in new project wizard.
For example: Activity is TestActivity and package name is osa.ora.test

2) In the main.xml change it to looks like the following:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<WebView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/webView"
/>
</LinearLayout>

This define a web view with the id: webView.

3) In our activity : the following code is needed according to your needs:

public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
WebView webView=(WebView)findViewById(R.id.webView);
webView.setWebChromeClient(new WebChromeClient());
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setDatabaseEnabled(true);
webView.getSettings().setDatabasePath("/data/data/osa.ora.test/databases/");
webView.getSettings().setDomStorageEnabled(true);
webView.loadUrl("file:///android_asset/www/index.html");

}

4) In asset folder create a folder with the name "www":

Place all the HTML, JS and CSS (and images) files under it, you must have the index.html that we refereed in our code (or another file name but match what in our java code).

5) Run the emulator , test it then sign it and upload :)

This is example application running in the emulator:

A lot of video tutorials exist showing the same way to develop such application.
Click here to watch.

Thursday, March 15, 2012

Using AES encryption in Java Script

Using encryption in Java Script could potentially help establishing secure data communication between the client and the server.

In this post we will wrap existing APIs to do that: JSAES

JSAES:

jsaes is a compact JavaScript implementation of the AES block cipher. Key lengths of 128, 192 and 256 bits are supported.

jsaes is free software, written in 2006 by B. Poettering. The code is licensed under the GNU GPL. The well-functioning of the encryption/decryption routines has been verified for different key lengths with the test vectors given in FIPS-197, Appendix C.

URL:
http://point-at-infinity.org/jsaes/

Download URL:
http://point-at-infinity.org/jsaes/jsaes.js

Our Wrapper code: jsaes_wrapper.js

function init(myKey){
AES_Init();
var key = string2Bin(myKey);
AES_ExpandKey(key);
return key;
}

function encrypt ( inputStr,key ) {
var block = string2Bin(inputStr);
AES_Encrypt(block, key);
var data=bin2String(block);
return data;
}
function decrypt ( inputStr,key ) {
block = string2Bin(inputStr);
AES_Decrypt(block, key);
var data=bin2String(block);
return data;
}
function encryptLongString ( myString,key ) {
if(myString.length>16){
var data='';
for(var i=0;i<myString.length;i=i+16){
data+=encrypt(myString.substr(i,16),key);
}
return data;
}else{
return encrypt(myString,key);
}
}
function decryptLongString ( myString,key ) {
if(myString.length>16){
var data='';
for(var i=0;i<myString.length;i=i+16){
data+=decrypt(myString.substr(i,16),key);
}
return data;
}else{
return decrypt(myString,key);
}
}
function finish(){
AES_Done();
}
function bin2String(array) {
var result = "";
for (var i = 0; i < array.length; i++) {
result += String.fromCharCode(parseInt(array[i], 2));
}
return result;
}
function string2Bin(str) {
var result = [];
for (var i = 0; i < str.length; i++) {
result.push(str.charCodeAt(i));
}
return result;
}

function bin2String(array) {
return String.fromCharCode.apply(String, array);
}

Usage:
This wrapper is adjusted to use key with 16 bytes length.

<html>
<head>
<meta charset="utf-8">
<title>Encryption Example</title>
<script src="jsaes.js"></script>
<script src="jsaes_wrapper.js"></script>
<script>
usedKey="World678World678";
myStr="Osama Oransa2012Osama Oransa2011RashaOsama Oransa2012Osama Oransa2011RashaOsama Oransa2012Osama Oransa2011RashaOsama Oransa2012Osama Oransa2011Rasha";
alert(myStr);
alert(usedKey);
var key=init(usedKey);
alert(key);
encrypted=encryptLongString(myStr,key);
alert('after encrypt='+encrypted);
decrypted=decryptLongString(encrypted,key);
alert('after decrypt='+decrypted);
finish();
</script>
</head>
<body>
</body>
</html>

Sunday, March 11, 2012

HTML 5 Game Development - JDC 2012

Yesterday I gave a session about HTML 5 game development.. It was a very nice experience to give a session out of the Java topics in such conference :)

Abstract:

HTML 5 is the 5th major revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML). In this version, new features are introduced to help Web application authors, new elements are introduced based on research into prevailing authoring practices, and special attention has been given to defining clear conformance criteria for user agents in an effort to improve interoperability.
In our session we will cover quick orientation about HTML 5 new features, then we will dig on how to create games using html5 new features, we will cover all basic components of the gaming including: Animations, Interactions, Controls, Effects, Boundaries, Entry Points, Physics and AI rules.
A step by step game development will be covered in this session to guide the attendees about how to create the game and how to package this into a deployable application for different smart phone devices.
Some advanced topics will be covered like using Box2d Physics engine plus AI engine example.

Materials:

Osama Oransa's Blog