Thursday 8 August 2013

Phonegap drag and drop image

I thought it was easy.
I thought if I copy and paste of HTML5 Drag and Drop source from
http://www.w3schools.com/html/html5_draganddrop.asp into the index.html, it would work.

I was wrong.

Touch phone doesn't recognize mouse event.

After all the search, I found a working example.
http://popdevelop.com/2010/08/touching-the-web/

If you check the URL http://sewa.se/drag/ in the Android emulater browser, it works!!
View source-> copy and paste into your index.html.

Or download the index.html below.
https://docs.google.com/file/d/0B_V2TTxMUlvVQVJNMlNORGl1WGs/edit?usp=sharing

Then I did little bit more to drag and drop image one another.


You can get the updated index.html below.
https://docs.google.com/file/d/0B_V2TTxMUlvVWmx5Smp2N21vZlE/edit?usp=sharing 



Phonegap install in Windows 64bit (for Android app)

I followed the installation process in Phonegap.

There were a few folders I used:
  • C:\AndroidSDK (x) - zip download
  • C:\Development - program files, phonegap source code
  • C:\Android (x) - android source code
  • C:\Node

1, 1.5. I had to reinstall Android adt (it contains android sdk + eclipse) in C:\Development



2. After installing Node.js, I tested and saved the source code in C:\Node

3, 3.1. I don't use C:\Android any more. It just contains the test code I did for Android study.



3.5 C:\AndroidSDK Download - I just saved zip file here. adt zip file seems to have date stamp everyday?!



4. I had to change Path variable many times after installing different softwares. (Path contains %JAVA_HOME%\bin;)

5. The current Path (system variable) looks like this.

5.5 Note that I added JAVA_HOME, ANT_HOME to system variable as well.
The details are at the end of this posting.


6. I failed in adding android platform. I found later this is because my ADT was not set up properly for 64 bit.

7, 7.5. Make sure when you type 'android' in dos command, you can see some android SDK manager starting.


7.6, 7.7. You have to select android version as well. I mainly installed Adnroid 4.2.2.


8. Make sure you are in the right directory when you check installed platform. Otherwise you cannot see anything. In this case, you should have done the 'cordova platform ls' command in C:\Node\hello.


9. I had also problem in installing javac.exe. When I run eclipse.exe I had error.

10.1, 10.2, 10.3 So I had to install java again, but not jre, the jdk.



11. If java is not installed properly, you cannot add android platform.

12. Every time, you change system variable or install java, you have to restart PC to reflect the new path. Log off is not enough.

14, 14.1 I also had to install ANT after installing java.


15, 15.1. After doing all this installation, i could add android platform.


16. You need to emulate in android

17. You can import sample code into sdk if you don't want to see the default html file.

18, 18.1. You need to assign target device to emulate. (or AVD, Android Virtual Device)


19. Finally you can see emulate screen. And wait a bit more, you will see the index.html.

20. FYI, cordova 3.0 doesn't work 'create' function. You have to use 'emulate'.

21. Change index.html whatever you want.

22. You can see it in emulator.

How to deploy into your phone? That's our next task.

-------------

Path (system variable)
C:\Program Files\Common Files\Microsoft Shared\Windows Live;C:\Program Files (x86)\Common Files\Microsoft Shared\Windows Live;C:\Program Files (x86)\AMD APP\bin\x86_64;C:\Program Files (x86)\AMD APP\bin\x86;%SystemRoot%\system32;%SystemRoot%;%SystemRoot%\System32\Wbem;%SYSTEMROOT%\System32\WindowsPowerShell\v1.0\;c:\Program Files\Intel\DMIX;C:\Program Files (x86)\Windows Live\Shared;c:\Program Files (x86)\Microsoft SQL Server\100\Tools\Binn\;c:\Program Files\Microsoft SQL Server\100\Tools\Binn\;c:\Program Files\Microsoft SQL Server\100\DTS\Binn\;c:\Program Files (x86)\Microsoft ASP.NET\ASP.NET Web Pages\v1.0\;c:\Program Files (x86)\Microsoft SQL Server\100\Tools\Binn\VSShell\Common7\IDE\;c:\Program Files (x86)\Microsoft SQL Server\100\DTS\Binn\;c:\Program Files (x86)\Microsoft SQL Server\90\Tools\binn\;C:\Program Files (x86)\Microsoft Visual Studio 9.0\Common7\IDE\PrivateAssemblies\;C:\Program Files (x86)\Microsoft SQL Server\110\Tools\Binn\ManagementStudio\;C:\Program Files (x86)\Microsoft SQL Server\110\Tools\Binn\;C:\Program Files\Microsoft SQL Server\110\Tools\Binn\;C:\Program Files (x86)\Microsoft Visual Studio 10.0\Common7\IDE\PrivateAssemblies\;C:\Program Files (x86)\Microsoft SQL Server\110\DTS\Binn\;C:\Program Files\Microsoft SQL Server\110\DTS\Binn\;C:\Program Files (x86)\QuickTime\QTSystem\;C:\Program Files\nodejs\;C:\Development\adt-bundle-windows-x86_64-20130729\sdk\platform-tools;C:\Development\adt-bundle-windows-x86_64-20130729\sdk\tools;%JAVA_HOME%\bin;%ANT_HOME%\bin;

Path (user variable)
C:\Users\Matthew.Oh\AppData\Roaming\npm;C:\Development\adt-bundle-windows-x86_64-20130729\sdk\tools

JAVA_HOME
C:\Program Files\Java\jdk1.7.0_25

ANT_HOME
C:\Development\apache-ant-1.9.2-bin\apache-ant-1.9.2