PDA

View Full Version : Linking different apps on iPad is starting new Safari window



sschwenk
2 Dec 2011, 1:25 AM
Hi,

I'm building an application which is based on a simple carousel. This app is running on an iPad. The user wants to use a bookmark on his home screen in order to start this app in a simple way and to get the feeling of a native iPad app. Thats the simple part of this issue.

The carousel itself is linking to other small apps which will be included as plugins. Each available plugin is represented within the carousel by an image. Each plugin should be able to run without using the carousel app. The easiest way for me was to create each plugin in a separate subdirectory. Now, I'm linking from the representing plugin image within the carousel by using a simple href.


My.views.Viewport = Ext.extend(Ext.Panel, { fullscreen: true,

initComponent: function() {
var carousel = new Ext.Carousel({
id: 'pluginCarousel',
items: [
{
html: '<div align="center"><a href="plugins/app1/index.php"><img src="plugins/app1/images/plugin.png"></a></div>'
},
{
html: '<div align="center"><a href="plugins/app2/index.php"><img src="plugins/app2/images/plugin.png"></a></div>'
},
{
html: '<div align="center"><a href="plugins/app3/index.php"><img src="plugins/app3/images/plugin.png"></a></div>'
}
]
});

Ext.apply(this, {
cls: 'cards',
layout: {
type : 'vbox',
align: 'stretch'
},
defaults: {
flex: 1
},
items: [carousel]
});
My.views.Viewport.superclass.initComponent.apply(this, arguments);
}
});

The problem is, when I'm tapping on the link, the iPad is launching the Safari browser showing the clicked plugin app. But the user should remain in full screen mode of the iPad.

Is there a way to avoid the extra launch of Safari without a complete rebuild of the whole app?

Thanks in advance.

Stephan

mitchellsimoens
2 Dec 2011, 11:11 AM
You need to stop the browser from evaluating the a link. After the Carousel has been rendered you can capture the tapping on the link:


carousel.mon(carousel.el, {
scope : carousel,
delegate : 'a', //this is a DOM selector to target this event with
tap : function(e, node) {
e.stopEvent();

//do something here with it like pop up a floating panel or something.
}
});