Sencha Touch HTML5 Mobile App Framework

Utvikling av en mobilapplikasjon krever mange avgjørelser som skal treffes før den første linjen med kode er til og med skrevet. For eksempel, bør du gå med en webapp eller en innfødt app? Hvis ja, bør du bruke et rammeverk? Det er ikke noe feil svar på noen av disse spørsmålene, det avhenger av situasjonen. I dag skal vi snakke om en bestemt løsning på disse spørsmålene: Sencha Touch.

Hva er Sencha Touch?

Fra deres hjemmeside:

Sencha Touch gjør at webappene dine kan se ut som innfødte apps. Vakre brukergrensesnittkomponenter og rik dataadministrasjon, alle drevet av de nyeste HTML5- og CSS3-webstandardene og klar for Android og Apple iOS-enheter. Holde dem på nettbasert eller pakk dem for distribusjon på mobilappbutikker.

Fra produsentene av ExtJS har de nyoppkalte Sencha-folkene enda en gang opprettet et virkelig kraftig javascript-rammeverk. Du kan sjekke ut mer om rammen her. Sencha touch kan replikere nesten alle native UI funksjoner perfekt. For øyeblikket er Sencha Touch sannsynligvis en av de kraftigste mobile web app rammeverkene der ute, og den best egnet til å håndtere komplekse webapplikasjoner som må replikere en innfødt app.

Når det er sagt, er det fortsatt noen ulemper med det akkurat som noe. Til å begynne med, mens dette skrives, er det fortsatt i BETA. Fra personlig testing har jeg ikke oppdaget noen feil ennå. Det betyr også at de fortsatt pakker på mange funksjoner til rammen. Som er egentlig gode nyheter, fordi dette rammeverket allerede er utrolig jam-pakket med funksjoner, men du kan fremdeles se frem til ting som kamerastøtte i fremtiden. Men tilgang til enhetsfunksjoner som dette er bare mulig hvis du pakker den inn i PhoneGap, et annet rammeverk som gjør det mulig for mobile applikasjoner å være innfødte programmer.

Dette gir et annet viktig poeng. Er en mobil applikasjons rammeverk som Sencha Touch selv passende for prosjektet mitt? Svaret på det spørsmålet er tøft. Det er fordeler og ulemper for begge løsninger, og vi antar at vi bruker Sencha Touch som strengt en webapp:

Nå må du avgjøre om Sencha Touch er den rette webapprammen for prosjektet ditt:

Sencha Touch et øyeblikk

  • Høyere læringskurve enn de fleste andre nettrammer
  • Best web app rammeverk for ekte høyt nivå web applikasjoner
  • Skal enkelt til forskjellige oppløsninger for maksimal kompatibilitet med forskjellige iPhones, iPad og de forskjellige Android-telefonene.
  • To temaer for iOS og Android
  • HTML5 og CSS3 gir høyere fleksibilitet
  • Stor støtte for animasjoner og forbedrede berøringshendelser

Hvis dette hele lyder bra for prosjektet ditt, så fortsett og last det ned. Hvis det virker litt overkill, vil du kanskje se på noe som jQTouch (se etter en opplæring om dette snart).

Laster ned Sencha Touch

For å laste ned en kopi av Sencha Touch, bare gå til deres hjemmeside, og klikk Last ned nå.

Åpne sencha-touch-mappen og klikk på eksempler. Deretter klikker du på index.html (i eksemplet mappen)

Bla gjennom eksemplene og undersøk de forskjellige funksjonene til de forskjellige appene. Den mest verdifulle appen for å lære de sanne egenskapene til dette rammeverket er Kitchen Sink-appen. Det er det vi skal se på:

Kjøkkenvask

Utforsk applikasjonen og se kilden til noen av tingene for å få tak i Sencha Touch-konseptet.

Brukergrensesnitt

Hvis du klikker på brukergrensesnittet til venstre, presenteres du med en ny, pent animert meny med spesifikke brukergrensesnittelementer. Selv om det ikke ser ut som om de har et coverflow-grensesnitt ennå, er jeg sikker på at det er noe vi til slutt vil se. Som du kan se, har de alle essensielle elementene tatt vare på. La oss se kildekoden til faner for å få en følelse for nivået av kompleksitet ved å opprette et grunnleggende brukergrensesnitt:

 demos.Tabs = new Ext.TabPanel (sortable: true, // Trykk og hold for å sortere elementer: [title: 'Tab 1', html: 'Tabellene ovenfor er også sorterbare.
(trykk og hold) ', cls:' card card5 ', title:' Tab 2 ', html:' Tab 2 ', cls:' card card4 ', title:' Tab 3 ', html:' Tab 3 ', cls:' kortkort3 ']);

Som du kan se, er det den kjente ExtJS-måten å gjøre ting på. Du lager en ny komponent, angi verdien for sortering, og skriv deretter inn den nødvendige informasjonen. I dette tilfellet er kategorien tittel, faneblad og en identifiserbar klasse. Denne kraftige enkelheten er et testament til kraften i dette rammeverket.

animasjoner

Disse er enda enklere. Å animere et nytt panel i prosjektet, dette er alt du virkelig trenger:

 demos.Animations.slide = new Ext.Panel (html: 'Slides kan brukes sammen med retning: "opp / ned / venstre / høyre".', cls:' kortkort2 ');

Lysbildesdelen er hva som bestemmer overgangen du bruker. Du kan se kjøkkenvasken for flere eksempler som pop, flip, kube og fade.

Jeg oppfordrer deg til å leke med kjøkkenvasken litt mer, og sørg for å analysere kildekoden for alt som interesserer deg. Siden dette fortsatt er i BETA, er det knapt noen dokumentasjon på det, noe ExtJS (nå Sencha) er litt beryktet for.

Wrap Up

Nå som du har litt mer kunnskap om Sencha Touch, håper jeg at du kan legge den til i ditt arsenal av mobile applikasjonsverktøy. Som med enhver annen utviklingsindustri må du velge de riktige verktøyene for jobben. Sencha Touch kan være det riktige verktøyet hvis du bygger en mobil applikasjon på høyt nivå via nettet. Bare vær sikker på at det er riktig passform for prosjektet ditt før du går videre. Det er alt for nå, gi meg beskjed om hva du synes om Sencha Touch og andre rammer i kommentarene!