Come impostare il tema di un pulsante il link di Halo con ActionScript

October 7

Come impostare il tema di un pulsante il link di Halo con ActionScript


Flex Builder è un software di progettazione Web e di sviluppo utilizzato per creare Rich Internet Applications. XML e ActionScript sono le due lingue primari utilizzati in Flex. XML definisce la struttura del sito e ActionScript fornisce la funzionalità. Uno sviluppatore utilizzerà XML e ActionScript per creare un pulsante di collegamento con un effetto alone. Con poche semplici righe di codice, è possibile completare l'intero processo. Lo sviluppatore può anche personalizzare l'effetto utilizzando le proprietà disponibili all'interno della libreria di Flex Builder.

istruzione

Creare il pulsante di collegamento

1 Aprire l'applicazione principale Flex e passare alla visualizzazione del codice. Posizionare l'apertura e tag di chiusura per il pulsante di collegamento nell'applicazione Flex:

<Mx: LinkButton> </ mx: LinkButton>

2 Impostare lo stile del pulsante di collegamento e aggiungere il testo appropriato. Posizionare le proprietà del pulsante collegamento all'interno del tag aperto del pulsante di collegamento.

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

Il codice precedente crea un pulsante di collegamento con il testo blu che dice "My Button Link."

3 Importare la classe ActionScript Alert. Aggiungere l'istruzione import dopo il tag di apertura e di applicazione prima che il pulsante di collegamento:

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

Il codice di cui sopra consente Flex sapere che si sta mettendo radici ActionScript all'interno del file dell'applicazione. Si dà anche accessi alla funzionalità all'interno della classe Alert.

4 Eseguire l'applicazione. Per impostazione predefinita, un pulsante di collegamento produrrà l'effetto alone una volta che l'utente sposta sopra il testo del link. Verificare di disporre di un controllo pulsante di collegamento di lavoro con un effetto alone.

Creare un pulsante Spark link della pelle

5 Creare la pelle per il pulsante Flex collegamento Spark. Flex utilizza più tipi di componenti. stili unici possono essere applicati a Spark pulsanti di collegamento. Aprire un nuovo file Spark della pelle o un file Spark pelle esistente. Se sei un nuovo Spark componenti, è possibile individuare un modello di file Spark pelle, aprendo le applicazioni Spark cartella.

6 Sostituire la modifica della pelle apertura Spark con la seguente riga di codice:

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

Aggiungere il seguente informaiton Metadta sotto il tag opeing.

<Fx: Metadata>

[HostComponent(&quot;spark.components.Button&quot;)]

</ Fx: Metadati>

7 Aggiungere il codice che definire lo stile del pulsante di collegamento aureola.

<s: Uniti>

&lt;mx:State name=&quot;up&quot;/>
&lt;mx:State name=&quot;down&quot;/>
&lt;mx:State name=&quot;over&quot;/>
&lt;mx:State name=&quot;disabled&quot;/>
&lt;/s:states>

Il codice sopra i nomi dei vari stati del pulsante Link, che consente di accedervi e applicare lo stile più tardi.

&lt;s:Rect left=&quot;0&quot; right=&quot;0&quot; top=&quot;0&quot; bottom=&quot;0&quot;>
&lt;/s:Rect>

Questo codice crea un alone rettangolo e definisce il suo posizionamento rispetto al collegamento.

<S: Rect sinistra = "0" a destra = "0" top = "0" bottom = "0" includeIn = "over" RadiusX = "15" radiusY = "15">

&lt;s:stroke>
&lt;mx:SolidColorStroke weight=&quot;3&quot; color=&quot;0x6600FF&quot;/>
&lt;/s:stroke>

<s: CAR>

&lt;mx:SolidColor color=&quot;0x6600FF&quot;/>
&lt;/s:fill>
&lt;/s:Rect>

La proprietà di tratto precedente crea un peso ictus 3 pixel attorno a un rettangolo viola. Questo imposta lo stile alone.

8 Aggiungere il codice per il pulsante Spark:

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

Il codice precedente crea un pulsante Spark con lo stile appena creato etichettato "TheBtnTitle."

Consigli e avvertenze

  • XML Flex e ActionScript sono case sensitive. Se l'applicazione non funziona correttamente, verificare la presenza di capitalizzazione.