ewd web applications fragments and actions dima kassab & luis ibanez distributed under the...

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