Sencha Touch: Mobile JavaScript Framework


Am văzut recent, pe scurt e drept, cum scriem o aplicaţie HTML5 pentru Android: partea I, partea a II-a şi partea a III-a. O concluzie pripită ar fi că putem lua orice sit şi îl facem aplicaţie pentru Android. Nu merge aşa. Desigur, o primă provocare e un design adaptabil diferitelor rezoluţii, dar nu e singura. O webaplicaţie pentru mobile este din multe puncte de vedere diferită de o webaplicaţie obişnuită. Şi tocmai de aceea există multe framework-uri JavaScript care să ajute, oferind şi elementele de design şi funcţionalităţile specifice aplicaţiilor pentru mobile.

imagine

Astăzi vă propun să ne oprim foarte pe scurt la Sencha Touch. Această bibliotecă JavaScript ajută la dezvoltarea de aplicaţii pentru Apple iOS 3+, Android 2.1+ şi BlackBerry 6+, care cică ar acoperi 95% din mobilele americane. Situaţia mondială probabil, dar nu ştiu sigur, nu e foarte îndepărtată de aceste cifre. Dacă descărcaţi pachetul veţi găsi o documentaţie stufoasă şi bine gândită, cu multe exemple, cu posibilitatea de a fi văzute imediat în acţiune.

imagine

Nu am de gând să intru adânc în subiect, dar pentru cei curioşi, un exemplu foarte-foarte scurt. El pleacă de la următorul fişier HTML5. Nu ne interesează fişierul CSS, nici primul fişier JS, fiind din pachetul Sencha Touch. Ne interesează însă apps.js.

<!DOCTYPE html>
<html>
<head>
    <title>Cluj-Napoca</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="sencha-touch.css" type="text/css">
    <script type="text/javascript" src="sencha-touch-all.js"></script>
    <script type="text/javascript" src="apps.js"></script>
</head>
<body></body>
</html>

Iată şi fişierul nostru JS, unde de dragul clarităţii exclud informaţia text.

Ext.application({
    name: 'Cluj-Napoca',
    launch: function() {
		Ext.create('Ext.TabPanel', {
			fullscreen: true,
			defaults: {
				styleHtmlContent: true
			},

			items: [
				{
					title: 'Pe scurt',
					scroll: 'vertical',
					html: '<p>Numele de Cluj provine...</p>'
				},
				{
					title: 'Istorie',
                    scroll: 'vertical',
					html: '<p>Prima atestare...</p>'
				}
			]
		});
	}
});

Şi acum iată aplicaţia în acţiune. Ca să defilaţi în jos, faceţi cu mouse-ul ca şi cum aţi face cu degetul pe touchscreen. Evident, folosiţi şi cele două butoane de sus. Simplu, nu? Dacă testul nu se vede bine, încărcaţi-l în pagină nouă.


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (Neevaluat încă)
Loading...Loading...

0 comentarii


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *