Angular.js
•Download as ODP, PDF•
2 likes•370 views
A prenentation to show how to make applications on angular.js as well as serve on small talk servers such as SEASIDE.
Recommended
More Related Content
What's hot
What's hot (18)
Viewers also liked
Viewers also liked (17)
Similar to Angular.js
Similar to Angular.js (20)
Angular.js
- 1. HOW TO BUILD AND SERVE STATIC FILES IN ANGULAR.JS? LET’S LEARN IT…
- 2. What is ANGULAR.JS? AANNGGUULLAARRJJSS iiss aann aawweessoommee ffrraammeewwoorrkk ffoorr bbuuiillddiinngg rriicchh ssiinnggllee ppaaggee aapppplliiccaattiioonnss.. IInn tthhee ssiimmppllee ccaassee tthhiiss aalllloowwss aa wweellll--bbeehhaavveedd aapppplliiccaattiioonn ((oonnee wwhhiicchh iinntteerraaccttss oonnllyy wwiitthh AAnngguullaarrJJSS''ss AAPPII,, nnoott wwiitthh tthhee bbrroowwsseerr ddiirreeccttllyy)) ttoo rreennddeerr iittss ppaaggeess oonn tthhee sseerrvveerr,, ggeenneerraattiinngg aa ffuullll HHTTMMLL ppaaggee tthhaatt iiss rreeaaddaabbllee bbyy sseeaarrcchh eennggiinneess.. IItt aallssoo eennaabblleess mmoorree aaddvvaanncceedd uussee--ccaasseess ooff sshhaarriinngg ccooddee bbeettwweeeenn cclliieenntt aanndd sseerrvveerr,, ssuucchh aass rruunnnniinngg oonnllyy ppaarrttss ooff aann AAnngguullaarrJJSS aapppplliiccaattiioonn oonn tthhee sseerrvveerr ttoo pprroodduuccee aann RRSSSS ffeeeedd wwhhoossee ccoonntteenntt iiss rreennddeerreedd ffrroomm tthhee ssaammee tteemmppllaatteess aass tthhee ssiittee iittsseellff.. AAnngguullaarrJJSS--SSeerrvveerr iiss bbuuiilltt oonn jjssddoomm,, aann iimmpplleemmeennttaattiioonn ooff tthhee DDOOMM AAPPII ffoorr NNooddee,, aanndd aanngguullaarrccoonntteexxtt,, wwhhiicchh pprroovviiddeess aa lliigghhttwweeiigghhtt ccoonnttaaiinneerr iinn wwhhiicchh ttoo iinnssttaannttiiaattee yyoouurr AAnngguullaarrJJSS aapppplliiccaattiioonn.. 2
- 3. Get Started AA ssiimmppllee aapppplliiccaattiioonn ccaann bbee rruunn iinn AAnngguullaarrJJSS--SSeerrvveerr uussiinngg oonnllyy aa ssmmaallll aammoouunntt ooff NNooddeeJJSS aapppplliiccaattiioonn bboooottssttrraapp ccooddee,, uussiinngg eexxpprreessss:: 3 vvaarr aanngguullaarrsseerrvveerr == rreeqquuiirree((''aanngguullaarrjjss--sseerrvveerr''));; vvaarr eexxpprreessss == rreeqquuiirree((''eexxpprreessss''));; vvaarr eexxpprreessss == rreeqquuiirree((''ffss''));; //// TThhee mmaaiinn iinnddeexx..hhttmmll ffiillee ffoorr yyoouurr aapppplliiccaattiioonn,, tthhaatt yyoouu''dd nnoorrmmaallllyy sseerrvvee ttoo bbrroowwsseerrss ttoo ssttaarrtt tthhee aapppp.. //// TThhiiss sshhoouulldd hhaavvee aannyy ssccrriipptt ttaaggss ffoorr yyoouurr aapppplliiccaattiioonn rreemmoovveedd ffrroomm iitt,, aass tthheeyy wwiillll bbee aaddddeedd sseeppaarraatteellyy.. vvaarr tteemmppllaatteeFFiillee == ''iinnddeexx..hhttmmll'';; vvaarr tteemmppllaattee == ffss..rreeaaddFFiilleeSSyynncc((tteemmppllaatteeFFiillee));; //// DDiirreeccttoorryy ttoo sseerrvvee ssttaattiicc rreessoouurrcceess ffrroomm.. vvaarr ssttaattiiccDDiirr == ''ssttaattiicc'';; vvaarr aapppp == eexxpprreessss(());; vvaarr aanngguullaarrMMiiddddlleewwaarreess == aanngguullaarrsseerrvveerr..SSeerrvveerr(({{ tteemmppllaattee:: tteemmppllaattee,, //// SSccrriippttss tthhaatt sshhoouulldd bbee llooaaddeedd iinnttoo tthhee aanngguullaarrjjss ccoonntteexxtt oonn tthhee sseerrvveerr.. //// TThhiiss sshhoouulldd iinncclluuddee AAnngguullaarrJJSS iittsseellff aanndd aallll ooff tthhee ssoouurrccee ffiilleess rreeqquuiirreedd //// ttoo rreeggiisstteerr yyoouurr AAnngguullaarr mmoodduulleess,, bbuutt **nnoott** ccooddee ttoo bboooottssttrraapp tthhee //// aapppplliiccaattiioonn.. sseerrvveerrSSccrriippttss:: [[ ''aanngguullaarr..jjss'',, ''aanngguullaarr--rroouuttee..jjss'',, ''yyoouurraapppp..jjss'' ]],,
- 4. 4 // Scripts that should be loaded by the client bbrroowwsseerr ttoo rreennddeerr tthhee ppaaggee.. //// TThhiiss sshhoouulldd iinncclluuddee tthhee ssaammee sseett ooff ffiilleess ttoo llooaadd AAnngguullaarr iittsseellff aanndd //// yyoouurr AAnngguullaarr mmoodduulleess,, bbuutt sshhoouulldd aallssoo iinncclluuddee aaddddiittiioonnaall ccooddee tthhaatt //// ccaallllss iinnttoo aanngguullaarr..bboooottssttrraapp ttoo kkiicckk ooffff tthhee aapppplliiccaattiioonn.. //// UUnnlliikkee sseerrvveerrSSccrriippttss,, tthheessee aarree UURRLLss.. cclliieennttSSccrriippttss:: [[ ''//ssttaattiicc//aanngguullaarr..jjss'',, ''//ssttaattiicc//aanngguullaarr--rroouuttee..jjss'',, ''//ssttaattiicc//yyoouurraapppp..jjss'',, ''//ssttaattiicc//cclliieennttoonnllyy..jjss‘‘]],, //// AAnngguullaarr mmoodduulleess tthhaatt sshhoouulldd bbee uusseedd wwhheenn rruunnnniinngg AAnngguullaarrJJSS ccooddee oonn //// tthhee sseerrvveerr.. ''nngg'' iiss iinncclluuddeedd hheerree bbyy ddeeffaauulltt,, aalloonngg wwiitthh tthhee //// ssppeecciiaall AAnngguullaarrJJSS--SSeerrvveerr oovveerrrriiddeess ooff ''nngg''.. aanngguullaarrMMoodduulleess:: [[ ''yyoouurraapppp‘‘ ]] }}));; //// MMaakkee tthhee ssccrriippttss aanndd ootthheerr aasssseettss aavvaaiillaabbllee ttoo tthhee bbrroowwsseerr.. aapppp..uussee((''//ssttaattiicc'',, eexxpprreessss..ssttaattiicc((ssttaattiiccDDiirr))));; //// SSeerrvvee aallll ootthheerr UURRLLss bbyy rreennddeerriinngg tthhee AAnngguullaarr ppaaggee oonn tthhee sseerrvveerr.. aapppp..uussee((aanngguullaarrMMiiddddlleewwaarreess..hhttmmllGGeenneerraattoorr));;
- 5. Advance Usage S The AngularJS-Seerrvveerr ccoorree iinncclluuddeess aa ssiimmppllee mmiiddddlleewwaarree ffoorr rreennddeerriinngg ssnnaappsshhoottss ffrroomm aa NNooddeeJJSS aapppplliiccaattiioonn.. HHoowweevveerr,, iitt aallssoo pprroovviiddeess aann AAPPII ffoorr ccrreeaattiinngg ccuussttoomm iinntteeggrraattiioonnss bbeettwweeeenn nnoorrmmaall NNooddeeJJSS sseerrvveerr ccooddee aanndd AAnngguullaarrJJSS aapppplliiccaattiioonn ccooddee.. 5
- 6. Server Defined Routes 6 The HTML generated by the htmlGenerator are compatible with tthhee aalltteerrnnaattiivvee $$rroouuttee iimmpplleemmeennttaattiioonn aanngguullaarrjjss--ssddrr,, wwhhiicchh mmoovveess tthhee rroouuttee rreessoolluuttiioonn sstteeppss oonnttoo tthhee sseerrvveerr.. FFoorr aapppplliiccaattiioonnss uussiinngg tthhee rreessoollvvee pprrooppeerrttyy oonn rroouuttee ddeeffiinniittiioonnss,, tthhiiss ccaann iimmpprroovvee ppeerrffoorrmmaannccee bbyy rreettrriieevviinngg nneecceessssaarryy ddaattaa oonn tthhee sseerrvveerr bbeeffoorree rreettuurrnniinngg tthhee ppaaggee,, aalllloowwiinngg tthhee ppaaggee ttoo bbee rreennddeerreedd wwiitthh nnoo aaddddiittiioonnaall XXMMLLHHttttppRReeqquueesstt llooookkuuppss.. TToo uussee tthhiiss mmeecchhaanniissmm iitt iiss nneecceessssaarryy ttoo eexxppoossee aann ""SSDDRR AAPPII"" eennddppooiinntt oonn tthhee sseerrvveerr:: aapppp..uussee((''//::'',, aanngguullaarrMMiiddddlleewwaarreess..ssddrrAAppii));; WWiitthh tthhiiss iinn ppllaaccee,, tthhee aapppp sshhoouulldd tthheenn bbee ccoonnffiigguurreedd ttoo llooaadd tthhee aanngguullaarrjjss--ssddrr ccooddee oonn tthhee cclliieenntt ((ii..ee.. aadddd iitt ttoo ttee cclliieennttSSccrriippttss lliisstt iinn tthhee AAnngguullaarrJJSS--SSeerrvveerr iinnssttaannttiiaattiioonn)) aanndd tthheenn uussee tthhee ssddrr mmoodduullee iinn ppllaaccee ooff nnggRRoouuttee..
- 7. AngularJS-enabled Middleware 7 One way to implement a custom integration is to "wrap" a middleware with an Angular context.This means that AngularJS-server wwiillll iinnssttaannttiiaattee tthhee AAnngguullaarrJJSS aapppplliiccaattiioonn ffoorr eeaacchh rreeqquueesstt aanndd ppaassss aann iinnjjeeccttoorr ffoorr iitt aass aann aaddddiittiioonnaall ppaarraammeetteerr ttoo tthhee mmiiddddlleewwaarree.. FFoorr ((ccoonnttrriivveedd)) eexxaammppllee:: aapppp..uussee(( aanngguullaarrMMiiddddlleewwaarreess..wwrraappMMiiddddlleewwaarreeWWiitthhAAnngguullaarr(( ffuunnccttiioonn ((rreeqq,, rreess,, nneexxtt,, iinnjjeeccttoorr)) {{ vvaarr $$rroooottSSccooppee == iinnjjeeccttoorr..ggeett((''$$rroooottSSccooppee''));; vvaarr $$iinntteerrppoollaattee == iinnjjeeccttoorr..ggeett((''$$iinntteerrppoollaattee''));; $$rroooottSSccooppee..nnaammee == ''wwoorrlldd'';; vvaarr ggrreeeettiinngg == $$iinntteerrppoollaattee((''HHeelllloo,, {{{{nnaammee}}}}''))(($$rroooottSSccooppee));; rreess..eenndd((ggrreeeettiinngg));; }} )) ));;
- 8. Run Arbitrary Code Against an Angular App The lowest-level interaction with AngularJS-Server is ttoo ssiimmppllyy oobbttaaiinn aann iinnjjeeccttoorr aanndd ddoo ttoo iitt wwhhaatt yyoouu wwiillll.. TThhiiss iiss aaccccoommpplliisshheedd aass ffoolllloowwss:: aanngguullaarrsseerrvveerr..rruunnIInnCCoonntteexxtt(( ffuunnccttiioonn ((iinnjjeeccttoorr)) {{ //// ...... wwhhaatteevveerr yyoouu wwaanntt }} ));; OOnnee ccaann rreeqquueesstt tthhee $$rroouutteePPrroovviiddeerr sseerrvviiccee aanndd uussee tthhee rroouutteess ccoonnffiigguurreedd wwiitthhiinn iitt ttoo ccoonnddiittiioonnaallllyy ccrreeaattee ssppeecciiffiicc UURRLL rroouutteess iinn aann EExxpprreessss aapppplliiccaattiioonn.. IInnjjeeccttoorrss ccrreeaatteedd vviiaa tthhiiss mmeecchhaanniissmm aarree nnoott iinniittiiaallllyy aattttaacchheedd ttoo aa rreeqquueesstt,, ssoo tthhee $$llooccaattiioonn sseerrvviiccee wwiillll bbee iinnooppeerraabbllee.. TThhee wwrraappMMiiddddlleewwaarreeWWiitthhAAnngguullaarr mmeecchhaanniissmm iinnttrroodduucceedd aabboovvee iiss eesssseennttiiaallllyy aa wwrraappppeerr aarroouunndd rruunnIInnCCoonntteexxtt tthhaatt pprree--ccoonnffiigguurreess $$llooccaattiioonn bbaasseedd oonn tthhee UURRLL ffrroomm tthhee iinnccoommiinngg rreeqquueesstt.. 8
- 9. Limitations Client-side code consumes memory and CPU only on the client's mmaacchhiinnee,, wwhheerreeaass ooff ccoouurrssee sseerrvveerr rreessoouurrcceess aarree sshhaarreedd bbeettwweeeenn aallll cclliieennttss.. IInn ppaarrttiiccuullaarr,, tthhee AAnngguullaarrJJSS ddiiggeesstt mmeecchhaanniissmm iiss ssyynncchhrroonnoouuss,, ssoo aann aapppplliiccaattiioonn wwiitthh mmaannyy ssccooppee wwaattcchheerrss mmaayy eexxppeerriieennccee ssiiggnniiffiiccaanntt ppaauusseess iinn eexxeeccuuttiioonn dduurriinngg ddiiggeesstt,, dduurriinngg wwhhiicchh tthhee NNooddeeJJSS pprroocceessss iiss bblloocckkeedd ffrroomm aallll ootthheerr JJaavvaaSSccrriipptt ccooddee eexxeeccuuttiioonn.. AApppplliiccaattiioonnss tthhaatt ddoo lloottss ooff oobbjjeecctt iinnssttaannttiiaattiioonn mmaayy ffiinndd tthhaatt tthheeiirr mmeemmoorryy uussaaggee ggrroowwss ffaasstteerr tthhaann tthhee VV88 ggaarrbbaaggee ccoolllleeccttoorr iiss aabbllee ttoo rreeccllaaiimm iitt ---- aatt lleeaasstt,, wwiitthhoouutt ssiiggnniiffiiccaanntt GGCC ppaauusseess.. JJSSDDOOMM''ss pprriioorriittyy iiss ccoorrrreecctt iimmpplleemmeennttaattiioonn ooff tthhee DDOOMM AAPPII rraatthheerr tthhaann ppeerrffoorrmmaannccee,, aanndd ffoorr mmaannyy ooppeerraattiioonnss JJSSDDOOMM iiss ssiiggnniiffiiccaannttllyy sslloowweerr tthhaann ssttaattee--ooff--tthhee--aarrtt bbrroowwsseerr DDOOMM iimmpplleemmeennttaattiioonnss.. 9
- 10. THE SMALLTALK WEBSERVER SEASIDE 10
- 11. Introduction Seaside is a framework for building wweebb aapppplliiccaattiioonnss iinn SSmmaallllttaallkk.. IItt wwaass oorriiggiinnaallllyy ddeevveellooppeedd bbyy AAvvii BBrryyaanntt iinn 22000022;; oonnccee mmaasstteerreedd,, SSeeaassiiddee mmaakkeess wweebb aapppplliiccaattiioonnss aallmmoosstt aass eeaassyy ttoo wwrriittee aass ddeesskkttoopp aapppplliiccaattiioonnss.. TTwwoo ooff tthhee bbeetttteerr kknnoowwnn aapppplliiccaattiioonnss bbuuiilltt wwiitthh SSeeaassiiddee aarree SSqquueeaakkSSoouurrccee aanndd DDaabbbbllee DDBB.. SSeeaassiiddee iiss uunnuussuuaall iinn tthhaatt iitt iiss tthhoorroouugghhllyy oobbjjeecctt-oorriieenntteedd:: tthheerree aarree nnoo XXHHTTMMLL tteemmppllaatteess,, nnoo ccoommpplliiccaatteedd ccoonnttrrooll fflloowwss tthhrroouugghh wweebb ppaaggeess,, aanndd nnoo eennccooddiinngg ooff ssttaattee iinn UURRLLss.. IInnsstteeaadd,, yyoouu jjuusstt sseenndd mmeessssaaggeess ttoo oobbjjeeccttss.. 11
- 12. Why Do We Need Seaside? 12 Seaside is a component-based framework that makes web development eeaassiieerr iinn sseevveerraall wwaayyss.. FFiirrsstt,, ccoonnttrrooll ffllooww ccaann bbee eexxpprreesssseedd nnaattuurraallllyy uussiinngg mmeessssaaggee sseennddss.. SSeeaassiiddee kkeeeeppss ttrraacckk ooff wwhhiicchh wweebb ppaaggee ccoorrrreessppoonnddss ttoo wwhhiicchh ppooiinntt iinn tthhee eexxeeccuuttiioonn ooff tthhee wweebb aapppplliiccaattiioonn.. TThhiiss mmeeaannss tthhaatt tthhee bbrroowwsseerr’’ss ““bbaacckk”” bbuuttttoonn wwoorrkkss ccoorrrreeccttllyy.. SSeeccoonndd,, ssttaattee iiss mmaannaaggeedd ffoorr yyoouu.. AAss tthhee ddeevveellooppeerr,, yyoouu hhaavvee tthhee cchhooiiccee ooff eennaabblliinngg bbaacckkttrraacckkiinngg ooff ssttaattee,, ssoo tthhaatt nnaavviiggaattiioonn ““bbaacckk”” iinn ttiimmee wwiillll uunnddoo ssiiddee-eeffffeeccttss.. TThhiirrdd,, wweebb ppaaggeess aarree bbuuiilltt uupp ffrroomm nneesstteedd ccoommppoonneennttss,, eeaacchh ooff wwhhiicchh ccaann ssuuppppoorrtt iittss oowwnn,, iinnddeeppeennddeenntt ccoonnttrrooll ffllooww.. TThheerree aarree nnoo XXHHTTMMLL tteemmppllaatteess —— iinnsstteeaadd vvaalliidd XXHHTTMMLL iiss ggeenneerraatteedd pprrooggrraammmmaattiiccaallllyy uussiinngg aa ssiimmppllee SSmmaallllttaallkk pprroottooccooll.. SSeeaassiiddee ssuuppppoorrttss CCaassccaaddiinngg SSttyyllee SShheeeettss ((CCSSSS)),, ssoo ccoonntteenntt aanndd llaayyoouutt aarree cclleeaannllyy sseeppeerraatteedd.. FFiinnaallllyy,, SSeeaassiiddee pprroovviiddeess aa ccoonnvveenniieenntt wweebb-bbaasseedd ddeevveellooppmmeenntt iinntteerrffaaccee,, mmaakkiinngg iitt eeaassyy ttoo ddeevveelloopp aapppplliiccaattiioonnss iitteerraattiivveellyy,, ddeebbuugg aapppplliiccaattiioonnss iinntteerraaccttiivveellyy,, aanndd rreeccoommppiillee aanndd eexxtteenndd aapppplliiccaattiioonnss wwhhiillee tthhee sseerrvveerr iiss rruunnnniinngg..
- 13. Seaside Components 13 Seaside applications are built out of components. Let’s take a closer look at hhooww SSeeaassiiddee wwoorrkkss bbyy iimmpplleemmeennttiinngg tthhee HHeelllloo WWoorrlldd ccoommppoonneenntt.. EEvveerryy SSeeaassiiddee ccoommppoonneenntt sshhoouulldd iinnhheerriitt ddiirreeccttllyy oorr iinnddiirreeccttllyy ffrroomm WWAACCoommppoonneenntt..DDeeffiinnee aa ssuubbccllaassss ooff WWAACCoommppoonneenntt ccaalllleedd WWAAHHeellllooWWoorrlldd.. CCoommppoonneennttss mmuusstt kknnooww hhooww ttoo rreennddeerr tthheemmsseellvveess.. UUssuuaallllyy tthhiiss iiss ddoonnee bbyy iimmpplleemmeennttiinngg tthhee mmeetthhoodd rreennddeerrCCoonntteennttOOnn::,, wwhhiicchh ggeettss aass iittss aarrgguummeenntt aann iinnssttaannccee ooff WWAAHHttmmllCCaannvvaass,, wwhhiicchh kknnoowwss hhooww ttoo rreennddeerr XXHHTTMMLL.. IImmpplleemmeenntt tthhee ffoolllloowwiinngg mmeetthhoodd,, aanndd ppuutt iitt iinn aa pprroottooccooll ccaalllleedd rreennddeerriinngg:: WWAAHHeellllooWWoorrlldd»rreennddeerrCCoonntteennttOOnn:: hhttmmll hhttmmll tteexxtt:: ’’hheelllloo wwoorrlldd’’ NNooww wwee mmuusstt iinnffoorrmm SSeeaassiiddee tthhaatt tthhiiss ccoommppoonneenntt iiss wwiilllliinngg ttoo bbee aa ssttaannddaalloonnee aapppplliiccaattiioonn.. IImmpplleemmeenntt tthhee ffoolllloowwiinngg mmeetthhoodd oonn tthhee ccllaassss ssiiddee ooff WWAAHHeellllooWWoorrlldd.. WWAAHHeellllooWWoorrlldd ccllaassss»ccaannBBeeRRoooott ↑↑ ttrruuee
- 14. 14
- 15. Rendering XHTML 15 The purpose of a web application is to create, or “render”, web pages. SSoo,, lleettss ssttaarrtt oouurr eexxpplloorraattiioonn ooff rreennddeerriinngg bbyy sseeeeiinngg hhooww tthhee ccoouunntteerr ccoommppoonneenntt rreennddeerrss iittsseellff.. RReennddeerriinngg tthhee CCoouunntteerr :: TThhee rreennddeerriinngg ooff tthhee ccoouunntteerr iiss rreellaattiivveellyy ssttrraaiigghhtt ffoorrwwaarrdd..TThhee ccuurrrreenntt vvaalluuee ooff tthhee ccoouunntteerr iiss ddiissppllaayyeedd aass aann XXHHTTMMLL hheeaaddiinngg,, aanndd tthhee iinnccrreemmeenntt aanndd ddeeccrreemmeenntt ooppeerraattiioonnss aarree iimmpplleemmeenntteedd aass hhttmmll aanncchhoorrss ((tthhaatt iiss,, lliinnkkss)) wwiitthh ccaallllbbaacckkss ttoo bblloocckkss tthhaatt wwiillll sseenndd iinnccrreeaassee aanndd ddeeccrreeaassee ttoo tthhee ccoouunntteerr oobbjjeecctt.. FFrroomm CCoouunntteerr ttoo MMuullttiiCCoouunntteerr:: IInn aaddddiittiioonn,, iitt iiss aa ccoommppoossiittee ccoommppoonneenntt,, ssoo SSeeaassiiddee rreeqquuiirreess ttoo ddeeccllaarree iittss cchhiillddrreenn bbyy iimmpplleemmeennttiinngg aa mmeetthhoodd cchhiillddrreenn tthhaatt aannsswweerrss aann aarrrraayy ooff aallll tthhee ccoommppoonneennttss iitt ccoonnttaaiinnss.. IItt rreennddeerrss iittsseellff bbyy rreennddeerriinngg eeaacchh ooff iittss ssuubbccoommppoonneennttss,, sseeppaarraatteedd bbyy aa hhoorriizzoonnttaall rruullee.. AAssiiddee ffrroomm iinnssttaannccee aanndd ccllaassss-ssiiddee iinniittiiaalliizzaattiioonn mmeetthhooddss,, tthheerree iiss nnootthhiinngg eellssee ttoo tthhee mmuullttii-ccoouunntteerr!!
- 16. 16
- 17. CODE Examples 17 LLiinnkkiinngg EExxaammppllee::IItt iiss ccrreeaatteedd bbyy bbiinnddiinngg aa ssiimmppllee ccaallllbbaacckk ttoo aann ““aanncchhoorr”” ((ii..ee..,, aa lliinnkk)).. CClliicckkiinngg oonn tthhee lliinnkk wwiillll ccaauussee tthhee ssuubbsseeqquueenntt tteexxtt ttoo ttooggggllee bbeettwweeeenn ““ttrruuee”” aanndd ““ffaallssee”” bbyy ttoogggglliinngg tthhee iinnssttaannccee vvaarriiaabbllee ttoogggglleeVVaalluuee.. SSeeaassiiddeeHHttmmllDDeemmoo»rreennddeerrLLiinnkkWWiitthhCCaallllbbaacckkOOnn:: hhttmmll hhttmmll ppaarraaggrraapphh:: [[ hhttmmll tteexxtt:: ’’AAnn aanncchhoorr wwiitthh aa llooccaall aaccttiioonn:: ’’.. hhttmmll ssppaann wwiitthh:: [[ hhttmmll aanncchhoorr ccaallllbbaacckk:: [[ttoogggglleeVVaalluuee ::== ttoogggglleeVVaalluuee nnoott]];; wwiitthh:: ’’ttooggggllee bboooolleeaann::’’]].. hhttmmll ssppaaccee.. hhttmmll ssppaann ccllaassss:: ’’bboooolleeaann’’;; wwiitthh:: ttoogggglleeVVaalluuee ]] NNoottee tthhaatt aaccttiioonnss sshhoouulldd aappppeeaarr oonnllyy iinn ccaallllbbaacckkss.. TThhee ccooddee eexxeeccuutteedd wwhhiillee rreennddeerriinngg sshhoouulldd nnoott cchhaannggee tthhee ssttaattee ooff tthhee aapppplliiccaattiioonn!!
- 18. FFoorrmmss EExxaammppllee::TThheessee aarree rreennddeerreedd jjuusstt lliikkee tthhee ootthheerr eexxaammppllee .. HHeerree iiss tthhee ccooddee ffoorr tthhee SSeeaassiiddeeFFoorrrrmm:: SSeeaassiiddeeFFoorrmmDDeemmoo»rreennddeerrCCoonntteennttOOnn:: hhttmmll || rraaddiiooGGrroouupp || hhttmmll hheeaaddiinngg:: hheeaaddiinngg.. hhttmmll ffoorrmm:: [[ hhttmmll ssppaann:: ’’HHeeaaddiinngg:: ’’.. hhttmmll tteexxttIInnppuutt oonn:: ##hheeaaddiinngg ooff:: sseellff.. hhttmmll sseelleecctt lliisstt:: sseellff ccoolloorrss;; oonn:: ##ccoolloorr ooff:: sseellff.. rraaddiiooGGrroouupp ::== hhttmmll rraaddiiooGGrroouupp.. hhttmmll tteexxtt:: ’’RRaaddiioo oonn::’’.. rraaddiiooGGrroouupp rraaddiiooBBuuttttoonn sseelleecctteedd:: rraaddiiooOOnn;; ccaallllbbaacckk:: [[rraaddiiooOOnn ::== ttrruuee]].. hhttmmll tteexxtt:: ’’ooffff::’’.. rraaddiiooGGrroouupp rraaddiiooBBuuttttoonn sseelleecctteedd:: rraaddiiooOOnn nnoott;; ccaallllbbaacckk:: [[rraaddiiooOOnn ::== ffaallssee]].. hhttmmll cchheecckkbbooxx oonn:: ##cchheecckkeedd ooff:: sseellff.. hhttmmll ssuubbmmiittBBuuttttoonn tteexxtt:: ’’ddoonnee’’ ]] 18
- 19. CSS 19 Basically a CSS style sheet consists of a set of rules that specify how to format given XXHHTTMMLL eelleemmeennttss.. EEaacchh rruullee ccoonnssiissttss ooff ttwwoo ppaarrttss.. TThheerree iiss aa sseelleeccttoorr tthhaatt ssppeecciiffiieess wwhhiicchh XXHHTTMMLL eelleemmeennttss tthhee rruullee aapppplliieess ttoo,, aanndd tthheerree iiss aa ddeeccllaarraattiioonn wwhhiicchh sseettss aa nnuummbbeerr ooff aattttrriibbuutteess ffoorr tthhaatt eelleemmeenntt.. SSeeaassiiddeeDDeemmooWWiiddggeett»ssttyyllee ↑↑ ’’ bbooddyy {{ ffoonntt:: 1100pptt AArriiaall,, HHeellvveettiiccaa,, ssaannss--sseerriiff,, TTiimmeess NNeeww RRoommaann;; }} hh22 {{ ffoonntt--ssiizzee:: 1122pptt;; ffoonntt--wweeiigghhtt:: nnoorrmmaall;; ffoonntt--ssttyyllee:: iittaalliicc;; }} ttaabbllee {{ bboorrddeerr--ccoollllaappssee:: ccoollllaappssee;; }} ttdd {{ bboorrddeerr:: 22ppxx ssoolliidd ##CCCCCCCCCCCC;; ppaaddddiinngg:: 44ppxx;; }} ##aauutthhoorr {{ bboorrddeerr:: 11ppxx ssoolliidd bbllaacckk;; ppaaddddiinngg:: 22ppxx;; mmaarrggiinn:: 22ppxx;; }} ..ssuubbccoommppoonneenntt {{ bboorrddeerr:: 22ppxx ssoolliidd lliigghhttbblluuee;; ppaaddddiinngg:: 22ppxx;; mmaarrggiinn:: 22ppxx;; }} ..hhiigghhlliigghhtt {{ bbaacckkggrroouunndd--ccoolloorr:: yyeellllooww;; }} ..bboooolleeaann {{ bbaacckkggrroouunndd--ccoolloorr:: lliigghhttggrreeyy;; }} ..ffiieelldd {{ bbaacckkggrroouunndd--ccoolloorr:: lliigghhttggrreeyy;; }}
- 20. Managing control flow 20 Seaside makes it particularly easy to design wweebb aapppplliiccaattiioonnss wwiitthh nnoonn--ttrriivviiaall ccoonnttrrooll ffllooww.. TThheerree aarree bbaassiiccaallllyy ttwwoo mmeecchhaanniissmmss tthhaatt yyoouu ccaann uussee:: 11.. AA ccoommppoonneenntt ccaann ccaallll aannootthheerr ccoommppoonneenntt bbyy sseennddiinngg ccaalllleerr ccaallll:: ccaalllleeee.. TThhee ccaalllleerr iiss tteemmppoorraarriillyy rreeppllaacceedd bbyy tthhee ccaalllleeee,, uunnttiill tthhee ccaalllleeee rreettuurrnnss ccoonnttrrooll bbyy sseennddiinngg aannsswweerr::.. TThhee ccaalllleerr iiss uussuuaallllyy sseellff,, bbuutt ccoouulldd aallssoo bbee aannyy ootthheerr ccuurrrreennttllyy vviissiibbllee ccoommppoonneenntt.. 22.. AA wwoorrkkffllooww ccaann bbee ddeeffiinneedd aass aa ttaasskk.. TThhiiss iiss aa ssppeecciiaall kkiinndd ooff ccoommppoonneenntt tthhaatt ssuubbccllaasssseess WWAATTaasskk ((iinnsstteeaadd ooff WWAACCoommppoonneenntt)).. IInnsstteeaadd ooff ddeeffiinniinngg rreennddeerrCCoonntteennttOOnn::,, iitt ddeeffiinneess nnoo ccoonntteenntt ooff iittss oowwnn,, bbuutt rraatthheerr ddeeffiinneess aa ggoo mmeetthhoodd tthhaatt sseennddss aa sseerriieess ooff ccaallll:: mmeessssaaggeess ttoo aaccttiivvaattee vvaarriioouuss ssuubbccoommppoonneennttss iinn ttuurrnn..
- 21. Call and answer 21 Call and answer are used to realize simple dialogues. There is a ttrriivviiaall eexxaammppllee ooff ccaallll:: aanndd aannsswweerr:: TThhee ccaallllbbaacckk ffoorr tthhee eeddiitt lliinnkk ccaallllss aa nneeww iinnssttaannccee ooff SSeeaassiiddeeEEddiittAAnnsswweerrDDeemmoo iinniittiiaalliizzeedd ttoo tthhee vvaalluuee ooff tthhee tteexxtt ffiieelldd.. TThhee ccaallllbbaacckk aallssoo uuppddaatteess tthhiiss tteexxtt ffiieelldd ttoo tthhee rreessuulltt wwhhiicchh iiss sseenntt aass aann aannsswweerr.. SSeeaassiiddeeEEddiittCCaallllDDeemmoo»rreennddeerrCCoonntteennttOOnn:: hhttmmll hhttmmll ssppaann ccllaassss:: ’’ffiieelldd’’;; wwiitthh:: sseellff tteexxtt.. hhttmmll ssppaaccee.. hhttmmll aanncchhoorr ccaallllbbaacckk:: [[sseellff tteexxtt:: ((sseellff ccaallll:: ((SSeeaassiiddeeEEddiittAAnnsswweerrDDeemmoo nneeww tteexxtt:: sseellff tteexxtt));; wwiitthh:: ’’eeddiitt’’ WWhhaatt iiss ppaarrttiiccuullaarrllyy eelleeggaanntt iiss tthhaatt tthhee ccooddee mmaakkeess aabbssoolluutteellyy nnoo rreeffeerreennccee ttoo tthhee nneeww wweebb ppaaggee tthhaatt mmuusstt bbee ccrreeaatteedd.. AAtt rruunn--ttiimmee,, aa nneeww ppaaggee iiss ccrreeaatteedd iinn wwhhiicchh tthhee SSeeaassiiddeeEEddiittCCaallllDDeemmoo ccoommppoonneenntt iiss rreeppllaacceedd bbyy aa SSeeaassiiddeeEEddiittAAnnsswweerrDDeemmoo ccoommppoonneenntt;; tthhee ppaarreenntt ccoommppoonneenntt aanndd tthhee ootthheerr ppeeeerr ccoommppoonneennttss aarree uunnttoouucchheedd..
- 22. 22 The SeasideEditAnswerDemo component is also remarkably simple. It just rreennddeerrss aa ffoorrmm wwiitthh aa tteexxtt ffiieelldd.. TThhee ssuubbmmiitt bbuuttttoonn iiss bboouunndd ttoo aa ccaallllbbaacckk tthhaatt wwiillll aannsswweerr tthhee ffiinnaall vvaalluuee ooff tthhee tteexxtt ffiieelldd.. SSeeaassiiddeeEEddiittAAnnsswweerrDDeemmoo»rreennddeerrCCoonntteennttOOnn:: hhttmmll hhttmmll ffoorrmm:: [[ hhttmmll tteexxttIInnppuutt oonn:: ##tteexxtt ooff:: sseellff.. hhttmmll ssuubbmmiittBBuuttttoonn ccaallllbbaacckk:: [[ sseellff aannsswweerr:: sseellff tteexxtt ]];; tteexxtt:: ’’ookk’’.. ]] SSeeaassiiddee ttaakkeess ccaarree ooff tthhee ccoonnttrrooll ffllooww aanndd tthhee ccoorrrreecctt rreennddeerriinngg ooff aallll tthhee ccoommppoonneennttss.. IInntteerreessttiinnggllyy,, tthhee ““bbaacckk”” bbuuttttoonn ooff tthhee bbrroowwsseerr wwiillll aallssoo wwoorrkk jjuusstt ffiinnee ((tthhoouugghh ssiiddee eeffffeeccttss aarree nnoott rroolllleedd bbaacckk uunnlleessss wwee ttaakkee aaddddiittiioonnaall sstteeppss))..
- 23. A Complete Tutorial Example 23 Let’s see how we can build a complete Seaside application from scratch.We will build aa RRPPNN ((RReevveerrssee PPoolliisshh NNoottaattiioonn)) ccaallccuullaattoorr aass aa SSeeaassiiddee aapppplliiccaattiioonn tthhaatt uusseess aa ssiimmppllee ssttaacckk mmaacchhiinnee aass iittss uunnddeerrllyyiinngg mmooddeell.. FFuurrtthheerrmmoorree,, tthhee SSeeaassiiddee iinntteerrffaaccee wwiillll lleett uuss ttooggggllee bbeettwweeeenn ttwwoo ddiissppllaayyss —— oonnee wwhhiicchh jjuusstt sshhoowwss uuss tthhee ccuurrrreenntt vvaalluuee oonn ttoopp ooff tthhee ssttaacckk,, aanndd tthhee ootthheerr wwhhiicchh sshhoowwss uuss tthhee ccoommpplleettee ssttaattee ooff tthhee ssttaacckk.. WWee bbeeggiinn bbyy iimmpplleemmeennttiinngg tthhee ssttaacckk mmaacchhiinnee aanndd iittss tteessttss.. DDeeffiinnee aa nneeww ccllaassss ccaalllleedd MMyySSttaacckkMMaacchhiinnee wwiitthh aann iinnssttaannccee vvaarriiaabbllee ccoonntteennttss iinniittiiaalliizzeedd ttoo aa nneeww OOrrddeerreeddCCoolllleeccttiioonn.. MMyySSttaacckkMMaacchhiinnee»iinniittiiaalliizzee ssuuppeerr iinniittiiaalliizzee.. ccoonntteennttss ::== OOrrddeerreeddCCoolllleeccttiioonn nneeww.. TThhee ssttaacckk mmaacchhiinnee sshhoouulldd pprroovviiddee ooppeerraattiioonnss ttoo ppuusshh:: aanndd ppoopp vvaalluueess,, vviieeww tthhee ttoopp ooff tthhee ssttaacckk,, aanndd ppeerrffoorrmm vvaarriioouuss aarriitthhmmeettiicc ooppeerraattiioonnss ttoo aadddd,, ssuubbttrraacctt,, mmuullttiippllyy aanndd ddiivviiddee tthhee ttoopp vvaalluueess oonn tthhee ssttaacckk.. WWrriittee ssoommee tteessttss ffoorr tthhee ssttaacckk ooppeerraattiioonnss aanndd tthheenn iimmpplleemmeenntt tthheessee ooppeerraattiioonnss.. HHeerree iiss aa ssaammppllee tteesstt:: MMyySSttaacckkMMaacchhiinneeTTeesstt»tteessttDDiivv ssttaacckk ppuusshh:: 33;; ppuusshh:: 44;; ddiivv.. sseellff aasssseerrtt:: ssttaacckk ssiizzee == 11.. sseellff aasssseerrtt:: ssttaacckk ttoopp == ((44//33))..
- 24. CLASSES 24 We will make uussee ooff 55 ccllaasssseess:: MMyyRRPPNNWWiiddggeett —— tthhiiss sshhoouulldd bbee aann aabbssttrraacctt ccllaassss tthhaatt ddeeffiinneess tthhee ccoommmmoonn CCSSSS ssttyyllee sshheeeett ffoorr tthhee aapppplliiccaattiioonn,, aanndd ootthheerr ccoommmmoonn bbeehhaavviioorr ffoorr tthhee ccoommppoonneennttss ooff tthhee RRPPNN ccaallccuullaattoorr.. IItt iiss aa ssuubbccllaassss ooff WWAACCoommppoonneenntt aanndd tthhee ddiirreecctt ssuuppeerrccllaassss ooff tthhee ffoolllloowwiinngg ffoouurr ccllaasssseess.. MMyyCCaallccuullaattoorr —— tthhiiss iiss tthhee rroooott ccoommppoonneenntt.. IItt sshhoouulldd rreeggiisstteerr tthhee aapppplliiccaattiioonn ((oonn tthhee ccllaassss ssiiddee)),, iitt sshhoouulldd iinnssttaannttiiaattee aanndd rreennddeerr iittss ssuubbccoommppoonneennttss,, aanndd iitt sshhoouulldd rreeggiisstteerr aannyy ssttaattee ffoorr bbaacckkttrraacckkiinngg.. MMyyKKeeyyppaadd —— tthhiiss ddiissppllaayyss tthhee kkeeyyss tthhaatt wwee uussee ttoo iinntteerraacctt wwiitthh tthhee ccaallccuullaattoorr.. MMyyDDiissppllaayy —— tthhiiss ccoommppoonneenntt ddiissppllaayyss tthhee ttoopp ooff tthhee ssttaacckk aanndd pprroovviiddeess aa bbuuttttoonn ttoo ccaallll aannootthheerr ccoommppoonneenntt ttoo ddiissppllaayy tthhee ddeettaaiilleedd vviieeww.. MMyyDDiissppllaayySSttaacckk —— tthhiiss ccoommppoonneenntt sshhoowwss tthhee ddeettaaiilleedd vviieeww ooff tthhee ssttaacckk aanndd pprroovviiddeess aa bbuuttttoonn ttoo aannsswweerr bbaacckk.. IItt iiss aa ssuubbccllaassss ooff MMyyDDiissppllaayy..
- 25. 25 Define MyRPNWidget in the category MyCalculator. Define the ccoommmmoonn ssttyyllee ffoorr tthhee aapppplliiccaattiioonn.. HHeerree iiss aa mmiinniimmaall CCSSSS ffoorr tthhee aapppplliiccaattiioonn.. YYoouu ccaann mmaakkee iitt mmoorree ffaannccyy iiff yyoouu lliikkee.. MMyyRRPPNNWWiiddggeett»ssttyyllee ↑↑ ’’ttaabbllee..kkeeyyppaadd {{ ffllooaatt:: lleefftt;; }} ttdd..kkeeyy {{ bboorrddeerr:: 11ppxx ssoolliidd ggrreeyy;; bbaacckkggrroouunndd:: lliigghhttggrreeyy;; ppaaddddiinngg:: 44ppxx;; tteexxtt--aalliiggnn:: cceenntteerr;; }} ttaabbllee..ssttaacckk {{ ffllooaatt:: lleefftt;; }} ttdd..ssttaacckkcceellll {{ bboorrddeerr:: 22ppxx ssoolliidd wwhhiittee;; bboorrddeerr--lleefftt--ccoolloorr:: ggrreeyy;; bboorrddeerr--rriigghhtt--ccoolloorr:: ggrreeyy;; bboorrddeerr--bboottttoomm--ccoolloorr:: ggrreeyy;; ppaaddddiinngg:: 44ppxx;; tteexxtt--aalliiggnn:: rriigghhtt;; }} ttdd..ssmmaallll {{ ffoonntt--ssiizzee:: 88pptt;; }}’’
- 26. Define MyCalculator to be a root component and register itself as an application (i.e., iimmpplleemmeenntt ccaannBBeeRRoooott aanndd iinniittiiaalliizzee oonn tthhee ccllaassss ssiiddee)).. IImmpplleemmeenntt MMyyCCaallccuullaattoorr»rreennddeerrCCoonntteennttOOnn:: ttoo rreennddeerr ssoommeetthhiinngg ttrriivviiaall ((ssuucchh aass iittss nnaammee)),, aanndd vveerriiffyy tthhaatt tthhee aapppplliiccaattiioonn rruunnss iinn aa bbrroowwsseerr.. MMyyCCaallccuullaattoorr iiss rreessppoonnssiibbllee ffoorr iinnssttaannttiiaattiinngg MMyySSttaacckkMMaacchhiinnee,, MMyyKKeeyyppaadd aanndd MMyyDDiissppllaayy.. DDeeffiinnee MMyyKKeeyyppaadd aanndd MMyyDDiissppllaayy aass ssuubbccllaasssseess ooff MMyyRRPPNNWWiiddggeett.. AAllll tthhrreeee ccoommppoonneennttss wwiillll nneeeedd aacccceessss ttoo aa ccoommmmoonn iinnssttaannccee ooff tthhee ssttaacckk mmaacchhiinnee,, ssoo ddeeffiinnee tthhee iinnssttaannccee vvaarriiaabbllee ssttaacckkMMaacchhiinnee aanndd aann iinniittiiaalliizzaattiioonn mmeetthhoodd sseettMMyySSttaacckkMMaacchhiinnee:: iinn tthhee ccoommmmoonn ppaarreenntt,, MMyyRRPPNNWWiiddggeett.. AAdddd iinnssttaannccee vvaarriiaabblleess kkeeyyppaadd aanndd ddiissppllaayy ttoo MMyyCCaallccuullaattoorr aanndd iinniittiiaalliizzee tthheemm iinn MMyyCCaallccuullaattoorr»iinniittiiaalliizzee.. ((DDoonn’’tt ffoorrggeett ttoo sseenndd ssuuppeerr iinniittiiaalliizzee!!)) PPaassss tthhee sshhaarreedd iinnssttaannccee ooff tthhee ssttaacckk mmaacchhiinnee ttoo tthhee kkeeyyppaadd aanndd tthhee ddiissppllaayy iinn tthhee ssaammee iinniittiiaalliizzee mmeetthhoodd.. IImmpplleemmeenntt MMyyCCaallccuullaattoorr»rreennddeerrCCoonntteennttOOnn:: ttoo ssiimmppllyy rreennddeerr iinn ttuurrnn tthhee kkeeyyppaadd aanndd tthhee ddiissppllaayy.. TToo ccoorrrreeccttllyy ddiissppllaayy tthhee ssuubbccoommppoonneennttss,, yyoouu mmuusstt iimmpplleemmeenntt MMyyCCaallccuullaattoorr»cchhiillddrreenn ttoo rreettuurrnn aann aarrrraayy wwiitthh tthhee kkeeyyppaadd aanndd tthhee ddiissppllaayy.. IImmpplleemmeenntt ppllaacceehhoollddeerr rreennddeerriinngg mmeetthhooddss ffoorr tthhee kkeeyyppaadd aanndd tthhee ddiissppllaayy aanndd vveerriiffyy tthhaatt tthhee ccaallccuullaattoorr nnooww ddiissppllaayyss iittss ttwwoo ssuubbccoommppoonneennttss.. NNooww wwee wwiillll cchhaannggee tthhee iimmpplleemmeennttaattiioonn ooff tthhee ddiissppllaayy ttoo sshhooww tthhee ttoopp vvaalluuee ooff tthhee ssttaacckk.. UUssee aa ttaabbllee wwiitthh ccllaassss ““kkeeyyppaadd”” ccoonnttaaiinniinngg aa rrooww wwiitthh aa ssiinnggllee ttaabbllee ddaattaa cceellll wwiitthh ccllaassss ““ssttaacckkcceellll””.. CChhaannggee tthhee rreennddeerriinngg mmeetthhoodd ooff tthhee kkeeyyppaadd ttoo eennssuurree tthhaatt tthhee nnuummbbeerr 00 iiss ppuusshheedd oonn tthhee ssttaacckk iinn ccaassee iitt iiss eemmppttyy.. ((DDeeffiinnee aanndd uussee MMyyKKeeyyppaadd»eennssuurreeMMyySSttaacckkMMaacchhiinneeNNoottEEmmppttyy..)) AAllssoo mmaakkee iitt ddiissppllaayy aann eemmppttyy ttaabbllee wwiitthh ccllaassss ““kkeeyyppaadd””.. NNooww tthhee ccaallccuullaattoorr sshhoouulldd ddiissppllaayy aa ssiinnggllee cceellll ccoonnttaaiinniinngg tthhee vvaalluuee 00.. IIff yyoouu ttooggggllee tthhee hhaallooss,, yyoouu sshhoouulldd sseeee ssoommeetthhiinngg lliikkee tthhiiss:: 26
- 27. 27
- 28. Interface t Now let’s implement an interface too iinntteerraacctt wwiitthh tthhee ssttaacckk.. FFiirrsstt ddeeffiinnee tthhee ffoolllloowwiinngg hheellppeerr mmeetthhooddss,, wwhhiicchh wwiillll mmaakkee iitt eeaassiieerr ttoo ssccrriipptt tthhee iinntteerrffaaccee:: 28 MMyyKKeeyyppaadd»rreennddeerrSSttaacckkBBuuttttoonn:: tteexxtt ccaallllbbaacckk:: aaBBlloocckk ccoollSSppaann:: aannIInntteeggeerr oonn:: hhttmmll hhttmmll ttaabblleeDDaattaa ccllaassss:: ’’kkeeyy’’;; ccoollSSppaann:: aannIInntteeggeerr;; wwiitthh:: [[hhttmmll aanncchhoorr ccaallllbbaacckk:: aaBBlloocckk;; wwiitthh:: [[hhttmmll hhttmmll:: tteexxtt]]]] MMyyKKeeyyppaadd»rreennddeerrSSttaacckkBBuuttttoonn:: tteexxtt ccaallllbbaacckk:: aaBBlloocckk oonn:: hhttmmll sseellff rreennddeerrSSttaacckkBBuuttttoonn:: tteexxtt ccaallllbbaacckk:: aaBBlloocckk ccoollSSppaann:: 11 oonn:: hhttmmll
- 29. Methods 29 We will use these two methods to define the buttons on the keypad with appropriate callbacks. CCeerrttaaiinn bbuuttttoonnss mmaayy ssppaann mmuullttiippllee ccoolluummnnss,, bbuutt tthhee ddeeffaauulltt iiss ttoo ooccccuuppyy jjuusstt oonnee ccoolluummnn.. UUssee tthhee ttwwoo hheellppeerr mmeetthhooddss ttoo ssccrriipptt tthhee kkeeyyppaadd aass ffoolllloowwss:: ((HHiinntt:: ssttaarrtt bbyy ggeettttiinngg tthhee ddiiggiitt aanndd ““EEnntteerr”” kkeeyyss wwoorrkkiinngg,, tthheenn tthhee aarriitthhmmeettiicc ooppeerraattoorrss..)) MMyyKKeeyyppaadd»rreennddeerrCCoonntteennttOOnn:: hhttmmll sseellff eennssuurreeSSttaacckkMMaacchhiinneeNNoottEEmmppttyy.. hhttmmll ttaabbllee ccllaassss:: ’’kkeeyyppaadd’’;; wwiitthh:: [[ hhttmmll ttaabblleeRRooww:: [[ sseellff rreennddeerrSSttaacckkBBuuttttoonn:: ’’++’’ ccaallllbbaacckk:: [[sseellff ssttaacckkOOpp:: ##aadddd]] oonn:: hhttmmll.. sseellff rreennddeerrSSttaacckkBBuuttttoonn:: ’’&&nnddaasshh;;’’ ccaallllbbaacckk:: [[sseellff ssttaacckkOOpp:: ##mmiinn]] oonn:: hhttmmll.. sseellff rreennddeerrSSttaacckkBBuuttttoonn:: ’’&&ttiimmeess;;’’ ccaallllbbaacckk:: [[sseellff ssttaacckkOOpp:: ##mmuull]] oonn:: hhttmmll.. sseellff rreennddeerrSSttaacckkBBuuttttoonn:: ’’&&ddiivviiddee;;’’ ccaallllbbaacckk:: [[sseellff ssttaacckkOOpp:: ##ddiivv]] oonn:: hhttmmll.. sseellff rreennddeerrSSttaacckkBBuuttttoonn:: ’’&&pplluussmmnn;;’’ ccaallllbbaacckk:: [[sseellff ssttaacckkOOpp:: ##nneegg]] oonn:: hhttmmll ]].. hhttmmll ttaabblleeRRooww:: [[ sseellff rreennddeerrSSttaacckkBBuuttttoonn:: ’’11’’ ccaallllbbaacckk:: [[sseellff ttyyppee:: ’’11’’]] oonn:: hhttmmll.. sseellff rreennddeerrSSttaacckkBBuuttttoonn:: ’’22’’ ccaallllbbaacckk:: [[sseellff ttyyppee:: ’’22’’]] oonn:: hhttmmll.. sseellff rreennddeerrSSttaacckkBBuuttttoonn:: ’’33’’ ccaallllbbaacckk:: [[sseellff ttyyppee:: ’’33’’]] oonn:: hhttmmll.. sseellff rreennddeerrSSttaacckkBBuuttttoonn:: ’’DDrroopp’’ ccaallllbbaacckk:: [[sseellff ssttaacckkOOpp:: ##ppoopp]] ccoollSSppaann:: 22 oonn:: hhttmmll ]].. "" aanndd ssoo oonn ...... "" hhttmmll ttaabblleeRRooww:: [[ sseellff rreennddeerrSSttaacckkBBuuttttoonn:: ’’00’’ ccaallllbbaacckk:: [[sseellff ttyyppee:: ’’00’’]] ccoollSSppaann:: 22 oonn:: hhttmmll.. sseellff rreennddeerrSSttaacckkBBuuttttoonn:: ’’CC’’ ccaallllbbaacckk:: [[sseellff ssttaacckkCClleeaarrTToopp]] oonn:: hhttmmll.. sseellff rreennddeerrSSttaacckkBBuuttttoonn:: ’’EEnntteerr’’ ccaallllbbaacckk:: [[sseellff ssttaacckkOOpp:: ##dduupp.. sseellff sseettCClleeaarrMMooddee]] ccoollSSppaann:: 22 oonn:: hhttmmll ]]]]
- 30. Check that the keypad displays properly. If you try to click on the keys, however, yyoouu wwiillll ffiinndd tthhaatt tthhee ccaallccuullaattoorr ddooeess nnoott wwoorrkk yyeett…… IImmpplleemmeenntt MMyyKKeeyyppaadd»ttyyppee:: ttoo uuppddaattee tthhee ttoopp ooff tthhee ssttaacckk bbyy aappppeennddiinngg tthhee ttyyppeedd ddiiggiitt.. YYoouu wwiillll nneeeedd ttoo ccoonnvveerrtt tthhee ttoopp vvaalluuee ttoo aa ssttrriinngg,, uuppddaattee iitt,, aanndd ccoonnvveerrtt iitt bbaacckk ttoo aann iinntteeggeerr,, ssoommeetthhiinngg lliikkee tthhiiss:: MMyyKKeeyyppaadd»ttyyppee:: aaSSttrriinngg ssttaacckkMMaacchhiinnee ppuusshh:: ((ssttaacckkMMaacchhiinnee ppoopp aassSSttrriinngg,, aaSSttrriinngg)) aassNNuummbbeerr.. NNooww wwhheenn yyoouu cclliicckk oonn tthhee ddiiggiitt kkeeyyss tthhee ddiissppllaayy sshhoouulldd bbee uuppddaatteedd.. ((BBee ssuurree tthhaatt MMyySSttaacckkMMaacchhiinnee»ppoopp rreettuurrnnss tthhee vvaalluuee ppooppppeedd,, oorr tthhiiss wwiillll nnoott wwoorrkk!!)) NNooww wwee mmuusstt iimmpplleemmeenntt MMyyKKeeyyppaadd»ssttaacckkOOpp:: SSoommeetthhiinngg lliikkee tthhiiss wwiillll ddoo tthhee ttrriicckk:: MMyyKKeeyyppaadd»ssttaacckkOOpp:: oopp [[ ssttaacckkMMaacchhiinnee ppeerrffoorrmm:: oopp ]] oonn:: AAsssseerrttiioonnFFaaiilluurree ddoo:: [[ ]].. TThhee ppooiinntt iiss tthhaatt wwee aarree nnoott ssuurree tthhaatt aallll ooppeerraattiioonnss wwiillll ssuucccceeeedd,, ffoorr eexxaammppllee,, aaddddiittiioonn wwiillll ffaaiill iiff wwee ddoo nnoott hhaavvee ttwwoo nnuummbbeerrss oonn tthhee ssttaacckk.. FFoorr tthhee mmoommeenntt wwee ccaann jjuusstt iiggnnoorree ssuucchh eerrrroorrss.. IIff wwee aarree ffeeeelliinngg mmoorree aammbbiittiioouuss llaatteerr oonn,, wwee ccaann pprroovviiddee ssoommee uusseerr ffeeeeddbbaacckk iinn tthhee eerrrroorr hhaannddlleerr bblloocckk.. TThhee ffiirrsstt vveerrssiioonn ooff tthhee ccaallccuullaattoorr sshhoouulldd bbee wwoorrkkiinngg nnooww.. TTrryy ttoo eenntteerr ssoommee nnuummbbeerrss bbyy pprreessssiinngg tthhee ddiiggiitt kkeeyyss,, hhiittttiinngg EEnntteerr ttoo ppuusshh aa ccooppyy ooff tthhee ccuurrrreenntt vvaalluuee,, aanndd eenntteerriinngg ++ ttoo ssuumm tthhee ttoopp ttwwoo vvaalluueess.. YYoouu wwiillll nnoottiiccee tthhaatt ttyyppiinngg ddiiggiittss ddooeess nnoott bbeehhaavvee tthhee wwaayy yyoouu mmiigghhtt eexxppeecctt.. AAccttuuaallllyy tthhee ccaallccuullaattoorr sshhoouulldd bbee aawwaarree ooff wwhheetthheerr yyoouu aarree ttyyppiinngg aa nneeww nnuummbbeerr,, oorr aappppeennddiinngg ttoo aann eexxiissttiinngg nnuummbbeerr.. 30
- 31. 31 Adapt MyKeypad»type: to behave differently depending on the current typing mode. The new type: method might llooookk lliikkee tthhiiss:: MMyyKKeeyyppaadd»ttyyppee:: aaSSttrriinngg sseellff iinnPPuusshhMMooddee iiffTTrruuee:: [[ ssttaacckkMMaacchhiinnee ppuusshh:: ssttaacckkMMaacchhiinnee ttoopp.. sseellff ssttaacckkCClleeaarrTToopp ]].. sseellff iinnCClleeaarrMMooddee iiffTTrruuee:: [[ sseellff ssttaacckkCClleeaarrTToopp ]].. ssttaacckkMMaacchhiinnee ppuusshh:: ((ssttaacckkMMaacchhiinnee ppoopp aassSSttrriinngg,, aaSSttrriinngg)) aassNNuummbbeerr.. TTyyppiinngg mmiigghhtt wwoorrkk bbeetttteerr nnooww,, bbuutt iitt iiss ssttiillll ffrruussttrraattiinngg nnoott ttoo bbee aabbllee ttoo sseeee wwhhaatt iiss oonn tthhee ssttaacckk.. DDeeffiinnee MMyyDDiissppllaayySSttaacckk aass aa ssuubbccllaassss ooff MMyyDDiissppllaayy.. AAdddd aa bbuuttttoonn ttoo tthhee rreennddeerriinngg mmeetthhoodd ooff MMyyDDiissppllaayy wwhhiicchh wwiillll ccaallll aa nneeww iinnssttaannccee ooff MMyyDDiissppllaayySSttaacckk.. YYoouu wwiillll nneeeedd aann hhttmmll aanncchhoorr tthhaatt llooookkss ssoommeetthhiinngg lliikkee tthhiiss:: hhttmmll aanncchhoorr ccaallllbbaacckk:: [[ sseellff ccaallll:: ((MMyyDDiissppllaayySSttaacckk nneeww sseettMMyySSttaacckkMMaacchhiinnee:: ssttaacckkMMaacchhiinnee))]];; wwiitthh:: ’’ooppeenn’’ DDeeffiinnee tthhee rreennddeerriinngg mmeetthhoodd ooff MMyyDDiissppllaayySSttaacckk ttoo ddiissppllaayy aallll ooff tthhee vvaalluueess oonn tthhee ssttaacckk.. ((YYoouu wwiillll eeiitthheerr nneeeedd ttoo ddeeffiinnee aann aacccceessssoorr ffoorr tthhee ssttaacckk mmaacchhiinnee’’ss ccoonntteennttss oorr yyoouu ccaann ddeeffiinnee MMyySSttaacckkMMaacchhiinnee»ddoo:: ttoo iitteerraattee oovveerr tthhee ssttaacckk vvaalluueess..)) TThhee ssttaacckk ddiissppllaayy sshhoouulldd aallssoo hhaavvee aa bbuuttttoonn llaabbeelllleedd ““cclloossee”” wwhhoossee ccaallllbbaacckk wwiillll ssiimmppllyy ppeerrffoorrmm sseellff aannsswweerr.. hhttmmll aanncchhoorr ccaallllbbaacckk:: [[ sseellff aannsswweerr]];; wwiitthh:: ’’cclloossee’’ NNooww yyoouu sshhoouulldd bbee aabbllee ttoo ooppeenn aanndd cclloossee tthhee ssttaacckk wwhhiillee yyoouu aarree uussiinngg tthhee ccaallccuullaattoorr.. TThheerree iiss,, hhoowweevveerr,, oonnee tthhiinngg wwee hhaavvee ffoorrggootttteenn.. TTrryy ttoo ppeerrffoorrmm ssoommee ooppeerraattiioonnss oonn tthhee ssttaacckk.. NNooww uussee tthhee ““bbaacckk”” bbuuttttoonn ooff yyoouurr bbrroowwsseerr aanndd ttrryy ttoo ppeerrffoorrmm ssoommee mmoorree ssttaacckk ooppeerraattiioonnss.. ((FFoorr eexxaammppllee,, ooppeenn tthhee ssttaacckk,, ttyyppee 11 ,, EEnntteerr ttwwiiccee aanndd ++ .. TThhee ssttaacckk sshhoouulldd ddiissppllaayy ““22”” aanndd ““11””.. NNooww hhiitt tthhee ““bbaacckk”” bbuuttttoonn.. TThhee ssttaacckk nnooww sshhoowwss tthhrreeee ttiimmeess ““11”” aaggaaiinn.. NNooww iiff yyoouu ttyyppee ++ tthhee ssttaacckk sshhoowwss ““33””.. BBaacckkttrraacckkiinngg iiss nnoott yyeett wwoorrkkiinngg.. IImmpplleemmeenntt MMyyCCaallccuullaattoorr»ssttaatteess ttoo rreettuurrnn aann aarrrraayy wwiitthh tthhee ccoonntteennttss ooff tthhee ssttaacckk mmaacchhiinnee.. CChheecckk tthhaatt bbaacckkttrraacckkiinngg nnooww wwoorrkkss ccoorrrreeccttllyy!!
- 32. AJAX 32 AJAX (Asynchronous JavaScript and XML) is a technique to make web applications more interactive by exploiting JavaScript ffuunnccttiioonnaalliittyy oonn tthhee cclliieenntt ..TToo aaddddrreessss tthhee ddiissppllaayy ffrroomm JJaavvaaSSccrriipptt ccooddee wwee mmuusstt ffiirrsstt ggiivvee iitt aa uunniiqquuee iidd.. UUppddaattee tthhee ccaallccuullaattoorr’’ss rreennddeerriinngg mmeetthhoodd aass ffoolllloowwss:: MMyyCCaallccuullaattoorr»rreennddeerrCCoonntteennttOOnn:: hhttmmll hhttmmll ddiivv iidd:: ’’kkeeyyppaadd’’;; wwiitthh:: kkeeyyppaadd.. hhttmmll ddiivv iidd:: ’’ddiissppllaayy’’;; wwiitthh:: ddiissppllaayy.. TToo bbee aabbllee ttoo rree--rreennddeerr tthhee ddiissppllaayy wwhheenn aa kkeeyybbooaarrdd bbuuttttoonn iiss pprreesssseedd,, tthhee kkeeyybbooaarrdd nneeeeddss ttoo kknnooww tthhee ddiissppllaayy ccoommppoonneenntt.. AAdddd aa ddiissppllaayy iinnssttaannccee vvaarriiaabbllee ttoo MMyyKKeeyyppaadd,, aann iinniittiiaalliizzee mmeetthhoodd MMyyKKeeyyppaadd»sseettDDiissppllaayy::,, aanndd ccaallll tthhiiss ffrroomm MMyyCCaallccuullaattoorr>>>>iinniittiiaalliizzee.. NNooww wwee aarree aabbllee ttoo aassssiiggnn ssoommee JJaavvaaSSccrriipptt ccooddee ttoo tthhee bbuuttttoonnss bbyy uuppddaattiinngg MMyyKKeeyyppaadd»rreennddeerrSSttaacckkBBuuttttoonn::ccaallllbbaacckk::ccoollSSppaann::oonn:: aass ffoolllloowwss:: MMyyKKeeyyppaadd»rreennddeerrSSttaacckkBBuuttttoonn:: tteexxtt ccaallllbbaacckk:: aaBBlloocckk ccoollSSppaann:: aannIInntteeggeerr oonn:: hhttmmll hhttmmll ttaabblleeDDaattaa ccllaassss:: ’’kkeeyy’’;; ccoollSSppaann:: aannIInntteeggeerr;; wwiitthh:: [[ hhttmmll aanncchhoorr ccaallllbbaacckk:: aaBBlloocckk;; oonnCClliicckk:: ""hhaannddllee JJaavvaassccrriipptt eevveenntt"" ((hhttmmll uuppddaatteerr iidd:: ’’ddiissppllaayy’’;; ccaallllbbaacckk:: [[ ::rr || aaBBlloocckk vvaalluuee.. rr rreennddeerr:: ddiissppllaayy ]];; rreettuurrnn:: ffaallssee));; wwiitthh:: [[ hhttmmll hhttmmll:: tteexxtt ]] ]]
Editor's Notes
- 1
- 3 3
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16