PDA

View Full Version : Ext.tux.InstallPanel - Automatically ask to add the application to the Home Screen



AndreaCammarata
16 Apr 2011, 3:59 AM
Hi guys,
after some weeks away from the forum cuz of too much to work, I wanna share with the community a simple but, for me, very useful Ext.Application plugin witch will allow you to display application informations like Name and Icon, and explain to the users how to "install" the application on iOS devices.
I Hope someone find this plugin useful Like I do.

You can download it from github at:
https://github.com/AndreaCammarata/Ext.tux.InstallPanel

Here a screenshot of the plugin in action.

25671

At the moment Ext.Applications, doesn't support plugins, so I had to override it to makes this possibile.

You can find a live demo at:
http://mobile.andreacammarata.com

If you have still not added the application to the Home Screen, the plugin will do his job and ask you to do it (only on iOS devices).
As always, feedbacks, questions and suggest are always accepted.

Hope this helps.
Cheers guys

mrsunshine
16 Apr 2011, 5:02 AM
cool Plugin!

Thanks for sharing

AndreaCammarata
16 Apr 2011, 5:52 AM
Thank you for your feedback Nils.

mitchellsimoens
16 Apr 2011, 8:22 AM
At first I was skeptical when I first read the title but I do think this is a great idea! Great job!

mitchellsimoens
16 Apr 2011, 8:23 AM
Looking at the code, it may be nice to take the tpl and put it as a config option so it's easily customizable.

Also, just a quick note, in your tpl you have commas and plus signs to join your strings. Can you only use commas?

AndreaCammarata
16 Apr 2011, 8:39 AM
At first I was skeptical when I first read the title but I do think this is a great idea! Great job!

Thank you mitchell!



Looking at the code, it may be nice to take the tpl and put it as a config option so it's easily customizable.

Also, just a quick note, in your tpl you have commas and plus signs to join your strings. Can you only use commas?


Yeah it could be a good idea to let the user customize the tpl. I will edit the plugin in this way.
About the commas: You are right, I forgot to do it.

Thanks for you suggests mitchell.

mitchellsimoens
16 Apr 2011, 8:43 AM
Of course... seems you come up with good ideas and your execution is great! Just a dev to a dev comment :D

AndreaCammarata
16 Apr 2011, 8:50 AM
Thank you mitchell, you are helping the community a lot too and your extensions are not less then mine ;). Your works are great! Just a dev to dev comment :D

AndreaCammarata
17 Apr 2011, 3:11 PM
Released a new version of the plugin with some improvements:

- Added the panel anchor to the iPhone / iPod and iPad button, that allows to add the application to the Home Screen.
- Created a great custom bounce animation that is used to show the panel at application start up.

I think you will really like this changes.
Live demo at

http://mobile.andreacammarata.com

Let me know what you think about it.

gkatz
18 Apr 2011, 1:08 PM
super handy - I'm sure this will be widely used...
thanks

AndreaCammarata
18 Apr 2011, 1:10 PM
Thank you for your feedback gkatz.
I have a lot of new features in my mind, but if you have some suggests I will be glad to hear them to help community members.

mitchellsimoens
18 Apr 2011, 1:16 PM
Thank you for your feedback gkatz.
I have a lot of new features in my mind, but if you have some suggests I will be glad to hear them to help community members.

Don't be a teaser :D Give up the goods!

AndreaCammarata
18 Apr 2011, 1:21 PM
Don't be a teaser :D Give up the goods!

Eheheheh mitchell :D.
I hope to release new features in a couple of days ;)

steve1964
22 Apr 2011, 2:26 PM
Hi Andrea, good idea and nice implementation...
Ciao, Stefano

AndreaCammarata
22 Apr 2011, 11:11 PM
Hi Andrea, good idea and nice implementation...
Ciao, Stefano

Ciao Stefano!
Thank you for your good feedback :)

DanCarter
26 Apr 2011, 7:43 AM
It would be great to have a close button that can be turned on or off through a config. That way if someone doesn't want to instal the app to their home screen they can close the pop-up and just use the app in the main browser.

This is a great plugin, btw.

AndreaCammarata
26 Apr 2011, 11:23 PM
It would be great to have a close button that can be turned on or off through a config. That way if someone doesn't want to instal the app to their home screen they can close the pop-up and just use the app in the main browser.

This is a great plugin, btw.

Hi Dan,
Thank you for your feedback and suggest.
I will edit the plugin as soon as possible with your request :)

Cheers.

jnw
30 May 2011, 10:46 AM
Thanks for this very cool plugin Andrea! One quick question though. Just to confirm..Should icon.png be 72px by 72px? I have the panel popping up but the text is pushed off the screen and I can't see the "Add to homescreen" button. Just wanted to make sure I have the icon size right since that might explain why things aren't fitting properly.

Thanks again!

Cheers!

AndreaCammarata
31 May 2011, 12:10 AM
Hi jnw and thank you for your feedback.
Yes, icon has to be 72x72 but it seems you miss to include the Ext.tux.InstallPanel.css in your application.
Did you?

Hope this helps.

jnw
31 May 2011, 6:37 AM
Thanks for the reply Andrea. I do have the css included. I also tried rearranging the order the css was included in the index file. I'll keep working on it.

AndreaCammarata
31 May 2011, 6:41 AM
Uhmm...could you try to post me the code you are using or just a screenshot?
And, are you on iPhone or iPad?

jnw
31 May 2011, 7:02 AM
Sure. Here is a screen capture. I'm using iPhone 3GS. I can also try it on iPad but I don't have it with me at the moment. I can e-mail you a link if you would like to see the code.

26360

jujuo
23 Jun 2011, 4:14 PM
So thats a really nice plugin, but just to say, i've just tried your website demo and you force people to add it to the homescreen right ? Because I tried to remove that windows popup, or to cancel it but no way, I had to add it the homescreen to visit your website.
I really wanted to visit your website so I did but for a random website, if i cant cancel that kind of thing i just go somewhere else.

AndreaCammarata
23 Jun 2011, 11:19 PM
So thats a really nice plugin, but just to say, i've just tried your website demo and you force people to add it to the homescreen right ? Because I tried to remove that windows popup, or to cancel it but no way, I had to add it the homescreen to visit your website.
I really wanted to visit your website so I did but for a random website, if i cant cancel that kind of thing i just go somewhere else.

Hi jujuo.
Well, that's was my intentional purpose to force the user to add the application to Home Screen, however, I can understand your needs, do I think I will a new config param named something like "closable" and if set to true, the panel display a closable button on the top right corner. This should solve you request.

Hope this helps.

jujuo
25 Jun 2011, 6:34 PM
Sorry for the late reply, but yeah that would be great ;D
Grazie Mille !

barcoder
26 Jun 2011, 1:53 AM
Very nice job, thanks!

Do you happen to know if there´s a way to bypass restriction that prevents web-app installations to homescreen after you have installed all 9 homescreens full....?

applauz
12 Jul 2011, 6:46 AM
Forgive my ignorance .. how do I install this in my app ?

Cheers!

AndreaCammarata
12 Jul 2011, 7:00 AM
Forgive my ignorance .. how do I install this in my app ?

Cheers!

Hi applauz.
To use this tux inside you application follow these steps:

- Download the plugin from github.
- Add the Ext.tux.InstallPanel-minified.js to you index page from the "js" folder.
- Add the Ext.tux.InstallPanel.css to you index page from the "resources/css" folder.
- Add the plugin to your application creation as showed in the readme file, so something like this:



Ext.regApplication('MyApp', {

//Set the application name
name: 'MyApp',

//Set the application Icon
icon: 'icon.png',

//Definition of Ext.tux.InstallPanel Plugin
plugins: [new Ext.tux.InstallPanel()],

//Definizione del punto di ingresso dell'applicazione
launch: function() {

//Create here your Application Viewport

}

});
Hope this helps.

mitchellsimoens
12 Jul 2011, 7:01 AM
Simplicity! =D>

mitchellsimoens
12 Jul 2011, 7:02 AM
Very nice job, thanks!

Do you happen to know if there´s a way to bypass restriction that prevents web-app installations to homescreen after you have installed all 9 homescreens full....?

There is no way to get around it... best way is to have some error catch (if there is an error) and tell the user that his homescreens are full and tell them about folders on the homescreen.

applauz
12 Jul 2011, 7:40 AM
Thanks for the quick reply.

This is how my application is set up.


ToolbarDemo = new Ext.Application({
name: "CW",




launch: function() {
this.views.viewport = new this.views.Viewport();
this.views.homecard = this.views.viewport.getComponent('home');

}
});




Having some trouble implementing this plugin :(

AndreaCammarata
12 Jul 2011, 7:43 AM
Thanks for the quick reply.

This is how my application is set up.


ToolbarDemo = new Ext.Application({
name: "CW",




launch: function() {
this.views.viewport = new this.views.Viewport();
this.views.homecard = this.views.viewport.getComponent('home');

}
});




Having some trouble implementing this plugin :(

applauz, from the code you post you are not using the plugin..
I think you having troubles trying to setup a Sencha Touch application.

applauz
12 Jul 2011, 7:54 AM
I haven't implemented it in the example I showed you.

This is what my code looks like prior to setting up the plugin. My app looks different than the set up instructions in your code.

I'm new to Sencha ... so when I try to re-work my file to implement the plugin I get errors.

Was showing you my code so you can see it and offer advice how to set up the plugin with my existing file.

Cheers!

AndreaCammarata
12 Jul 2011, 8:08 AM
I haven't implemented it in the example I showed you.

This is what my code looks like prior to setting up the plugin. My app looks different than the set up instructions in your code.

I'm new to Sencha ... so when I try to re-work my file to implement the plugin I get errors.

Was showing you my code so you can see it and offer advice how to set up the plugin with my existing file.

Cheers!

Ok so form what I understand your application works before to add the plugin and if you add the plugin it doesn't work anymore.
I think that the mani problem is that you ar including the plugin javascript after the application script you post.
Try to add the javascript before what usually is the "app.js" script (where you register your application) and see if this works.

applauz
12 Jul 2011, 8:11 AM
ToolbarDemo = new Ext.Application({
name: "CW",

launch: function() {
this.views.viewport = new this.views.Viewport();
this.views.homecard = this.views.viewport.getComponent('home');

}
});



This is my app.js file

applauz
12 Jul 2011, 8:19 AM
This is the first card that loads when my app opens


ToolbarDemo.views.Homecard = Ext.extend(Ext.TabPanel, {
title: "Agenda",
iconCls: "user",
id:"homecardtest",

initComponent: function() {
Ext.apply(this, {
defaults: {
styleHtmlContent: true
},
items: [{
title: 'Day 1',
scroll: 'vertical',
html: ''
},{
title: 'Day 2',
scroll: 'vertical',
html: ''


},{
title: 'Day 3',
scroll: 'vertical',


html: ''




}]
});
ToolbarDemo.views.Homecard.superclass.initComponent.apply(this, arguments);
}
});

Ext.reg('homecard', ToolbarDemo.views.Homecard);


I've stripped out the HTML to make it easier to read. Should I put the plugin on this page instead ? if so .. how to implement ?

applauz
12 Jul 2011, 9:11 AM
This is the set up I am trying to implement it to.

https://github.com/nelstrom/Sencha-Touch-tabs-and-toolbars-demo

AndreaCammarata
13 Jul 2011, 6:55 AM
This is the set up I am trying to implement it to.

https://github.com/nelstrom/Sencha-Touch-tabs-and-toolbars-demo

Hey applauz.
Looking at your github repo, you have not download the plugin.
In order to use the "Ext.tux.InstallPanel" you have do download it from it's github repo.

https://github.com/AndreaCammarata/Ext.tux.InstallPanel

Then you have to add the plugin files to your "index.html" page and edit your app.js script like I already wrote you some post ago.
Just be sure to include the "Ext.tux.InstallPanel-minified.js" before your "app.js".

Hope this helps

applauz
13 Jul 2011, 6:59 AM
This isnt my github repo .. this is the link to the template I am using as a foundation.

I sent this so you could see what I am trying to install it to.

For my version I have installed the plugin correctly... but its not working.


Can you download this repo and show me how to implement the plugin to it ?

hotdp
25 Jul 2011, 3:03 AM
Great job!
Is it possible to start it with a delay? So its not there from the start? But maybe visible after some seconds.

AndreaCammarata
26 Jul 2011, 2:53 AM
Hi hotdp.
Thank you for your feedback.
Yes I think I can add a config param named "delay" that allow you to do that.

hotdp
26 Jul 2011, 3:03 AM
Awesome!

Can you say when you will have time to add it?

AndreaCammarata
27 Jul 2011, 7:04 AM
I really hope to have some free time really soon to add some requested features to this ux and release some new components I'm working on :)

tinshun
29 Jul 2011, 1:32 AM
very useful!!!!thanks for shareing

I have some question... what is the location of the image(Add to Home Screen)? I want to change the language ....
thank you very much!!!!!

AndreaCammarata
29 Jul 2011, 4:50 AM
Hi tinshun.
The picture you are looking for is base64 encoded inside the component CSS.

Hope this helps.

hotdp
29 Jul 2011, 11:46 PM
Hi,
Can you say anything about the other plugins you are working on?

myput
12 Oct 2011, 7:52 AM
Thank you for this amazing plugin!!, it's very nice to use it.
Thank a lot and good work.

AndreaCammarata
12 Oct 2011, 8:00 AM
Thank you for this amazing plugin!!, it's very nice to use it.
Thank a lot and good work.

Thank you for your feedback myput ;)

coffeemonster
26 Oct 2011, 12:25 AM
This is a very handy plugin! :)

However I think the user should be able to dismiss the pop-up without having to add the page to home screen (eg. by clicking outside the box) just a thought.

AndreaCammarata
31 Oct 2011, 1:55 AM
However I think the user should be able to dismiss the pop-up without having to add the page to home screen (eg. by clicking outside the box) just a thought.

I'm going to add new features really soon ;)

Chgog
19 Dec 2011, 2:07 AM
Hi,

Thx for this plugin.
I use it with sencha 1.1 and but I would like to migrate my application to sencha 2.0.

Does Ext.tux.InstallPanel support ST2 (PR3)?

Fabien Goguillon

AndreaCammarata
19 Dec 2011, 2:13 AM
Hi Chgog.
At the moment it does not support ST2 but I'm going to migrate is as soon as the new version of the framework will be official and not a PR.

Chgog
19 Dec 2011, 2:40 AM
OK Thx

hotdp
27 Feb 2012, 3:55 AM
Hi,
Have used your awesome InstallPanel in ST1.
Now that ST2 is RC are you willing to upgrade it for ST2? It should be locked now..

new boy
4 May 2012, 5:12 AM
I'm sure this is excellent.

I see nothing when I go to http://mobile.andreacammarata.com (http://mobile.andreacammarata.com/).

Would you be able to give an idea of how to add this to an 'off the shelf' ST2 app?

hotdp
4 May 2012, 6:25 AM
I'm sure this is excellent.

I see nothing when I go to http://mobile.andreacammarata.com (http://mobile.andreacammarata.com/).

Would you be able to give an idea of how to add this to an 'off the shelf' ST2 app?

I don't think it is avalible for ST2 yet, so it wont work "out-of-the-box".