attached behaviors not working for lightweight components
Tom Power
Hi, I hope someone can help me on this.
I'm building a bunch of lightweight htc components. I used to build them as
viewlinked ones
but the load time was unacceptable, because each component had it's own DOM.
The lightweight components work well, but I can't attach behaviors the
custom element.
I've tested, by changing the lightweight attribute on the component tag from
true to false, and then
the behavior attaches to the custom element.
Please try the following code - it's very simple and demonstrates the
problem.
*** File1 - call it pTag.htc - this is the custom element implementation
code
<public:component tagName="mytag" lightweight="false" >
</public:component>
<script>
var pTag = element.appendChild(element.document.createElement('<p>'));
pTag.innerText = 'P tag to which behavior is attached: text should be
colored red'
</script>
*** File2 - call it changeColor.htc - this is the attached behavior
implementation code
<public:component>
<public:attach event="oncontentready" onevent="oncontentready_element()" />
</public:component>
<script>
alert('the behavior attached')
function oncontentready_element(){
element.style.color = 'red';
}
</script>
*** File 3 - call it test.htm - this is the html code that uses the htcs
<html xmlns:myhtc>
<head>
<?import namespace="myhtc" implementation="pTag.htc" >
<style>
.changeColor
{
behavior: url('changeColor.htc');
}
</style>
</head>
<body>
<myhtc:mytag class="changeColor" />
<p class="changeColor">Another P tag to which behavior is attached (text
should be colored red)</p>
</body>
<html>
Create the files all in the same directory, then open test.htm with IE5.5 or
above.
You should get two alerts as the changeColor.htc behavior attaches, 1st to
the custom tag <myhtc:mytag>, then to the <P> tag.
Change the lightweight attribute to false in pTag.htc, and you only get one
alert (for the P tag)
My understanding of the lightweight attribute is that when set to true, the
HTC doesn't have it's own DOM, hence the noticable performance gains,
particularly if you have 20 instances of the same custom tag on a page.
Cheers,
Tom.
DaveM
First, your confusing "lightWeight" with the ViewLink technology.
"lightWeight" means the HTC does not contain any markup and therefore does
not need to be parsed (hence an improvement gain).
"viewLinkContent" toggles whether or not the behavior will have it's own,
seperate DOM to protect it from changes in the host document.
Now, based on the documentation on the "lightWeight" attribute, it seems to
me that what you are doing should work since the doco states that:
"If the HTC file contains no markup, this attribute should be set to
true to improve rendering performance."
However, based on what it's doing, I would suggest that since the behavior
is an element behavior, turning on "lightWeight" actually tells the browser
the new, custom tag contains no markup and does not need to be parsed. Of
course, the behavior is actually inserting markup into the custom element
and obviously that is being rendered but perhaps it doesn't bother to take a
second pass through that new markup to see if any styles might apply? Or
perhaps when it goes to attach the "changeColor" behavior, it sees that
"lightWeight" is true and thinks the element does not contain markup rather
than the HTC file itself?
Just a few guesses and probably wrong at that... sorry.
"Tom Power" <To...@xsolREMOVETHIS.com> wrote in message
news:u$vtYadwCHA.2532@TK2MSFTNGP10...
Fotios
This looks like a bug whereby the custom tag will not process the class tag
attribute if the element behavior is lightweight.
I originally assumed it was a timing related error that happened becuase the
lightweight version of the the element behavior initialized faster than the
non-lightweight one, but this does not seem to be the case.
I would assume it is a bug and I would bypass it thus:
<html xmlns:myhtc>
<head>
<?import namespace="myhtc" implementation="pTag.htc" >
<style>
.changeColor
{
behavior: url('changeColor.htc');
}
</style>
</head>
<body>
<myhtc:mytag />
<p class="changeColor">Another P tag to which behavior is attached (text
should be colored red)</p>
<script>
var a = document.getElementsByTagName('mytag');
var n = a[0];
n.className = 'changeColor';
</script>
</body>
<html>
This works over here. If it turns out to be a timing related problem after
all, try putting n.className = 'changeColor';
inside a setTimeout().
Take care,
Fotios
--
http://www.nkd-webmedia.co.uk/
http://fotios.cc/
ICQ: 8976921
PGP: 5302 C2EB E6BA 0768 1E13
9B98 3335 E6C6 93B9 B5C6
"Tom Power" <To...@xsolREMOVETHIS.com> wrote in message
news:u$vtYadwCHA.2532@TK2MSFTNGP10...
>
Tom Power
Tom Power
Thank you!
"Fotios" <fot...@altavista.net> wrote in message
news:3e2eb504$0$33930$bed6...@news.gradwell.net...