Slik tilpasser et trekkspill Flex

Slik tilpasser et trekkspill Flex


Flex Builder er Adobes løsning på data-drevet web-utvikling. Ved hjelp av XML, Actionscript og resten av Adobe Creative Suite, en webutvikler kan både design og utvikling av rike webapplikasjoner. Adobe Flex Biblioteket kommer med innebygde komponenter. En av disse komponentene er trekkspill. Den Trekkspill er en glidende meny som viser informasjon basert på en brukers klikk. Ved hjelp av Adobe Fireworks, kan en designer utvikle og distribuere unike skins til trekkspill komponent. Skinning vil gi et webprogram et unikt utseende og følelse.

Bruksanvisning

Utvikle trekkspill Skin

1 Begynn Fireworks CS5 og åpne et nytt dokument. Fra "Kommandoer" -menyen, velg "Flex Skinning", og deretter "Ny Flex Skin".

2 Velg komponenten du vil huden. Fyrverkeri kan du velge flere komponenter eller en enkelt komponent. Velg "Spesifikke Components", og velg deretter trekkspill komponent fra listen. Velg "OK".

3 Bruke Fyrverkeri innebygd Toolkit, designe en hud for Accordion komponent. Eksportere Flex huden ved å velge "kommandoer" og deretter "Flex Skinning", og til slutt, "Export Flex Skin". Velg hvor du ønsker å lagre huden filen.

Lag trekkspill og stil det

4 Åpne Adobe Flex og bytte til hoved applikasjoner kodevisning. Legg åpning og lukking koder for trekkspill container:

<Mx: Trekkspill>
</ Mx: Trekkspill>

5 Legg paneler til trekkspill mellom åpning og lukking trekkspill koder.

<Mx: Trekkspill>

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

& Lt; mx: Form id = & quot; Alternativ 2 & quot; label = & quot; Alternativ 2 & quot;>
& Lt; / mx: Form>

</ Mx: Trekkspill>

Koden ovenfor skaper trekkspill og legger to panel alternativer for brukeren å velge mellom. Panelene er merket "Alternativ 1" og "Alternativ 2." Plasser innholdet for "Alternativ 1" og "Alternativ 2" mellom åpning og lukking "Form" tags.

6 Importer huden kunstverk du har laget. Velg "File" og deretter "Import" og deretter "Flash Builder" og "Skin Artwork." Velg mappen du vil importere huden kunstverk inn. Kontroller at mappen ligger innenfor hoved applikasjoner filsystemet.

7 Navn huden kunstverk CSS-fil. Flex vil skape en hud CSS-fil du kan ringe fra Flex-program. Gi denne filen i "Opprett Skin stil Rules" -feltet i import dialogboksen. Klikk "Next".

8 Velg kunstverk du vil importere. Du kan importere alle kunstverk eller spesifikke komponenter. Når du har valgt kunstverk, klikk "Finish". Flex vil automatisk opprette klasser for huden din kunstverk. Legg klassen til trekkspill:

<Mx: Trekkspill skinClass = "yourAccordionClass">

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

& Lt; mx: Form id = & quot; Alternativ 2 & quot; label = & quot; Alternativ 2 & quot;>
& Lt; / mx: Form>

</ Mx: Trekkspill>

Koden legger over huden klassen "yourAccordionClass" til din Accordion komponent.

Hint

  • Flex kode er case sensitive. Hvis du kjører inn i problemer, sørg for at søknaden din er fri for tilfeldige bokstaver.