PDA

View Full Version : iPhoneDesktop Version 2



SimonFlack
23 Feb 2011, 10:36 AM
Hey Guys

I am working on iPhoneDesktop version 2

Edit: Working version info here (http://www.sencha.com/forum/showthread.php?124882-iPhoneDesktop-Version-2&p=574551&viewfull=1#post574551)


http://www.youtube.com/watch?v=Ed30Dv-rYxo

Live Demo:
http://www.whitefox.no/plugins/iphonedesktop/

New Stuff:

addButton() - Adds a button after control is loaded
addButtons() - Adds and array of buttons after control is loaded
removeButton() - Removes a button
Bottom Toolbar - Fixed bottom buttons on a glass plate
New Animations


NOTE:

taphold desktop to activate edit mode. doubletap to exit edit mode.
Its all in debug so it may take a while to load scripts and images etc.
Animation when buttons are deleted sometimes does not work... (Hopefully fixed soon)
Only first 3 buttons have event handlers.


I need to do a fair bit of optimization before this is ready for use.

Hope you like it :-)

tomalex0
24 Feb 2011, 12:19 AM
Hi Simon

Thats cool,very nice.

Just a doubt, can't we keep the Edit Mode Animation even after we close a button . For now the animation stops after button is closed and rearranged .

Also how you think about reordering buttons in desktop :D.

SimonFlack
24 Feb 2011, 12:30 AM
I am looking into keeping the desktop in edit mode. I just have to get everything working together. Running multiple animations (shaking while translating) runs to slowly and cripples Android phones.

I am also trying to implement drag/drop reordering and button text underneath each button.

I dont get very much time to play with this so I dont know when I will be done.

SimonFlack
24 Feb 2011, 3:38 AM
Added ButtonText support.

http://www.whitefox.no/plugins/iphonedesktop/demo.png

Demo: http://www.whitefox.no/plugins/iphonedesktop/

SimonFlack
24 Feb 2011, 4:24 AM
Just a doubt, can't we keep the Edit Mode Animation even after we close a button . For now the animation stops after button is closed and rearranged .

Fixed ;-)


Animation when buttons are deleted sometimes does not work... (Hopefully fixed soon)

Fixed ;-)


http://www.youtube.com/watch?v=njFlMaSF7Jk

SimonFlack
24 Feb 2011, 5:10 AM
Ok.. Should be ready to use now.

Files:

iPhoneDesktopButton.css (http://www.whitefox.no/plugins/iPhoneDesktop/css/iPhoneDesktopButton.css)

iPhoneDesktopButton.js (http://www.whitefox.no/plugins/iPhoneDesktop/iPhoneDesktopButton.js)

iPhoneDesktop.js (http://www.whitefox.no/plugins/iPhoneDesktop/iPhoneDesktop.js)

defaultbg.png (http://www.whitefox.no/plugins/iPhoneDesktop/defaultbg.png)

glass1.png (http://www.whitefox.no/plugins/iPhoneDesktop/glass1.png)

bg.png (http://www.whitefox.no/plugins/iPhoneDesktop/bg.png)

remove.png (http://www.whitefox.no/plugins/iPhoneDesktop/remove.png)

Usage: (xtype: 'carousel')

plugins: [new simfla.ux.plugins.iPhoneDesktop({buttons: demo.buttons, editable: true})]

buttons: An array of buttons using iPhoneDesktopButton plugin
editable: 'true' if you want to have edit mode

Buttons:


{ xtype: 'button',
text: 'My Button',
plugins: [new simfla.ux.plugins.iPhoneDesktopButton({image: 'facebook.png'})],
flex: 1,
handler: function(b) {
b.plugins[0].onTap(function(){alert('Pressed this button');});
}


image: The image to display on the button. (Rounded edges and shine are handled by plugin)
handler: send your handler function to the onTap() function. This uses a timeout to allow button animation to play.

Add a single button after the control is loaded:

Ext.getCmp('Desktop').plugins[0].addButton(demo.singleButton);

Add an array of buttons after the control is loaded:

Ext.getCmp('Desktop').plugins[0].addButtons(demo.lotsOfButtons);

Demo index.js:
http://www.whitefox.no/plugins/iPhoneDesktop/index.js

Licensing (MIT)

Copyright (C) 2011 by WhiteFox AS

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

Functioning Demo:
http://www.whitefox.no/plugins/iPhoneDesktop

aeiz
25 Feb 2011, 1:22 PM
Works well! Thanks again!

gkatz
1 Mar 2011, 5:32 AM
wow very nice.
any future features you plan for this plugin?

SimonFlack
1 Mar 2011, 5:45 AM
This started out as just a learning experiment based on a thread I read. I have only spent a few hours on both versions and I only get time to play with it every so often. I hope to get time to make it into a useful and reliable plugin over the next few months.

Future plans include:

1. Better stability
2. Faster more optimized code
3. Support for css image data
4. Drag and drop reordering
5. Tablet layout
6. Configurable columns, rows and button size (E.g 3x3)

Feel free to come with more suggestions.

tomalex0
2 Mar 2011, 2:14 AM
Hi how about moving the delete button to left top similar to that in iphone, so that we can display badgeText. Currently if i set badgeText it will overlap the delete button.

SimonFlack
2 Mar 2011, 2:18 AM
Sounds like a good idea.

dchall
9 Apr 2011, 10:27 AM
When I click on your files I get page can't be displayed.


Ok.. Should be ready to use now.

Files:

iPhoneDesktopButton.css (http://www.whitefox.no/plugins/iphonedesktop/css/iPhoneDesktopButton.css)

iPhoneDesktopButton.js (http://www.whitefox.no/plugins/iphonedesktop/iPhoneDesktopButton.js)

iPhoneDesktop.js (http://www.whitefox.no/plugins/iphonedesktop/iPhoneDesktop.js)

defaultbg.png (http://www.whitefox.no/plugins/iphonedesktop/defaultbg.png)

glass1.png (http://www.whitefox.no/plugins/iphonedesktop/glass1.png)

bg.png (http://www.whitefox.no/plugins/iphonedesktop/bg.png)

remove.png (http://www.whitefox.no/plugins/iphonedesktop/remove.png)

Usage: (xtype: 'carousel')


buttons: An array of buttons using iPhoneDesktopButton plugin
editable: 'true' if you want to have edit mode

Buttons:


image: The image to display on the button. (Rounded edges and shine are handled by plugin)
handler: send your handler function to the onTap() function. This uses a timeout to allow button animation to play.

Add a single button after the control is loaded:


Add an array of buttons after the control is loaded:


Demo index.js:
http://www.whitefox.no/plugins/iphonedesktop/index.js

Licensing (MIT)


Functioning Demo:
http://www.whitefox.no/plugins/iphonedesktop

SimonFlack
9 Apr 2011, 12:30 PM
Seems new server is case sensitive...


Files:

iPhoneDesktopButton.css (http://www.whitefox.no/plugins/iPhoneDesktop/css/iPhoneDesktopButton.css)

iPhoneDesktopButton.js (http://www.whitefox.no/plugins/iPhoneDesktop/iPhoneDesktopButton.js)

iPhoneDesktop.js (http://www.whitefox.no/plugins/iPhoneDesktop/iPhoneDesktop.js)

defaultbg.png (http://www.whitefox.no/plugins/iPhoneDesktop/defaultbg.png)

glass1.png (http://www.whitefox.no/plugins/iPhoneDesktop/glass1.png)

bg.png (http://www.whitefox.no/plugins/iPhoneDesktop/bg.png)

remove.png (http://www.whitefox.no/plugins/iPhoneDesktop/remove.png)


These should work now.

dchall
10 Apr 2011, 8:32 AM
Seems it is your whole site.

Oops! Google Chrome could not connect to www.whitefox.no

SimonFlack
10 Apr 2011, 8:52 AM
Thinks its time for a new hosting partner. Thats the second virtual server in the past 2 weeks that has kicked the bucket. :-(

asenec4
11 Apr 2011, 5:39 AM
Would it be possible to add these updates to the github you used for version 1?

SimonFlack
11 Apr 2011, 5:42 AM
I'll see if I get time to play with github again... I didnt like it very much. To used to svn I think.

Servers should be up soon