Monaca Native Components
Hello, this is Katsuya,
In this blog I’m going to tell you about Monaca and at the same time give it a bit of a plug! Specifically I’d like to tell you about the native components feature that we added recently.
・What are native components?
・Native component number one, displaying the tool bar
※Since this article is intended for those with some experience of Monaca, if you haven’t used it before I recommend starting here.
* About native components
As those of you who have used Monaca before will know, Monaca is a WebView-based application development environment.
For that reason its not possible to use proprietary iPhone and Android UI components.
As anyone who has used the iPhone will know, the UI is extremely rich.
Which is great of course but how can we bring that to our applications?
Well that’s where native components come into it.
At Asial, we decided to create a development environment that addressed this problem. After a lot of trials and tribulations we finally managed it… enter Monaca!
So let me tell you how to use it.
OK, lets have a look at using it in practice!
* Native component number one, displaying the tool bar
In this case, we are just going to use one native component, the tool bar.
First of all, we need to create a Monaca project.
For testing purposes we’ll start with these settings.
When you open the project, please create a file called index.ui.
This .ui file is essential for displaying the native components.
Index.html needs index.ui, and whenever you need to use native components in an .html file, you will need a corresponding .ui file.
The index.ui file will take the following form. Each definition is created in JSON format
{
"top": {
"container": "toolbar",
"style": {
"title": "Demo"
},
"right": [{
"component": "button",
"style": {
"text": "tap me!"
},
"event": {
"onTap": "onTapButton()"
}
}]
}
}
For more detailed information about this please check out the Monaca documentation. Here is the index.ui file
・The top of the screen uses the toolbar
・Demo is displayed in the title
・A button is displayed on the right hand side when the button is pressed this JavaScript will run
..and so on.
By the way, the index.html file will look like this.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Plain Project Skeleton</title>
<script type="text/javascript" src="plugins/plugin-loader.js"></script>
<script type="text/javascript">
// Set virtual screen width size to 640 pixels
monaca.viewport({width: 320});
</script>
</head>
<body>
native component demo
</body>
</html>
Right, lets stop there and check our code in the debugger.
What do you think?
The native components are correctly displayed.
In the upper screen there’s a native component, at the bottom there isn’t.
If you compare the two screenshots its pretty clear which one looks better, and it was much quicker and easier to create the native OS interface than having to build a custom CSS.
Next, we’ll define the onTapButton behaviour.
In index.html we’ll call the onTapButton behaviour JavaScript function we defined in the .ui file earlier.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Plain Project Skeleton</title>
<script type="text/javascript" src="plugins/plugin-loader.js"></script>
<script type="text/javascript">
// Set virtual screen width size to 640 pixels
monaca.viewport({width: 320});
function onTapButton(){
alert("native component run in JavaScript!");
}
</script>
</head>
<body>
native component demo
</body>
</html>
Lets check in the debugger.
If you tap the top right hand button, the JavaScript from index.html runs! As you can see you’ve just developed a rich UI application in WebView with native components but done with JavaScript.
* Conclusion
Please have a go for yourself and see how you get on, remember because its html based your application is not just rich but cross-platform.
Well I hope you’ve enjoyed this article and that you have great fun with the new Monaca development environment.
My next article introduces the transition function which was released at the same time as native components, please check it out when you have a moment!
* links
