Last time I showed how to say "Hello World" from BlackBerry. Now I want to show you how to create simple alert button, input field and tooltip :). All you need to do is create a simple HTML, configuration file for your WebWorks application (config.xml), a CSS file to customize the interface and add some image for your application icon. Put it in one folder and compile it with bbpw.exe which you can found in the directory where you installed BlackBerry WebWorks SDK.
Here, I'll show you each of my file. This is just a simple example. To learn how to develop WebWorks application, go to http://us.blackberry.com/developers/browserdev/. There You can download the SDK too. I assumed that you've understand how to develop BlackBerry Application (widget) using WebWorks, so I'll not explain step by step.
First, the main file, config.xml.
<?xml version="1.0" encoding="utf-8" ?>
<!-- ..is a must.. -->
<widget xmlns="http://www.w3.org/ns/widgets"
xmlns:rim="http://www.blackberry.com/ns/widgets"
version="1.0.0">
<!-- ..specify the name of your app.. -->
<name>Simple Application</name>
<!-- ..specify the description of your app.. -->
<description>A simple notify application with icon change
when new data arrived</description>
<author href="http://www.rim.com/" rim:copyright="no copyright"
email = "primaastiadi@somewhere.com">
Prima Astiadi
</author>
<!-- ..specify app icon.. -->
<icon src="icon.png" />
<icon src="icon.png" rim:hover="true" />
<license href="http://www.somewhere.com">Sample License</license>
<!-- ..the main file.. -->
<content src="index.html" />
</widget>
And next is the HTML file which is the main view of our app, index.html, with a simple alert JavaScript.
<html>
<head>
<title>Simple Application</title>
<!-- change orientation automatically??-->
<meta name="viewport" id="viewport" content="width=device-width, height=device-height,initial-scale=1.0,user-scalable=no" />
<script type="text/javascript">
function alertIt()
{
alert("You've pressed the button!");
}
</script>
<link rel="stylesheet" type="text/css" href="theCss.css"><link />
</head>
<div id="header">
<b>Simple Application ;)</b>
</div>
<body>
<div>
<p>Button example:</p>
<button id="btn" onclick="alertIt();" >This is a button</button>
</div>
<div>
<p>Input example:</p>
<input id="edit2" type="text" value="text" /><br/>
<input id="edit2" type="password" value="password" />
</div>
<div>
<p>Tool-tip example:</p>
<p>
<span class="root">
Hover please..
<span class="tool-tip">..Ta-daaaa..</span>
</span>
</div>
</div>
</body>
</html>
Ok, the last one, let's give some CSS, theCSS.css.
.root
{
position: relative;
color: blue;
}
.tool-tip
{
display: none;
text-decoration:none;
color:black;
}
.root:hover .tool-tip {
position: absolute;
display: block;
text-decoration:none;
border: 1px solid black;
}
.tooltipRoot:hover .tooltip {
position: absolute;
left: 0px;
display: block;
background-color: White;
text-decoration:none;
border: 1px solid Black;
}
.tooltip
{
display: none;
text-decoration:none;
color: Black;
}
Now, everything is ready. Compile it and test it on your BlackBerry emulator. It should be like mine, here I'll show you some of the screenshot :)
No comments:
Post a Comment