ewd web applications ewd and sencha touch dima kassab & luis ibanez distributed under the...
TRANSCRIPT
EWD Web Applications EWD and Sencha Touch
Dima Kassab & Luis Ibanez
Distributed under the Creative Commons by Attribution 3.0 License
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
For Students
Follow the Instructionsand Enjoy the Ride !
Join the Party
xxx.xxx.xxx.xxx
Log in the Linux Class server at
pppp SSH to this Port Number
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
Join the Party
mkdir /INF362-EWD/Apps/username
Put hereYOUR Username
Create yourown directory
Join the Party
cd /INF362-EWD/Apps/username
Go to yournew directory
Put hereYOUR Username
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"
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
Build the Application
../build.sh
In the same directory type the command
Run your Own Server
Go to your other tmux screen
CTRL+b and the key "n"
Join the Party
mkdir /INF362-EWD/nodejs/username
Put hereYOUR Username
Create yourown directory
Run your Own Server
cd /INF362-EWD/nodejs/username
Replace this with Your username
Run your Own Server
../runEWDwithNodeJS.sh 8100
Put here your Port Number
8100 + Computer Number
Put here your Port Number
8100 + Computer Number
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
Put hereYour
Port number
Put hereYour
Username
54.225.156.138
View Page Source
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
This is how it looksin a Nexus 4
54.225.156.138
Back to the EWD code
Go to your other tmux screen
CTRL+b and the key "n"
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
Make it look like an App
Now use the Bookmark Icon in the Browser ...
and select "Add to Home Screen"
In your Mobile Device
Add Icon to Home Screen
Make it look like an App
A new icon will appear in your device
It will launch without the Web browser border
Now it looks like a native App
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
It looks like this in Android
54.225.156.138
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"
It looks like this in Android
54.225.156.138
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
It looks like this in Android
54.225.156.138
Fragments inside Containers
Container
Fragment 1
Fragment 2
Fragments are Dynamic
Container
Fragment 1
Fragment 2
Fragment 3
Replace
Fragments can be Nested
Container A
Fragment 1
Container B
Fragment 2
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" >
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
It looks like this in Android
Stop and Reflect !
This is Powerful Stuff !
Stop and Reflect !
It meansthat you can write complex Apps...
Stop and Reflect !
by dividing themintoSmall Fragments !
Let's keep going
How about replacinga fragment ?
<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:
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
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
It looks like this in Android
It looks like this in Android
Go ahead,Click here !
It looks like this in Android
Not what you expected ?
The new Fragment was added to the Container...
but it didn't replacethe previous Fragment...
Try This !
replacePreviousPage="true"
In fragment01.ewd at the end of the line:
insert the text
<st2:button text="Click"...
Try This !
replacePreviousPage="true"
In fragment02.ewd at the end of the line:
insert the text
<st2:button text="Click"...
Also in fragment02
It looks like this in Android
It looks like this in Android
container
What have we done ?!
fragment
panel: panel3
button
fragment
panel: panel4
button
panel
toolbar
container: cont01
mobile01.ewd
fragment01.ewd fragment02.ewd
container
What have we done ?!
fragment
panel: panel3
button
fragment
panel: panel4
button
panel
toolbar
container: cont01
mobile01.ewd
fragment01.ewd fragment02.ewd
container
What have we done ?!
fragment
panel: panel3
button
fragment
panel: panel4
button
panel
toolbar
container: cont01
mobile01.ewd
fragment01.ewd fragment02.ewd
Review
Discuss the process with your teammates
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
References
EWD Sencha Touch 2 Reference
http://gradvs1.mgateway.com/download/EWD_Sencha_Touch2_Reference.pdf
End of Introduction
End