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
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
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
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
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
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
Make it look like an App
A new icon will appear in your device
It will launch without the Web browser border
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
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"
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
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
<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
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
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
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