Presentation is loading. Please wait.

Presentation is loading. Please wait.

EWD Web Applications Fragments and Actions Dima Kassab & Luis Ibanez Distributed under the Creative Commons by Attribution 3.0 LicenseCreative Commons.

Similar presentations


Presentation on theme: "EWD Web Applications Fragments and Actions Dima Kassab & Luis Ibanez Distributed under the Creative Commons by Attribution 3.0 LicenseCreative Commons."— Presentation transcript:

1 EWD Web Applications Fragments and Actions Dima Kassab & Luis Ibanez Distributed under the Creative Commons by Attribution 3.0 LicenseCreative 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.shinstallEWD.sh See: installEWD.shinstallEWD.sh

3 For Students Follow the Instructions and Enjoy the Ride ! 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 Go to your new directory Put here YOUR Username

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 Top Level ContainerWhere Sencha Touch is Installed Write this text in a file called mobile01.ewd

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

10

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 Computer Number

15 Put here your Port Number Computer Number

16

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

18 Put hereYOUR Port number Put hereYOUR Username

19 View Page Source

20 Open Mobile Browser Go to the URL :8080/ewd/ibanez/mobile01.ewd Put here Your Port Number Computer Number Put here Your Username

21 This is how it looks in a Nexus

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

23 Divide and Conquer Modify the file: mobile01.ewd

24 Divide and Conquer Write a new file: fragment01.ewd Then do:../build.sh

25 It looks like this in Android

26 Let's add Two Toolbars Modify the file : mobile01.ewd Then do:../build.sh

27 It looks like this in Android

28 Let's have two Fragments Duplicate the line with Fragment: Then do:../build.sh Modify the file: mobile01.ewd

29 Divide and Conquer Write a new file: fragment02.ewd Then do:../build.sh

30 It looks like this in Android

31 Fragments can be Cool too ! Modify the file: fragment01.ewd Then do:../build.sh

32 It looks like this in Android

33 Button Properties Modify the file: fragment02.ewd Then do:../build.sh

34 It looks like this in Android

35 Button Properties Modify the file: fragment02.ewd Then do:../build.sh

36 It looks like this in Android

37 Button: Do Something ! Modify the file: mobile01.ewd

38 Button: Do Something ! Modify the file: fragment02.ewd Then do:../build.sh

39 Button: Do Something ! Create a file: fragment03.ewd Then do:../build.sh

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

41 Vampires are Evil ! Dare you to click here !

42 Mummies are Evil tool !

43 How about a List ? Create the file: mobile02.ewd

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

45 Let's add Actions Create the file: mobile03.ewd

46 Let's add Actions " html="You selected " /> Create the file: fragment04.ewd Then do:../build.sh Replace XX with your computer number

47 Let's Add Controller Code getSelectedListItem(sessid) d copyRequestValueToSession^%zewdAPI("recordNo",sessid) QUIT "" ; Create the file: ST01.m Ever heard of the M Language ?

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

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

50 It look like this in Android

51 Fragments are Dynamic Container Fragment 1 List Fragment 2 Replace

52 EWD Framework Server M Language Routines M Database Client HTML + Javascript

53 Review Discuss the process with your teammates

54 Get me out of Here ! Hit CTRL+c How to stop TMUX How to stop the Node.js server In the command line, type exit

55 References EWD Sencha Touch 2 Reference

56 End of Introduction End


Download ppt "EWD Web Applications Fragments and Actions Dima Kassab & Luis Ibanez Distributed under the Creative Commons by Attribution 3.0 LicenseCreative Commons."

Similar presentations


Ads by Google