EWD Web Applications
description
Transcript of EWD Web Applications
![Page 1: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/1.jpg)
EWD Web Applications EWD and Sencha Touch
Dima Kassab & Luis Ibanez
Distributed under the Creative Commons by Attribution 3.0 License
![Page 2: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/2.jpg)
For Instructors
How to setup your SeverHow to setup your Sever
https://github.com/SUNY-Albany-CCI/open-source-web-development-tutorial/tree/master/source/EWD/Install
See: installEWD.shSee: installEWD.sh
![Page 3: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/3.jpg)
For Students
Follow the Instructionsand Enjoy the Ride !
![Page 4: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/4.jpg)
Join the Party
xxx.xxx.xxx.xxx
Log in the Linux Class server at
pppp SSH to this Port Number
![Page 5: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/5.jpg)
Set up your EnvironmentUsing 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
![Page 6: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/6.jpg)
Join the Party
mkdir /INF362-EWD/Apps/username
Put hereYOUR Username
Create yourown directory
![Page 7: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/7.jpg)
Join the Party
cd /INF362-EWD/Apps/username
Go to yournew directory
Put hereYOUR Username
![Page 8: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/8.jpg)
You need two ScreensTo 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"
![Page 9: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/9.jpg)
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
![Page 10: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/10.jpg)
Build the Application
../build.sh
In the same directory type the command
![Page 11: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/11.jpg)
![Page 12: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/12.jpg)
Run your Own Server
Go to your other tmux screen
CTRL+b and the key "n"
![Page 13: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/13.jpg)
Join the Party
mkdir /INF362-EWD/nodejs/username
Put hereYOUR Username
Create yourown directory
![Page 14: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/14.jpg)
Run your Own Server
cd /INF362-EWD/nodejs/username
Replace this with Your username
![Page 15: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/15.jpg)
Run your Own Server
../runEWDwithNodeJS.sh 8100
Put here your Port Number
8100 + Computer Number
![Page 16: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/16.jpg)
Put here your Port Number
8100 + Computer Number
![Page 17: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/17.jpg)
![Page 18: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/18.jpg)
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
![Page 19: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/19.jpg)
Put hereYour
Port number
Put hereYour
Username
54.225.156.138
![Page 20: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/20.jpg)
View Page Source
![Page 21: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/21.jpg)
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
![Page 22: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/22.jpg)
This is how it looksin a Nexus 4
54.225.156.138
![Page 23: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/23.jpg)
Back to the EWD code
Go to your other tmux screen
CTRL+b and the key "n"
![Page 24: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/24.jpg)
Make it look like an App
<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/[email protected]" /><st2:icon size="144" url="examples/kitchensink/resources/icons/[email protected]" /></st2:homeScreen>
<st2:homeScreen>
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
![Page 25: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/25.jpg)
Make it look like an App
Now use the Bookmark Icon in the Browser ...
and select "Add to Home Screen"
In your Mobile Device
![Page 26: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/26.jpg)
Add Icon to Home Screen
![Page 27: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/27.jpg)
Make it look like an App
A new icon will appear in your device
It will launch without the Web browser border
![Page 28: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/28.jpg)
Now it looks like a native App
![Page 29: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/29.jpg)
Let's add a Toolbar
<st2:panel fullscreen="true" html="Hello World" />
<st2:panel fullscreen="true" html="Hello World" > <st2:toolbar docked="top" title="EWD Mobile" /></st2:panel>
Modify the line:
to make the three lines:
Then do: ../build.sh
![Page 30: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/30.jpg)
It looks like this in Android
54.225.156.138
![Page 31: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/31.jpg)
Let's move the Toolbar
<st2:panel fullscreen="true" html="Hello World" > <st2:toolbar docked="top" title="EWD Mobile" /></st2:panel>
Replace : docked="top"
<st2:panel fullscreen="true" html="Hello World" > <st2:toolbar docked="bottom" title="EWD Mobile" /></st2:panel>
With : docked="bottom"
![Page 32: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/32.jpg)
It looks like this in Android
54.225.156.138
![Page 33: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/33.jpg)
Let's have two Toolbars
<st2:panel fullscreen="true" html="Hello World" > <st2:toolbar docked="top" title="EWD Mobile" /> <st2:toolbar docked="bottom" title="Easy" /></st2:panel>
One toolbar docked "top" and the other "bottom"
Then do: ../build.sh
Modify the file: mobile01.ewd
![Page 34: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/34.jpg)
It looks like this in Android
54.225.156.138
![Page 35: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/35.jpg)
Fragments inside Containers
Container
Fragment 1
Fragment 2
![Page 36: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/36.jpg)
Fragments are Dynamic
Container
Fragment 1
Fragment 2
Fragment 3
Replace
![Page 37: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/37.jpg)
Fragments can be Nested
Container A
Fragment 1
Container B
Fragment 2
![Page 38: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/38.jpg)
Fragments are Cool !
<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>
In mobile01.ewd Modify the lines:
to become the lines:
<st2:toolbar docked="top" title="EWD Mobile" /> <st2:toolbar docked="bottom" title="Easy" /></st2:panel><st2:panel fullscreen="true" html="Hello World" >
![Page 39: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/39.jpg)
Let's create the Fragment
<st2:fragment> <st2:panel id="panel3" html="New Fragment!"> </st2:panel></st2:fragment>
With the content:
Then do: ../build.sh
Write a new file: fragment01.ewd
![Page 40: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/40.jpg)
It looks like this in Android
![Page 41: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/41.jpg)
Stop and Reflect !
This is Powerful Stuff !
![Page 42: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/42.jpg)
Stop and Reflect !
It meansthat you can write complex Apps...
![Page 43: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/43.jpg)
Stop and Reflect !
by dividing themintoSmall Fragments !
![Page 44: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/44.jpg)
Let's keep going
How about replacinga fragment ?
![Page 45: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/45.jpg)
<st2:panel id="panel3" html="New Fragment!">
Everybody Love Buttons
<st2:button text="Click" nextPage="fragment02" addTo="cont01"/>
In the file fragment01.ewd after the line:
Insert the line:
![Page 46: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/46.jpg)
Sanity Check
<st2:fragment> <st2:panel id="panel3" html="New Fragment!"> <st2:button text="Click" nextPage="fragment02" addTo="cont01"/> </st2:panel></st2:fragment>
Now should look like:
Then do: ../build.sh
The file: fragment01.ewd
![Page 47: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/47.jpg)
Create another Fragment
<st2:fragment> <st2:panel id="panel4" html="This is Fragment 02!"> <st2:button text="Back" nextPage="fragment01" addTo="cont01"/> </st2:panel></st2:fragment>
With the content:
Then do: ../build.sh
Write a new file: fragment02.ewd
![Page 48: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/48.jpg)
It looks like this in Android
![Page 49: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/49.jpg)
It looks like this in Android
Go ahead,Click here !
![Page 50: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/50.jpg)
It looks like this in Android
![Page 51: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/51.jpg)
Not what you expected ?
The new Fragment was added to the Container...
but it didn't replacethe previous Fragment...
![Page 52: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/52.jpg)
Try This !
replacePreviousPage="true"
In fragment01.ewd at the end of the line:
insert the text
<st2:button text="Click"...
![Page 53: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/53.jpg)
Try This !
replacePreviousPage="true"
In fragment02.ewd at the end of the line:
insert the text
<st2:button text="Click"...
Also in fragment02
![Page 54: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/54.jpg)
It looks like this in Android
![Page 55: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/55.jpg)
It looks like this in Android
![Page 56: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/56.jpg)
container
What have we done ?!
fragment
panel: panel3
button
fragment
panel: panel4
button
panel
toolbar
container: cont01
mobile01.ewd
fragment01.ewd fragment02.ewd
![Page 57: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/57.jpg)
container
What have we done ?!
fragment
panel: panel3
button
fragment
panel: panel4
button
panel
toolbar
container: cont01
mobile01.ewd
fragment01.ewd fragment02.ewd
![Page 58: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/58.jpg)
container
What have we done ?!
fragment
panel: panel3
button
fragment
panel: panel4
button
panel
toolbar
container: cont01
mobile01.ewd
fragment01.ewd fragment02.ewd
![Page 59: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/59.jpg)
Review
Discuss the process with your teammates
![Page 60: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/60.jpg)
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
![Page 61: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/61.jpg)
References
EWD Sencha Touch 2 Reference
http://gradvs1.mgateway.com/download/EWD_Sencha_Touch2_Reference.pdf
![Page 62: EWD Web Applications](https://reader036.fdocuments.in/reader036/viewer/2022062301/56815a29550346895dc76ab3/html5/thumbnails/62.jpg)
End of Introduction
End