1 / 62

EWD Web Applications

EWD Web Applications. EWD and Sencha Touch Dima Kassab & Luis Ibanez. Distributed under the Creative Commons by Attribution 3.0 License. For Instructors. How to setup your Sever. https://github.com/SUNY-Albany-CCI/open-source-web-development-tutorial/tree/master/source/EWD/Install.

palila
Download Presentation

EWD Web Applications

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. EWD Web Applications EWD and Sencha Touch Dima Kassab & Luis Ibanez Distributed under the Creative Commons by Attribution 3.0 License

  2. For Instructors How to setup your Sever https://github.com/SUNY-Albany-CCI/open-source-web-development-tutorial/tree/master/source/EWD/Install See: installEWD.sh

  3. For Students Follow the Instructions and Enjoy the Ride !

  4. pppp Join the Party xxx.xxx.xxx.xxx Log in the Linux Class server at SSH to this Port Number

  5. Set up your Environment Using Vim or Nano, open your file: ~/.bashrc Go to the end of the file and add the line: source /data/gtm/setup/add_to_bashrc.txt save the file, quit the text editor and from the command line do: source ~/.bashrc

  6. Join the Party mkdir /INF362-EWD/Apps/username Put here YOUR Username Create your own directory

  7. Join the Party cd /INF362-EWD/Apps/username Put here YOUR Username Go to your new directory

  8. You need two Screens To open multiple screens in the server, use the command tmux then, to open a second screen, use the key combination CTRL+b followed by the key "c" Then you can move between the two screens with the key combination CTRL+b followed by the key "n"

  9. Start Simple <st2:container rootPath="/st-2"> <st2:panel fullscreen="true" html="Hello World" /> </st2:container> Top Level Container Where Sencha Touch is Installed Write this text in a file called mobile01.ewd

  10. Build the Application In the same directory type the command ../build.sh

  11. Run your Own Server Go to your other tmux screen CTRL+b and the key "n"

  12. Join the Party mkdir /INF362-EWD/nodejs/username Put here YOUR Username Create your own directory

  13. Run your Own Server cd /INF362-EWD/nodejs/username Replace this with Your username

  14. Run your Own Server ../runEWDwithNodeJS.sh 8100 Put here your Port Number 8100 + Computer Number

  15. Put here your Port Number 8100 + Computer Number

  16. Open Firefox Go to the URL 54.225.156.138:8080/ewd/ibanez/mobile01.ewd Put here Your Port Number 8100 + Computer Number Put hereYour Username

  17. 54.225.156.138 Put hereYour Port number Put hereYour Username

  18. View Page Source

  19. Open Mobile Browser Go to the URL 54.225.156.138:8080/ewd/ibanez/mobile01.ewd Put here Your Port Number 8100 + Computer Number Put hereYour Username

  20. 54.225.156.138 This is how it looks in a Nexus 4

  21. Back to the EWD code Go to your other tmux screen CTRL+b and the key "n"

  22. <st2:homeScreen> <st2:startupImage size="320x460" url="examples/kitchensink/resources/loading/Homescreen.jpg" /> <st2:startupImage size="320x480" url="examples/kitchensink/resources/loading/Default.jpg" /> <st2:startupImage size="768x1004" url="examples/kitchensink/resources/loading/Homescreen~ipad.jpg" /> <st2:icon size="57" url="examples/kitchensink/resources/icons/icon.png" /> <st2:icon size="72" url="examples/kitchensink/resources/icons/icon~ipad.png" /> <st2:icon size="114" url="examples/kitchensink/resources/icons/icon@2x.png" /> <st2:icon size="144" url="examples/kitchensink/resources/icons/icon~ipad@2x.png" /> </st2:homeScreen> Make it look like an App Insert this text in the same file: mobile01.ewd after the line <st2:container rootPath="/st-2"> and before the line <st2:panel fullscreen="true" .... > Then do: ../build.sh

  23. Make it look like an App In your Mobile Device Now use the Bookmark Icon in the Browser ... and select "Add to Home Screen"

  24. Add Icon to Home Screen

  25. Make it look like an App A new icon will appear in your device It will launch without the Web browser border

  26. Now it looks like a native App

  27. <st2:panel fullscreen="true" html="Hello World" /> <st2:panel fullscreen="true" html="Hello World" > <st2:toolbar docked="top" title="EWD Mobile" /> </st2:panel> Let's add a Toolbar Modify the line: to make the three lines: Then do: ../build.sh

  28. It looks like this in Android 54.225.156.138

  29. <st2:panel fullscreen="true" html="Hello World" > <st2:toolbar docked="top" title="EWD Mobile" /> </st2:panel> <st2:panel fullscreen="true" html="Hello World" > <st2:toolbar docked="bottom" title="EWD Mobile" /> </st2:panel> Let's move the Toolbar Replace : docked="top" With : docked="bottom"

  30. It looks like this in Android 54.225.156.138

  31. <st2:panel fullscreen="true" html="Hello World" > <st2:toolbar docked="top" title="EWD Mobile" /> <st2:toolbar docked="bottom" title="Easy" /> </st2:panel> Let's have two Toolbars Modify the file: mobile01.ewd One toolbar docked "top" and the other "bottom" Then do: ../build.sh

  32. It looks like this in Android 54.225.156.138

  33. Fragments inside Containers Container Fragment 1 Fragment 2

  34. Fragments are Dynamic Container Replace Fragment 3 Fragment 1 Fragment 2

  35. Fragments can be Nested Container A Fragment 1 Container B Fragment 2

  36. <st2:panel fullscreen="true" > <st2:toolbar docked="top" title="EWD Mobile" /> <st2:container id="cont01" addPage="fragment01" /> <st2:toolbar docked="bottom" title="Easy" /> </st2:panel> <st2:panel fullscreen="true" html="Hello World" > <st2:toolbar docked="top" title="EWD Mobile" /> <st2:toolbar docked="bottom" title="Easy" /> </st2:panel> Fragments are Cool ! In mobile01.ewd Modify the lines: to become the lines:

  37. <st2:fragment> <st2:panel id="panel3" html="New Fragment!"> </st2:panel> </st2:fragment> Let's create the Fragment Write a new file: fragment01.ewd With the content: Then do: ../build.sh

  38. It looks like this in Android

  39. Stop and Reflect ! This is Powerful Stuff !

  40. Stop and Reflect ! It meansthat you can write complex Apps...

  41. Stop and Reflect ! by dividing them into Small Fragments !

  42. Let's keep going How about replacing a fragment ?

  43. <st2:panel id="panel3" html="New Fragment!"> <st2:button text="Click" nextPage="fragment02" addTo="cont01"/> Everybody Love Buttons In the file fragment01.ewd after the line: Insert the line:

  44. <st2:fragment> <st2:panel id="panel3" html="New Fragment!"> <st2:button text="Click" nextPage="fragment02" addTo="cont01"/> </st2:panel> </st2:fragment> Sanity Check The file: fragment01.ewd Now should look like: Then do: ../build.sh

  45. <st2:fragment> <st2:panel id="panel4" html="This is Fragment 02!"> <st2:button text="Back" nextPage="fragment01" addTo="cont01"/> </st2:panel> </st2:fragment> Create another Fragment Write a new file: fragment02.ewd With the content: Then do: ../build.sh

  46. It looks like this in Android

  47. It looks like this in Android Go ahead,Click here !

  48. It looks like this in Android

More Related