Integrate RhoMobile with LungoJS Framwork

Last week, I had the chance to learn about LungoJS. Basically, I am a Rhomobile Developer. So I tried to implement Rhomobile app with LungoJS framwork. I would like to share my experiences with you.

What is LungoJS?

LungoJS is a framework based on HTML 5, CSS3 and JavaScript. It supports iOS, Android, Blackberry and Firefox OS environments. LungoJS also provides cross-device support as well, and hence works on mobile smartphones, tablets, desktop PCs and even smart TVs. It is a open source project which is available at github. It offers you a robust API so that you can have complete control of everything that happens in your App. Documentation is also available at LungoJS docs. It will help you a lot. Next, we see how to incorporate LungoJS with Rhomobile.
Rhomobile + LungoJS:
I used lastest Rhomobile 4.0. Rhomobile 4.0 has a lot of features and APIs. I created simple rhodes app and replaced with LungoJS dependencies instead of JQM related file on layout.erb as shown below,
[source language=”html”]


[/source]
You can get LungoJS dependencies files from https://github.com/tapquo/Lungo.js/tree/master/package
Before you start to implement the application, you need to know the prototype of LungoJS which helps to implement LungoJS framwork.
They are,

• Structure
• Basic Elements
• Navigation
• Bindings
• Forms
• Lists

LungoJS supports two ways of loading resources file:

• Load Sync resources on init
• Load async resources by link

In layout.erb, I loaded two resources using Lungo’s init method as shown below
[source language=”javascript”]
Lungo.init({
name: ‘Rhomobile – AT’,
version: ‘1.0’,
resources: [‘/public/app/sections/index.html’,’/public/app/asides/menu.html’,
],
history: false
});
[/source]
When runing the application, it’s navigate to “/public/app/sections/index.html page” first, The structure of index.html as shown below,
[source language=”html”]

[/source]
Here I used some basic elements that is section, header, article, aside and footer. Section is a view of our application which contains header, article and footer.
I described the menu icon using nav tag which is used to create simple button view within footer or header and the position will depend on the class applied to it. In header,
[source language=”html”]

[/source]
I used aside elements to view the menu list page. Aside gives us a lateral area which will appear depending on the device (tablet) or hidden (mobile). I created the aside reference link using “data-view-aside=”menu” attribute. I already loaded menu page using “load Sync resources on init” in the layout.erb. So I have just given the reference of aside id. When clicking then menu icon, it will go to the menu.html page.
In menu.html page, See how to describe the aside elements,
[source language=”html”]

[/source]
Here, I listed the menu-titles inside the article elements. if you wish to scroll the page, add scroll class on article element. I loaded the list of menu-title resources asynchronously. I set resources using “data-async” attributes and described the type of element where we are going to navigate to (section, article or aside) using “data-view-*” attributes. Now when clicking “Scan Product” on the menu list, it will navigate to scan_product.html.
Now run it on Rhosimulator. Wow, It works. I clicked menu icon which is showing list of menu. I clicked “Location” on the menu-list. No response :-(. I checked in the console using Web Inspector showing error in the quo.js file as shown below,
[source language=”javascript”]
“TypeError: Result of expression ‘this[0]’ [undefined] is not an object”
[/source]
After that I pasted the dependencies js files inside the body tag in the layout.erb.
Then tried it again. It’s seem to work. 🙂
There are so many Data attributes, Elements, Icon and JavaScript API available. You can get better idea about LungoJS from http://lungo.tapquo.com/documentation/
See our preview on devices,




Hope, it will help to you. Any suggestions, Please welcome 🙂