Come personalizzare un Flex Accordion

February 6

Come personalizzare un Flex Accordion


Flex Builder è la soluzione di Adobe per lo sviluppo Web basato sui dati. Utilizzando XML, ActionScript e il resto del Adobe Creative Suite, uno sviluppatore Web può sia progettare e sviluppare ricche applicazioni Web. La libreria di Adobe Flex è dotato di componenti incorporati. Uno di questi componenti è la Fisarmonica. La fisarmonica è un menu a scorrimento che visualizza le informazioni sulla base di clic di un utente. Utilizzando Adobe Fireworks, un progettista in grado di sviluppare e distribuire le pelli uniche per la componente Accordion. Skinning darà un'applicazione Web un look unico e sentire.

istruzione

Sviluppare la pelle Fisarmonica

1 Avviare Fireworks CS5 e aprire un nuovo documento. Dal menu "Comandi", selezionare "Interfaccia Flex", e poi "Pelle Nuova Flex."

2 Selezionare il componente che si desidera per la pelle. Fireworks consentono di scegliere più componenti o un singolo componente. Selezionare "componenti specifici", e quindi scegliere il componente Accordion dalla lista. Selezionare "OK".

3 Utilizzando il toolkit incorporato in Fireworks, progettare uno skin per il componente Accordion. Esportare la pelle Flex selezionando "Comandi", quindi "Interfaccia Flex" e infine, "Esporta interfaccia Flex." Scegliere dove si desidera salvare il file pelle.

Creare la fisarmonica e stile si

4 Aprite Adobe Flex e passare alle applicazioni principali codice-view. Aggiungere il tag di apertura e di chiusura per il contenitore Fisarmonica:

<Mx: Fisarmonica>
</ Mx: Fisarmonica>

5 Aggiungere i pannelli al di fisarmonica tra l'apertura e chiusura tag fisarmonica.

<Mx: Fisarmonica>

&lt;mx:Form id=&quot;option1&quot; label=&quot;Option 1&quot;>
&lt;/mx:Form>

& Lt; mx: Modulo id = & quot; opzione2 & quot; label = & quot; Opzione 2 & quot;>
& Lt; / mx: Modulo>

</ Mx: Fisarmonica>

Il codice precedente crea la fisarmonica e aggiunge due opzioni del pannello per l'utente di scegliere. I pannelli sono classificati come "opzione 1" e "Option 2." Posizionare il contenuto per "opzione 1" e "Opzione 2" tra l'apertura e chiusura tag "Form".

6 Importare il materiale illustrativo della pelle si è creato. Selezionare "File", poi "Importa", quindi "Flash Builder" e "Opera della pelle." Scegliere la cartella che si desidera importare la vostra illustrazione pelle in. Assicurarsi che la cartella si trova all'interno del file delle applicazioni sistema principale.

7 Nome del file CSS opere d'arte della pelle. Flex creerà un file CSS pelle è possibile chiamare dall'applicazione Flex. Nome di questo file nel campo "Crea regole di stile della pelle" della finestra di dialogo di importazione. Fai clic su "Avanti".

8 Selezionate il disegno che si desidera importare. È possibile importare tutte le opere d'arte o componenti specifici. Dopo aver selezionato il materiale illustrativo, fai clic su "Fine". Flex creerà automaticamente le classi per la vostra opera d'arte pelle. Aggiungere la classe alla vostra Accordion:

<Mx: Fisarmonica skinClass = "yourAccordionClass">

&lt;mx:Form id=&quot;option1&quot; label=&quot;Option 1&quot;>
&lt;/mx:Form>

& Lt; mx: Modulo id = & quot; opzione2 & quot; label = & quot; Opzione 2 & quot;>
& Lt; / mx: Modulo>

</ Mx: Fisarmonica>

Il codice di cui sopra aggiunge la classe pelle "yourAccordionClass" per il componente Accordion.

Consigli e avvertenze

  • codice Flex è case sensitive. Se si esegue in problemi, assicurarsi che l'applicazione è gratuita della capitalizzazione casuale.