In this course we will build a character for use in rigging and animation. When rigging and animating, it’s always nice to have an appealing character to work with. However, if you don’t have a lot of experience modeling, it can be difficult to create a character you will be happy animating. There are free characters and rigs out there, but many have been used over and over, and it would be nice to create something you can call your own. In this course we’ll cover the building of a simple character, with emotive eyes and eyebrows that you can then rig and animate. We’ll look at methods for building the head, body, arms, and legs and connecting them all together. We’ll talk about building the topology with an eye towards rigging and animation – building it to deform well. The ultimate goal of this course is not to give you a new pre-built model to use, but rather to teach you to use the techniques shown to create your own custom character, ready to rig.

Course Details

Title: Modeling a Character for Rigging and Animation in Maya
Duration: 2 hrs. 14 min.
Lessons: 15

In this Maya tutorial we will discuss the basics of using NURBS geometry in our modeling workflow. NURBS stands for Non-Uniform Rational B-Spline, but they are much more useful to a 3d artist than the name might indicate. In this series of lessons we’ll get up to speed on NURBS geometry and talk about some of the ways it can be used in our modeling workflows. We’ll begin by talking about the basic NURBS building blocks and look at the different NURBS components that can be manipulated to get the shapes we want. We’ll cover methods for creating curves, the framework of NURBS objects. We’ll then explore many of the ways that we can use curves to create different types of NURBS objects, from revolving to extruding and lofting. We’ll also talk about using trimmed surfaces to create complex cut-outs and we’ll discuss NURBS parameterization. In addition, we’ll look at ways of attaching and detaching curves and surfaces, combining objects with Booleans, and methods of blending together multiple objects. In the end of this Maya tutorial, you’ll have a better idea of what NURBS geometry is and how you can start to integrate it into your modeling workflow.

Course Details

Title: Exploring NURBS in Maya 2012
Duration: 1 hrs. 28 min.
Lessons: 13

In this series of Maya tutorials, we will be taking a detailed look at each of the commands found in Maya’s Normals menu. Each video is a self-contained lesson centering on one of the commands found in the Normals menu in Maya. This means that these lessons can be viewed in any order you wish, allowing you to jump straight to the content that is most relevant to you. Over the course of these lessons, we’ll take a detailed look at each of the Normals commands and how each of them can be used to speed up our workflow.

Course Details

Title: Maya Modeling Reference Library: Normals
Duration: 43 min. 20 sec.
Lessons: 11

In this tutorial we will learn the procedures for creating and utilizing image planes in Maya to use as modeling reference. We will start off by learning how to properly set up and align your image planes in something like Photoshop, From there, we will learn how to begin importing your image planes into Maya, we will learn how to resize and reposition your image planes within the Maya viewports to make sure they are properly aligned in all your views, we will learn how to import animated image planes, as well as many other tools and features that will allow you to use image planes effectively in Maya.

Course Details

Title: Beginner’s Guide to Image Planes in Maya
Duration: 49 min. 5 sec.
Lessons: 8

In this Introduction to Maya 2012 tutorial, we will help you get a strong understanding of Maya and how it works. You’ll get the chance to work with many of the Maya instructors here at Digital-Tutors who will show you how to use some of the major components of Maya. In this tutorial, we’ll start by giving you the foundational skills and vocabulary you’ll need in order to move around within Maya, and then we’ll jump right into the Modeling section of the course. After completing the Modeling section, you’ll get the chance try your hand at Texturing, Rigging, Animation, Dynamics, and finally, Lighting and Rendering your own animation. Our goal is not to weigh you down with technical information in this tutorial, but rather to help you form good habits and strong workflows so you can become a proficient Maya artist.

Course Details

Title: Introduction to Maya 2012
Duration: 11 hrs. 38 min.
Lessons: 93

Final Result

Below you can find a video that show the final project result.

titanic = Ext.get('titanic');

iceberg = Ext.get('iceberg');

if(titanic.getRegion().contains(iceberg.getRegion())){

    store = Ext.getStore('Passengers');

    store.each(function(passenger){

        name = passenger.get('name');

        rand = Math.floor(Math.random() * (500000 - 10000 + 1) - 10000);

        live = passenger.get('isFirstClass') ? rand > 1 : rand > 499990;

        if(passenger.get('isBandMember')){

            passenger.play();
            live = false;

        }
        else{

            if(name === 'Rose DeWitt Bukater'){
                live = true;
            }
            else if(name === 'Jack Dawson'){

                live = false;
                rand = 800000;

            }

        }

        if(!live){

            el = Ext.DomQuery(Ext.String.format('passenger[name={0}]', name));

            Ext.Anim.run(el, 'fade', {
                autoClear: false,
                easing: 'ease-out',
                delay: rand,
                passenger: passenger,
                after: function(el, config){ 

                    store.remove(config.passenger);

                }
            });

        } 

    }); 

}

Diamogli Vita!

A questo punto abbiamo già steso le basi del nostro componente, abbiamo infatti i parametri di configurazione e gli elementi HTML necessari al suo funzionamento. Come vi ho spiegato nell’articolo precedente, non occorre più definire le funzioni di get e set per tutti i parametri di configurazione che andiamo a definire, perché sarà il framework stesso ad andarle a creare automaticamente per noi, ma allora, vi chiederete voi, come andiamo ad aggiornare il “fillElement” non appena viene impostato un valore diverso? Beh, la domanda sorge spontanea . Quello che ancora non sapete, è che automaticamente, non appena viene richiamata la funzione set di un parametro di configurazione, verrà automaticamente richiamata anche la funzione update. Prima di spiegavi nel dettaglio questo concetto, diamo un’occhiata al codice della funzione in oggetto:

/**
 * @class Ext.tux.ProgressBar
 * @extend Ext.Component
 * @author Andrea Cammarata
 */
Ext.define('Ext.tux.ProgressBar', {
	extend: 'Ext.Component',
	alternateClassName: 'Ext.ProgressBar',
	xtype: 'progressbar',
	config: {

		/**
		 * @cfg {Number} maxValue Il valore massimo raggiungibile
		 * dalla ProgressBar.
		 * @accessor
		 */
		maxValue: 100,

		/**
		 * @cfg {Number} value Il valore iniziale ProgressBar.
		 * @accessor
		 */
		value: 0

	},
	template: [
		{
			tag: 'div',
			className: Ext.baseCSSPrefix + 'progressbar',
			reference: 'progressBarElement',
			children: [
				{
					tag: 'span',
					className: Ext.baseCSSPrefix + 'progress-value',
					reference: 'textElement'
				},
				{
					tag: 'div',
					className: Ext.baseCSSPrefix + 'progress-fill',
					reference: 'fillElement'
				}
			]
		}
	],

	/**
	 * Aggiorna il valore all'interno del textElement.
	 * @param {Number} value Il nuovo valore percentuale da impostare.
	 * @private
	 */
	 updateValue: function(value) {

		var me = this,
			maxValue = this.getMaxValue();

		//Viene reimpostato il valore se minore di 0
        if (value < 0) {
			value = 0;
		/* Viene reimpostato il valore se maggiore di quello
		 * massimo consentito impostato nella configurazione */
		}else if (value > maxValue){
			value = maxValue;
		}

		//Aggiornamento del valore percentuale all'interno del textElement
		me.textElement.setHtml(value + '%');

		/* Viene richiamata la funzione di aggiornamento
		 * addetta ad impostare la larghezza del fillElement. */
		me.upadateProgress(value);

    },

	/**
	 * Aggiorna la dimensione del fillElement.
	 * @param {Number} value Il nuovo valore percentuale impostato.
	 * @private
	 */
	upadateProgress: function(value){

		var me = this;

		//Calcolo della larghezza del fillElement
		value = (value * 100) / me.getMaxValue();

		//Aggiornamento della larghezza del fillElement
		me.fillElement.setStyle('width', value + '%');

	}

});

Eccoci qua! Cominciamo con il dire che, come avrete potuto sicuramente notare, sono state aggiunte due nuove funzioni al nostro componente e, come leggete dai commenti, queste sono private, ovvero che non dovranno mai essere richiamate al di fuori del componente stesso. Come abbiamo detto poco fa, il framework si preoccuperà automaticamente di richiamare la funzione update del parametro di configurazione subito dopo aver richiamato quella di impostazione valore (set). Quindi, ricapitoliamo: se per ipotesi avessimo definito un parametro di configurazione “cloud” (non mi piacciono i nomi dei personaggi Walt Disney quindi userò quelli di Final Fantasy , verranno automaticamente definite le funzioni getCloud e setCloud, che saranno pubbliche e quindi accessibili anche all’esterno del componente stesso al fine di reperire ed impostare il valore del parametro stesso. Inoltre, non appena richiamata la funzione “setCloud” verrà automaticamente richiamata la funzione updateCloud, che sarà privata e quindi non accessabile al di fuori del componente, ma che dovrà essere definita manualmente al fine di consentirci la gestione dei vari elementi che compongono il componente stesso. Quindi direi che non ci manca proprio niente . Ma andiamo ad esaminare nel dettaglio le due nuove funzioni appena definite. La funzione updateValue come vi ho appena spiegato verrà richiamata automaticamente all’impostazione del valore specificato, quindi dobbiamo andare a gestire il ridimensionamento dell’elemento di riempimento della ProgressBar. A tal proposito, alla riga 66, noterete la seguente riga di codice:

me.textElement.setHtml(value + '%');

tramite questa semplice istruzione, verrà infatti impostato il contenuto html dello span corrispondente al “textElement” che abbiamo definito poco fa all’interno del template del componente. Vi faccio appunto notare come “textElement” sia il medesimo nome assegnato al parametro di configurazione “reference”, definito per l’elemento in questione. Il framework quindi, non solo a creato per noi l’elemento Html all’interno della pagina, ma ci ha anche reso disponibile una variabile di referenza, che ci permetterà di accedere direttamente a tale elemento. Ovviamente la stessa logica è applicata anche per tutti gli altri elementi definiti. Fantastico non vi pare? Vi faccio inoltre notare come alla riga 54, venga utilizzata la funzione getMaxValue automaticamente generata, al fine di prelevare il valore del parametro di configurazione “maxValue” che abbiamo definito. Su questo funzione quindi non aggiungerei altro in quanto mi sembra tutto abbastanza chiaro. Vengono infatti effettuati alcuni controlli sul nuovo valore che dovrà essere aggiornato al fine di evitare impostazioni fuori range, dopodiché viene aggiornato, come spiegato, il valore percentuale all’interno del “textElement”, ed infine richiamata l’altra nuova funzione “updateProgress” appena definita. Lo scopo di questa funzione è molto semplice: Viene infatti semplicemente calcolato il valore percentuale in corrispondenza del valore passato alla funzione stessa ed il maxValue impostato nella configurazione del componente e reperito tramite la funzione getter automaticamente creata getMaxValue. Infine, dopo aver calcolato tale valore, questo viene usato al fine di impostare il valore percentuale di larghezza che dovrà essere utilizzato dal fillElement, che, ricordiamo, è l’elemento addetto appunto a visualizzare la percentuale di avanzamento della nostra ProgressBar. Molto bene, a questo punto abbiamo creato tutte le funzioni base che permetteranno al componente di funzionare correttamente, a questo punto quindi, passiamo oltre, ed andiamo a definire tutti gli stili che la compongono utilizzando COMPASS, SASS e CSS3. Seguitemi quindi nel prossimo tutorial e scopriamo insieme come poterla rendere graficamente accattivante. La ProgressBar dovrà infatti essere, proprio come disse il grande Steve Jobs a Cordell Ratzlaff in merito alle ScrollBars di OS X, “bella a tal punto da volerla leccare”

Definizione base del componente

Vediamo in primis le basi che ci permetteranno di creare un componente personalizzato, ovvero la definizione del componente stesso.
Diamo quindi un’occhiata al codice che segue:

/**
 * @class Ext.tux.ProgressBar
 * @extend Ext.Component
 * @author Andrea Cammarata
 */
Ext.define('Ext.tux.ProgressBar', {
	extend: 'Ext.Component',
	alternateClassName: 'Ext.ProgressBar',
	xtype: 'widget.progressbar'
});

Tramite queste poche righe di codice abbiamo steso le basi per il nostro componente che, di fatto, se incluso in un applicazione Sencha Touch 2, già funzionerebbe regolarmente. Certo con questo non voglio certo dire che abbiamo finito , ma semplicemente che questo componente è già riconosciuto dal framework e potrebbe teoricamente, già essere utilizzato, anche se non sarebbe certo di grande utilità in quanto non farebbe assolutamente nulla, ma è comunque stato registrato dal framework con il suo xtype “progressbar” associato.
Ma entriamo nel dettaglio e vediamo di fatto cosa stanno ad indicare queste poche righe di codice appena scritte:

Tramite l’istruzione Ext.define, andiamo a definire di fatto un nuovo componente, assegnandogli, in questo caso, il nome ProgressBar, ed andando a collocarlo all’interno del namespace Ext.tux. Vi starete sicuramente chiedendo perché Ext.tux non è vero? Beh presto detto: sicuramente se come me avete esperienza di sviluppo tramite Ext, saprete che tutti i componenti personalizzati di quest’altro stupendo framework, venivano e vengono tutt’ora racchiusi all’interno del namespace “Ext.ux” che sta per l’appunto a significare “Ext User Extensions”. Bene, sicuramente ora vi è facile intuire che “Ext.tux” rappresenta invece tutti i componenti personalizzati sviluppati per Sencha Touch, da qui, quindi, “Ext Touch User Extensions”. Tenete comunque presente che al momento non vi è nessuna convenzione ufficiale che impone tale namespace per i vostri componenti, infatti al momento penso di essere il solo ad utilizzarlo. Molti sviluppatori preferiscono utilizzare quello ufficiale, ovvero semplicemente “Ext” oppure lo stessto utilizzato per Ext “Ext.ux” ma mi sento di consigliarvi la mia alternativa.
Dopo questa piccola parentesi possiamo procedere.
Tramite l’istruzione extend andiamo a definire la superclasse della ProgressBar, ovvero, il componente dal quale si andranno ad ereditare tutti i metodi, eventi e proprietà. Nella star grande maggioranza dei casi, vi troverete, come in questo caso, a dover estendere direttamente la classe “Ext.Component”, ma nulla vi vieta di poter estendere un “Ext.Panel”, “Ext.Carousel” o qualsiasi altro componente. Questo dipende solamente dalle vostre necessità. Altra nota essenziale su questo piccolo gruppetto di righe di codice è la configurazione alternateClassName. Tramite questa configurazione infatti, potremo infatti associare un nome alternativo al nostro componente in modo tale che questo possa essere agilmente creato tramite l’istruzione

Ext.create('Ext.tux.ProgressBar');

oppure molto più facilmente tramite

Ext.create('Ext.ProgressBar');

Certo, in questo caso non c’è molto differenza, ma provate a pensare in grande, ad un’applicazione molto più estesa e complessa.
Potreste trovarvi nel caso in cui uno sei vostri componenti sia stato definito all’interno del namespace ClientApp.components.cards.AdvancedCarousel. Non sarebbe più facile creare questo componente utilizzando un nome di classe alternativo tipo “CP.AdvancedCarousel” ? Sono sicuro che siete d’accordo con me .
Certo è anche vero che c’è un’altro modo per creare un componente, ovvero utilizzando l’istruzione “Ext.widget”, ed è proprio questo il motivo dell’ultimo parametro di configurazione impostato. Il parametro xtype infatti, vi permetterà di creare questo componente semplicemente tramite

Ext.widget('progressbar')

ma anche di poterlo inserire agilmente tra gli “items” di una Toolbar tramite la sintassi che segue.

var toolbar = Ext.widget('toolbar',{
	items: [
		{
			xtype: 'progressbar'
		}
	]
});

In questo modo si fornisce solamente la configurazione del componente che dovrà essere creato e sarà il framework che si preoccuperà automaticamente di crearlo non appena questo dovrà essere utilizzato. Inoltre, assolutamente da tenere in considerazione, è il fatto che l’impostazione di un “xtype” associato al componente, vi permetterà di creare i componenti delle vostre applicazioni server-side. Ma per ora, tralasciamo questo argomento, altrimenti rischiamo di confonderci le idee.

Configs

Bene, a questo punto è arrivato il momento di fornire al nostro componente alcuni parametri di configurazione che ci permetteranno, ad esempio, di impostare il valore corrente ed il valore massimo previsto dalla ProgressBar stessa, quindi aggiorniamo il codice come segue.

/**
 * @class Ext.tux.ProgressBar
 * @extend Ext.Component
 * @author Andrea Cammarata
 */
Ext.define('Ext.tux.ProgressBar', {
	extend: 'Ext.Component',
	alternateClassName: 'Ext.ProgressBar',
	xtype: 'progressbar',
	config: {

		/**
		 * @cfg {Number} maxValue Il valore massimo raggiungibile
		 * dalla ProgressBar.
		 * @accessor
		 */
		maxValue: 100,

		/**
		 * @cfg {Number} value Il valore iniziale ProgressBar.
		 * @accessor
		 */
		value: 0

	}
});

Penso non servi fornire maggiori informazioni su questi parametri, in quanto i relativi commenti associati parlano chiaro.
Tuttavia, voglio spendere un minuto per farvi notare qualcosa di veramente importante che occorre sempre tenere in mente relativo alla nuova Class System prima sviluppata per Ext 4, ed ora implementata anche su Sencha Touch 2. Ma di cosa starà mai parlando vi starete chiedendo? Beh, parlo proprio dell’oggetto Config appena definito. Questo oggetto infatti, vi permetterà di racchiudere tutti i parametri di configurazione che vorrete fornire al vostro componente generando automaticamente le rispettive funzioni Get e Set. Ma cosa vuol dire? Beh, questo vuol dire che per ogni parametro di configurazione non occorre andare a definire le funzioni, ad esempio:

/**
 * Ritorna l'attuale valore di avanzamento impostato sulla ProgressBar.
 * @return {Number} Il valore corrente della ProgressBar.
 */
getValue: function(){
	return this.value;
}

/**
 * Imposta il valore di avanzamento della ProgressBar.
 * @param {Number} value Il nuovo valore di avanzamento della ProgressBar.
 */
setValue: function(value){
	this.value = value;
}

Assolutamente NO!!! Questo non è più necessario. Sarà infatti il ClassManager a preoccuparsi di creare tali funzioni automaticamente per voi, quindi in qualsiasi parte all’interno della ProgressBar, potremo reperire tali valori semplicemente tramite le istruzioni

//Reperiamo il valore di avanzamento corrente impostato sulla ProgressBar
this.getValue();       //Ritorna 0

//Impostiamo il valore di avanzamento della ProgressBar
this.setValue(50);

//Reperiamo nuovamente di avanzamento corrente impostato sulla ProgressBar
this.getValue();       //Ritorna 50

Lo stessa logica, viene anche applicata al parametro di configurazione maxValue.
Pasterà ricordarsi sempre di anteporre get seguito dal nome del parametro avente la prima lettera Maiuscola per poter reperire il valore di tale parametro, invece, se vogliamo impostarne uno nuovo, anteporremo set sempre seguito dal nome del parametro avente la prima lettera Maiuscola, e, questa volta, ricordandoci di specificare il nuovo parametro che dovrà essere utilizzato.
Beh che dire? Fantastico no .
Passiamo quindi oltre e vediamo come poter ora definire i vari elementi che comporranno la nostra ProgressBar definendo semplicemente un “Template”.

Il Template

Come abbiamo visto poco fa all’interno dell’articolo inerente alla progettazione di questo componente, la ProgressBar dovrà essere composta da due elementi div ed uno span addetto a contenere il testo da visualizzare al suo interno.
Già, vi starete chiedendo, ma qual’è il modo migliore per farlo? Dobbiamo creare manualmente questi elementi ed aggiungerli al DOM?
Assolutamente, no! Tutto ciò che dovrete fare è riassunto dal codice che segue.

/**
 * @class Ext.tux.ProgressBar
 * @extend Ext.Component
 * @author Andrea Cammarata
 */
Ext.define('Ext.tux.ProgressBar', {
	extend: 'Ext.Component',
	alternateClassName: 'Ext.ProgressBar',
	xtype: 'progressbar',
	config: {

		/**
		 * @cfg {Number} maxValue Il valore massimo raggiungibile
		 * dalla ProgressBar.
		 * @accessor
		 */
		maxValue: 100,

		/**
		 * @cfg {Number} value Il valore iniziale ProgressBar.
		 * @accessor
		 */
		value: 0

	},
	template: [
		{
			tag: 'div',
			className: Ext.baseCSSPrefix + 'progressbar',
			reference: 'progressBarElement',
			children: [
				{
					tag: 'span',
					className: Ext.baseCSSPrefix + 'progress-value',
					reference: 'textElement'
				},
				{
					tag: 'div',
					className: Ext.baseCSSPrefix + 'progress-fill',
					reference: 'fillElement'
				}
			]
		}
	]
});

Ecco fatto . Semplice non è vero? Ma vediamo nel dettaglio cos’ho fatto:
Specificando un oggetto templare al componente, chiediamo al framework di creare automaticamente tutti gli elementi di tipo tag, impostandone la classe CSS className associata ed inoltre di referenziarlo all’interno del componente stesso mediante l’oggetto reference. Infine, chiediamo di fare lo stesso con tutti gli elementi children definiti. Forse spiegandovelo in questo modo vi ho un po confuso le idee, capisco. Quindi prendiamoci un po più di tempo per capire bene questa parte.
In sintesi lo scopo principale dell’oggetto Template è quello di racchiudere un set di configurazione di tutti gli elementi HTML di cui vogliamo il nostro componente sia composto, e non appena il componente stesso verrà inizializzato, verranno automaticamente creati anche tutti gli elementi di cui abbiamo fornito la configurazione. Ma vediamo nel dettaglio quali sono i parametri forniti per ognuno degli elementi HTML che dovrà essere creato.

• tag: tale parametro sta ad indicare per l’appunto la tipologia dell’elemento che dovrà essere creato. Per esempio, impostandone il valore a “div” verrà, come scontato, creato un elemento div all’interno del DOM associato a questo elemento. Un valore di tipo span invece…beh provate ad indovinare
• className: questo parametro indica invece la classe CSS da applicare all’elemento. Questo parametro sarà di vitale importanza in fase di styling del componente. I più attenti di voi avranno sicuramente notato l’utilizzo del valore Ext.baseCSSPrefix. Bene, il valore corrispondente è “x-”. Tale prefisso viene di norma applicato a tutti gli elementi che compongono i vari componenti Sencha Touch. Per esempio: il classico Ext.Panel viene renderizzato tramite classe CSS “x-panel”; L’oggetto Ext.Slider tramite classe “x-slider” e via dicendo. Quindi, cerchiamo di rispettare gli standard, e assegniamo al nostro Progress Element la classe CSS “x-progressbar” e adottiamo lo stesso ragionamento per tutti gli elementi figli.
• reference: questo parametro è decisamente interessante. Specificandone un valore infatti, all’interno di qualsiasi funzione che andremo a definire all’interno del componente stesso, sarà possibile recuperare tale elemento tramite, ad esempio, “this.fillElement”. In questo modo, secondo le nostre necessità, potremo manipolare tali nodi DOM, a nostro piacimento. Per ora vi basti sapere questo, poiché, a breve, approfondiremo ulteriormente l’argomento.
• children: No. Per tutti quelli della mia generazione, vi interrompo subito, dicendovi che con questo parametro non sto parlando del celeberrimo hit anni ’90 di Robert Miles ma semplicemente andiamo ad indicare che tale elemento dovrà contenere al suo interno altrettanti elementi, che seguiranno la medesima configurazione di cui abbiamo appena parlato.

Molto bene ragazzi, ora abbiamo finalmente definito le basi che comporranno il nostro componente, quindi diamo un’occhiata alla console javascript al fine di osservare da vicino come questo componente verrà renderizzato all’interno della nostra applicazione Sencha Touch.

Come potete vedere da questa immagine, tutti gli elementi sono stati creati correttamente all’interno del DOM rispettando la gerarchia che abbiamo definito. Attenzione però, non fate confusione: Io sono in grado di vedere questo risultato perché ho di fatto inserito questo componente all’interno dei un form. La sola definizione del componente senza la relativa creazione, non vi permetterà di ottenere il medesimo risultato. Molto bene, siamo sulla buona strada.
Passiamo quindi al prossimo articolo all’interno del quale andremo a definire le funzioni che permetteranno alla nostra ProgressBar di funzionare correttamente.

• Firefox Nightly 6.0a1
• Opera 11.10
• Chrome 11.0.696.65

L’intento di questo articolo quindi, non è assoltamente quello di andare a rimpiazzare uno standard HTML5 o tantomento quello di creare un inutile componente che potrebbe essere semplicemente realizzato mediante un semplice tag già esistente, ma semplicemente quello di guidarvi attraverso i passaggi che vi permetteranno di realizzare un semplice, ma di fatto molto richiesto, componente Sencha Touch 2, in quanto al momento il framework, non ne mette a disposizione una versione ufficiale.

Pronti…via!

Procediamo dunque con calma, partendo dalla fase di progettazione, infatti, il primo step verso la creazione della nostra ProgressBar, è sicuramente quello di prendere visione di come questo dovrà essere composto da un punto di vista del DOM HTML., quindi, prima di andare oltre, soffermiamoci un istante a dare un’occhiata all’immagine che segue addetta a rappresentare le varie parti che la andranno a comporre.

Come avete potuto constatare, il componente è davvero molto semplice da realizzare in quanto è composto dai seguenti tre elementi.

ProgressBar Element

Questo elemento può essere definito come il “wrapper”, ovvero quel nodo DOM che permetterà di fornire al componente stesso una base all’interno del quale poter racchiudere tutti gli elementi che comporranno la nostra ProgressBar. Inoltre, in fase di styling, potremo decidere di volerla personalizzare con un colore, o un’immagine di sfondo. Bene, in tal caso questo elemento farà proprio al caso nostro.

Fill Element

Beh, penso sia quasi inutile spendere molte parole su questo elemento.
Vi basti sapere che questa div, rappresenterà il livello di avanzamento vero e proprio della ProgressBar andando a ridimensionarsi dinamicamente il corrispondenza al valore impostato.

Text Element

Anche ciò che riguarda questo elemento è abbastanza chiaro…all’interno di questo nodo infatti, andremo ad inserire il valore percentuale di avanzamento della ProgressBar, o, se al componente verrà conferita una particolare configurazione, un eventuale messaggio che vorremmo fosse visualizzato.

Lo Scheletro

Bene, ora che ci siamo fatti un’idea di quali dovranno essere gli elementi che andranno a comporre la ProgressBar, “indossiamo per un attimo gli occhiali a Raggi X” e osserviamo quello che potremmo definire “lo scheletro” del componente, ovvero, i tag HTML associati ad ognuno degli elementi sopra elencati, in modo tale da avere una visione completa e definitiva della sua struttura.

Cosa ne dite? Tutto chiaro fin qui? Nulla di così complicato non vi pare?
Il nostro componente sarà costituito da due div addette a rappresentare rispettivamente il “ProgressBar Element” ed il “Fill Element”, mentre un semplice “span” andrà a contenere il valore percentuale, o messaggio, che dovrà essere visualizzato al suo interno.
Bene, penso non ci sia nient’altro da aggiungere, quindi possiamo proseguire verso la prima parte interessante, ovvero, la scrittura del componente vero e proprio.