Web Setup
Organize your web code as you want. If you need some examples, check out the Cobalt samples. Just keep in mind that each page is a html file and use cobalt storage to keep a context between them.
Some things are needed :
- A cobalt.json file at the root of your web folder.
- Use cobalt.js in your web pages.
If you use cobalt for a real-world app and have no means to edit anything in cobalt, use the minified version.
Now, you will have to initialize Cobalt when the page is loaded.
For this purpose, include cobalt.js in the head of your document and call cobalt.init() once the page is ready.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<p>Hello Cobalt user !</p>
<script type="text/javascript" src="js/cobalt/cobalt.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
cobalt.init();
cobalt.alert({ message : 'hello world !'});
});
</script>
</body>
</html>
In this example, we used DOMContentLoaded to know when DOM is loaded. You can use your own lib and your favorite "onReady" event (Samples are using the Zepto library).
Now you are ready to use Cobalt in your app.
Check out the features and navigation guides at this wiki's home page and enjoy the Cobalt power :)
Cobalt is an Open-Source Hybrid Mobile Framework. Read more about it on the home page or in the documentation
- Introduction to Cobalt navigation
- The cobalt.json file
- native navigation bars
- Handling the Android back button
- Introduction to Cobalt messages
- Publish/Subscribe on the Web side
- Publish/Subscribe on Android
- Publish/Subscribe on iOS
- Web Lifecycle messages
- Pull-To-Refresh and Infinite Scroll
- Custom alerts and Toasts
- LocalStorage
- OpenExternalUrl
- PlatformInfos
- Ajax
- Removing the top bar
- Adding Cobalt to an existing project
- Customizing your hybrid views
- Handle multiple Cobalt webviews on the same screen (TODO)