Flex Examples » linkTextInput http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Removing controls from the MX RichTextEditor control in Flex http://blog.flexexamples.com/2010/02/17/removing-controls-from-the-mx-richtexteditor-control-in-flex/ http://blog.flexexamples.com/2010/02/17/removing-controls-from-the-mx-richtexteditor-control-in-flex/#comments Thu, 18 Feb 2010 00:31:20 +0000 Peter deHaan http://blog.flexexamples.com/?p=2491 The following example shows how you can remove controls from the MX RichTextEditor control by removing the controls from the display list and resizing the linkTextInput TextInput control.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/02/17/removing-controls-from-the-mx-richtexteditor-control-in-flex/ --> <mx:Application name="RichTextEditor_linkTextInput_test" xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:comps="comps.*" layout="vertical" verticalAlign="middle" backgroundColor="white">   <comps:LinkOnlyRichTextEditor />   </mx:Application>

And the custom RichTextEditor control, comps/LinkOnlyRichTextEditor.mxml, is as [...]]]> The following example shows how you can remove controls from the MX RichTextEditor control by removing the controls from the display list and resizing the linkTextInput TextInput control.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/17/removing-controls-from-the-mx-richtexteditor-control-in-flex/ -->
<mx:Application name="RichTextEditor_linkTextInput_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        xmlns:comps="comps.*"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <comps:LinkOnlyRichTextEditor />
 
</mx:Application>

And the custom RichTextEditor control, comps/LinkOnlyRichTextEditor.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/17/removing-controls-from-the-mx-richtexteditor-control-in-flex/ -->
<mx:RichTextEditor name="LinkOnlyRichTextEditor"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        creationComplete="init();">
 
    <mx:Script>
        <![CDATA[
            private function init():void {
                // remove unwanted controls...
                fontFamilyCombo.parent.removeChild(fontFamilyCombo);
                fontSizeCombo.parent.removeChild(fontSizeCombo);
                toolBar2.parent.removeChild(toolBar2);
                colorPicker.parent.removeChild(colorPicker);
                alignButtons.parent.removeChild(alignButtons);
                bulletButton.parent.removeChild(bulletButton);
 
                // remove vertical separators...
                _RichTextEditor_VRule1.parent.removeChild(_RichTextEditor_VRule1);
                _RichTextEditor_VRule2.parent.removeChild(_RichTextEditor_VRule2);
 
                // resize link TextInput control...
                linkTextInput.width = toolbar.width;
            }
        ]]>
    </mx:Script>
 
</mx:RichTextEditor>
 
]]> http://blog.flexexamples.com/2010/02/17/removing-controls-from-the-mx-richtexteditor-control-in-flex/feed/ 2 Hiding nested controls in a Flex RichTextEditor control (remix) http://blog.flexexamples.com/2007/12/04/hiding-nested-controls-in-a-flex-richtexteditor-control-remix/ http://blog.flexexamples.com/2007/12/04/hiding-nested-controls-in-a-flex-richtexteditor-control-remix/#comments Wed, 05 Dec 2007 06:44:51 +0000 Peter deHaan http://blog.flexexamples.com/2007/12/04/hiding-nested-controls-in-a-flex-richtexteditor-control-remix/ In a previous example, Hiding nested controls in a Flex RichTextEditor control, we looked at how you could hide and remove the nested link text input control within a RichTextEditor control in Flex. The following example extends the example somewhat by allowing you to remove any of the nested controls (including the VRule controls) [...]]]> In a previous example, Hiding nested controls in a Flex RichTextEditor control, we looked at how you could hide and remove the nested link text input control within a RichTextEditor control in Flex. The following example extends the example somewhat by allowing you to remove any of the nested controls (including the VRule controls) in in the tool bar by setting the nested control’s visible property to false, as seen in the following snippet:

richTextEditor.colorPicker.visible = false;


<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/04/hiding-nested-controls-in-a-flex-richtexteditor-control-remix/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            import mx.controls.CheckBox;
 
            private function checkBox_change(evt:Event):void {
                var ch:CheckBox = evt.currentTarget as CheckBox;
                richTextEditor[ch.data].visible = ch.selected;
            }
        ]]>
    </mx:Script>
 
    <mx:ApplicationControlBar dock="true" verticalAlign="top">
        <mx:Form styleName="plain">
            <mx:FormItem label="fontFamilyCombo.visible:">
                <mx:CheckBox selected="true"
                        data="fontFamilyCombo"
                        change="checkBox_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="fontSizeCombo.visible:">
                <mx:CheckBox selected="true"
                        data="fontSizeCombo"
                        change="checkBox_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="toolBar2.visible:">
                <mx:CheckBox selected="true"
                        data="toolBar2"
                        change="checkBox_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="colorPicker.visible:">
                <mx:CheckBox selected="true"
                        data="colorPicker"
                        change="checkBox_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="alignButtons.visible:">
                <mx:CheckBox selected="true"
                        data="alignButtons"
                        change="checkBox_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="bulletButton.visible:">
                <mx:CheckBox selected="true"
                        data="bulletButton"
                        change="checkBox_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="linkTextInput.visible:">
                <mx:CheckBox selected="true"
                        data="linkTextInput"
                        change="checkBox_change(event);" />
            </mx:FormItem>
        </mx:Form>
 
        <mx:Spacer width="100%" />
 
        <mx:Form styleName="plain">
            <mx:FormItem label="_RichTextEditor_VRule1.visible:">
                <mx:CheckBox selected="true"
                        data="_RichTextEditor_VRule1"
                        change="checkBox_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="_RichTextEditor_VRule2.visible:">
                <mx:CheckBox selected="true"
                        data="_RichTextEditor_VRule2"
                        change="checkBox_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:RichTextEditor id="richTextEditor"
            width="100%"
            height="100%" />
 
</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/12/04/hiding-nested-controls-in-a-flex-richtexteditor-control-remix/feed/ 9 Hiding nested controls in a Flex RichTextEditor control http://blog.flexexamples.com/2007/11/23/hiding-nested-controls-in-a-flex-richtexteditor-control/ http://blog.flexexamples.com/2007/11/23/hiding-nested-controls-in-a-flex-richtexteditor-control/#comments Sat, 24 Nov 2007 07:01:31 +0000 Peter deHaan http://blog.flexexamples.com/2007/11/23/hiding-nested-controls-in-a-flex-richtexteditor-control/ The following example shows you how you can toggle the RichTextEditor control’s nested link text input by setting both the visible and includeInLayout properties of the control.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/11/23/hiding-nested-controls-in-a-flex-richtexteditor-control/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ import mx.controls.TextInput; private function toggle_linkTextInput():void [...]]]> The following example shows you how you can toggle the RichTextEditor control’s nested link text input by setting both the visible and includeInLayout properties of the control.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/23/hiding-nested-controls-in-a-flex-richtexteditor-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.TextInput;

            private function toggle_linkTextInput():void {
                var textInput:TextInput = richTextEditor.linkTextInput;
                var isSelected:Boolean = checkBox.selected;
                textInput.visible = isSelected;
                textInput.includeInLayout = isSelected;
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:CheckBox id="checkBox"
                label="RichTextEditor linkTextInput visible:"
                labelPlacement="left"
                selected="true"
                change="toggle_linkTextInput();" />
    </mx:ApplicationControlBar>

    <mx:RichTextEditor id="richTextEditor" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/11/23/hiding-nested-controls-in-a-flex-richtexteditor-control/feed/ 0