You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@flex.apache.org by WelshAndy <an...@eazyweb.net> on 2015/04/27 02:11:36 UTC
Custom ToggleSwitch in code
Hi,
Is it possible to add custom labels to a ToggleSwitch in a mobile project
using AS3 rather than MXML? I need to add custom labels & add via AS3. Im
using Flex 4.14 & FB4.7.
Ive created the external package (using the usual MyToggleSwitch sample out
there) and that works just fine when calling via MXML, but for my project I
add the controls in AS3, & need to change the default labels to On & Off in
AS3. Is this possible?
Thanks
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/Custom-ToggleSwitch-in-code-tp46201.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: Custom ToggleSwitch in code
Posted by "kevin.godell" <ke...@gmail.com>.
One problem you have in your script is that you are not actually creating a toggleSwitch in your code.
It should be something like
var tog:ToggleSwitch = new ToggleSwitch;
You have some options for assigning the skin.
If you are creating a class reference in the style section, such as
s|ToggleSwitch.myTog
{
skinClass : ClassReference("skins.MyToggleSwitchSkin");
}
You can assign the class reference using styleName
tog.styleName = “myTog” or tog.setStyle("styleName", "myTog”) (I am not sure which is preferred, but both variations worked)
If you are not using the class reference, you can just assign the skinClass
tog.setStyle("skinClass", skins.MyToggleSwitchSkin);
> On Apr 27, 2015, at 4:07 AM, WelshAndy [via Apache Flex Development] <ml...@n4.nabble.com> wrote:
>
> Hi Om,
> Thanks. Unfortunately, that skinClass suggestion didnt work :( Hope its appropriate to post the following code - Ive reduced it to the minimum:
>
> CustomToggle.mxml
>
> <?xml version="1.0" encoding="utf-8"?>
> <s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
> xmlns:s="library://ns.adobe.com/flex/spark"
> creationComplete="view1_creationCompleteHandler(event)">
> <fx:Style>
> @namespace s "library://ns.adobe.com/flex/spark";
> myTog
> {
> skinClass: ClassReference("skins.MyToggleSwitchSkin");
> }
> </fx:Style>
> <fx:Script>
>
> <![CDATA[
> import mx.events.FlexEvent;
> import skins.MyToggleSwitchSkin;
> protected function view1_creationCompleteHandler(event:FlexEvent):void
> {
> var myTog:skins.MyToggleSwitchSkin = new MyToggleSwitchSkin();
> group.addElement(myTog);
> }
> ]]>
>
>
> </fx:Script>
> <s:VGroup id="group" top="30" />
> </s:View>
>
> and this is MyToggleSwitchSkin.as
>
> package skins
> {
> import spark.skins.mobile.ToggleSwitchSkin;
> public class MyToggleSwitchSkin extends ToggleSwitchSkin
> {
> public function MyToggleSwitchSkin()
> {
> super();
> selectedLabel="Yes";
> unselectedLabel="No";
> }
> }
> }
>
> Hope thats okay to post. As its unlikely that Im the first person to need to add custom toggle labels via code, Im guessing Im going about this in completely the wrong way! Ready to be enlightened...
> Thanks
>
>
> If you reply to this email, your message will be added to the discussion below:
> http://apache-flex-development.2333347.n4.nabble.com/Custom-ToggleSwitch-in-code-tp46201p46206.html
> To start a new topic under Apache Flex Development, email ml-node+s2333347n1h78@n4.nabble.com
> To unsubscribe from Apache Flex Development, click here.
> NAML
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/Custom-ToggleSwitch-in-code-tp46201p46234.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: Custom ToggleSwitch in code
Posted by WelshAndy <an...@eazyweb.net>.
Hi Om,
Thanks. Unfortunately, that skinClass suggestion didnt work :( Hope its
appropriate to post the following code - Ive reduced it to the minimum:
CustomToggle.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="view1_creationCompleteHandler(event)">
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
myTog
{
skinClass: ClassReference("skins.MyToggleSwitchSkin");
}
</fx:Style>
<fx:Script>
</fx:Script>
<s:VGroup id="group" top="30" />
</s:View>
and this is MyToggleSwitchSkin.as
package skins
{
import spark.skins.mobile.ToggleSwitchSkin;
public class MyToggleSwitchSkin extends ToggleSwitchSkin
{
public function MyToggleSwitchSkin()
{
super();
selectedLabel="Yes";
unselectedLabel="No";
}
}
}
Hope thats okay to post. As its unlikely that Im the first person to need to
add custom toggle labels via code, Im guessing Im going about this in
completely the wrong way! Ready to be enlightened...
Thanks
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/Custom-ToggleSwitch-in-code-tp46201p46206.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: Custom ToggleSwitch in code
Posted by OmPrakash Muppirala <bi...@gmail.com>.
On Sun, Apr 26, 2015 at 10:58 PM, WelshAndy <an...@eazyweb.net> wrote:
> Thanks Om. Yes, that was the source of the code I mentioned. Problem comes
> when I try and call it using AS3. In MXML, it works as expected by adding a
> ToggleSwitch component and then adding a skinclass = skins.togYesNo.
> But when I add it using AS3 (which I need to do, because the rest of the
> page is built dynamically at runtime) I just get a non-working toggle. I
> load it with:
> <pre>
> var myTog:skins.togYesNo = new togYesNo();
> group.addElement(myTog);
> </pre>
>
I don't think this will work the way you want it to.
>
> ... which shows the toggle in the correct place, but not working. ie in the
> on position but not highlighted, and interactive at all. I also tried
> adding
> the style directly to it, with:
> <pre>
> myTog.setStyle('skinClass',skins.togYesNo);
> </pre>
> I must be missing something, as Im sure that Im not the first person to
> want
> to add a ToggleSwitch using AS3!! It seems like such a simple thing (adding
> a Yes No toggle in code) but I cant find much about it on the web, and a
> deadline looms... Happy to post all code here if it helps.
> Thanks very much for any insight.
>
>
Does setting the skinclass in your CSS file like this work for you?
myTog
{
skinClass: ClassReference("skins.togYesNo");
}
If that does not work, please post some more code so we can help debug.
Thanks,
Om
>
>
>
> --
> View this message in context:
> http://apache-flex-development.2333347.n4.nabble.com/Custom-ToggleSwitch-in-code-tp46201p46203.html
> Sent from the Apache Flex Development mailing list archive at Nabble.com.
>
Re: Custom ToggleSwitch in code
Posted by WelshAndy <an...@eazyweb.net>.
Thanks Om. Yes, that was the source of the code I mentioned. Problem comes
when I try and call it using AS3. In MXML, it works as expected by adding a
ToggleSwitch component and then adding a skinclass = skins.togYesNo.
But when I add it using AS3 (which I need to do, because the rest of the
page is built dynamically at runtime) I just get a non-working toggle. I
load it with:
<pre>
var myTog:skins.togYesNo = new togYesNo();
group.addElement(myTog);
</pre>
... which shows the toggle in the correct place, but not working. ie in the
on position but not highlighted, and interactive at all. I also tried adding
the style directly to it, with:
<pre>
myTog.setStyle('skinClass',skins.togYesNo);
</pre>
I must be missing something, as Im sure that Im not the first person to want
to add a ToggleSwitch using AS3!! It seems like such a simple thing (adding
a Yes No toggle in code) but I cant find much about it on the web, and a
deadline looms... Happy to post all code here if it helps.
Thanks very much for any insight.
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/Custom-ToggleSwitch-in-code-tp46201p46203.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: Custom ToggleSwitch in code
Posted by OmPrakash Muppirala <bi...@gmail.com>.
On Apr 26, 2015 5:27 PM, "WelshAndy" <an...@eazyweb.net> wrote:
>
> Hi,
> Is it possible to add custom labels to a ToggleSwitch in a mobile project
> using AS3 rather than MXML? I need to add custom labels & add via AS3. Im
> using Flex 4.14 & FB4.7.
> Ive created the external package (using the usual MyToggleSwitch sample
out
> there) and that works just fine when calling via MXML, but for my project
I
> add the controls in AS3, & need to change the default labels to On & Off
in
> AS3. Is this possible?
> Thanks
It should be possible, but in a bit of a tedious way. The ToggleSwitch
component documents says this:
The ToggleSwitch control uses the following default values for
* the unselected and selected labels: OFF (unselected) and ON (selected).
* Define a custom skin to change the labels, or to change other visual
* characteristics of the control.</p>
*
* <p>The following skin class, defined as a subclass of
* spark.skins.mobile.ToggleSwitchSkin, changes the labels to Yes and
No:</p>
*
* <pre>
* package skins
* // components\mobile\skins\MyToggleSwitchSkin.as
* {
* import spark.skins.mobile.ToggleSwitchSkin;
*
* public class MyToggleSwitchSkin extends ToggleSwitchSkin
* {
* public function MyToggleSwitchSkin()
* {
* super();
* // Set properties to define the labels
* // for the selected and unselected positions.
* selectedLabel="Yes";
* unselectedLabel="No";
* }
* }
* }
Thanks,
Om
>
>
>
>
> --
> View this message in context:
http://apache-flex-development.2333347.n4.nabble.com/Custom-ToggleSwitch-in-code-tp46201.html
> Sent from the Apache Flex Development mailing list archive at Nabble.com.