Setting Font for Text

[sandman]

I want to set the font and color for text dynamically. I have created a subclass of text and in the oninit method when I try to set the color it does not take effect. Is it possible to do this? Also, how can I set up the font dynamically.

<class name="MyText" extends="text">
<attribute name="oninit" value="setColor();" />
<method name="setColor">
this.setAttribute('fgcolor','#FF0000');
</method>
</class>

[hqm]

I believe Text already has a setColor() method, and you should not override it. It takes value of an integer 0x0 to 0xffffff

You can also use the subset of HTML that the text widget understands:




<text name="foo />

foo.setText('<font color="#FF0000 size="20">This is some HTML you know</font>');




You can set the font by name also in the HTML font tag.

You can also call foo.setFont() but you must pass it a font object, not a font name. You can look up a font by name via the LzFontManager.getFont()

[sandman]

I tried what you suggested.

<class name="charmSizeLabel" extends="text">
<attribute name="oninit" value="init();" />

<method name="init">
this.setText('<font color="#FF0000" size="20">This is some HTML you know</font>');
Debug.write("## Text: "+this.getText());
this.setAttribute('width',300);
this.setAttribute('height',200);
</method>
</class>

[sandman]

Sorry, my reply was incomplete. I have created the following class:

<class name="charmSizeLabel" extends="text">
<attribute name="oninit" value="init();" />

<method name="init">
this.setText('<font color="#FF0000" size="20">This is some HTML you know</font>');
Debug.write("## Text: "+this.getText());
this.setAttribute('width',300);
this.setAttribute('height',200);
</method>
</class>

Inside a view I am doing the following:

this.tmpcharmSize = new charmSizeLabel(this);
var charmSizeLabel_x = 30;
var charmSizeLabel_y = 10;
this.tmpcharmSize.setAttribute('x', charmSizeLabel_x);
this.tmpcharmSize.setAttribute('y', charmSizeLabel_y);

I don't see the text.

[hqm]

Try this:



<canvas debug="true" width="1024" height="600">

<class name="charmSizeLabel" extends="text">
<method event="oninit">
<![CDATA[
this.setText('<font color="#FF0000" size="20">This is some HTML you know</font>');
Debug.write("## Text: "+this.getText());
this.setAttribute('width',300);
this.setAttribute('height',200);
]]>
</method>
</class>

<view name="foo">
<method event="oninit">
this.tmpcharmSize = new charmSizeLabel(this);
var charmSizeLabel_x = 30;
var charmSizeLabel_y = 10;
this.tmpcharmSize.setAttribute('x', charmSizeLabel_x);
this.tmpcharmSize.setAttribute('y', charmSizeLabel_y);
</method>
</view>
</canvas>

[antun]

Originally posted by sandman

I don't see the text. [/B]

That's because you used pointed brackets between LZX tags without using CDATA. Whenever you need to put > or < inside of a LZX Node (e.g. <method></method>) you have to use:


<method>
<![CDATA[
var text = '<font size="12">hello</font>';
]]>
</method>


-Antun

[hqm]

You could also use the direct setColor API call, in which case you should note that the text's color will be overridden by any <font color=xxx> in it's text conent.

[hqm]

A more 'lzx' way to do this is to instantiate your
class using XML syntax. Note with XML, the class name and attribute names are case-sensitive.


<canvas debug="true" width="1024" height="600">
<font name="helmetr_ttf" src="helmetr.ttf" />



<class name="charmSizeLabel" extends="text" width="300" height="200">
<method event="oninit">
Debug.write("## Text: "+this.getText());
</method>
</class>

<view name="foo">
<charmSizeLabel name="tmpCharmSize"><font face="helmetr_ttf" size="20">This is some text</font></charmSizeLabel>
<method event="oninit">
var charmSizeLabel_x = 30;
var charmSizeLabel_y = 10;
this.tmpcharmSize.setX(charmSizeLabel_x);
this.tmpcharmSize.setY(charmSizeLabel_y);
</method>
</view>
</canvas>