1 / 56

EWD Web Applications

EWD Web Applications. Fragments and Actions 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.

mirit
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 Fragments and Actions 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. Set up your Environment Using Vim or Nano, open your file: ~/.bashrc Go to the end of the file and add the line: source /INF362-EWD/gtm/setup/add_to_bashrc.txt save the file, quit the text editor and from the command line do: source ~/.bashrc

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

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

  7. 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"

  8. 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

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

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

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

  12. Run your Own Server cd /INF362-EWD/nodejs/username Replace this with YOUR username

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

  14. Put here your Port Number 8100 + Computer Number

  15. Open Firefox Go to the URL 54.225.78.7:8080/ewd/ibanez/mobile01.ewd Put hereYOUR Username Put here Your Port Number 8100 + Computer Number

  16. 54.225.78.7 Put hereYOUR Port number Put hereYOUR Username

  17. View Page Source

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

  19. 54.225.78.7 This is how it looks in a Nexus 4

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

  21. <st2:container rootPath="/st-2"> <st2:panel fullscreen="true" addPage="fragment01"/> </st2:container> Divide and Conquer Modify the file: mobile01.ewd

  22. <st2:fragment> <st2:panel id="panel2" html="First Fragment"/> </st2:fragment> Divide and Conquer Write a new file: fragment01.ewd Then do: ../build.sh

  23. It looks like this in Android

  24. <st2:container rootPath="/st-2"> <st2:panel fullscreen="true"> <st2:toolbar docked="top" title="EWD Mobile" /> <st2:panel addPage="fragment01"/> <st2:toolbar docked="bottom" title="Easy" /> </st2:panel> </st2:container> Let's add Two Toolbars Modify the file : mobile01.ewd Then do: ../build.sh

  25. It looks like this in Android

  26. <st2:toolbar docked="top" title="EWD Mobile" /> <st2:panel addPage="fragment01"/> <st2:panel addPage="fragment02"/> <st2:toolbar docked="bottom" title="Easy" /> Let's have two Fragments Modify the file: mobile01.ewd Duplicate the line with Fragment: Then do: ../build.sh

  27. <st2:fragment> <st2:panel id="panel3" html="Second Fragment"/> </st2:fragment> Divide and Conquer Write a new file: fragment02.ewd Then do: ../build.sh

  28. It looks like this in Android

  29. <st2:fragment> <st2:panel id="panel2"> <st2:button text="Don't Panic!"/> <st2:button text="Panic!"/> </st2:panel> </st2:fragment> Fragments can be Cool too ! Modify the file: fragment01.ewd Then do: ../build.sh

  30. It looks like this in Android

  31. <st2:fragment> <st2:container id="container1"> <st2:button ui="decline" /> <st2:button ui="confirm"/> </st2:container> </st2:fragment> Button Properties Modify the file: fragment02.ewd Then do: ../build.sh

  32. It looks like this in Android

  33. <st2:fragment> <st2:container id="container1"> <st2:button ui="decline" text="Zoombie"/> <st2:button ui="confirm" text="Vampire"/> </st2:container> </st2:fragment> Button Properties Modify the file: fragment02.ewd Then do: ../build.sh

  34. It looks like this in Android

  35. <st2:container rootPath="/st-2"> <st2:panel fullscreen="true"> <st2:toolbar docked="top" title="EWD Mobile" /> <st2:container id="container1"> <st2:panel addPage="fragment01"/> </st2:container> <st2:container id="container2"> <st2:panel addPage="fragment02"/> </st2:container> <st2:toolbar docked="bottom" title="Easy" /> </st2:panel> </st2:container> Button: Do Something ! Modify the file: mobile01.ewd

  36. <st2:fragment> <st2:container> <st2:button ui="decline" text="Zoombie"/> <st2:button ui="confirm" text="Vampire" nextpage="fragment03" addTo="container2" replacePreviousPage="true"> </st2:container> </st2:fragment> Button: Do Something ! Modify the file: fragment02.ewd Then do: ../build.sh

  37. <st2:fragment> <st2:container> <st2:button ui="decline" text="Barewolf"/> <st2:button ui="confirm" text="Mummy" nextpage="fragment02" addTo="container2" replacePreviousPage="true"> </st2:container> </st2:fragment> Button: Do Something ! Create a file: fragment03.ewd Then do: ../build.sh

  38. It looks like this in Android Dare you to click here !

  39. Vampires are Evil ! Dare you to click here ! Dare you to click here !

  40. Mummies are Evil tool !

  41. <st2:container rootPath="/st-2" title="List1"> <st2:container fullscreen="true" layout="fit"> <st2:toolbar title="List Demo" /> <st2:list itemTpl="{title}"> <st2:data> <st2:item title="Item 1" /> <st2:item title="Item 2" /> <st2:item title="Item 3" /> <st2:item title="Item 4" /> </st2:data> </st2:list> </st2:container> </st2:container> How about a List ? Create the file: mobile02.ewd

  42. It look like this in Android Tap the Items, Don't be shy..

  43. <st2:container rootPath="/st-2" title="List2"> <st2:container fullscreen="true" layout="vbox" id="container"> <st2:toolbar title="List Demo" /> <st2:panel layout="fit" flex="2"> <st2:list itemTpl="{title}" nextpage="fragment04" addTo="lowerPanel" replacePreviousPage="false"> <st2:data> <st2:item title="Item 1" /> <st2:item title="Item 2" /> <st2:item title="Item 3" /> </st2:data> </st2:list> </st2:panel> <st2:panel id="lowerPanel" flex="1" scrollable="vertical" /> </st2:container> </st2:container> Let's add Actions Create the file: mobile03.ewd

  44. <st2:fragment onBeforeRender="getSelectedListItem^ST01XX"> <st2:panel id="panel<?= #ewd_sessionExpiry ?>" html="You selected <?= #recordNo ?>" /> </st2:fragment> Let's add Actions Create the file: fragment04.ewd Replace XX with your computer number Then do: ../build.sh

  45. getSelectedListItem(sessid) d copyRequestValueToSession^%zewdAPI("recordNo",sessid) QUIT "" ; Let's Add Controller Code Create the file: ST01.m Ever heard of the M Language ? http://opensource.com/health/12/2/join-m-revolution

  46. Let's Play Nice ! Copy the file: ST01.m To /INF362-EWD/gtm/r/ST01XX.m Replace XX with your Computer Number !

  47. Build some More cd /INF362-EWD/gtm/o then mumps ../r/ST01XX.m Replace XX with your Computer Number !

  48. It look like this in Android

More Related