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/icon@2x.png" /><st2:icon size="144" url="examples/kitchensink/resources/icons/icon~ipad@2x.png" /></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