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?
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,
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.
- Basic Elements
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
name: ‘Rhomobile – AT’,
When runing the application, it’s navigate to “/public/app/sections/index.html page” first, The structure of index.html as shown below,
- Track your Assets
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,
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,
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,
“TypeError: Result of expression ‘this’ [undefined] is not an object”
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. 🙂
See our preview on devices,
Hope, it will help to you. Any suggestions, Please welcome 🙂