EWD Web Applications

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/Insta
ll
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
Put here YOUR Username
Create your own directory

• mkdir /INF362-EWD/Apps/username

6
Join the Party
Put here YOUR Username
Go to your new directory

• cd /INF362-EWD/Apps/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
• CTRLb followed by the key "c"
• Then you can move between the two screens with
  the key combination
• CTRLb followed by the key "n"

8
Start Simple
Top Level Container
Where Sencha Touch is Installed

• ltst2container rootPath"/st-2"gt
• ltst2panel fullscreen"true" html"Hello World"
  /gt
• lt/st2containergt

Write this text in a file called
mobile01.ewd
9
Build the Application
In the same directory type the command
../build.sh
10
(No Transcript)
11
Run your Own Server
Go to your other tmux screen
CTRLb and the key "n"
12
Join the Party
Put here YOUR Username
Create your own directory

• mkdir /INF362-EWD/nodejs/username

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
(No Transcript)
17
Open Firefox
Go to the URL 54.225.78.78080/ewd/ibanez/mobil
e01.ewd
Put hereYOUR Username
Put here Your Port Number 8100 Computer
Number
18
54.225.78.7
Put hereYOUR Port number
Put hereYOUR Username
19
View Page Source
20
Open Mobile Browser
Go to the URL 54.225.78.78080/ewd/ibanez/mobil
e01.ewd
Put hereYour Username
Put here Your Port Number 8100 Computer
Number
21
54.225.78.7
This is how it looks in a Nexus 4
22
Back to the EWD code
Go to your other tmux screen
CTRLb and the key "n"
23
Divide and Conquer
Modify the file mobile01.ewd

• ltst2container rootPath"/st-2"gt
• ltst2panel fullscreen"true" addPage"fragment01
  "/gt
• lt/st2containergt

24
Divide and Conquer
Write a new file fragment01.ewd

• ltst2fragmentgt
• ltst2panel id"panel2" html"First Fragment"/gt
• lt/st2fragmentgt

Then do ../build.sh
25
It looks like this in Android
26
Let's add Two Toolbars
Modify the file mobile01.ewd

• ltst2container rootPath"/st-2"gt
• ltst2panel fullscreen"true"gt
• ltst2toolbar docked"top" title"EWD Mobile" /gt
• ltst2panel addPage"fragment01"/gt
• ltst2toolbar docked"bottom" title"Easy" /gt
• lt/st2panelgt
• lt/st2containergt

Then do ../build.sh
27
It looks like this in Android
28
Let's have two Fragments
Modify the file mobile01.ewd
Duplicate the line with Fragment

• ltst2toolbar docked"top" title"EWD Mobile" /gt
• ltst2panel addPage"fragment01"/gt
• ltst2panel addPage"fragment02"/gt
• ltst2toolbar docked"bottom" title"Easy" /gt

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

• ltst2fragmentgt
• ltst2panel id"panel3" html"Second Fragment"/gt
• lt/st2fragmentgt

Then do ../build.sh
30
It looks like this in Android
31
Fragments can be Cool too !
Modify the file fragment01.ewd

• ltst2fragmentgt
• ltst2panel id"panel2"gt
• ltst2button text"Don't Panic!"/gt
• ltst2button text"Panic!"/gt
• lt/st2panelgt
• lt/st2fragmentgt

Then do ../build.sh
32
It looks like this in Android
33
Button Properties
Modify the file fragment02.ewd

• ltst2fragmentgt
• ltst2container id"container1"gt
• ltst2button ui"decline" /gt
• ltst2button ui"confirm"/gt
• lt/st2containergt
• lt/st2fragmentgt

Then do ../build.sh
34
It looks like this in Android
35
Button Properties
Modify the file fragment02.ewd

• ltst2fragmentgt
• ltst2container id"container1"gt
• ltst2button ui"decline" text"Zoombie"/gt
• ltst2button ui"confirm" text"Vampire"/gt
• lt/st2containergt
• lt/st2fragmentgt

Then do ../build.sh
36
It looks like this in Android
37
Button Do Something !
Modify the file mobile01.ewd

• ltst2container rootPath"/st-2"gt
• ltst2panel fullscreen"true"gt
• ltst2toolbar docked"top" title"EWD Mobile" /gt
• ltst2container id"container1"gt
• ltst2panel addPage"fragment01"/gt
• lt/st2containergt
• ltst2container id"container2"gt
• ltst2panel addPage"fragment02"/gt
• lt/st2containergt
• ltst2toolbar docked"bottom" title"Easy" /gt
• lt/st2panelgt
• lt/st2containergt

38
Button Do Something !
Modify the file fragment02.ewd

• ltst2fragmentgt
• ltst2containergt
• ltst2button ui"decline" text"Zoombie"/gt
• ltst2button ui"confirm" text"Vampire"
• nextpage"fragment03" addTo"container2"
• replacePreviousPage"true"gt
• lt/st2containergt
• lt/st2fragmentgt

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

• ltst2fragmentgt
• ltst2containergt
• ltst2button ui"decline" text"Barewolf"/gt
• ltst2button ui"confirm" text"Mummy"
• nextpage"fragment02" addTo"container2"
• replacePreviousPage"true"gt
• lt/st2containergt
• lt/st2fragmentgt

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 !
Dare you to click here !
42
Mummies are Evil tool !
43
How about a List ?
Create the file mobile02.ewd

• ltst2container rootPath"/st-2" title"List1"gt
• ltst2container fullscreen"true" layout"fit"gt
• ltst2toolbar title"List Demo" /gt
• ltst2list itemTpl"title"gt
• ltst2datagt
• ltst2item title"Item 1" /gt
• ltst2item title"Item 2" /gt
• ltst2item title"Item 3" /gt
• ltst2item title"Item 4" /gt
• lt/st2datagt
• lt/st2listgt
• lt/st2containergt
• lt/st2containergt

44
It look like this in Android
Tap the Items, Don't be shy..
45
Let's add Actions
Create the file mobile03.ewd

• ltst2container rootPath"/st-2" title"List2"gt
• ltst2container fullscreen"true" layout"vbox"
  id"container"gt
• ltst2toolbar title"List Demo" /gt
• ltst2panel layout"fit" flex"2"gt
• ltst2list itemTpl"title" nextpage"fragment04"
  
• addTo"lowerPanel" replacePreviousPage
  "false"gt
• ltst2datagt
• ltst2item title"Item 1" /gt
• ltst2item title"Item 2" /gt
• ltst2item title"Item 3" /gt
• lt/st2datagt
• lt/st2listgt
• lt/st2panelgt
• ltst2panel id"lowerPanel" flex"1"
  scrollable"vertical" /gt
• lt/st2containergt
• lt/st2containergt

46
Let's add Actions
Create the file fragment04.ewd

• ltst2fragment onBeforeRender"getSelectedListItem
  ST01XX"gt
• ltst2panel id"panellt? ewd_sessionExpiry
  ?gt"
• html"You selected lt? recordNo ?gt" /gt
• lt/st2fragmentgt

Replace XX with your computer number
Then do ../build.sh
47
Let's Add Controller Code
Create the file ST01.m

• getSelectedListItem(sessid)
• d copyRequestValueToSessionzewdAPI("recordNo",s
  essid)
• QUIT ""

Ever heard of the M Language ? http//opensource.c
om/health/12/2/join-m-revolution
48
Let's Play Nice !
Copy the file ST01.m
To
/INF362-EWD/gtm/r/ST01XX.m
Replace XX with your Computer Number !
49
Build some More
cd /INF362-EWD/gtm/o
then
mumps ../r/ST01XX.m
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
Client
M Language Routines
HTML Javascript
M Database
53
Review
Discuss the process with your teammates
54
Get me out of Here !
How to stop TMUX

• In the command line, type exit

How to stop the Node.js server

• Hit CTRLc

55
References
EWD Sencha Touch 2 Reference
http//gradvs1.mgateway.com/download/EWD_Sencha_To
uch2_Reference.pdf
56
End of Introduction
End