Hvordan sette temaet for en Link-knappen for å Halo Med Action

Flex Builder er en web-design og utvikling programvare som brukes til å lage Rich Internet Applications. XML og Actionscript er de to viktigste språkene som brukes i Flex. XML setter strukturen på nettstedet og Action gir funksjonalitet. En utvikler vil bruke XML og Actionscript for å kunne opprette en kobling knapp med en glorie effekt. Med noen få enkle linjer med kode, kan du fullføre hele prosessen. Utvikleren kan også tilpasse effekt ved hjelp av egenskapene som er tilgjengelige innenfor Flex Builder biblioteket.

Bruksanvisning

Opprett Link Button

1 Åpne hoved Flex-program og bytte til kodevisning. Plasser åpning og lukking tag for koblingen knappen i Flex-program:

<Mx: LinkButton> </ mx: LinkButton>

2 Sett stilen på link-knappen og legge den aktuelle teksten. Plasser koblingen knappen eiendommer innenfor den åpne lappen på lenken knappen.

<Mx: LinkButton label = "My Link Button" color = "0000FF">
</ Mx: LinkButton>

Koden ovenfor skaper en kobling knapp med blå tekst der det står "My Link Button».

3 Importer Action Alert klassen. Legg importen uttalelse etter åpning søknaden koden og før din link knapp:

<Fx: Script>
import mx.controls.Alert;
</ Fx: Script>

Koden ovenfor lar Flex vet du imbedding Action innenfor programfilen. Det gir deg også tilgang til funksjonalitet i Alert klassen.

4 Kjør programmet. Som standard en lenke knappen vil produsere glorie effekt når brukeren ruller over koblingsteksten. Kontroller at du har en fungerende link knott med en glorie effekt.

Lag en gnist Link Button Skin

5 Lag huden for Flex Spark link-knappen. Flex bruker flere typer komponenter. Unike stiler kan brukes til Spark knappene. Åpne en ny gnist Skin fil eller en eksisterende Spark Skin fil. Hvis du er ny på Spark komponenter, kan du finne en gnist Skin fil mal, ved å åpne programmene dine Spark mappe.

6 Sett på åpningen Spark Skin tag med følgende kode:

<S: SparkSkin xmlns: fx = "http://ns.adobe.com/mxml/2009&quot~~number=plural; xmlns: s =" bibliotek: //ns.adobe.com/flex/spark "xmlns: mx =" bibliotek: / /ns.adobe.com/flex/halo ">

Legg til følgende Metadta informaiton under opeing tag.

<Fx: Metadata>

[HostComponent("spark.components.Button")]

</ Fx: Metadata>

7 Legg inn koden som vil definere stilen din link knappen halo.

<s: stater>

<mx:State name="up"/>
<mx:State name="down"/>
<mx:State name="over"/>
<mx:State name="disabled"/>
</s:states>

Koden over navnene de ulike adresse knappen stater, slik at du kan få tilgang til dem og bruke stil senere.

<s:Rect left="0" right="0" top="0" bottom="0">
</s:Rect>

Denne koden skaper et rektangel glorie og definerer sin plassering i forhold til koblingen.

<S: Rektangel venstre = "0" rett = "0" top = "0" under = "0" includeIn = "over" radiusX = "15" radiusY = "15">

<s:stroke>
<mx:SolidColorStroke weight="3" color="0x6600FF"/>
</s:stroke>

<s: Fyll>

<mx:SolidColor color="0x6600FF"/>
</s:fill>
</s:Rect>

Slaget Eiendommen skaper over en 3-pixel vekt slag rundt en lilla rektangel. Dette setter glorie stil.

8 Legg inn koden for Spark knapp:

<S: Button id = "sparkBtn" skinClass = "theFolderNameWhereYourSkinIsSaved.TheNameofTheSkinFile" label = "TheBtnTitle" />

Koden ovenfor skaper en gnist knappen med den stilen du nettopp opprettet merket "TheBtnTitle."

Hint

• Flex XML og Actionscript er case sensitive. Hvis programmet ikke fungerer som den skal, sjekk for kapitalisering.