Object Oriented Programming - lezione 7 - packages

[Flep]

In questa settimo articolo che rigiarda la Object Oriented Programming con Actionscript 3.0 vedremo come lavorare con i packages.

I packages non sono altro che pacchetti di classi e servono per suddividere ed organizzare il nostro progetto Flash.

Chiaramente più un' applicazione è importante e ramificata, più conviene suddividere le logiche in pacchetti in modo da creare una struttura ben organizzata ma soprattutto modulare.

Ogni pacchetto avrà le sue classi in base al ' tema ' del pacchetto.

Ad esempio, se volessimo implementare un carrello della spesa in Flash ad un e-commerce, avremmo un paccheto con nome ' compratore ', uno ' carrello ', un altro ' sistemaPagamento ' ecc ecc...

In questo modo avremo tutto sotto controllo e se qualcosa non dovesse girare come dovrebbe sappiamo subito in quale package controllare senza dover controllare tutta l' applicazione.



Ogni package deve avere un nome unico.

Ogni classe all' interno di un package deve avere un nome unico, quindi nel package ' compratore ' potrà esistere una sola classe con nome Utente. Potrebbe però esistere un' altra classe Utente all' interno del package ' carrello '.

All' interno di un package possiamo avere un altro package che viene definito come subpackage.



Per convenzione il package principale è sempre definito con il dominio di primo livello dello sviluppatore o organizzazione, ad esempio nel mio caso ( flepstudio.org ) il package principale sarebbe ' org ' con un subpackage ' flepstudio '. In sostanza il progetto sarebbe: org.flepstudio.nomeProgetto.categoria.nomeClasse.

Mi spiego meglio:

mettiamo caso che voglio costruire un' applicazione che chiamo ' sito '.

In questo caso avrei: org.flepstudio.sito e poi ad esempio potrei suddividere le mie classi per categorie: org.flepstudio.sito.utilita e org.flepstudio.sito.servizi oppure ancora org.flepstudio.sito.portfolio o anche org.flepstudio.sito.tutorials ecc ecc...



Vediamo degli esempi concreti...

Creo il FLA del progetto che chiamo ' settima.fla '.

Creo una cartella ( in questo caso non la chiameremo cartella ma package ) con nome ' org '. Al suo interno un' altra cartella con nome ' flepstudio'.







Adesso creo la Document Class del progetto, un file AS che salvo con nome ' Settima.as ' all' interno del package flepstudio:



implementata in questo modo:

package org.flepstudio
{
    import flash.display.MovieClip;
    
    public class Settima extends MovieClip
    {
        public function Settima()
        {
            trace('La Document Class è stata instanziata correttamente');
        }
    }
}

Da notare la prima riga che definisce il package

package org.flepstudio

stiamo dicendo a Flash che la classe Settima ha la seguente path: org.flepstudio



Fino ad ora abbiamo sempre assegnato una Document Class al FLA del progetto nel modo più ovvio e cioè entrambi si trovavano sempre nella stessa directory, nello stesso package.

In questo caso, invece, assegno la Document Class a settima.fla scrivendo org.flepstudio.Settima nel campo Document Class del pannello proprietà di settima.fla .





Pubblicando l' SWF abbiamo il seguente output:

La Document Class è stata istanziata correttamente

Adesso creo un altro package all' interno di flepstudio ( quindi dove si trova Settima.as ) che chiamo ' sito '.



Adesso creo 4 packages ( cartelle ) all' interno di sito e le chiamo:

- gallery

- portfolio

- servizi

- utilita



Credo sia scontato che in ognuno di questi packages andremo a creare delle classi che gestiranno la nostra applicazione. In questo modo abbiamo una struttura modulare ed ogni package avrà le proprie classi che gestiranno una parte specifica dell' intero progetto.

Facciamo un esempio, creando la classe Images.as nel package org.flepstudio.sito.gallery, quindi salviamo la classe Images.as nella cartella ' gallery '.

Images.as sarà dichiarata in questo modo:

package org.flepstudio.sito.gallery
{
    public class Images
    {
        public function Images()
        {
            trace('La classe Images è stata istanzata correttamente');
        }
    }
}

A questo punto, per istanziare la classe Images dalla Document Class, devo prima importare Images in Settima.as e poi istanziare Images, quindi torno in Settima.as e scrivo :

package org.flepstudio
{
    import flash.display.MovieClip;
    import org.flepstudio.sito.gallery.Images;
    
    public class Settima extends MovieClip
    {
        private var images:Images;
        public function Settima()
        {
            trace('La Document Class è stata instanziata correttamente');
            
            images=new Images();
        }
    }
}

import org.flepstudio.sito.gallery.Images ho importato Images.as dicendo a Flash dove si trova appunto la classe Images

private var images:Images; creo una proprietà di tipo Images ( una volta importata la classe Images, possiamo riferirci a lei senza il percorso dell' intero package in cui si trova )

images=new Images(); istanzio la classe Images

e ottengo il seguente output:

La Document Class è stata instanziata correttamente

La classe Images è stata istanzata correttamente

Altro esempio, creo due classi ( Cliente1.as e Cliente2.as ) nel package ' portfolio ':

package org.flepstudio.sito.portfolio
{
    public class Cliente1
    {
        public function Cliente1()
        {
            trace('La classe Cliente1 è stata istanzata correttamente');
        }
    }
}

package org.flepstudio.sito.portfolio
{
    public class Cliente2
    {
        public function Cliente2()
        {
            trace('La classe Cliente2 è stata istanzata correttamente');
        }
    }
}

le importo e le istanzio dalla Document Class ( Settima.as ) in questo modo:

package org.flepstudio
{
    import flash.display.MovieClip;
    import org.flepstudio.sito.gallery.Images;
    import org.flepstudio.sito.portfolio.*;
    
    public class Settima extends MovieClip
    {
        private var images:Images;
        private var cliente1:Cliente1;
        private var cliente2:Cliente2;
        
        public function Settima()
        {
            trace('La Document Class è stata instanziata correttamente');
            
            images=new Images();
            cliente1=new Cliente1();
            cliente2=new Cliente2();
        }
    }
}

import org.flepstudio.sito.portfolio.*; con l' asterisco dico a Flash di importare tutte le classi presenti nel package portfolio

dichiaro le classi

private var cliente1:Cliente1;

private var cliente2:Cliente2;

istanzio le classi

cliente1=new Cliente1();

cliente2=new Cliente2();

ed ottengo il seguente output:

La Document Class è stata instanziata correttamente

La classe Images è stata istanzata correttamente

La classe Cliente1 è stata istanzata correttamente

La classe Cliente2 è stata istanzata correttamente

Altro esempio, creo una classe Design.as nel package servizi:

package org.flepstudio.sito.servizi
{
    public class Design
    {
        public function Design()
        {
            trace('La classe Design è stata istanzata correttamente');
        }
    }
}

e una classe Calcolatore.as nel package utilita:

package org.flepstudio.sito.utilita
{
    public class Calcolatore
    {
        public function Calcolatore()
        {
            trace('La classe Calcolatore è stata istanzata correttamente');
        }
    }
}

Importo, dichiaro ed istanzio Design.as nella Document Class:

package org.flepstudio
{
    import flash.display.MovieClip;
    import org.flepstudio.sito.gallery.Images;
    import org.flepstudio.sito.portfolio.*;
    import org.flepstudio.sito.servizi.Design;
    
    public class Settima extends MovieClip
    {
        private var images:Images;
        private var cliente1:Cliente1;
        private var cliente2:Cliente2;
        private var design:Design;
        
        public function Settima()
        {
            trace('La Document Class è stata instanziata correttamente');
            
            images=new Images();
            cliente1=new Cliente1();
            cliente2=new Cliente2();
            design=new Design();
        }
    }
}

fin quì niente di nuovo, ma se ora volessi istanziare Calcolatore.as da Design.as ?

Devo importare, dichiarare ed istanziare Calcolatore in Design così:

package org.flepstudio.sito.servizi
{
    import org.flepstudio.sito.utilita.Calcolatore;
    public class Design
    {
        private var calcolatore:Calcolatore;
        
        public function Design()
        {
            trace('La classe Design è stata istanzata correttamente');
            calcolatore=new Calcolatore();
        }
    }
}

import org.flepstudio.sito.utilita.Calcolatore; importo Calcolatore

dichiaro

private var calcolatore:Calcolatore;

istanzio

calcolatore=new Calcolatore();

ed ottengo questo output

La Document Class è stata instanziata correttamente

La classe Images è stata istanzata correttamente

La classe Cliente1 è stata istanzata correttamente

La classe Cliente2 è stata istanzata correttamente

La classe Design è stata istanzata correttamente

La classe Calcolatore è stata istanzata correttamente

Chiaramente l' istanza di Calcolatore che si chiama calcolatore sarà gestibile non dalla Document Class ma da Design.as in quanto appunto si trova fisicamente in Design.as .

Allego i files:

[derek_z]

Ciao Flep, questo tutorial è un pò datato ma spero che avrai modo di rispondermi perchè sono disperata.
Devo consegnare un progetto, ed ho seguito passo passo queste indicazioni dei package, avendo vari file .as da collegare alle varie sezioni.

- Innanzitutto volevo chiederti come mai la gerarchia delle cartelle è scritta al contrario: org.flepstudio.site...etc.

- poi sapere come mai non utilizzi la funzione import sul primo fotogramma, invece che inserire tutto nella document class (parlo da ignorante in materia).
Ma tipo: import.MieiPackage.Miopackage.prova.as

Ultima cosa ma di reale e fondamentale importanza è questa:

volevo collegare ad un file .as, per esempio, miomenu.as, il tuo file contenuto nel tutorial:
Creare un menu e gestire le sezioni con Flash CS3

che ha questo codice:

package
{
import flash.display.MovieClip;
import flash.events.MouseEvent;

public class Main extends MovieClip
{
private var menu_array:Array;
private var section_array:Array;

private var currentSection:int=0;
private var nextSection:int;

public function Main()
{
init();
}

private function init():void
{
menu_array=new Array(menu_mc.menu1_mc,menu_mc.menu2_mc,menu_mc.me nu3_mc,menu_mc.menu4_mc,menu_mc.menu5_mc);
section_array=new Array(section1_mc,section2_mc,section3_mc,section4 _mc,section5_mc);

stage.frameRate=31;

stopAll();

addMenuEvents();

hideCurrentSection();
}

private function stopAll():void
{
for(var i:int=0;i < menu_array.length;i++)
{
menu_array[i].stop();
section_array[i].stop();
}
}

private function addMenuEvents():void
{
for(var i:int=0;i < menu_array.length;i++)
{
menu_array[i].mouseChildren=false;
menu_array[i].buttonMode=true;

menu_array[i].id=i;
menu_array[i].isPressed=false;

menu_array[i].addEventListener(MouseEvent.MOUSE_OVER,setOver);
menu_array[i].addEventListener(MouseEvent.MOUSE_OUT,setOut);
menu_array[i].addEventListener(MouseEvent.MOUSE_DOWN,setDown);
menu_array[i].addEventListener(MouseEvent.MOUSE_UP,setUp);
}
}

private function setOver(evt:MouseEvent):void
{
if(evt.target.isPressed==false)
evt.target.gotoAndStop(2);
}

private function setOut(evt:MouseEvent):void
{
if(evt.target.isPressed==false)
evt.target.gotoAndStop(1);
}

private function setDown(evt:MouseEvent):void
{
nextSection=evt.target.id;
checkState(evt.target.id);

evt.target.gotoAndStop(3);
hideCurrentSection();

currentSection=evt.target.id;
}
private function setUp(evt:MouseEvent):void
{
if(evt.target.isPressed==false)
evt.target.gotoAndStop(1);
}

private function checkState(n:int):void
{
for(var i:int=0;i < menu_array.length;i++)
{
if(i==n)
menu_array[i].isPressed=true;
else
{
menu_array[i].isPressed=false;
menu_array[i].gotoAndStop(1);
}
}
}

private function hideCurrentSection():void
{
section_array[currentSection].gotoAndPlay(31);
showSection();
}

private function showSection():void
{
section_array[nextSection].gotoAndPlay(2);
}
}
}


L'ho modificato in modo che abbia le caratteristiche del nome del mio package come da tuo esempio:

package org.flepstudio.sito.navigator
{
import flash.display.MovieClip;
import flash.events.MouseEvent;

public class [COLOR="rgb(255, 0, 255)"]Miomenu[/color] extends MovieClip
{
private var menu_array:Array;
private var section_array:Array;

private var currentSection:int=0;
private var nextSection:int;

public function Miomenu ()
{
init();
}

private function init():void
{
menu_array=new Array(menu_mc.menu1_mc,menu_mc.menu2_mc,menu_mc.me nu3_mc,menu_mc.menu4_mc,menu_mc.menu5_mc);
section_array=new Array(section1_mc,section2_mc,section3_mc,section4 _mc,section5_mc);

stage.frameRate=31;

stopAll();

addMenuEvents();

hideCurrentSection();
}

private function stopAll():void
{
for(var i:int=0;i < menu_array.length;i++)
{
menu_array[i].stop();
section_array[i].stop();
}
}

private function addMenuEvents():void
{
for(var i:int=0;i < menu_array.length;i++)
{
menu_array[i].mouseChildren=false;
menu_array[i].buttonMode=true;

menu_array[i].id=i;
menu_array[i].isPressed=false;

menu_array[i].addEventListener(MouseEvent.MOUSE_OVER,setOver);
menu_array[i].addEventListener(MouseEvent.MOUSE_OUT,setOut);
menu_array[i].addEventListener(MouseEvent.MOUSE_DOWN,setDown);
menu_array[i].addEventListener(MouseEvent.MOUSE_UP,setUp);
}
}

private function setOver(evt:MouseEvent):void
{
if(evt.target.isPressed==false)
evt.target.gotoAndStop(2);
}

private function setOut(evt:MouseEvent):void
{
if(evt.target.isPressed==false)
evt.target.gotoAndStop(1);
}

private function setDown(evt:MouseEvent):void
{
nextSection=evt.target.id;
checkState(evt.target.id);

evt.target.gotoAndStop(3);
hideCurrentSection();

currentSection=evt.target.id;
}
private function setUp(evt:MouseEvent):void
{
if(evt.target.isPressed==false)
evt.target.gotoAndStop(1);
}

private function checkState(n:int):void
{
for(var i:int=0;i < menu_array.length;i++)
{
if(i==n)
menu_array[i].isPressed=true;
else
{
menu_array[i].isPressed=false;
menu_array[i].gotoAndStop(1);
}
}
}

private function hideCurrentSection():void
{
section_array[currentSection].gotoAndPlay(31);
showSection();
}

private function showSection():void
{
section_array[nextSection].gotoAndPlay(2);
}
}
}

...ovviamente salvando il file come mio Miomenu.as ed inserendolo nella cartella navigator...
ma non me lo fa funzionare....

sto impazzendo.
Voglio utilizzare entrambe i file dei tuoi tutorial, quindi la ramificazione dei package, con quel menu array che richiama le sezioni...
ma non funziona.

Mi sai dire come posso collegare il file di quel menu con array, in un file di questi package?

Ti prego rispondimi...
sono veramente disperata.
Cristina

[Flep]

Ciao,
la gerarchia delle cartelle è definita in quel modo ma non so darti un perchè specifico.
So che ogni developer usa quella gerarchia.

Gli import vanno fatti dalla Document Class, sulla timeline non deve esserci codice salvo rari casi eccezionali come il chiamare un metodo sulla Document Class durante un' interpolazione.

Che errore ti da quando cambi package a quella classe ?