Sencha Touch HTML5 Mobile App Framework

Utveckla en mobilapplikation kräver att många beslut fattas innan den första raden av kod är jämn skriftlig. Till exempel ska du gå med en webapp eller en inbyggd app? Om så är fallet, ska du använda en ram? Det finns inget felaktigt svar på någon av dessa frågor - det beror på situationen. Idag ska vi prata om en specifik lösning på dessa frågor: Sencha Touch.

Vad är Sencha Touch?

Från deras hemsida:

Sencha Touch låter dina webbappar se ut som inhemska appar. Vackra användargränssnittskomponenter och rik datahantering, som alla drivs av de senaste HTML5- och CSS3-webbstandarderna och är klara för Android och Apple iOS-enheter. Håll dem webbbaserade eller linda dem för distribution i mobilappbutiker.

Från skaparna av ExtJS har de nyligen namngivna Sencha-folket ännu en gång skapat ett verkligt kraftfullt javascript-ramverk. Du kan kolla mer om ramverket här. Sencha touch kan replikera nästan alla inbyggda UI-funktioner perfekt. För närvarande är Sencha Touch förmodligen en av de mest kraftfulla mobila webbappramarna där ute och det bäst lämpade att hantera komplexa webapplikationer som behöver replikera en inbyggd app.

Det sägs att det fortfarande finns några nackdelar med det, precis som vad som helst. Till att börja med, medan det skrivs är det fortfarande i BETA. Från personliga test har jag inte stött på några problem ännu. Det betyder också att de fortfarande packar på många funktioner till ramen. Vilket är faktiskt bra nyheter, eftersom den här ramen redan är oerhört jam-packad med funktioner, men du kan fortfarande se fram emot saker som kamera support i framtiden. Men tillgång till enhetsfunktioner som detta är endast möjligt om du sätter i den i PhoneGap, en annan ram som tillåter mobila applikationer att vara inbyggda applikationer.

Detta ger en annan viktig punkt. Är en mobil applikationsrama som Sencha Touch även lämplig för mitt projekt? Svaret på den frågan är hård. Det finns fördelar och nackdelar med båda lösningarna och vi antar att vi använder Sencha Touch som strikt en webapp:

Nu måste du bestämma om Sencha Touch är den rätta webappramen för ditt projekt:

Sencha Touch i en blick

  • Högre inlärningskurva än de flesta andra webbramar
  • Bästa webbappram för äkta webbsidor på hög nivå
  • Vågar enkelt till olika upplösningar för maximal kompatibilitet med olika iPhones, iPad och de olika Android-telefonerna.
  • Två teman för iOS och Android
  • HTML5 och CSS3 ger högre flexibilitet
  • Bra stöd för animeringar och förbättrade touch-händelser

Om det här låter bra för ditt projekt, fortsätt och ladda ner det. Om det verkar lite överkill, kanske du vill titta på något som jQTouch (leta efter en handledning om detta snart).

Hämtar Sencha Touch

För att ladda ner en kopia av Sencha Touch, gå bara till deras hemsida och klicka på Ladda ner nu.

Öppna sencha-touch-mappen och klicka på exempel. Klicka sedan på index.html (i exemplet mappen)

Bläddra bland exemplen och utforska de olika programmens olika funktioner. Den mest värdefulla appen för att lära sig de sanna förmågorna i denna ram är Kitchen Sink app. Det är vad vi ska titta på:

Diskbänk

Utforska applikationen och se källan till några av de saker som du kan ta tag i Sencha Touch-konceptet.

Användargränssnitt

Om du klickar på användargränssnittet till vänster presenteras en ny, snygg animerad meny med specifika användargränssnitt. Även om det inte ser ut som om de har ett täckflödesgränssnitt än, är jag säker på att det är något som vi så småningom kommer att se. Som ni kan se har de alla viktiga inslag som tas hand om. Låt oss se källkoden för flikar för att få en känsla för graden av att skapa ett grundläggande UI-element:

 demos.Tabs = new Ext.TabPanel (sortable: true, // Tryck och håll för att sortera objekt: [title: 'Tab 1', html: 'Tabellerna ovan är också sorterbara.
(tryck och håll) ', cls:' card card5 ', title:' Tab 2 ', html:' Tab 2 ', cls:' card card4 ', title:' Tab 3 ', html:' Flik 3 ', cls:' kortkort3 ']);

Som du kan se är det det bekanta ExtJS sättet att göra saker. Du skapar en ny komponent, ställer in värdet av sorterbar och matar sedan in den nödvändiga informationen. I det här fallet är flikens titel, flikinnehåll och en identifierbar klass. Denna kraftfulla enkelhet är ett bevis på kraften i denna ram.

animationer

Dessa är ännu enklare. För att animera en ny panel i projektet är detta allt du verkligen behöver:

 demos.Animations.slide = new Ext.Panel (html: 'Slides kan användas i takt med riktning: "upp / ner / vänster / höger".', cls:' card card2 ');

Bilddelen är vad som bestämmer övergången du använder. Du kan se kökshandtaget för fler exempel som pop, flip, kub och blekna.

Jag uppmuntrar dig att leka med kökshandtaget lite mer och var noga med att analysera källkoden för allt som intresserar dig. Eftersom detta fortfarande finns i BETA finns det knappast någon dokumentation på det, något ExtJS (nu Sencha) är lite beryktat för.

Sammanfatta

Nu när du har lite mer kunskap om Sencha Touch, hoppas jag att du kan lägga till den i din arsenal av mobilapplikationsverktyg. Precis som med någon annan utvecklingsindustri måste du välja rätt verktyg för jobbet. Sencha Touch kan vara det rätta verktyget om du bygger en mobil applikation på hög nivå via webben. Bara se till att det är rätt passform för ditt projekt innan du går längre. Det är allt för nu, låt mig veta vad du tycker om Sencha Touch och andra ramar i kommentarerna!