LungoJS
| Developer(s) | The LungoJS Team |
|---|---|
| Stable release | 2.2.1 [1] / January 25, 2013 |
| Development status | Active |
| Written in | JavaScript |
| Size | 37KB |
| Type | Mobile application framework |
| License | GPLv3 |
| Website | lungo.tapquo.com/ |
LungoJS is a framework powered by HTML5, CSS3 and JavaScript for creating mobile web apps.
The applications created with it work on all popular platforms (iOS, Android, BlackBerry and WebOS).
It has support for touch events like tap, double-tap or swipe and does not use images (including the icons), as everything is vectorized.
Contents
Core Features
- Design and make applications for iOS, Android, Blackberry and WebOs.
- Designed to take advantage of the features of current mobile devices.
- Capture events like Swipe, Tap, Double-Tap...
- Distribute your app in "Mobile Stores" or in websites.
- No need images, everything is vector.
- Implement HTML5 features like WebSQL, Geolocation, History, Device Orientation and more...
- No webserver required.
- Implement native looking with (on iPad & iPh−one).
- Fully customizable.
- You can use Lungo Sugars to sweeten your apps.
- Build apps, games, catalogues and everything else you can imagine.
Semantic is everything in Lungo.
The main premise in Lungo is to create a semantic structure in the whole project, starting from the markup language HTML, through a well-organized CSS and ending with the JavaScript API. Lungo offers a great facility when prototyping applications, and will not need to enter any lines of code (JavaScript) to visualize how it will behave our application. In this section we will learn which are LungoJS semantic elements as relate to each other and how you can create applications with HTML only.
Example usage
First, you have to do is create a LungoJS Application instance in the file /app/app.js
var App = (function(lng, undefined) {
//Define your LungoJS Application Instance
lng.App.init({
name: 'Wikipedia example',
version: '0.1'
});
})(LUNGO);
Then we can continue prototyping our application.
<!doctype html>
<html manifest="index.appcache">
<head>
<meta charset="utf-8">
<title>LungoJS</title>
<meta name="description" content="">
<meta name="author" content="Javier Jiménez Villar (@soyjavi)">
<!-- Mobile viewport optimization http://goo.gl/b9SaQ -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta http-equiv="cleartype" content="on">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- For iPhone 4 with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/images/icon@2x.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/images/icon-72.png">
<link rel="apple-touch-icon-precomposed" href="assets/images/icon.png">
<link rel="apple-touch-startup-image" href="assets/images/default.png">
<!-- Main Stylesheet -->
<link rel="stylesheet" href="./lungo.js/lungo-1.0.0.min.css">
<link rel="stylesheet" href="./lungo.js/lungo.theme.default.css">
</head>
<body class="app">1523123
<!--
First, you have to do is create a LungoJS Application instance in the file app.js.
...and use a Webkit browser as Chrome or Safari.
-->
<section id="main">
<header data-title="Title of section"></header>
<article id="first_article"></article>
<article id="second_article" class="list">
<scroll id="main_scroll">
<ul>
<li data-icon="user">
<strong>@soyjavi</strong>
<small>Author of @Lungojs</small>
</li>
<li data-icon="user">
<strong>@pasku1</strong>
<small>Contributor of @Lungojs</small>
</li>
...
</ul>
</scroll>
</article>
<footer class="toolbar">
<nav>
<a href="#first_article" class="article" data-icon="home"></a>
<a href="#second_article" class="article" data-icon="user"></a>
<!-- This link is to view a different section -->
<a href="#second" class="section" data-icon="right"></a>
</nav>
</footer>
</section>
<section id="second">
<header data-back="home blue"></header>
<!-- content -->
</section>
<!-- LungoJS (Production mode) -->
<script src="lungo.js/lungo-1.0.0.packed.js"></script>
<!-- LungoJS - Sandbox App -->
<script src="app/app.js"></script>
<script src="app/data.js"></script>
<script src="app/events.js"></script>
<script src="app/services.js"></script>
<script src="app/view.js"></script>
</body>
</html>
.svg){kind=logo}
