Piccoli trucchi per Flex

Flex oscar Commenta l'articolo

Di seguito alcuni trucchi per chi lavora con Flex Builder 3:

  1. Quando vengono creati degli skin personalizzati bisogna rispettare la nomenclatura per il simbolo pari a :
    Style_Selector_Part

    dove Style specifica il tipo di stile CSS e di solito è il nome del componente;
    dove Selector è opzionale ed è lo stile selezionato;
    dove Part rappresenta la proprietà dello stile CSS ed è lo skin come upSkin odownSkin .

    Per esempio Button_upSkin (non ha il selector)
  2. Se vuoi assegnare ad un DateField uno Skin solo al textInput contenuto nel componente puoi farlo così:
    DateField-textInput_borderSkin (Illustrator, Fireworks, Photoshop) oppure DateField$textInput_borderSkin (Flash)
  3. È possibile assegnare ad uno specifico componente un tag CSS senza assegnarglielo direttamente sul componente attraverso la proprità styleNam, e cioè:
        Button.mioBottone
    {
    fillAlphas:         1.0, 1.0;
    fillColors:         #84B1F4, #1D4888;
    borderColor:         #07314F;
    color:             #FFFFFF;
    } 
    
  4. Tramite Flex Builder 3 è possibile
    creare un CSS file, è sufficente creare un file CSS e scegliere la vista "Design", da questa vista vediamo i componenti graficamente e quindi modificarli e vedere le modifiche subito applicate sul componente. Una volta termianata l’operazione tornate ala vista "Code" e avrete il codice CSS.
  5. Quando creaimo un’animazione all’interno di un componente, come un cerchio animato dentro un button (in Flash mettiamo una maschera per non far vedere il cerchio che esce dal bottone), è meglio usare ClassReference che SkinClass, altrimenti potremmo avere un problema di ridimensionamento.

    In figura: Situazione che non vogliamo ottenuta col seguente codice
    Button
    {
    skin: Embed(skinClass="Button_skin");
    }
    
    In figura: Situazione richiesta ottenuta col seguente codice
    Button
    {
    skin: ClassReference("Button_skin");
    }
    
  6. Quando create un nuovo skin da Flash e cambiatre le dimensioni di default dello stesso, per esempio Button, potreste ottenere dei risultati non attesi; allo stesso tempo controllate che tutti gli stati abbiamo la stessa dimensione altrimenti il componente si sposterà quando viene cambiato lo stato;
  7. Quando importi uno skin in Flex Builder devi addizionare il CSS per VSlider e HSlider, perché di default viene importato solo Slider, quindi senza la modifica suggerita non si vedranno applicati i CSS costruiti nello skin;
  8. Quando "customizing" lo shape del tuoskin, puoi o meno arrotondare gli ancoglis, ma se lo fai, assicurati di usare lo stuile “focusRoundedCorners” con “cornerRadius” per questo componente.
  9. Qunado "customizing" il ProgressBar "indeterminato" (quello che non evolve col tempo, ma ha un’animazione ciclica), fate attenzione allo "spacing" al tuo bordo oppure salterà l’animazione. Per evitare ciò fate lo stesso "spacing" nel template;
  10. Non usare nello skin un MovieClip che ha un 9-slice scaling diverso da quello richiesto. Anche i simboli Graphic possono creare problemi, quindi la soluzione migliore è usare lo Shape;
  11. Lo skin per il MenuBar_itemSkin non lavora bene, quindi separa i clip in MenuBar_itemUpSkin, MenuBar_itemOverSkin, MenuBar_itemDownSki, dove ognuno rappresenta uno stato;
  12. Quando "customizing" il background dello skin per una lista di componenti, tieni in mente che per default l’ItemRenderer background estende il bordo del componente, così esso oscurerà il tuo bordo quando il componente è selezionano o quando passi il mouse sopra di esso. Quindi setta il tuo ItemRenderer background all’interno del bordo del componente creando un custom renderer. Devi eliminare i bordi oppure fare il tuo ItemRenderer backgroundColor style dello stesso colore del bordo.
  13. Ricorda che alcuni componenti vengono usati da altri componenti(per esempio., NumericStepper usa ilTextInput borderSkin, ComboBox usa List’s, TextArea usa ScrollBars, ecc.). Così se cambi TextInput skin graphic esso cmabierà anche dentro lo stepper button skins.
  14. I Css Style non lavorano con gli custom skin graphic.
  15. Il ComboBox editableSkin non lavora bene. Il simbolo necessita essere separato in 4 simboli (ComboBox_editableUpSkin, ComboBox_editableOverSkin, ComboBox_editableDownSkin, ComboBox_editableDisabledSkin) e importato dentro Flex Builder. Il template symbol è 21 pixels in larghezza, la larghezza di default per l’editable ComboBox button è 22 pixels così devi ridimensionare il symbol in modo che la freccia non sgrani.
  16. Usare graphical skins per un Panel può portare a confusione. Il contenuto del Panel non rispetta il valore del padding. Una soluzione è settare il contenuto del pannello in un container, cioè settare il valore del top/bottom/left/right di questo container allo stesso del bordo nel Panel graphic.
  17. Ci sono due modi per referenziare la localizzazione di un file: nativePath e url. Se aggiorni l’immagine all’interno dell’item render esso deve essere un url e non un nativePath perché la funzione updateDisplayList usa httpLoader.
  18. E’ buona norma quando viene catturato un evento utilizzare i metodi stopPropagation() e stopImmediatePropagation() in modo da non propagare l’evento su altri componenti che non lo cattureranno.

Scrivi un Commento

Home | Graffiti e Disegni | Educazione | Chi siamo | Blog | Progetti | Contatti
RSS Feed Comments RSS Accedi