mb.ile, a light weight framework for mobile App (alpha)
What is it?
mb.ile is a work in progress framework that provides simple solutions for any HTML mobile applications.
Several bigs like jQuery, Dojo, jQTouch, extJs, etc. are developing their own framework for mobile applications, and we tested some of them to realize the client for our latest Licorize app.
Actually we adopted the jQuery mobile framework to develop it, but what we find out is that both jQuery mobile and jQTouch (the two we considered) have a strict approach that constrain the developing solutions to their point of view.
Just to give an example, our application (Licorize) is based on a template system to show different kind of strips (if you want to know more about it just take a look at http://licorize.com) and most of the links are javascript calls that build on the fly the layout of the page getting content via an ajax call that returns a jsonp object. Well, jQuery mobile doesn’t allow this approach (all the link should point either to an element on the page or to an external file but can’t be a javascript method) and we had to hack with some workarounds to obtain what we needed. Another problem we met is related to the header and footer behavior; we needed fixed position to maintain them in place while scrolling the content, as most of mobile applications do. The only solution jQuery mobile offers is a buggy method to hide them once the body is scrolling and then show them again when the scroll ends… Even if it could be a solution, the problem is that most of the times header and footer are lost…
The question is “Can we adopt a framework and at the same time have freedom on developing applications as we want?“; the answer is “No“. Any time we decide to adopt a framework for developing our applications we must accept its rules; but at the same time, a framework should impose as few rules as it can to let developers invent their solutions.
The great UI of jQuery mobile made by the jQueryUI team has itself many limitations; for example if you want a combo in a FORM to behave in the native way you can’t because the framework manipulate all the elements to preserve the GUI and there’s no way to exclude elements from this manipulation.
We are talking about an alpha release of the jQuery mobile framework of course, and we expect great things from the jQuery team; but I really needed to try a different approach on that matter.
So I decided to develop something that could fit the needs of our own HTML mobile Application.
What are the features?
1. Simple structure of the page:
A mb.ile page has:
- A header
- A main area
- A footer
Differently from the other frameworks available, you can set header and/or footer as fixed position on top and bottom of the visible area even when the content is scrolled.
This feature is provided by the integration of the excellent plugin iScroll made by Matteo Spinelli (http://cubiq.org/).
Here is the main structure:
<div id="mbPage"> <div id="header"><h1>mb.ile</div> <div data-role="content">content goes here</div> <div data-role="footer" data-type="default" id="footer"> <div class="buttonBar column2"><span >button 1</span><span >button 2</span></div> </div> </div>
Pages can be in-line on the main page (index.html) or loaded via ajax as separate pages content.
2. intelligent transitions
As the other frameworks mb.ile let you choose transitions to move across pages and it automatically applies its reverse once the back button is pressed.
Actually you have this animations:
- slide-left
- slide-right
- slide-up
- slide-down
- fade
- pop
- flip-left
- flip-right
- swap-left
- swap-right
- cube-left
- cube-right
And the way to call them is really simple:
<a rel=”page” data-animation=”slideleft” href=”pages/animations.html”>animations</a>
3. GUI
The main scope of this framework is to let developers manage contents as they want; what I found really unconfortable with jquery mobile, for example, is the uncontrolled transformation of dom elements: when I need to insert a select and I would like to style it as I want, I found out that my select has become something else out of my control. The mb.ile framework provides a simple CSS file needed for the structure and a “theme” css for the demo application interface. no DOM manipulation for elements is applied.
4. Intelligent history
Every page loaded in the application is stored into an “history” array and takes care which transition has been used and what page it’s caming from. That way the back button knows exactly what to do and brings you back to the right page even with deep structures.
5. Extensions
The framework cames with some useful extensions like:
- Drag and drop feature
- Sortable feature
Both provided by the implementation of jQueryUI on touch devices of jason kuhn (http://jasonkuhn.net) - Sliding headers
- Panels
- Selectable list lines
- Buttons
- …
You can easily implement your own extension and initialize them in a really simple way when needed.
Take a look
Here is a short video of mb.ile in action:
[youtube=http://www.youtube.com/watch?v=Ui0XltjsJw4]
Here is a live demo: http://pupunzi.com/mb.ile
Actually tested on iPhone.
To have the best experience add the app to your iPhone home and start it as application.
Here is the gitHub repositiory: https://github.com/pupunzi/jquery.mb.ile
All feedbacks are wellcome!
Hi Jhon,
There are some problem with jquery 1.6; try it with v. 1.5; it should work.
I’m working to solve this bug with the latest jquery version.
Bye,
Matteo
Demo doesn’t seem to work: click on ‘go’, button changes to white but nothing happens…?
JD
This looks good in your video, but doesn’t work at all on a desktop browser for coding & testing. Also, any chance Android support will be added?
ah I see. Thanks for that. Will keep my eye out for an update to the mb.ile.js update as well.
One more thing I noticed that I was curious about. When using safari on iphone, the address bar usually scrolls past the top of the screen once the user scrolls past a certain point on the page, I noticed that mb.ile doesn’t work the same way. The address bar is alway present on the top of the page regardless of how long the page is. Is this something that I can get to work like it does with other sites?
Thanks again.
Hi,
That happens because jQuery has been updated to v. 1.5 and the ajax method has been changed so that it doesn’t work locally anymore. If you go o the index.html page yo can change the jQuery src path to restore the 1.4 version as follow:
instead of:
This should fix your problem.
Bye,
Matteo
I have been playing around with this and it is great! Thanks so much for making this available.
The strangest thing started happening this morning, it will not work locally of my computer anymore. I thought I had corrupted the file but the original download will not work either. Tested other computers as well. However, it still works locally running mamp and it will work off my server.
This is what happens:
Error on Ajax: jquery.mb.ile.js:829
It doesnt load past the error_page.html and it continues to load that page repeatedly. I know the functionality is still there as I can work off the server but this does make things more time consuming.
Any ideas on how I can get this to work locally again?
Thanks so much!
Hi Wave,
Actually fixed toolbars and transitions work fine only on iPhone (Chrome on Android doesn’t use graphic helpers like openGL on iOs so all transitions are quite slower than on iPhone); the framework theorically can work on Android devices using Chrome as it works on iPhone but I’ve to work on it more.
Bye,
Matteo
I tested with EVO 4G. It does not work at all. while jQueryMobile works perfectly with their sample. Looks like they target more devices than mb.ile.
What devices mb.ile support out of the box besides iPhone and iPad?
This is great – we needed someone to take control and produce *useable* functions. Cant wait for your beta…!
Gary