ewd web applications fragments and actions dima kassab & luis ibanez distributed under the...
TRANSCRIPT
EWD Web Applications Fragments and Actions
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 !
Set up your EnvironmentUsing 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
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.78.7:8080/ewd/ibanez/mobile01.ewd
Put here Your Port Number
8100 + Computer Number
Put hereYOURUsername
Put hereYOUR
Port number
Put hereYOUR Username
54.225.78.7
View Page Source
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 hereYour
Username
This is how it looksin a Nexus 4
54.225.78.7
Back to the EWD code
Go to your other tmux screen
CTRL+b and the key "n"
Divide and Conquer
<st2:container rootPath="/st-2">
<st2:panel fullscreen="true" addPage="fragment01"/>
</st2:container>
Modify the file: mobile01.ewd
Divide and Conquer
<st2:fragment>
<st2:panel id="panel2" html="First Fragment"/>
</st2:fragment>
Write a new file: fragment01.ewd
Then do: ../build.sh
It looks like this in Android
Let's add Two Toolbars
<st2:container rootPath="/st-2"> <st2:panel fullscreen="true"> <st2:toolbar docked="top" title="EWD Mobile" /> <st2:panel addPage="fragment01"/> <st2:toolbar docked="bottom" title="Easy" /> </st2:panel></st2:container>
Modify the file : mobile01.ewd
Then do: ../build.sh
It looks like this in Android
Let's have two Fragments
<st2:toolbar docked="top" title="EWD Mobile" /> <st2:panel addPage="fragment01"/> <st2:panel addPage="fragment02"/> <st2:toolbar docked="bottom" title="Easy" />
Duplicate the line with Fragment:
Then do: ../build.sh
Modify the file: mobile01.ewd
Divide and Conquer
<st2:fragment>
<st2:panel id="panel3" html="Second Fragment"/>
</st2:fragment>
Write a new file: fragment02.ewd
Then do: ../build.sh
It looks like this in Android
Fragments can be Cool too !
<st2:fragment> <st2:panel id="panel2"> <st2:button text="Don't Panic!"/> <st2:button text="Panic!"/> </st2:panel></st2:fragment>
Modify the file: fragment01.ewd
Then do: ../build.sh
It looks like this in Android
Button Properties
<st2:fragment> <st2:container id="container1"> <st2:button ui="decline" /> <st2:button ui="confirm"/> </st2:container></st2:fragment>
Modify the file: fragment02.ewd
Then do: ../build.sh
It looks like this in Android
Button Properties
<st2:fragment> <st2:container id="container1"> <st2:button ui="decline" text="Zoombie"/> <st2:button ui="confirm" text="Vampire"/> </st2:container></st2:fragment>
Modify the file: fragment02.ewd
Then do: ../build.sh
It looks like this in Android
Button: Do Something !
<st2:container rootPath="/st-2"> <st2:panel fullscreen="true"> <st2:toolbar docked="top" title="EWD Mobile" />
<st2:container id="container1"> <st2:panel addPage="fragment01"/>
</st2:container><st2:container id="container2">
<st2:panel addPage="fragment02"/></st2:container>
<st2:toolbar docked="bottom" title="Easy" /> </st2:panel></st2:container>
Modify the file: mobile01.ewd
Button: Do Something !
<st2:fragment> <st2:container> <st2:button ui="decline" text="Zoombie"/> <st2:button ui="confirm" text="Vampire" nextpage="fragment03" addTo="container2" replacePreviousPage="true"> </st2:container></st2:fragment>
Modify the file: fragment02.ewd
Then do: ../build.sh
Button: Do Something !
<st2:fragment> <st2:container> <st2:button ui="decline" text="Barewolf"/> <st2:button ui="confirm" text="Mummy" nextpage="fragment02" addTo="container2" replacePreviousPage="true"> </st2:container></st2:fragment>
Create a file: fragment03.ewd
Then do: ../build.sh
It looks like this in Android
Dare you to click here !
Vampires are Evil !
Dare you to click here !Dare you to click here !
Mummies are Evil tool !
How about a List ?
<st2:container rootPath="/st-2" title="List1"> <st2:container fullscreen="true" layout="fit">
<st2:toolbar title="List Demo" /> <st2:list itemTpl="{title}"> <st2:data> <st2:item title="Item 1" /> <st2:item title="Item 2" /> <st2:item title="Item 3" /> <st2:item title="Item 4" /> </st2:data>
</st2:list> </st2:container></st2:container>
Create the file: mobile02.ewd
It look like this in Android
Tap the Items,
Don't be shy..
Let's add Actions
<st2:container rootPath="/st-2" title="List2"> <st2:container fullscreen="true" layout="vbox" id="container"> <st2:toolbar title="List Demo" /> <st2:panel layout="fit" flex="2">
<st2:list itemTpl="{title}" nextpage="fragment04" addTo="lowerPanel" replacePreviousPage="false"> <st2:data> <st2:item title="Item 1" /> <st2:item title="Item 2" /> <st2:item title="Item 3" /> </st2:data>
</st2:list> </st2:panel> <st2:panel id="lowerPanel" flex="1" scrollable="vertical" /> </st2:container></st2:container>
Create the file: mobile03.ewd
Let's add Actions
<st2:panel id="panel<?= #ewd_sessionExpiry ?>" html="You selected <?= #recordNo ?>" />
</st2:fragment>
<st2:fragment onBeforeRender="getSelectedListItem^ST01XX">
Create the file: fragment04.ewd
Then do: ../build.sh
Replace XX with your computer number
Let's Add Controller Code
d copyRequestValueToSession^%zewdAPI("recordNo",sessid) QUIT "" ;
getSelectedListItem(sessid)
Create the file: ST01.m
Ever heard of the M Language ?http://opensource.com/health/12/2/join-m-revolution
Let's Play Nice !
Copy the file: ST01.m
/INF362-EWD/gtm/r/ST01XX.m
To
Replace XX with your Computer Number !
Build some More
cd /INF362-EWD/gtm/o
mumps ../r/ST01XX.m
then
Replace XX with your Computer Number !
It look like this in Android
Fragments are Dynamic
Container
Fragment 1
List
Fragment 2Replace
EWD Framework
Server
M LanguageRoutines
M Database
Client
HTML
+
Javascript
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