Using mobile framework

Using mobile framework

Anybody suggestions how to incorporate the following mobile framework into OutSystems

Hi Joop,

Well, do correct me if I'm wrong, but from what I saw of Sencha at the time, it seems to be a framework where most of the application logic is JavaScript based.

As such, it seems to be hard to encapsulate it in the behaviour our own HTML widgets have by default.

Doing those applications would probably be the same as doing them by hand... Unless somebody has a better option.

One alternative you could consider would be to adapt our iPhone Directory stylesheet, if you're considering porting one of your applications to mobile.

Also, do consider jQuery mobile, if you're looking into such frameworks!

Anyone else has other recommendations?


Paulo Tavares

EDIT: Here's the demo page for jQuery. Do check out their "form elements" section, it's kinda neat, especially if you browse it in Chrome.

You're right. It is merely done with javascript... I definitely take a look at the jQuery Mobile framework
How do we incorporate that framework ??

In the meantime I also found (and replied) this forum post
Yes, I just saw it.

Honestly, if it's all javascript, I'm not sure of how you would benefit from the Agile Platform's faster development capabilities. You'll probably have to code it all by hand.

As I see it, from a distant perspective, the right way to do it would be:

- Change the StyleGuide's (or another eSpace's) CSS styles to match the ones from the framework, so that when you drag the widgets, they'll maintain the look;
- All JavaScript handles that need to be created/associated to widgets and the like, encapsulate them in web blocks - or something like it - and have them attach to the widgets in runtime during the page load. This has to be tested in mobile browsers, however, since they may not behave well with these DOM changes in runtime...
- All extra Javascript that needs to be there, probably would have to be added as well to the Footer/Header, as an inescaped expression, or as a web block's JavaScript.

...I'm pretty sure that:

1 - There are probably better ways to do it than the ones I describe here;
2 - It's much more easier said than done :)

What are your thoughts on this?


Paulo Tavares

This is a very interesting blog
It's about the different mobile frameworks JQTouch, iWebKit and IUI (i believe is used in the iDirectory)

And here a small presentation about the different frameworks

I'm now working out JQTouch. Has less javascript control then Sencha.
Still have to discover a lot :-)

Thanks for sharing the presentation. That's a lot of slides, though.

From the description, however, JQTouch is the one where all HTML is generated through javascript, right?

Wouldn't you be better off using another one, or even - if it isn't as limited as it looks by their example there?

Good luck with it, and let us know how it goes :)


Paulo Tavares

Hi Joop,

Great presentation, thanks for sharing it!

Tiago Simões
JQTouch uses some javascript but far less then Sencha
Up till now I'm having fun :-)
I'm eager to see what comes out of it :)

If you manage to create a component or a guide out of it, do share! After all, mobile apps are the next big thing :)


Paulo Tavares
My suggestion would be to use jQuery Mobile.

The reasons supporting this would be:
  • jQuery Mobile requires very little changes to the page's markup so it should be easy to adapt and use on pages created with the OutSystems Platform
  • jQuery Mobile pages work with progressive enhancement on mind: even if you're not using a webkit-based browser or a mobile browser with full capabilities, the pages should just work (this is not true with other frameworks, for instance sencha)
  • jQuery is by far the most popular JavaScript framework, meaning that although jQuery Mobile is still in alpha stage, it's backed up by the most powerful and widely used JavaScript framework and by the excellent team behind it
Best regards,

Have been testing with Slablet (Nice layout) but not possible to have pages loaded with transitions in one go. Added some functionality from jQueryMobile but not a neat working solution.

Stepped over (again :-) ) to (JQM) in combination with jQuery SplitView to get the iPad look with navigationMenu.

However to get pages to appear using transitions, you need to call the pages using AJAX loading.
This can be done by default with JQM, setting the ajaxFormEnabled and ajaxEnabled.

What happens is that the submit is not working anymore :-( due to the fact the pages are loaded via AJAX.
Anybody who can share their thoughts with me ...

Here is a link to a post on JQM forum explaining my problem 

Or ... should I wait for v6.0 of OutSystems, grin.....

Managed to get the darn thing working.

I created a link with rel=external to load the page seperately. Then al the controls are loaded in the normal way.
Then the submit is working as well.
Hi Joop!

Glad you made it work!

The reason behind the incompatibility between jQuery Mobile and web applications created with the Agile Platform is the same that makes it incompatible with most other web development frameworks that make use of viewstate data on pages. The only way to work around this is to either disable the AJAX transitions (which is what setting rel="external" effectively does) or to tweak around with jQueryMobile code to make it store and correctly manipulate both the viewstate and the form's action target. Since this pattern is present in many web frameworks, especially those suited for the development of enterprise-grade web applications, I think we might see support for it very soon.

However, in the meanwhile, changing jQueryMobile source code seems to be the only way to provide a workaround that doesn't disable the AJAX transitions. I'm attaching a patch file of a proof-of-concept code we did internaly against jquerymobile 1.0a1.4 that seems to fix the issues regarding form submissions and viewstate handling.

Please note that this code is not supported and it is just meant to provide a workaround for issues concerning a non-stable (alpha) version of the library.


I've tried to incorporate the changes, the edit form is loaded, but after submit I get a blank page ...
As was before the suggested changes.

Since I'm not able to send private message, send me you email and I'll send my OML

Yesterday we've seen a sneak preview of Version 6.0 ... I better wait :-)
Nice job guys !!
Have you seen this :

Interactive Browsing of Your Website

MITE will reduce your time to market and manual testing costs while helping you deliver a better end-user experience. With a customizable library of over 1,800 devices and 11,000 device profiles, MITE gives you unequalled access to screen compatibility and application support information.

Keynote MITE lives on your desktop giving you instantaneous feedback. Navigate a site and validate that content appears as you’ve intended while checking that links are functioning properly. MITE also provides a download summary, a performance summary, re-directs, headers, cookies and detailed waterfall graph for further investigation.

Automate Your Testing

The MITE script recorder lets you capture each step while you navigate mobile Web content and re-run the steps on different device profiles. MITE also lets you start recording anytime during session by clicking on the record icon on the ribbon. Add validation checks for every step by simply right-click on the script and select the validation check.

Not only does automated testing save time, but it also guarantees a consistent test methodology. After you record a testing script MITE makes it easy to upload it into your own MyKeynote portal and a new perspective on the availability of your mobile site.

Have a look at :

Great heads-up, Joop.

This looks like what would happen if Selenium and Firebug had a son - on steroids. Have you used it?


Paulo Tavares
Not myself, a colleguae of mine did and was very enthousiastic !
So just download and give it a go.