What is HAWK?
HAWK is a set of development tools that provides authoring and content management features in order to:
- Write the application once in HTML, JS, CSS, PHP, JAVA, ASP...
- Manage different form factors and screen sizes
- Emulate the application on Windows-based computers
- Create application installers adapted to device specificities
How it works...
Find out how to use HAWK with this tutorial teaching you how to create a barcode scanner.
- Setup your project
- Code
- Configure your application
- Emulate your application
- Create application installer(s)
- Install on device(s)
Step 1. Setup your project
-
First, you need to set the path of the URL to the platforms directory on which the application installers will be built:
The Preferences window appears.
- In the Menu bar, click Window/Preferences.
- Expand HAWK and click Platforms Directory.
- In the Platforms Directory URL field, type the path to the platforms directory.
- Click OK.
To create application installers you have to log in to the platforms directory. Application installers will be built on this platform.
- Now, let's start a new project, in HAWK, click HAWK/New HAWK Project.
- Connect with your username and password and click Next.
- In the Project name field, type barcode and click Finish.
- Now, let's create an HTML file inside the embedded files folder, expand your project folder/WebContent in the project explorer, right-click the embedded_files folder and choose New/HTML file.
- Rename the file barcode.html and click Finish.
The barcode.html file content appears in the edition area.
Step 2. Code
Click to display/hide the HTML code
<!DOCTYPE html>
<html>
<head>
<title>Streamezzo demo web app - Device API test: Barcode scan</title>
<meta charset="utf-8"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Cache-Control" content="no-cache, no-store"/>
<meta http-equiv="Expires" content="-1"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
<link rel="stylesheet" href="../css/hawk-theme.css"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile.structure-1.3.0.min.css"/>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<!-- custom script here -->
<script type="text/javascript" src="../js/hawk.js"></script>
<script type="text/javascript">
function notifyBarcodeScanSuccess(barcode)
{
document.forms["BarcodeForm"].elements["text"].value = barcode.text;
document.forms["BarcodeForm"].elements["type"].value = barcode.type;
alert("Barcode scanned!");
}
function notifyBarcodeScanFailure()
{
document.forms["BarcodeForm"].elements["text"].value = "";
document.forms["BarcodeForm"].elements["type"].value = "";
alert("Barcode scan failed.");
}
</script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="a">
<div data-role="header" data-position="fixed" data-theme="b">
<h1>Barcode scan</h1>
</div>
<div data-role="content">
<input type="button" value="Scan barcode" onclick="javascript:deviceapis.barcode.scan(notifyBarcodeScanSuccess,notifyBarcodeScanFailure);" data-theme="b" data-mini="true"/>
<ul data-role="listview" data-inset="true">
<li>
<form name="BarcodeForm">
<div data-role="fieldcontain">
<label for="text">Text:</label>
<input type="text" name="text" id="text" readonly data-mini="true"/>
</div>
<div data-role="fieldcontain">
<label for="type">Type:</label>
<input type="text" name="type" id="type" readonly data-mini="true"/>
</div>
</form>
</li>
</ul>
</div>
<div data-role="footer" data-position="fixed" data-theme="c">
Amdocs © 2013
</div>
</div>
</body>
</html>
Step 3. Configure your application
- Right-click the Barcode project folder and choose Settings.
- Expand Master, Master is the main configuration, you can create other configuration.
- Click Start Page, click Browse and set the startpage URL to embedded files/barcode.html.
- Save your settings with Ctrl+S.
Step 4. Emulate your application
If you want to emulate the barcode application, you need a PC equipped with a webcam to scan a barcode.
- Right-click the project folder and choose Run as/HAWK Emulation.
- Select a device and click Run.
The barcode application emulates.
- Place a barcode in front of your webcam to scan a barcode.
Step 5. Create application installer(s)
- Right-click the project folder and choose Create application installers.
- Select platform(s) and click Finish.
The deployment view appears.
- Right-click the application installer and click Open in Explorer.
The .apk or .app folder appears in your explorer.
Step 6. Install on device(s)
Install the application on Android and iOS devices
Install on an Android device
- Activate Bluetooth on the Android device.
- Activate Bluetooth on your PC.
- Right-click the .apk file and choose Send to/Bluetooth device and choose the Android device.
- Once the transfer is over, click the .apk file on your Android device in order to launch the application installation.
Install on an iOS device
- Go to http://www.diawi.com/
- Upload the application and its provisioning profile.
- Open the link on the iOS device and click install.
Download HAWK Framework
Three downloads are available, to activate HAWK Framework please send an email to developer(at)streamezzo(dot)com :
|
Standalone Eclipse version including the features exposed above. Download, unzip and launch the .exe file. |
|
HAWK plugin for Aptana
|
|
HAWK plugin for developers coding with Eclipse WTP
|
