flex3 : insert instance of UIComponent into a textfield

[delfick]

hello

Does anyone know if there is a way of inserting an instance of UIComponent into a textfield?

for example, say I have a mx.controls.Text with some htmlText assigned to it.

I then also create a VBox object, is it possible to refer to this VBox object in the htmlText and embed it into the textfield? in a similar way to embedding an image into the textfield using <img> tags....?

thankyou....

[gsb]

Using the image tag you should be able to insert an swf file.
Once the swf file is loaded into the text field, have it trace it's path.
Then use that path to communicate with it. ... should work, maybe.

[delfick]

ok then, that sounds like a good idea actually

I will definitely have a look into that.

thankyou very much

[delfick]

hmm, my attempts thus far have been unsuccessful....

is it possible to create an mxml file that extends HBox and then use mxmlc to compile that into an swf, and embed that into the htmlText?

cause it isn't working for me....

here's what I have :

htmlTable.mxml

code:

---

<?xml version="1.0" encoding="utf-8"?>

<mx:HBox 

	xmlns:mx="http://www.adobe.com/2006/mxml"

	width="20" height="100"

	>

	

	<mx:TextArea text="textGoesHere" width="100%" height="100%" />



</mx:HBox>

---

I then use mxmlc and compile that file into a swf

app.mxml

code:

---

<?xml version="1.0" encoding="utf-8"?>

<mx:Application 

	xmlns:mx="http://www.adobe.com/2006/mxml"

	>

    

  <mx:Text height="80%" width="80%">

     <mx:htmlText>

        <![CDATA[

           <p>text before </p><p><img src='htmlTable.swf'> text after</p>

        ]]>

     </mx:htmlText>

  </mx:Text>



</mx:Application>

---

I then use mxmlc to compile app.mxml into a swf and run the swf, only to find the text appears but nothing else...

thnx for your help

[delfick]

well, I've gotten slightly further, now I have

htmlTable.mxml

code:

---

<?xml version="1.0" encoding="utf-8"?>

<mx:Application



	xmlns:mx="http://www.adobe.com/2006/mxml"

	styleName="plain"

	width="900" height="500">

	

	<mx:Style>

		.box

		{

			borderStyle:solid;

			backgroundColor: #d3dfe5;

			borderColor: #4f5a5f;

			borderThickness: 1;

		}

	</mx:Style>

	

	<mx:HBox  styleName="box"

		width="100%" height="100%" >



	</mx:HBox>

	

	<mx:HBox  styleName="box"

		width="100%" height="100%" >



	</mx:HBox>



</mx:Application>

---

app.mxml

code:

---

<?xml version="1.0" encoding="utf-8"?>

<mx:Application 

	xmlns:mx="http://www.adobe.com/2006/mxml"

	styleName="plain"

	verticalAlign="middle"

	horizontalAlign="center"

	>

    

  <mx:TextArea height="80%" width="80%" id="theText">

     <mx:htmlText>

        <![CDATA[

           <p>text before</p><img src='htmlTable.swf' id="hello"><p>text after</p>

        ]]>

     </mx:htmlText>

  </mx:TextArea>



</mx:Application>

---

which displays the htmlTable.swf in the text field.

However I can't get the width of the swf to be 100% of the text field (and change accordingly when the size of the text field changes) and so the htmlText wraps around to the sides of the swf instead of appearing below it.

I can't seem to be able to interact with the swf (if I put a button control in the swf, then clicking the button does nothing)

and I can't seem to be able to refer to the swf in actionscript (I'm not sure how to access it using the id I set in the <img> tag)

so I'm going to give up on this idea and make myself a custom component that seperates the text into multiple text fields. (so it'd be textfield, table, textfield, etc)

once again, thnx for the help anyways...

[gsb]

Well... Sounded like a possibility.
Sorry it did not turn out.

[delfick]

that's alright, I'm making some decent progress here with the custom component....

(I'm making a parser that will take some html formatted text and using flex htmlText <textFormat> tags and some actionscript magic, to make <ol> and <ul> (and with this, hopefully <table>) tags work

for example, this here :

<p>hello there</p>
<ol>
	<li>saf</li>
	<ol type="A">
		<li>fsdalktest alksdfj lkajsdlf kjl;asdjflk ajsdlfkjalsk jdflkajsdlf kjas;lfdjlk asjdf;lkjas;d jfkl;asdjflkj asldfjl kasjdflkja lskjdflkajsd lkfjasldjf lkasdjfl kjasdljf lkasdjflk jasdlkjfasldjf lkasjdl fkjasdljf lkasdjflkja sdljkfasldjf lkasdjflk ajsdflkj alsfjd lkasjdflk jasdlfjaslkdjf lkajsdflk jasdljflk asjdf </li>
			<ul>
				<li>test alksdfj lkajsdlf kjl;asdjflk ajsdlfkjalsk jdflkajsdlf kjas;lfdjlk asjdf;lkjas;d jfkl;asdjflkj asldfjl kasjdflkja lskjdflkajsd lkfjasldjf lkasdjfl kjasdljf lkasdjflk jasdlkjfasldjf lkasjdl fkjasdljf lkasdjflkja sdljkfasldjf lkasdjflk ajsdflkj alsfjd lkasjdflk jasdlfjaslkdjf lkajsdflk jasdljflk asjdf </li>
			</ul>
		<li>test2</li>
	</ol>
	<li>sadf</li>
	<li>hellosdaflkj alskdjflk jalsfdj lkajdsl;</li>
	<li>g;day</li>
	<li>hi</li>
	<li>helloagain</li>
</ol>

<br><p>more test</p>

<ol type="i">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
	<li>10</li>
	<li>11</li>
	<li>12</li>
	<li>13</li>
	<li>14</li>
	<li>15</li>
	<li>16</li>
	<li>17</li>
	<li>18</li>
	<li>19</li>
	<li>20</li>
</ol>

creates the attached screenshot

[delfick]

another little update, I got it to work (and will release it sometime to osflash.org)

this here

<p>hello there</p>
<ol>
	<li>bullet one</li>
	<ol type="A">
		<li>a very long line that shows off the fact that it indents very nicely when the line wraps around because it is that long. It uses tabstops and indents to do this, and it seems to work very very very very nicely.....</li>
			<ul>
				<li>a nested bulleted item</li>
			</ul>
		<li>second lettered item</li>
	</ol>
	<li>some more numbered items</li>
	<li>and some more</li>
</ol>

<table>
	<tr>
		<td>row 1, cell 1</td>
		<td>row 1, cell 2</td>
	</tr>
	<tr>
		<td>row 2, cell 1</td>
		<td>row 2, cell 2</td>
		<td>row 2, cell 3
			<ol type="i">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
				<li>7</li>
				<li>8</li>
				<li>9</li>
				<li>10</li>
				<li>11</li>
				<li>12</li>
				<li>13</li>
				<li>14</li>
			</ol>
		</td>
	</tr>
</table>


<br><p>more test</p>

<ol type="I">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ol>

renders the attached screenshot

[gsb]

Good 4 U !!!!

I work Thurs, Fir, Sat, Sun and Mon and have not looked at it myself.
But I an sure glad that you got it to work.

[delfick]

here we go, released http://code.google.com/p/flex-htmlfilter/

[gsb]

Nice. I will have to dig in some when I get more time.

Meanwhile, I did something similar in AS2 for an advanced Scrolling Text Box.
I also added (needed) two main capabilities that you may want to consider.
The first was an "internal JumpTo" as in anchor tag to named element in the same text content. The second saw a "code" tag: Like a pre but with predefined section formatting for easy addition of code segments.

I did not add tables ...something most want; good job.

[chunkstyle]

This is a hacky way to do something like what you wanted. Summary is using the "id" field of the <img> tag to get the DisplayObject for the image, getting the geometry of it, then floating the desired other object over it using the same geometry.

First subclass Text to expose the underlying TextField instance:

public class ExposedText extends Text {
public function getTextField(): IUITextField {
return textField;
}
}

Then in your use of it say you've got an ExposedText named textObj. Then do:
var imgRef: DisplayObject = textObj.getTextField().getImageReference( "imgTag" );
var imgRect: Rectangle = imgRef.getBounds( this );
wowBtn.x = imgRect.x;
wowBtn.y = imgRect.y;
wowBtn.width = imgRect.width;
wowBtn.height = imgRect.height;

Where "wowBtn" is an mx:Button I've declared elsewhere, and "imgTag" is what you put in the "id" attribute of your <img> tag inside ExposedText's htmlText property. Phew!

[gsb]

Interesting. Thanks.