LungoJS

LungoJS
Developer(s) The LungoJS Team
Stable release
2.2.1 / January 25, 2013 (2013-01-25)
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.

Core Features

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">
                    '''@soyjavi'''
                    <small>Author of @Lungojs</small>
                </li>

                <li data-icon="user">
                    '''@pasku1'''
                    <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>

See also

This article is issued from Wikipedia - version of the 10/31/2016. The text is available under the Creative Commons Attribution/Share Alike but additional terms may apply for the media files.