EWD Web Applications

sprocketexponentialMobile - Wireless

Dec 10, 2013 (3 years and 8 months ago)

63 views

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 Sever

https://github.com/SUNY
-
Albany
-
CCI/open
-
source
-
web
-
development
-
tutorial/tree/master/source/EWD/Install

See:
installEWD.sh

For Students

Follow the Instructions

and 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 Environment

Using 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 here

YOUR Username

Create your

own directory

Join the Party

cd /INF362
-
EWD/Apps/username

Go to your

new directory

Put here

YOUR Username

You need two Screens

To 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 here

YOUR Username

Create your

own 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 here

Your
Username

Put here

Your

Port number

Put here

Your
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 here

Your
Username

This is how it looks

in 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:homeScreen>

<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>

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:panel fullscreen="true" html="Hello World" >


<st2:toolbar docked="top" title="EWD Mobile" />


<st2:toolbar docked="bottom" title="Easy" />

</st2:panel>

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 means

that you can write
complex Apps...

Stop and Reflect !

by dividing them

into

Small Fragments !

Let's keep going

How about
replacing

a 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 replace

the 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