Hawk logo

Build HTML5 mobile apps with HAWK
Develop HTML5 apps for all mobile OS, smartphone and tablets
Test, distribute & maintain with only one environment
Download Hawk


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.

  1. Setup your project
  2. Code
  3. Configure your application
  4. Emulate your application
  5. Create application installer(s)
  6. Install on device(s)

Step 1. Setup your project

  1. 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.

    1. In the Menu bar, click Window/Preferences.
    2. Expand HAWK and click Platforms Directory.
    3. In the Platforms Directory URL field, type the path to the platforms directory.
    4. Click OK.

    To create application installers you have to log in to the platforms directory. Application installers will be built on this platform.

  2. Now, let's start a new project, in HAWK, click HAWK/New HAWK Project.
  3. Connect with your username and password and click Next.
  4. In the Project name field, type barcode and click Finish.
  1. 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.
  1. Rename the file barcode.html and click Finish.

The barcode.html file content appears in the edition area.

Back to top of page

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 &copy; 2013
			</div>
		</div>
	</body>
</html>

Back to top of page

Step 3. Configure your application

  1. Right-click the Barcode project folder and choose Settings.
  1. Expand Master, Master is the main configuration, you can create other configuration.
  2. Click Start Page, click Browse and set the startpage URL to embedded files/barcode.html.
  1. Save your settings with Ctrl+S.

Back to top of page

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.

  1. Right-click the project folder and choose Run as/HAWK Emulation.
  1. Select a device and click Run.

The barcode application emulates.

  1. Place a barcode in front of your webcam to scan a barcode.

Back to top of page

Step 5. Create application installer(s)

  1. Right-click the project folder and choose Create application installers.

  1. Select platform(s) and click Finish.

The deployment view appears.

  1. Right-click the application installer and click Open in Explorer.

The .apk or .app folder appears in your explorer.

Back to top of page

Step 6. Install on device(s)

Install the application on Android and iOS devices

Install on an Android device

  1. Activate Bluetooth on the Android device.
  2. Activate Bluetooth on your PC.
  3. Right-click the .apk file and choose Send to/Bluetooth device and choose the Android device.
  4. 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

  1. Go to http://www.diawi.com/
  2. Upload the application and its provisioning profile.
  3. Open the link on the iOS device and click install.

Back to top of page

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.

Download HAWK for Eclipse

HAWK plugin for Aptana

  1. Download HAWK for Aptana zip file,
  2. in Aptana, click on Help Install New Software…,
  3. in the Work with field, click Add,
  4. in the Add repository window, click Archive and select the downloaded HAWK for Aptana zip file,
  5. follow the setup wizard step by step,
  6. restart Apatana when prompted to.

Download HAWK for Aptana

HAWK plugin for developers coding with Eclipse WTP

  1. Download HAWK plugin for Eclipse WTP zip file,
  2. in Eclipse, click on Help Install New Software…,
  3. in the Work with field, click Add,
  4. in the Add repository window, click Archive and select the downloaded HAWK plugin for Eclipse WTP zip file,
  5. follow the setup wizard step by step,
  6. restart Eclipse when prompted to.

Download HAWK for WTP

Back to top of page

Close
Loading