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

15 Put here your Port Number 8100 + Computer Number

16

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

18 Put hereYOUR Port number Put hereYOUR Username 54.225.78.7

19 View Page Source

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

21 This is how it looks in a Nexus 4 54.225.78.7

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 ? http://opensource.com/health/12/2/join-m-revolution

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 http://gradvs1.mgateway.com/download/EWD_Sencha_Touch2_Reference.pdf

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