Vs 2012 Demo Script--Web General

7/21/2019 Vs 2012 Demo Script--Web General

http://slidepdf.com/reader/full/vs-2012-demo-script-web-general 1/97

Visual Studio 2012 – Web & Cloud Demos

ContentsPlease Read........................................................................................................................................................................................ 1

Web Demo 0 - Before Starting............................................................................................................................................................ 2

Web Demo 1 – New Proe!t "em#lates................................................................................................................................................$

Web Demo 2- %obile & Bundling...................................................................................................................................................... 20

Web Demo '- Visual Studio 2012 (eatures....................................................................................................................................... '$

Web Demo )- Web *P+ & ,"% $...................................................................................................................................................... 2

Web Demo $ – */ure Web Site De#loment.....................................................................................................................................

Please Read ou3ll 4nd sni##ets at Web and Cloud Development\Code Snippets. 5o# t6em to %USERPROFILE%\Documents\isual

Studio !"#!\Code Snippets\.

(or e7am#le8 if our login name is $ob and ou 6a9e Windows installed on our C dri9e and t6e !ode sni##ets are for Visual 5:8

ou3d !o# t6em to C\Uses\$ob\Documents\isual Studio !"#!\Code Snippets\isual C'\() Code Snippets on our

ma!6ine.

"6ese demos will s6ow some of t6e new features in *SP.N;" %V58 t6e Web*P+8 Visual Studio 20128 and Windows */ure. *+ee is

moe demo content t+an ,+at ,ill -t in a ." minute session8 so sele!t t6e demos ou wis6 to #erform for a gi9en session.Suggested demos for a 0 minute session are 18 28 )8 and $.

Be sure to run t6roug6 Web Demo 0 <Before Starting=. ou onl need to ta>e t6ese ste#s on!e #er ma!6ine.

/ote for Web Demo $ <*/ure De#loment=8 ou3ll need an a!ti9e a!!ount on 6tt#?@@windowsa/ure.!om

1

http://windowsazure.com/

http://windowsazure.com/



Web Demo " 0 $e1oe Statin2Demo S!reen Ste#s S!ri#t

1. A#en t6e

Fabi3amFibe4CallCente

4sln solution from t6e

44\Fabi3amFibe4CallCent

e folder.

2. +f ou re!ei9e a warning

<similar to t6e #i!ture to

t6e left= about t6e #roe!t

alread being !on4gured

for anot6er #ort8 !li!> 5esto !6ange t6e !on4gured

#ort.

'. +n t6e Solution ;7#lorer

window8 rig6t-!li!> in t6e

Fabi3amFibe4Web

po6ect and sele!t

Popeties.

2



). An t6e Web tab8 set t6e

Stat 7ction to Speci-c

Pa2e4 ea9e #age blan>

<t6is will ensure running

from Visual Studio will

alwas start t6e a##li!ation

from t6e root R=.

$. A#en t6e

Fabi3am4P+ones4Web4sl

n solution from t6e44\Fabi3am4P+ones4Web

folder.. +f ou re!ei9e a warning

<similar to t6e #i!ture to t6e

left= about t6e #roe!t

alread being !on4gured for

anot6er #ort8 !li!> 5es to

!6ange t6e !on4gured #ort.

'



. +n t6e Solution ;7#lorer

window8 rig6t-!li!> t6e

Fabi3am4P+ones4Web

#roe!t and sele!t

Popeties4

C. An t6e Web tab8 set t6e

Stat 7ction to Speci-c

Pa2e4 ea9e #age blan>

<t6is will ensure running

from Visual Studio will

alwas start t6e a##li!ation

from t6e root R=.

)



Web Demo # 8 /e, Po6ect *emplatesDemo S!reen Ste#s S!ri#t

1. Start isual Studio !"#!42. Sele!t File 09 /e, 09

Po6ect

'. nder "em#lates - Visual5: - Web8 sele!t *SP.N;"

%V5 ) #roe!t.). Ei9e t6e Proe!t t6e name

FabFibe4

et3s ta>e a loo> at t6e

new #roe!ts a9ailable

for *SP.N;" %V5 ).

$



$. +n t6e New Proe!t dialog8

sele!t Intenet

7pplication.

"6ere are a number of

#roe!t tem#lates out of

t6e bo7. "6e +ntranet

tem#late will set u# an

a##li!ation using

Windows

aut6enti!ation8 w6ile

t6e %obile tem#late is

an a## o#timi/ed for

#6ones and tablets.

We3ll start t6is

a##li!ation as an

+nternet a##li!ation8

w6i!6 uses forms-based

aut6enti!ation b

default. We3ll also beusing t6e Ra/or 9iew

engine8 w6i!6 was a

new 9iew engine

introdu!ed wit6 %V5 '.



. *s soon as t6e #roe!t is

read8 #ress Ctl:F; to run

t6e a##li!ation.

et3s see w6at t6e new

a##li!ation loo>s li>e

before we start ma>ing

!6anges.

+f ou39e been using

Visual Studio 2010 in

t6e #ast ou3ll reali/e

t6is is an u#dated loo>

for a new a##li!ation.

W6at is drasti!all

diFerent is w6at we3ll

see be6ind t6e s!enes.

. ea9e t6e browser o#en and

return to isual Studio.C. A#en t6e Solution ;7#lorer

window <Ctl:W< S=.G. A#en t6e =La)out4cs+tml

4le from t6e ie,>S+aed

folder.

et3s loo> at t6e

Haout 9iew t6at gi9es

t6e a##li!ation it3sstru!ture.

Rig6t awa we !an see

t6is Haout 9iew is

using ,"% $ – we !an

tell t6at be!ause of t6e

DA5"P;8 w6i!6 is

sim#li4ed for ,"% $ to

ust I6tmlJ.

"6e Haout 9iew also

in!ludes all t6e ,"% $

best #ra!ti!es. ou !an

see t6e lang attribute

set in t6e 6tml element8

w6i!6 tells sear!6



agents and s!reen

readers about t6e

language used in t6e

#age8 and ou !an also

see a meta !6arset

element telling t6e user

agent 6ow t6e

do!ument is en!oded.

"6is meta tag is

a!tuall an im#ortant

ste# in a9oiding !ertain

!ross-site s!ri#ting

atta!>s t6at ta>e

ad9antage of diFerent

!6ara!ter en!odings.

(inall8 t6ere is a meta9iew#ort tag to ma>e

t6e site more mobile

friendl. We3ll return to

t6at to#i! later.10.Close t6e =La)out4cs+tml

4le.

et3s see w6at it would

loo> li>e if + wanted to

!reate a small

a##li!ation to tra!>

(abri>am (iber ser9i!e

ti!>ets t6at (abri>am

uses to tra!> !ustomer

#roblems.

C



11.Rig6t-!li!> on t6e (odels

folder and sele!t 7dd -

/e, Item.12.Sear!6 for class in t6e

tem#late sear!6 bo71'.Sele!t t6e Class tem#late1).Ei9e t6e !lass t6e name of

Sevice*ic3et.1$.5li!> 7dd.

We >now w6at

information we want to

store for a ser9i!e

ti!>et8 so let3s go a6ead

and !reate a !lass in

t6e %odel folder to

re#resent a ser9i!e

ti!>et.

We won3t worr about

!ustomers and status

ust et – let3s ust see

6ow far we !an go wit6

a sim#le model

de4nition for a ser9i!e

ti!>et.

1.Delete all e?istin2 code in t6e new Ser9i!e"i!>et.!s

4le.1.Press Ctl:@< A to o#en t6e

sni##et menu.1C.Eo to () Code Snippets

and sele!t Sevice*ic3et

model.

+ 6a9e a sni##et t6at!ontains m

Ser9i!e"i!>et !lass

de4nition.

G



1G.,ig6lig6t t6e #ro#erties in

t6e new !lass.

W6at we 6a9e now is a

sim#le ser9i!e ti!>et to

store an +D8 title8 and

des!ri#tion.

"6e model is using

some data annotations

to #ut some !onstraints

on t6ese #ro#erties. (or

e7am#le8 we !an see

t6e title is a reKuired

4eld8 and is 6as a

ma7imum lengt6 of C0

!6ara!ters.

Ne7t8 we3ll need some

data a!!ess !ode tostore t6ese ti!>ets in a

database.20.Rig6t-!li!> on t6e (odels

folder and sele!t 7dd -

/e, Item.21.Sear!6 for class in t6e

tem#late sear!6 bo722.Sele!t t6e Class tem#late2'.Ei9e t6e !lass t6e name of

Fabi3amD$.2).5li!> 7dd.

(ortunatel8 *SP.N;"

%V5 ) s6i#s wit6 t6e

new I!ode-4rstJ

features of t6e entit

framewor> alread

referen!ed b t6e

#roe!t and a9ailable.

10



2$.Delete all e?istin2 code

in t6e new (abri>amDB.!s

4le.2.Press Ctl:@< A to o#en t6e

sni##et menu.2.Eo to () Code Snippets

and sele!t Fabi3amD$4

*ll + need is a !lass

deri9ed from t6e ;ntit

(ramewor>3s new

Db5onte7t !lass8 w6i!6

+ 6a9e a sni##et for.

!B4 ,ig6lig6t t6e new !ode ,ere is e9ert6ing weneed to !reate a SL

Ser9er database wit6 a

s!6ema to store ser9i!e

ti!>ets. Db5onte7t and

t6ese DbSet t#es are

all #art of t6e new

;ntit (ramewor>

9ersion we are using8

and t6e ;( will use t6e

#ro#ert names in t6is

!lass and our model

obe!t w6en !reating a

s!6ema.

Before we see t6e

database8 we3ll need to

6a9e t6e a##li!ation tr

to use t6e database8

and we3ll do t6at usingsome *SP.N;" %V5

s!aFolding.2G.$uild t6e #roe!t

<S6iftM5trlMB='0.A#en t6e Contolles

folder.

W6at + will do is 4rst

remo9e t6e e7isting

,ome5ontroller !lass

t6at is res#onsible for

11



'1.Delete t6e

,ome5ontroller.!s 4le.

t6e 6ome #age of t6e

a##li!ation.!4 A#en t6e ie,s folder.4 Delete t6e ome folder.

We3ll also remo9e t6e

e7isting 9iew for t6e

6ome #age.

').Rig6t-!li!> t6e Contolles

folder.'$.5li!> 7dd'.5li!> Contolle

*nd we will re#la!e all

t6ese 4les wit6 a new

!ontroller and a new set

of 9iews for editing and

!reating ser9i!e ti!>ets.

"6e s!aFolding t6at!omes wit6 *SP.N;"

%V5 ) !an build all of

t6is for me.

12



'.+n t6e *dd 5ontroller dialog?'C.56ange t6e !ontroller name

to omeContolle.'G.se t6e I(C Contolle

,it+ ead>,ite actions

and vie,< usin2 Entit)

Fame,o3 J tem#late.

)0.56oose Sevice*ic3et fort6e %odel !lass.

)1.56oose Fabi3amD$ for

t6e Data !onte7t !lass.)2.5li!> 7dd.

*ll + need to do is gi9e

Visual Studio some

information about t6e

!lasses + want to use.

+3ll tell it t6e !ontroller

name8 and sele!t a

tem#late t6at !an

generate all t6e !ode +

need to edit8 list8 and

!reate ser9i!e ti!>ets. +t

will use t6e ser9i!e

ti!>et !lass de4nition to

build t6e 9iews8 and t6e

data !onte7t !lass we

ust !reated to sa9e and

retrie9e data.

)'.Point out t6e newl !reated

4les

"6is %V5 s!aFolding

!reated a !ontroller and

an entire set of 9iews

for me.

1'



)).Press Ctl:F; to build and

run t6e a##li!ation.

*nd we !an alread run

t6e a##li!ation to see

t6e result.

;9ert6ing seems to be

wor>ing8 but we don3t

6a9e an ti!>ets in t6e

a##li!ation8 et.

)$.5li!> ICeate /e,J. et3s !reate a new

ti!>et.

1)



).5li!> t6e Ceate button "6is in#ut form was

generated using

information on m

model !lass <Data

Annotations= and t6e

s!aFolding + ran earlier

generated t6is +.

+ !an alwas !ustomi/e

it8 and it alread 6as

man of t6e features +

need – li>e !lient-side

and ser9er-side

9alidation based on t6e

data annotations on m

model.

,ere ou !an see it will

not let me !reate a

ti!>et wit6out a title or

des!ri#tion.).*dd a title)C.*dd a desciption)G.5li!> Ceate

et3s add a title and

des!ri#tion t6is time

before !li!>ing 5reate.

1$



$0.S6ow t6e ti!>et in t6e list *nd we !an see t6e

ti!>et a##ears in t6e

6ome #age8 w6i!6

s6ows a list of all

ti!>ets.

But ou >now8

somet6ing else t6at

mig6t be useful to 6a9e

wit6 a ser9i!e ti!>et is a

date for w6en t6e ti!>et

o#ened.

"6is is eas enoug6 to

add to our 5: !lass8 but

it is usuall a #ain to

ma>e t6e databases!6ema !6anges.

(ortunatel8 we are

using t6e ;ntit

(ramewor> 9ersion $8

w6i!6 !an ma>e

s!6ema !6anges based

on our !6anging model.

1



$1.+n t6e Solution ;7#lorer8

o#en Ser9i!e"i!>et.!s

from t6e %odels folder.

et3s go ba!> to t6e

Ser9i!e"i!>et !lass we

!reated earlier.

$2.*fter t6e Des!ri#tion

#ro#ert8 t#e IpopJ to

start t6e #ro#ert sni##et.$'."#e *ab< *ab to e7#and

t6e sni##et.

et3s add a #ro#ert to

6old t6e !reation date

of a ti!>et.

$).Ei9e t6e #ro#ert a t#e

of Date"ime$$.Ei9e t6e #ro#ert t6e

name 5reatedAn

We3ll ma>e t6is a

nullable Date"ime fornow8 and !all t6e

#ro#ert !reated on.

1



$.Eo to t6e Lui!> aun!6

bo7 of Visual Studio.$."#e I#a!>ageJ$C.5li!> t6e Pa!>age

%anager 5onsole

sele!tion.

Now we need to u#date

t6e database to 6old

t6is new #ro#ert

9alue. "o do t6is we

need to enable ;ntit

(ramewor> migrations

from t6e Pa!>age

%anager 5onsole

window. +3ll sear!6 for

t6e window in t6e Lui!>

aun!6 bo7 of Visual

Studio.

$G."#e Ienable-migrationsJ

in t6e Pa!>age %anager

5onsole.

;( migrations will loo>

inside m #roe!t and

4nd t6e !lasses + usedt6at are in9ol9ed wit6

t6e database. +t will

also loo> to see if t6ere

is an e7isting database

and !reate a !ode-

based migration for me

t6at !an re!reate t6e

database.

1C



0.+n t6e Solution ;7#lorer

window8 o#en

Con-2uation4cs from

t6e %igrations folder.

(irst let3s loo> at t6e

!on4guration ;( added

to t6e #roe!t.

1.Eo to line 12 and set

*utomati!%igrations O

true.

+3m going to enable

*utomati!%igrations.

"6is setting allows t6e

;ntit (ramewor> to

ma>e s!6ema !6anges

to m database wit6out

!reating e7#li!it

migration 4les.

et3s loo> and see w6at

a migration 4le loo>s

li>e.

1G



2.+n t6e Solution ;7#lorer

window8 o#en t6e 4le t6at

ends wit6

I+nitial5reate.!sJ from t6e

%igrations folder.

"6is initial !reation 4le

is t6e migration 4le t6e

;ntit (ramewor>

!reated b loo>ing at

t6e s!6ema t6at

!urrentl e7ists.

'.S6ow t6e !ode inside t6e# met6od of

+nitial5reate.

ou !an see t6ere is auent t#e of *P+ for

!reating tables8 adding

!olumns to tables8 and

!on4guring #ro#erties

on t6ose !olumns. "6is

!ode !reate t6e

Ser9i!e"i!>ets table

and adds t6e +D8 title8

and des!ri#tion!olumns.

ou !an !ustomi/e

t6ese migrations and

use t6e *P+ to add

additional tables8 !reate

20



inde7es8 or e9en

e7e!ute SL to #erform

data migrations.

W6at we don3t !urrentl

6a9e in t6e table is t6e

5reatedAn date. "o get

t6at !olumn in weeit6er need to !reate a

new migration using

t6e add migration

!ommand8 or let

automati! migrations

6andle t6ings wit6out

adding an e7#li!it

migration 4le. et3s use

t6e automati!migrations a##roa!6.

).Return to t6e Pa!>age

%anager 5onsole.$.;7e!ute t6e !ommand

Iu#date-database –

9erboseJ.Point to t6e results

We need to go ba!> to

t6e !onsole and

e7e!ute t6e u#date

database !ommand. +3m

going to add t6e

9erbose ag so we !an

see e7a!tl w6at

!ommands t6e ;ntit

(ramewor> will send tot6e database.

*s ou !an see8 ;(

dete!ted t6e new

#ro#ert on our model

!lass and de!ided to

21



issue an *";R "*B;

SL !ommand to

sn!6roni/e t6e s!6ema

wit6 w6at is in t6e

model !lass. Now we

!ould go ba!> and

!6ange our 9iews to

dis#la t6e new 9alue8and add some business

logi! to assign t6e new

9alue a##ro#riatel.

We !ould also add new

model !lasses8 and ;(

!an !reate new

migrations to !reate

tables for t6ose models..Summari/e So ou !an see 6ow

eas it is to get started

wit6 ,"%8 *SP.N;"

%V5 )8 and SL Ser9er1

using Visual Studio

2011. ater we3ll return

to a 9ersion of t6e

(abri>am (iber web site

wit6 more features in it

Q.

1 s

22



Web Demo !0 (obile & $undlin2Demo S!reen Ste#s S!ri#t

1. Start isual Studio

!"#!4

2. A#en t6eFabi3am4CallCente4sl

n solution4

et3s see w6at t6e new

mobile and bundling

features loo> li>e in an*SP.N;" %V5 ) #roe!t.

'. Press Ctl:F; to run t6e

a##li!ation.

"6is is t6e (abri>am

(iber web site. ou !an

see it wor>s well in a

des>to# browser.

"6e (abri>am su##ort

#ersonnel !an use t6e

site to tra!> alerts and

ser9i!e ti!>ets.

Af !ourse8 man of t6e

su##ort #ersonnel are

in t6e 4eld and using

#6ones and tablets to

!onne!t8 and t6e

des>to# 9iew isn3t

2'



o#timi/ed for t6ose

users in t6e 4eld.). ea9e +nternet ;7#lorer

running.$. A#en t6e Solution

E?ploe window.. Eo to t6e ie,s\S+aed

folder in t6e(abri>am(iber.Web

#roe!t... Point out 6ow

=La)out4cs+tml and

=La)out4(obile4cs+tml

bot6 e7ist 6ere.

Ane of t6e new features

in %V5 ) is a feature

t6at lets ou o9erride

t6e 9iew to render

based on t6e browser

ma>ing t6e reKuest.

"6is wor>s for !ontent

9iews8 laout 9iews8

and #artial 9iews8 too

<des!ribe t6e #ur#ose

of a aout 9iew if t6e

audien!e is new to

%V5=.

C. Open t6e


9iew.

B default8 %V5 ) will

sele!t a .%obile 9iew if

t6e browser is a mobile

browser <+; mobile or

Safari mobile8 for

e7am#le=.

2)



G. Swit!6 ba!> to +; and

o#en t6e IE Develope

*ools <F#!=

+f we want to see w6at

t6is 9iew loo>s li>e

t6ere are a few

diFerent o#tions8 but

using +; de9elo#er tools

we !an ma>e t6e

des>to# 9ersion of +;

a##ear as if it is t6emobile 9ersion of +; and

6a9e %V5 ) ser9e t6e

mobile 9iew to our

des>to# browser.

10.Eo to *ools - C+an2euse a2ent stin2 -

IE 1o Windo,s P+one

.

+; de9elo#er tools willlet me !6ange t6e user

agent string it sends to

a web ser9er. +t !an

a##ear as (irefo78

Eoogle 56rome8 or + !an

e9en set u# a user

agent string to mat!6 +;

G for Windows P6one.

2$



11.Eo ba!> to t6e IE instan!e

running (abri>am (iber.12.Re1es+ t6e browser.1'.ResiGe t6e browser to

a##ro7imatel '007)00.

We !an now see w6at

t6e a##li!ation will loo>

li>e on a mobile

browser.

sing t6e mobile 9iew

we !an la out t6e

s!reen in a !om#leteldiFerent wa and bring

im#ortant t6ings

<das6board8 ti!>ets= to

t6e to# so t6e a## is

easier to na9igate on a

mobile de9i!e.

Note we didn3t 6a9e to

!6ange an !ontrollers8models8 or business

!ode. We sim#l added

9iews wit6 .mobile in

t6e name to o9erride

t6e a!tion3s sele!ted

9iew.

1).Point out t6e Ina9J menu

in t6e a##.

Af !ourse mobile de9i!e

are often !onstrained

on t6e amount of

s!reen real estate t6e

#ro9ide8 so it would be

ni!e if we >ee# ta>e t6e

na9igation lin>s and

!om#ress t6em into a

6ori/ontal widget.

2



1$.Return to t6e Solution

E?ploe window.1.Point out t6e 6Hue)

(obile s!ri#t in t6e

Scipts\(obile dire!tor.

(ortunatel8 we 6a9e

t6e Luer %obile

framewor> in our

s!ri#ts dire!tor.

Luer %obile !onsists

of a single .s 4le8 #lus

some images and astles6eet.

Luer %obile #ro9ides

widgets o#timi/ed for

t6e si/e and tou!6

intera!tion of a

smart#6one.1.Return to t6e

=La)out4(obile4cs+tml 4le.1C.o!ate t6e na9

element near t6e to# of

t6e 9iew.

Ane of t6e widgets

#ro9ided b Luer%obile is a Ina9barJ

widget t6at !olla#ses a

na9igational menu into

a 6ori/ontal stri# of

buttons.1G.*dd data0

oleJnavbaJ to t6e

na9 element20.Sa9e t6e .%obile 9iew.

%an of t6e Luer

%obile widgets are

#rogrammable t6roug6

data-role attributes.

Data Idas6J attributes

are #art of t6e ,"%$

s#e!i4!ations and gi9es

us an e7tensibilit 6oo>

into ,"% mar>u#.

Luer %obile loo>s for

!ertain data das6

2



attributes8 li>e data

das6 role8 and !reates

mobile friendl widgets

using t6e e7isting

mar>u#.21.Return to IE and e1es+. ou !an see t6e eFe!ts

of a na9bar. * ni!e

!om#a!t na9igationarea for our 6eader.

22.Return to Solution

E?ploe and s6ow t6e

!ontent dire!tor.2'.,ig6lig6t t6e 6Hue)

mobile css 4le in t6e

Content\mobile

dire!tor.

Do ou not li>e t6e

!olors Luer %obile

in!ludes a t6eme

framewor>

im#lemented in 5SS so

ou !an o9erride an of

t6e !olors or stling ou

see.

"6ere are also built-in!olor swat!6es ou !an

a##l to an element or

to a #age.

2).Return to

=La)out4(obile4cs+tml2$.Point out w6ere 6Hue)

(obile stle s6eet and

s!ri#t 4les are in!luded

ust to be !lear – t6e

mobile 9ersion of our

9iew in!ludes t6e

stles6eet and s!ri#t

4le for Luer mobile.

2C



wit6 lin> and s!ri#t tags.

"6ese aren3t in!luded

for a browser ust

be!ause t6e are in a

dire!tor wit6 ImobileJ

in t6e name – we

in!lude t6em using t6e

laout 9iew.

"6e stles6eet is

#ro9iding t6e basi!

laout and !olors for

elements li>e our

na9bar.2.Point out t6e data0

olepa2e and data0

ole+eade elements.

We !an also see

additional data-roles to

!reate a Luer %obile#age and 6eader.

"6e 6eader #i!>s u#

default !olors from t6e

Luer %obile !ss 4le

we ust saw.

We !an o9erride t6e

5SS wit6 our own stles

Q2.*dd data0t+emeJbJ to

t6e +eade.2C.Sa9e t6e .%obile 9iew.

Q or we !an #i!> from a

diFerent t6eme

#ro9ided b t6e Luer

%obile stle s6eet.

"6emes are also

sele!ted using data

das6 attributes.

2G



2G.Return to IE and re1es+4 Now ou !an see t6e

im#a!t of t6eme IBJ.

"6e ot6er default

t6emes are I*J8 J5J8

IDJ8 and I;J.

'0.A#en t6e IE develope

tools <F#!=.

Now t6at we39e seen

t6at Luer %obile

wor>s well wit6 t6e

9iew-swit!6ing featuresof *SP.N;" %V5 )8 and

we39e o#timi/ed t6e

laout of t6e

a##li!ation8 let3s also

ta>e a loo> at 6ow we

!an o#timi/e t6e #age

load time and deli9er

t6e s!ri#t and stle

s6eets in an eT!ientmanner.

'0



'1.Eo to t6e Cac+e menu8

sele!t 7l,a)s e1es+

1om Seve.

"o better measure t6e

load times and networ>

traT!8 +3m going to

!lear t6e browser !a!6e

and simulate a user

browsing to t6e site for

t6e 4rst time.

'2.Eo to t6e /et,o3 tab of

t6e de9elo#er tools.''.5li!> t6e IStat

Captuin2J button8 t6e

button !a#tion s6ould

!6ange to ISto#5a#tioningJ.

We are going to !a#ture

networ> traT! between

t6e browser and web

ser9er to see 6ow man

downloads are reKuired

to load t6e #age8 and

also t6e si/e of t6e

resour!es being

downloaded.

'1



').Return to IE and e1es+

t6e browser.'$.5a#tured information

s6ould a##ear in t6e

De9elo#er "ools'.,ig6lig6t t6e 4rst 5SS

download <and si/e= and

t6e 4rst two .s 4ledownloads <and t6e si/e=

5urrentl we are

ser9ing un-mini4ed

s!ri#ts and 5SS 4les.

"6e t6ree 4les reKuire

t6ree downloads and

total o9er U of a

megabte. "6is !ould

reKuire signi4!ant timefor a de9i!e on a mobile

networ>.

'.,it t6e Clea button int6e de9elo#er tools.

et3s !lear out t6eresults8 ma>e some

o#timi/ations8 and

measure t6e new

results.

'2



'C.Return to Visual Studio.'G.+n t6e Solution ;7#lorer

window8 o#en Bundles.!s

from t6e *##HStart

dire!tor.

W6en t6is a##li!ation

starts8 t6ere is !ode

inside t6e

*##li!ationHStart e9ent

to register s!ri#t and

stle bundles.

* bundle is a !olle!tionof one or more stle or

s!ri#t 4les.

We !all t6em bundles

be!ause Visual Studio

!an !on!atenate <or

bundle= multi#le 4les

into a single download8

and t6is !an de!reaset6e load time for a

#age.

)0.+nside of Bundles.!s8 #oint

out t6e RegisterBundles

met6od.

,ere ou !an see t6e

!ode to !reate two

diFerent t#es of

bundles.

"6e 4rst bundle is a

stle bundle for t6e

Luer %obile stle

s6eet. "6e 4rst

#arameter is t6e 9irtual

#at6 we !an use to

rea!6 t6is bundle8 so a

''



reKuest to t6at R will

gi9e us t6e stles6eet

!ontent.

Noti!e 6ow we use t6e

+n!lude met6od to

s#e!if 4les for t6e

bundle. ou !an gi9e+n!lude a s#e!i4! 4le

name8 or ou !an use

wild!ards8 too. Wit6

wild!ards we !an

u#date t6e stles6eet

from Kuer.mobile-1.1

to Kuer.mobile-1.2 or

some 6ig6er 9ersion

wit6out !6anging t6e5: !ode 6ere.

ou mig6t wonder w6

we !reate a bundle if

t6e bundle onl

in!ludes a single 4le

inside. "6at3s be!ause

in addition to bundling8

t6e runtime !an also

minif t6e !ontent8w6i!6 stri#s out

unne!essar !6ara!ters

to ma>e for t6e

smallest #ossible

download.

"6e se!ond bundle is a

s!ri#t bundle for two

')



4le – Luer and Luer

mobile.)1.Return to t6e


9iew.)2.Eo to ine 11

,ere in t6e laout 9iew

we3ll render t6e

registered bundles

using t6e Stles and

S!ri#ts 6el#ers.

)'.Replace t6e stles6eetlin> wit6 a !all to

Stles.Render and #ass

I@5ontent@mobile@!ssJ as

a #arameter.

W6at +3ll do is re#la!et6e lin> to a s#e!i4! 4le

in t6e 5ontent@%obile

dire!tor wit6 t6e

9irtual #at6 registered

for t6e stle bundle.KK4 Replace t6e s!ri#t

tags wit6 a !all to

S!ri#ts.Render8 #assing

I@S!ri#ts@mobile@sJ as a

#arameter.K;4 Save t+e vie,

*nd +3ll re#la!e t6e two

s!ri#t referen!es wit6 a

single !all to

S!ri#ts.Render wit6 t6e

9irtual #at6 registered

for t6e s!ri#ts we need.K.4 Return to +nternet

;7#lorer and refres6 <F;=.K4 Rig6t-!li!> +nternet

;7#lorer and sele!t IView

Sour!eJKB4 Point out t6e s!ri#t

and stle tags.

et3s refres6 t6e 9iew of

our a##li!ation8 and

now loo> at t6e mar>u#

t6e browser re!ei9ed.

W6at ou3ll noti!e is

t6at t6e a##li!ation

rendered essentiallw6at we 6ad before –

indi9idual s!ri#t tags for

ea!6 s!ri#t 4le8 and a

lin> to t6e stle s6eet.

"6is is be!ause t6e

a##li!ation is running in

debug mode8 and in

'$



debug mode ou mig6t

want to debug some of

our s!ri#ts or stle

s6eets8 and debugging

is easier to do w6en t6e

4les are not !ombined

toget6er and mini4ed.

et3s see w6at 6a##ens

if we swit!6 to release

mode8 6owe9er.)G.Return to Visual Studio

and o#en t6e oot le9el

,eb4con-2 4le.

We !an !6ange modes

using a ag in

web.!on4g.

'



$0.Eo to line 1G.$1.56ange t6e debug setting

to IfalseJ.$2.Sa9e t6e web.!on4g 4le.

+ ust need to !6ange

debug to false in t6e

!om#ilation settings for

t6e a##li!ation.

;4 Retun to

Intenet E?ploe4;K4 Re1es+ IE and

return to t6e de9elo#er

tools networ> !a#ture.

Now w6at we see is

t6at t6e 9iew rendered

t6e 9irtual #at6s to t6e

bundled and mini4ed

4les. We 6a9e one

fewer 4le to download

be!ause bot6 s!ri#t4les !ame down in one

reKuest8 but more

im#ortantl we39e !ut

t6e number of btes b

more t6an U - it3s now

ust o9er 200B.

*lso noti!e t6e long

Kuer string 9alue – t6is

9alue will !6ange if anof t6e 4les in t6e

bundle !6ange and is

an eFe!ti9e wa to

a9oid !a!6e #roblems

and ma>e sure t6e

browser fet!6es t6e

latest !ontent.

'



"6ese bundling and

mini4!ation features

wor> wit6 our !ustom

s!ri#ts and 5SS as well

as framewor> s!ri#ts

and 5SS li>e Luer. We

!ould !ontinue adding

s!ri#t 4les to t6ebundle to #ut t6e

Luer 9alidation

s!ri#ts into t6e same

download.

'C



Web Demo 0 isual Studio !"#! FeatuesDemo S!reen Ste#s S!ri#t

1. Before starting into t6is

demo8 !lose an instan!es

of +; t6at ou mig6t 6a9erunning wit6 t6e +; %obile

user agent string.2. A#en t6e

Fabi3am4CallCente4sl

n solution in Visual Studio

20128 if ou don3t alread

6a9e it o#en.

et3s see t6e new

features in Visual Studio

2012.

'G



'. Open =La)out4cs+tml

from t6e ie,s>S+aed

folder.

(irst8 let3s o#en u# t6e

Haout 9iew for t6is

a##li!ation w6i!6

!ontrols t6e basi!

laout and stru!ture for

all t6e 9iews in t6e

a##li!ation.

). Point out t6e ,"%$

do!t#e.

Noti!e we are using an

,"% $ do!t#e in our

mar>u#. "6is allows us

to use all t6e new

,"%$ features and

elements8 li>e na98

6eader8 and footer.

)0



$. Point out t6e *a2et

Sc+ema 1o alidation

in t6e Visual Studio

toolbar.

Visual Studio 2012 is

aware of t6e do!t#e

we are using and 6as

set t6e 9alidation le9el

a##ro#riatel.

. ,ig6lig6t and delete t6e

do!t#e.

et3s see w6at 6a##ens

if + remo9e t6is do!t#e

Q

. "#e +tmlKs M *7$ Q and re#la!e it wit6

one of t6e ,"% )

do!t#es. +3ll do t6is

using a !ode sni##et –

6tml)s8 and 6itting t6e

tab >e.

C. i2+li2+t t6e !6ange in

t6e *a2et Sc+ema

alidation

Noti!e 6ow Visual

Studio immediatel

swit!6es to I9alidating

,"% ) stri!tJ.

)1



G. S!roll down to t6e

+eade element of

t6e 9iew and 6ig6lig6t t6e

!urrent validation

eos.

Noti!e 6ow t6e new

,"% $ elements are

no longer 9alid in t6e

mar>u# we 6a9e.

10."#e Ctl: t+ee times

to undo t6e do!t#e

swit!6

et3s go ba!> to ,"% $

sin!e t6at is w6at we

reall are using.

)2



11.S!roll down to t6e

content se!tion in t6e

Haout 9iew.

ou !an see we are

using man of t6e new

,"% $ elements and

t6e !ode sni##et + used

earlier – it is one of

man ,"% !ode

sni##ets in Visual

Studio.

"6ere are new sni##ets

in Visual Studio 2012

for man of t6e

features we use in

toda3s a##li!ations.

12."#e video : *7$ to

e7#and t6e 9ideo !ode

sni##et.

(or e7am#le8 + !an

easil !reate an ,"% $

9ideo element wit6 t6e

9ideo sni##et.

1'.Point to t6e generated

!ode.

"6e 9ideo sni##et gi9es

me t6e rig6t mar>u# to

!reate a 9ideo element

wit6 !ontrols for t6e

user to #la and #ause

t6e 9ideo.

+t also gi9es me t6e

mar>u# + need to

su##ort t6e t6ree

#o#ular formats for

)'



,"% $ 9ideo8 so it3s

6el#ing me ma>e sure +

!an rea!6 as man

users as #ossible.1)."#e 5"RMX two times to

remo9e t6e 9ideo element

!om#letel.

et3s remo9e t6e 9ideo

and ta>e a loo> at some

ot6er sni##ets.

1$.Wit6 t6e cuso

#ositioned inside t6e

content se!tion8 6it

C*RL:@< A to o#en t6e

sni##et list.

We3ll o#en u# t6e full

list of sni##ets b

6itting 5"RM t6en Y.

))



1.;7#and t6e *(L node

and 6ig6lig6t t6e number

of sni##ets inside.1.S!roll down t6e SVE

sni##ets.

We3ll go to ,"% and

6ere ou !an see t6ere

are sni##ets for

e9ert6ing from audio

to SVE.

1C.Sele!t sv2cicle to

e7#and t6e sni##et

;9en t6oug6 SVE 6as

been around for a

w6ile8 Visual Studio now

in!ludes some SVEsni##ets be!ause SVE

is one of t6ose

te!6nologies seeing

more use in toda3s

a##li!ations.1G.Press C*RL:F; to run

t6e a##li!ation wit6out

t6e debugger.

et3s see w6at t6is

loo>s li>e in t6e

browser.

)$



20.Point to t6e red !ir!le. Now we 6a9e a red

!ir!le !reated wit6 SVE.

We !ould write s!ri#t

against t6e element8

and animate it8 or stle

it. ou !an !reate

!6arts8 intera!ti9e

ma#s8 and all sorts offan! gra#6i!al features

using SVE.

21.Scoll do,n to w6ere t6e

te7t IDe, RobbinsJa##ears.

* red !ir!le ma not be

w6at we need in t6isa##li!ation rig6t now8

but now t6at we are

loo>ing at t6is #age8 +

see t6e name IDrew

RobbinsJ a##ears e9en

t6oug6 we 6a9en3t

logged into t6e site as

et.

"6is seems li>e a bugZ

+ wonder w6ere t6e

!ode is t6at !ontrols

t6is out#ut Q

)



22.5lose t6e browser2'.Return to Visua Studio.2).Remo9e all t6e SVE

mar>u#

Before we start loo>ing8

let3s get rid of t6e red

!ir!le.

2$.A#en t6e $o,se

c+oose dro# down to

s6ow t6e #resen!e of

Page +ns#e!tor.

*nd now let3s use a

new feature in Visual

Studio 2012 to 4nd t6e

sour!e of t6e bug.

W6en + dro# down t6e

Browser 56ooser in t6e

standard toolbar +3ll see

a list of t6e browsers +

6a9e installed8 t6is will

let me Kui!>l run t6ea##li!ation in +;8

56rome8 (irefo78 or

w6ate9er browsers +

6a9e installed.

+ also !an o#en t6e

a##li!ation in t6e #age

ins#e!tor.

)



!.4 Clic3 Pa2e

Inspecto!4 S+o, t6e

a##li!ation running in

Visual Studio

"6e Page +ns#e!tor is

li>e t6e +; De9 "ools.

"6e a##li!ation is li9e

and running from t6e

web ser9er 6ere in

Visual Studio.

!B4 +n t6e *(L tab of

t6e ins#e!tor8 s!roll down

and !li!> t6e +eadeelement.

!4 Note 6ow t6e

6eader element a##ears

sele!ted in t6e running

a##li!ation.

i>e t6e de9 tools8 + !an

!li!> on some ,"% and

see w6ere it isa##earing in t6e

browser.

)C



'0.+n t6e browser window8

s!roll down to w6ere t6e

IDrew RobbinsJ te7t

a##ears.

*nd li>e t6e de9 tools8 +

!an also !li!> I+ns#e!tJ

and t6en !li!> an area

in t6e browser to 6a9e

it s6ow me t6e ,"%

mar>u# t6at

!orres#onds to w6at +3m

seeing on t6e s!reen.

'1.5li!> Inspect8 t6en !li!>

IDrew RobbinsJ.

So + !an see t6at t6is

te7t a##ears inside an

628 but +3m not t6e

de9elo#er w6o wor>ed

on t6is a##li!ation and +

don3t >now w6ere it is

rendered. + !ould tr to

do a sear!6 in t6e 4les8

but +3m not sure if t6e

name is dnami!all

generated or 6ard

!oded or 6ow to loo>.(ortunatel8 t6ere is

somet6ing better.

)G



;;4 Clic3 on t6e Files

tab

W6ere t6e Page

+ns#e!tor reall s6ines

is 6ow it integrates into

our #roe!t. +f + !li!>

on t6e (iles tab8 + see a

list of t6e ser9er-side

4les t6at were used to

generate t6is #age. "6e HPro4le.!s6tml

loo>s li>e a good

!andidate for w6ere +

want to !6ange !ode

$0



;.4 ;7#and t6e rig6t-

6and editor #ane in t6e

Page +ns#e!tor.

But t6e Page +ns#e!tor

ta>es it e9en furt6er. +f

ou loo> at t6e rig6t-

6and #ane – ou !an

see t6at t6e

HPro4le.!s6tml 4le 6as

alread been o#ened

and t6e #art of t6e*SP.N;" %V5 9iew t6at

generated t6is ,"% is

6ig6lig6tedZ

$.Delete t6e te7t IDrew

RobbinsJ from inside of

t6e +! tag inside of t6e

=Po-le4cs+tml 4le.

+f + start to !6ange t6e

!ode b deleting t6e

6ard!oded name – t6e

#age ins#e!tor #i!>s u#on t6at automati!all.

$1



$C."#e

IMUse4Identit)4/ameJ

between t6e 62 tags

So w6at + want 6ere is

to #rint out t6e

aut6enti!ated user3s

name8 w6i!6 + !an do

b !alling

ser.+dentit.Name

$G."#e Mi1 at t6e to# of t6e#age and t#e

NUse4Identit)4Is7ut+en

ticated0.Put a !url bra!e at t6e

end of t6e #age

*nd w6at + reall wantis t6is w6ole #ro4le

se!tion to onl a##ear

w6en a user is logged

on8 so +3m going to

surround t6e e7isting

4le wit6 an if statement

t6at will do ust t6at.

1.Refres6 t6e Page

+ns#e!tor 9iew

*nd after + sa9e and

refres6 t6e #age

ins#e!tor it

immediatel #i!>s u#

on t6e !6ange and

s6ows t6e !6anges.

$2

"6 f 6 6 4l



"6e fa!t t6at t6e #ro4le

se!tion is now 6idden

<be!ause +3m not logged

in !urrentl= reinfor!es

t6e fa!t t6at t6e #age

ins#e!tor is indeed li9e

2.S!roll down in t6e #age

ins#e!tor until ou !ansee t6e login area.

'.5li!> on t6e Use name

,"% – t6is will !ause t6e

!orre!t ser name and

Password to be entered

into t6e form).Clic3 Lo2 On to log into

t6e site

*nd to furt6er bring

6ome t6at #oint8 +3mgoing to go a6ead and

log into t6e site8 and

w6en + doQ

$'

$ S ll d i t6 "6 6 d



$.S!roll down in t6e #age so

ou are s6owing t6e

name under t6e Pro4le

se!tion

"6e #age !6anges and

ou !an see t6at t6e

#ro4le name isn3t 6ard-

!oded anmore.

$)

Cli 3 t6 li > it6 t6 N l t 6



.Clic3 t6e lin> wit6 t6e

Re1 of 7"#K#"

Now let me s6ow ou

6ow t6is fun!tionalit

!an be used for 5SS as

well as ,"%@*SP.N;"

$$

. S!roll down in t6e W6at + want a !6ange



.4 S!roll down in t6e

details #age until t6e ma#

is s6owing on t6e #age

W6at + want a !6ange

on t6is #age to ma>e

t6e ma# dnami!all

load dire!tions from

Bing ma#s based on t6e

te!63s !urrent lo!ation

to t6e !lient.

$

C Clic3 on t6e ima2e in t6e + !an use t6e Page



C.Clic3 on t6e ima2e in t6e

Pa2e Inspecto to bring

t6e editor into t6e

Details4cs+tml #age.

+ !an use t6e Page

+ns#e!tor to bring me to

t6e !ode t6at s6ows t6e

image

.4 Scoll down t6e

Details4cs+tml #age in

t6e editor until ou get to

t6e s!ri#t se!tion. Put

our !ursor on line C <on

t6e last line of t6e

s6ow%a# fun!tion=.

W6at +3m going to do is

use t6e R+ t6at 6as

been !reated to s6ow

t6e ma# to set t6e sr!

element on t6e image

$

" *)pe I9ar img O [ So +3m going to use



"4 *)pe 9ar img O [

<I onto t6at line

So + m going to use

Luer in t6is fun!tion

to get t6e image + want

to !6ange.

Noti!e t6e ri!6

+ntelliSense for Luer –

w6i!6 is su##orted

t6roug6out VisualStudio 20128 e9en if

ou 6a9en3t e7#li!itl

added Luer

referen!es into e9er

#age.

#4 (inis6 t6e line of

!ode b t#ing I'mapQ

and 6itting ente.

+3m going to use t6e

element3s id attribute

as m sele!tor to get

t6e Luer obe!t.

2.*fter t6e line of !ode

sele!ting t6e ma#8 #ress

5trlM M Y to bring u# t6e

sni##et menu.'.Eo to I% 5ode

Sni##etsJ.

).Sele!t I%a# +mage 5SS%ani#ulationJ

Before t6e ma# is

loading we want to use

a s#e!i4! stle named

IimgoadingJ. "6en

we3ll set t6e url of t6e

image8 and we3ll atta!6an e9ent 6andler for

t6e IreadJ e9ent of

t6e ma# image. W6en

t6e image is read we

!an !6ange t6e !lass of

t6e image to a diFerent

stle t6at will #resent

$C

t6e ma#



t6e ma#.$."6e !om#leted !ode

s6ould loo> li>e t6e !ode

on t6e rig6t in t6e image.

.5li!> t6e Debu2 menuand sele!t Stat ,it+out

Debu22in2

Now t6at +39e got m!ode added +3m going

to go a6ead and start

wit6out debugging to

get t6e real lo!ation

ser9i!es in +nternet

;7#lorer wor>ing.

$G

An!e t6e #age a##ears in +3m going to log in as



.An!e t6e #age a##ears in

t6e browser – !li!> on t6e

Use name te7t element

in t6e #age to 4ll out t6e

ser name and #assword

4elds.C.S!roll down and !li!> Lo2

In.

+ m going to log in as

(abri>am (iber3s en

San!6e/ again.

0

4 An!e t6e #age +3m going to t6en !li!>



4 An!e t6e #age

loads8 !li!> on t6e Re1

wit6 t6e number of

7"#K#";.

+ m going to t6en !li!>

into one of t6e detail

re!ords.

C0.Clic3 7llo, once in t6e

small #o#u# t6at a##ears

at t6e bottom of t6e #age.

An!e +3m in t6e detail

#age +; #o#s u# a small

dialog t6at as>s me if +

want t6is site to be able

to 4nd m lo!ation

be!ause t6e a9aS!ri#t

in t6is #age is using t6e

,"%$ Eeo-lo!ation

fun!tionalit8 so +3ll !li!>

I*llow on!eJ.

1

B#4 S!roll down in t6e Now + !an see t6e ma#



B#4 S!roll down in t6e

#age to see t6e ma#.

Now + !an see t6e ma#

a##ear – but it a##ears

in a wa t6at3s >ind of

arring – +3d li>e it to

transition in more

smoot6l.

2

B!4 Swit!6 ba!> to So +3m going to use t6e



B!4 Swit!6 ba!> to

Visual Studio 2012

<7L*:*7$.B4 +n t6e Solution

E?ploe window8 sear!6

for cssBK4 Clic3 on t6e

minimal=eset=!"#"4cs

s 4le in t6e css folder in

t6e 5ontent folder of

t6e .Web #roe!t.

So + m going to use t6e

Solution ;7#lorer to 4nd

a 5SS 4le + want to

modif and add t6ese

two new !lasses inside.

'

C$."#e in a new !lass (irst +3ll #ut in t6e



#

sele!tor in t6e !ss 4le <it

doesn3t matter w6ere= for

imgoading.C.Set t6e o#a!it #ro#ert

9alue to .2.

#

imgoading sele!tor

and set its o#a!it

#ro#ert to .2.

)

C."#e in a new sele!tor "6en +3ll add t6e



#

for .imgDoneoading.CC.+nside of t6e sele!tor t#e

tansCG.Pi!> tansition from t6e

list and 6it tab twi!e.

sele!tor for t6e

imgDoneoading

#ro#ert and t6en use

one of t6e new !ss'

sni##ets to #ut in a

transition #ro#ert.

Noti!e t6at it #uts int6e 9endor s#e!i4!

e7tensions for transition

<sin!e not all t6e

browsers su##ort t6e

5SS' 9ersion et=.

G0."#e o#a!it <tab= 2s <tab=

ease-in-out <;S5=.G1.Sa9e t6e 4le <C*RL:S.

"6is is a reall great

feature t6at 6el#s me

to a9oid 6a9ing to

ret#e t6e same 9alue

o9er and o9er.

$

G2.*"M"*B ba!> to +nternet +f + go ba!> to t6e #age



;7#lorer and 6it refres6 to

s6ow t6e transition

6a##ening.

g # g

and refres6 – + !an see

t6e image transition

into 9iew more

smoot6l.



Web Demo K0 Web 7PI & *(L ;Demo S!reen Ste#s S!ri#t

1. A#en t6e

Fabi3am4P+ones4Web4

sln solution in Visual

Studio 2012.

Now we3ll loo> at an

a##li!ation built wit6

,"% $8 *SP.N;" %V5

and t6e Web*P+. "6is

a##li!ation is a

storefront for selling

Windows P6ones and

uses t6e Web*P+ from

Luer to ma>e

asn!6ronous u#dates

to a #age.

2. %a>e sure t6e Browser

56ooser is set to +nternet

;7#lorer.

'. Press Ctl:F; to run t6e et3s laun!6 t6e



a##li!ation wit6out

debugging.

a##li!ation and ta>e a

loo>.

). Clic3 on t6e and

smbols to rotate images

in t6e #6one galler.

An t6e o#ening #age of

t6e a##li!ation we 6a9e

a !arousel of #6one

images.

+ !an !li!> 6ere on t6e

#age to !!le t6roug6 a

number of #6one

images.

C

;4 Clic3 on t6e i# image to + !an also i# around a



!6ange between #6one

#i!tures and #6one

s#e!i4!ations.

#i!ture to see t6e a

detailed des!ri#tion of

ea!6 #6one in t6e

galler.

"6e i# eFe!t is

a!6ie9ed using a 5SS 'transformation8 we !an

ta>e a #ee> at t6e

!ode.

.4 Retun to isual Studio4 Open

2eneal=st)les4css from

t6e 5ontent dire!tor.

"6e stle for t6e i#

eFe!t is in a 5SS 4le

6ere in t6e 5ontent

dire!tor

G

B4 o to t6e 41ace stle on ou !an see 6ere in t6e



line 11' fa!e stle t6at we are

de4ning a transition

using t6e diFerent

9endor #re47es.

"6e transition is saing

to animate all #ro#ert!6anges for a duration

of U se!ond. Now8

w6en a #ro#ert 9alue

!6anges8 li>e if we were

to set t6e widt6 of t6e

element using

a9aS!ri#t8 t6e !6ange

doesn3t 6a##en

immediatel but t6e

browser will ma>e t6e!6ange o9er time using

linear inter#olation.4 Scoll down to t6e .bac3

stle on line 1'0.

*nd 6ere we !an see a

ba!> stle8 t6is stle is

a##lied b a9aS!ri#t

w6en + !li!> on i!on to

i# an image8 ou !an

see t6e stle a##lies a

transform around t6e a7is of 1C0 degrees.

5ombining t6is

transform wit6 t6e

transition stle we ust

loo>ed at will #rodu!e

t6e i##ing eFe!t.

0

#"4 Return to +; and We also 6a9e some



t6e P6one a##li!ation.##4 Clic3 on t6e

videos o#tion.#!4 S6ow t6e running

9ideo.

9ideo in t6e a##li!ation

using an ,"% $ 9ideo

element. "6at means

be6ind t6e s!enes t6ere

are t6ree diFerent

9ideo formats a9ailable8

%P)8 Web%8 and Agg8and t6is allows t6e site

to wor> on 9arious

browsers on diFerent

#latforms.

1'.5li!> on t6e bu) o#tion. We also 6a9e a #la!e to

bu #6ones8 and also

!om#are #6ones.

1

1).5li!> on I$u) it no,J

li >

+ !an !li!> on t6e bu

b d 6



lin>s.1$.S6ow t6e u#dated

s6o##ing !art.

buttons8 and t6e

a##li!ation will

immediatel u#date m

s6o##ing !art.

W6at3s 6a##ening on

t6is #age is t6at w6en +!li!> on t6e bu button8

t6ere is some a9aS!ri#t

!ode t6at will !all ba!>

to t6e ser9er to let t6e

a##li!ation >now +3m

adding anot6er #6one

to t6e s6o##ing !art8

and t6e ser9er

res#onds wit6 t6e

!urrent !ontents of t6es6o##ing !art8 w6i!6

t6e a##li!ation uses to

u#date t6e s!reen. "6is

is all done using Luer8

some !lient-side

tem#lates8 and a new

feature for *SP.N;" –

t6e Web*P+.

2

1.,ig6lig6t t6e #6one dro#

t t

"o understand t6e

W b*P+ l t l > t



targets.1.Drag a #6one into one of

t6e dro# targets.

Web*P+8 let us loo> at

im#lementing a feature

t6at is not !om#lete.

"6ere is an area on t6e

#age w6ere a !ustomer

!an drag two #6ones to!om#are t6eir

s#e!i4!ations.

5urrentl + !an drag a

#6one into t6is area8

but not6ing 6a##ens

w6en + dro# t6e #6one8

be!ause t6e ser9er-side

logi! isn3t im#lemented

et.1C.Return to Visual Studio1G.A#en t6e

CatContolle.!s 4le

from t6e 5ontrollers

folder.

Now8 t6e s6o##ing !art

we saw wor>ing

!orre!tl is

im#lemented in t6e

5art5ontroller 4le. + ust

want to #oint out a few

features 6ere.

'

20.Point out t6e !ontroller

b l

(irst8 noti!e t6e !art

t ll d i f



base !lass.21.Point out t6e !ontroller

a!tions.

!ontroller deri9es from

*#i5ontroller – t6is is

t6e base !ontroller for

t6e Web*#i.

Noti!e also t6e a!tions

mat!6 t6e same namesas ,""P met6ods –

E;"8 PAS"8 and

D;;";. "6e Web*#i

routing rules are a little

diFerent from regular

*SP.N;" %V5 !ontroller

routing rules8 be!ause

t6e Web*#i uses t6e

,""P met6od in an

in!oming reKuest w6ensele!ting t6e !ontroller

a!tion to in9o>e. *n

,""P E;" reKuest will

end u# in a Eet a!tion8

w6ile a D;;"; reKuest

ma#s to t6e Delete

a!tion.

)

22.A#en t6e

P6one5ontroller !s 4le

"o !om#lete t6e drag

and dro# fun!tionalit



P6one5ontroller.!s 4le

from t6e 5ontrollers

folder.

and dro# fun!tionalit8

we 6a9e to loo> at t6e

P6one !ontroller.

2'.Eo to line 1 and

6ig6lig6t t6e

Eet*llP6ones a!tion.

We alread 6a9e an

a!tion t6at will res#ond

to an ,""P E;" reKuest

– t6is one will return all

t6e #6ones in t6e

database8 but none of

t6e #6one details. Note

t6e routing onl loo>s

at t6e start of t6e

met6od name – t6e

met6od starts wit6 t6e

word Eet8 t6erefore aE;" reKuest will arri9e

6ere.

W6en a user dro#s a

#6one in t6e !om#are

area8 t6e s!ri#t 6andler

will send an ,""P E;"

$

reKuest along wit6 t6e

+D of t6e #6one it needs



+D of t6e #6one it needs

details for. "6is is t6e

message we need to

6andle.2).nderneat6 Eet*llP6ones

a!tion8 #ress

5trlMY85trlM to insert a

!ode sni##et.2$.Sele!t t6e IEet P6one

(eaturesJ !ode sni##et.

+ 6a9e a !ode sni##et

wit6 t6e !ode we need.

2.,ig6lig6t t6e new !ode.2.$uild t6e solution <Build

- Build Solution=.

"6is a!tion also starts

wit6 t6e word Eet8 but

t6e Web*#i routing will

be able to tell t6ediFeren!e between an

,""P E;" reKuest for

all #6ones8 and an ,""P

E;" reKuest wit6 an +D

9alue in t6e reKuest. +t

will send t6e reKuest

wit6 an +D 9alue to t6is

met6od.

Noti!e also t6e returnt#es of t6ese met6ods.

"6ese are not

*!tionResult obe!ts li>e

t6e are in regular

*SP.N;" %V5

!ontrollers8 but sim#le

5: t#es. W6at will t6is

loo> li>e on t6e !lient

Well fortunatel t6is is



Well8 fortunatel t6is is

eas to test wit6 a web

browser8 so let3s ta>e a

loo>.2C.Press Ctl:F; to run t6e

a##li!ation.2G.An!e t6e a##li!ation

starts8 add >api>p+one to

t6e end of t6e R.'0.W6en +; #rom#ts ou to

o#en a 4le8 !li!> Open.

et3s run t6e

a##li!ation wit6 our

!6anges a##lied.

+3m going to ma>e an

,""P E;" reKuest wit6

m browser t6at s6ould

arri9e at t6e #6one

!ontroller.

+t loo>s li>e we 6a9e a

res#onse in SAN

format – a9aS!ri#tAbe!t Notation – a

seriali/ation format t6at

is #erfe!t for a9aS!ri#t.

et3s tr to o#en it.

'1.+f Windows dis#las t6e

sele!tion #rom#t s6own

We3ll o#en t6is SAN

res#onse in Note#ad



sele!tion #rom#t s6own

6ere8 sele!t I*) an app

on t+is PCJ.'2.Sele!t IUse t+is app 1o

all 46son -lesJ.''.Sele!t /otepad

res#onse in Note#ad.

').Scoll t6roug6 t6e

res#onse to s6ow t6ediFerent #6one models

inside.'$.Point out t6e 4rst #6one

6as an Id value o1 #.

*ll of t6e #6ones t6e

store >nows about are6ere in SAN format

wit6 some 6ig6-le9el

details8 li>e t6e #ri!e.

"6e 4rst umina 6ere

6as an +D of 18 let3s see

if we !an get more

details about t6is #6one

wit6 t6e Web*P+ !ode

we ust wrote.

C

.4 Return to +nternet

;7#lorer

*ll we need to do is

#la!e t6e +D 9alue in



;7#lorer4 *##end

>api>p+one># to t6e

6ome R.B4 W6en #rom#ted to

o#en t6e SAN 4le8 !li!>

Open.

#la!e t6e +D 9alue in

t6e reKuest8 an +D 9alue

of 18 and if ou are

familiar wit6 *SP.N;"

%V5 t6en ou3ll >now it

is eas to setu# t6e

routing rules to treat

t6is 9alue 1 as an +D

#arameter.

W6en we send t6e

reKuest8 we get anot6er

SAN res#onse. + also

want to #oint out t6at

t6e Web*P+ !ould also

send Y% if we

reKuested Y% wit6 an*!!e#t 6eader. ou !an

also #lug in our own

formatters to return t6e

data in an format ou

li>e.'G.S6ow t6e SAN result in

Note#ad

Now we !an see all of

t6e #6one details in t6is

res#onse.

et3s see it at wor> in

t6e a##li!ation now.

G

)0.Return to +nternet

;7#lorer

We3ll go to t6e s6o##ing

area



;7#lorer)1.5li!> t6e bu) i!on.

area.

)2.5li!> and drag an #6one

into one of t6e dro#

targets.

We3ll dro# a #6one into

t6e !om#arison area.

C0

)'.,ig6lig6t t6e details t6at

a##ear.

*nd now we !an see

#6one details a##ear in



a##ear.)).Pull a 2nd #6one into t6e

!om#are area.

#6one details a##ear in

t6e area underneat6

t6e #6one.

"6is s!enario is a

#erfe!t 4t for t6e

Web*P+ – we need a

Kui!> and lig6tweig6t

res#onse to some user

intera!tion wit6 t6e

#age. So we 6a9e

a9aS!ri#t !all t6e

Web*P+8 and build some

+ dnami!all using

t6e SAN res#onse.

et3s loo> at t6e s!ri#tto !all t6e Web*P+.

)$.Return to Visual Studio).A#en P+oneStoe46s

from t6e S!ri#ts dire!tor.

"6e s!ri#t 6andling t6is

be6a9ior is in t6e

P6oneStore.s 4le.

C1

).Eo to t6e dro#P6one

fun!tion on line )'.

"6e >e 6ere is t6e

Luer get met6od. *ll



fun!tion on line )'.)C.,ig6lig6t t6e [.get !all

inside.

Luer get met6od. *ll

we need to do is build

t6e !orre!t R to t6e

Web*P+8 wit6 t6e #6one

+D in!luded8 and t6e get

met6od will issue t6e

E;" reKuest we need to

retrie9e t6e #6one

details.

W6en t6e !all is

su!!essful8 ou !an

gi9e t6e get met6od a

!allba!> to #ro!ess t6e

res#onse. "6e data

#arameter will !ontain

a a9aS!ri#t obe!t t6at Luer builds b de-

seriali/ing t6e SAN. *t

t6is #oint ou !an build

,"% dnami!all using

!lient-side tem#lates8 or

using !ustom !ode.)G.Summari/e Web*P+ is going to be a

great 4t for single #age

a##li!ations and

a##li!ations t6at use a

lot of s!ri#t to #ro!ess

user reKuests. Web*P+

gi9es ou a lig6tweig6t

web ser9i!e ou !an

!all from a9aS!ri#t

!ode8 from mobile

de9i!es8 and e9en from

C2

des>to# a##li!ations or

ot6er ser9i!es. "6e



Web*P+8 li>e *SP.N;"8 is

6ig6l !on4gurable and

e7tensible.

C'



Web Demo ; 8 7Gue Web Site Deplo)mentDemo S!reen Ste#s S!ri#t

1. +f not alread o#ened8

o#en t6e

(abri>am.P6ones.Web

solution in Visual Studio.

Now our #6one store is

read to de#lo to t6e

!loud.

2. A#en +nternet ;7#lorer

and go to6tt#?@@www.windowsa/ure.!o

m

"6e 4rst t6ing +3ll do is

go to t6e Windows

*/ure web site.

'. 5li!> on t6e Portal lin> in

t6e u##er rig6t.

Windows */ure

in!ludes a #ortal

w6ere + !an manage

all of m web sites8

databases8 and ot6er

ser9i!es.

+f ou don3t 6a9e a

Windows */ure

a!!ount8 noti!e t6ere

C)

is a free trial ou !an

use to e7#lore t6e

http://www.windowsazure.com/






#

features.). ogin to t6e #ortal using

our Windows i9e +D

+3ll need to login to t6e

#ortal using m

Windows i9e +D

$. Point out some of t6e

6ig6-le9el features of t6e

#ortal.

(rom t6e #ortal 6ome

s!reen 6ere + !an see

all of t6e */ure

features +3m using. +

!ould drill into anone

of t6ese to see a

das6board wit6

o#erational statisti!s8

or do some

!on4guration.

,owe9er8 w6at we

need toda is to !reate

a new web site and

new SL database for

our #6one store.

C$

. 5li!> on t6e N;W i!on in

t6e bottom left of t6e

et3s go to t6e new

lin> and !li!>.



s!reen.

. nder N;W8 !li!> on t6e

W;B S+"; lin>.

We want to !reate a

new web site in t6e

!loud.

C

C. +n t6e se!tion t6at o#ens8

!li!> 5R;*"; W+",

W6en + !reate a new

web site + !an



D*"*B*S; automati!all !reate

and asso!iate a SL

Ser9er database

instan!e for m web

site to use.

G. +n t6e dialog t6at a##ears8

enter a uniKue name for

our site in t6e R

te7tbo7 <for t6e remainderof t6is demo8 we3ll be

using fabri>am#6ones8

but ou3ll need our own8

uniKue name=.10.nder D*"*B*S;8 ensure

I5reate a new SL

databaseJ is sele!ted.11.nder R;E+AN8 ou !an

sele!t t6e region !losest

to our #6si!al lo!ation.

W6en we !reate a new

website we need to

gi9e */ure a R to

use8 b default t6isR we be at

a/urewebsites.net8 but

ou !an also register

our own domain

name to #oint to our

site.

We also want to !reate

wit6 a new SL

database8 and we !an

run all of t6is in our

lo!al data !enter.

C

12.+n ste# 28 re9iew t6e

database settings <ou

During setu# we also

6a9e t6e o#tion of



!an use t6e default

settings=. +f ou alread

6a9e an */ure SL Ser9er

setu#8 ou !an !6ose

Ise ;7isting Ser9erJ in

t6e S;RV;R sele!tion bo7.

"6e ne7t se!tion assumes

ou need to sele!t a new

SL Database ser9er.

!ustomi/ing our

database settings8

in!luding t6e !ollation

of t6e database8 t6e

ma7imum si/e8 and

basi!all we !an sele!t

t6e features we need

based on our business

needs and #ri!e.

1'.+f !reating a new ser9er8

enter a AE+N N*%; <we3ll

use fabri>amdbuser=.1).;nter a AE+N P*SSWARD

<we3ll use (abri>am\Z=

and !on4rm t6e

#assword.1$.;nsure I*llow Windows

*/ure ser9i!es to a!!ess

t6e ser9erJ is !6e!>ed.Note? if ou are using an

e7isting database ser9er8

t6is is t6e s!reen w6ere

ou enter our e7isting

login and #assword.

We3ll need to !reate

some !redentials for

our database8

in!luding a login name

and #assword.

*/ure will enfor!e

some #assword

!om#le7it 9alidations8

so we3ll need a

#assword wit6 letters8numbers8 and s#e!ial

!6ara!ters.

CC

1.Wait for */ure to #ro9ision

t6e ser9i!es

Now we39e gi9en

*/ure e9ert6ing it



needs to #ro9ision our

ser9i!es. "6e good

news is we !an alwas

!ome ba!> later and

!6ange an of t6ese

settings. +f we need

more memor or

storage !a#a!it8 t6e

#ortal ma>es t6ese

eas to add.1.*fter t6e web site starts

running8 !li!> on t6e web

site to go into t6e

das6board.

Aur web site is read8

let3s !li!> on t6e site to

manage t6e site.

CG

1C.,ig6lig6t t6e das6board

features.

Now we are on t6e

das6board for our web



site8 it is t6e

das6board t6at will

gi9e us an o9er9iew of

6ow mu!6 !#u time

our site is using8 and

6ow man reKuests

6a9e been #ro!essed

b t6e site.

Af !ourse8 we 6a9e not

#ro!essed an

reKuests et8 be!ause

we do not 6a9e t6e

site de#loed8 but t6at

will be eas.

1G.nder Kui!> glan!e8 !li!>Download #ublis6 #ro4le.

Windows */ure willautomati!all !reate a

#ublis6 #ro4le for me

t6at + !an download

and use from Visual

Studio. "6e #ublis6

#ro4le will gi9e me

e9ert6ing + need to

#us6 m site to t6e

!loud.

20.+f #rom#ted in +nternet

;7#lorer8 !li!> ISa9eJ

w6en #rom#ted to

download t6e #ublis6

We3ll sa9e t6e #ublis6

#ro4le as a 4le to dis>.

G0

#ro4le.21.Return to Visual Studio22 Rig6t !li!> on t6e

+nside of Visual Studio

i 6t li >



22.Rig6t-!li!> on t6e

(abri>am.P6ones.Web

#roe!t.2'.Sele!t Publis6Q from t6e

!onte7t menu.

we !an rig6t-!li!> on

our web site and tell

Visual Studio we want

to #ublis6 t6e web

site.

2).+n t6e Publis6 Web dialog8

!li!> t6e +m#ort button.2$.Browse to t6e #ublis6

#ro4le ou downloadedfrom t6e */ure #ortal.

2.5li!> Ne7t.

We !an im#ort t6e

#ublis6 #ro4le we

downloaded from

*/ure into t6e #ublis6

settings maintained b

Visual Studio. "6e

#ro4le will gi9e Visual

Studio t6e Rs and

#assword it needs to

get e9ert6ing

wor>ing.

G1

2.An t6e 5onne!tion tab8

re9iew t6e !onne!tion

tti 6

,ere are t6e

!onne!tion #arameters

Vi l St di i > d



settings – no !6anges are

reKuired.

Visual Studio #i!>ed u#

from t6e #ublis6ing

#ro4le.

G2

2C.An t6e Settings tab8

sele!t t6e dro#down

d P6 Db d l t

(or settings8 we will

allow t6e #ublis6

ti t dd t6



under P6oneDb and sele!t

t6e !onne!tion string t6at

a##ears.2G.Sele!t t6e *##l 5ode

(irst migrations <runs on

a##li!ation start=

!6e!>bo7.'0.5li!> Ne7t

o#eration to add t6e

rig6t database

!onne!tion string to

our web.!on4g 4le for

us. "6is !onne!tion

string was in t6e

#ublis6 #ro4le and it is

t6e !onne!tion string

for our database in t6e

!loud.

Sin!e we are using

;ntit (ramewor> $.0

in t6is #roe!t we !an

ta>e ad9antage of

;ntit (ramewor>migrations. "6ese

migrations will ta>e

!are of initiali/ing t6e

database s!6ema and

#o#ulating our

database wit6 t6e data

it reKuires.

G'

'1.5li!> Publis6 Now we are read to

#ublis6.



"6e #ublis6ing

o#eration !an ta>e a

little bit of time8 as it

will !o# all of m

4les8 assets8 in!luding

t6e s!ri#t 4les we

wor>ed on8 but also

t6e images and 9ideos8

#lus all of t6e

assemblies needed for

m site to fun!tion. We

!an wat!6 t6e

#rogress in Visual

Studio as t6e 4les are

#us6ed to t6e ser9er.

An!e t6is is !om#lete8

we3ll all be able to

laun!6 a browser and

go to t6e R we

!reated to wat!6 t6e

web site run.

W6ile t6is is running8

+3ll let ou >now t6at

Visual Studio will sa9e

t6e im#orted

#ublis6ing #ro4le and

t6e !6anges we made

so t6at w6en + ma>e

!6anges to t6e web

site to add new

G)

features or 47 a bug8 +

!an !li!> Publis6 again

and easil #us6 out a



and easil #us6 out a

new 9ersion of t6e site

to t6e !loud. *nd w6ile

t6e site is in t6e !loud

+ !an be sure all t6e

data is ba!>ed u# and

se!ure. + !an monitor

t6e store using t6e

Windows */ure #ortal

das6board8 and + !an

alwas add more

!a#a!it w6en t6e

store starts to be!ome

more #o#ular.'2.Wait for t6e #ublis6ing to

!om#lete.

Now our #ublis6

o#eration is !om#lete.

G$

''.Return to t6e */ure

#ortal.

et3s go ba!> to t6e

#ortal.



').S!roll down to t6e S+";

R lin> on t6e rig6t-6and

side.'$.5li!> on t6e lin> to t6e

site.

et3s go to t6e site.

G

'.S6ow t6e site running in

*/ure

*nd 6ere is our web

site in t6e !loudZ



et3s see if we !an use

t6e Web*P+ w6ile

running on */ure.

'.*##end @a#i@#6one to t6e

6ome #age R.'C.W6en t6e browser

#rom#ts ou to o#en t6e

res#onse8 !li!> A#en.

We3ll issue a E;"

reKuest to see all t6e

#6ones.

'G.S6ow t6e SAN res#onse

in Note#ad.

*nd now we >now t6e

Web*P+ wor>s well

wit6 Windows */ure8

too.

Vs 2012 Demo Script--Web General

Documents

Transcript of Vs 2012 Demo Script--Web General