HTML5 OpenFL input textfields

[glantucan con golo lojo]

So this is still not working. 

In my system (openfl-html5 1.0.5) input textfields are not displayed at all unles you put 

myTextField.htmlText = "whatever the text";

It doesn't matter whether you try to embed the font or not.

Thats the only way I found to at least display something useful. But then the problem is how do you give format to that text.

I can do, and surprisingly it works, 

tf2.htmlText = '<P ALIGN="CENTER"><FONT FACE="Helvetica" SIZE="32" COLOR="#ff0000" LETTERSPACING="0" KERNING="0"><b>Lorem ipsum dolor sit amet.</b></FONT></P>';

But what if Helvetica is not installed?. 

How can I do something like embedding the font with this approach?

Is there a better technique?

Thanks in advance

[glantucan con golo lojo]

Hi again,

I've found a sort of workaround for what I intend to do. I set the text as htmlText like so:

myTextField.htmlText = "<p id='" + conf.id + "' >Test<p>";

and then I set the font inserting a css style like this:

var css:StyleElement =  Browser.document.createStyleElement();

css.innerHTML = "@font-face {         \n"

+ " font-family: " + conf.fontPath + ";         \n"

+ " src: url(assets/fonts/" + conf.fontPath + ".ttf); \n"

+ "}         \n"

+ "#" + conf.id + "{ \n"

+ " font-family: '" + conf.fontPath + "';         \n"

+ " font-size: " + conf.fontSize + "px; \n"

+ " line-height: " + conf.fontSize + "px;         \n"

+ " margin-top: " + 0 + "px!important; \n"

+ "} ";

Browser.document.getElementsByTagName("head")[0].appendChild( css );

That, more or less, solve the formating issues.

The problem is that I need that, when the user press enter, the introduced text is compared with a set of words to see if the answer is correct or not. This is how I made that happen in the flash target:

KeyBinding.addOnRelease(Keyboard.ENTER, onKeyRelease);

function onKeyRelease() 

{

// Code to test if the htmlText of the textfield matches a set of words.

}

The problem is that pressing enter creates a new line on the textfield, that is a new <p> tag in the generated html. Is there any way to prevent this. I tried 

Lib.current.stage.addEventListener (KeyboardEvent.KEY_DOWN,function(e:KeyboardEvent){e.preventDefault();});

but preventDefault() is not available for KeyboardEvent.

Anyone?

[glantucan con golo lojo]

Is there really none who has dealt with input TextFields in the past?

[Alexander Kuzmenko]

I also had to workaround text getter for input text field in openfl/html5: https://github.com/RealyUniqueName/StablexUI/blob/master/src/ru/stablex/ui/widgets/InputText.hx#L69

четверг, 26 сентября 2013 г., 12:45:53 UTC+4 пользователь glantucan con golo lojo написал:

[glantucan con golo lojo]

Oh! god!

Thaks a lot Alexander. I was going crazy with this. It works!!!.

Just another question, though. How do you deal with embedded fonts. Or is that out the equetion in StablexUI?

Thanks again!

:D

[Alexander Kuzmenko]

OpenFL does not support embedded fonts for input fields on html5. I left it as is :)

[glantucan con golo lojo]

Well ;P

I found a workaround even for that. I've been the whole morning working on it. This how to do it:

I have a factory to create the textfields that receives a conf dynamic object with the font filename (stored in conf.fontFile):

tfInput = new TextInputField();

tfInput._conf = conf;

tfInput.type = TextFieldType.INPUT;

tfInput.selectable = true;

tfInput.multiline = conf.multiline;

// ...

// Here I do asign the rest of formating options that come in the conf object

// ...

var css:StyleElement =  Browser.document.createStyleElement();

css.innerHTML = "@font-face { \n"

+ " font-family: " + conf.fontPath + ";         \n"

+ " src: url(assets/fonts/" + conf.fontFile+ ".ttf); \n"

+ "} \n";

Browser.document.getElementsByTagName("head")[0].appendChild( css );

tfInput.addEventListener(Event.ADDED_TO_STAGE, tfInput.onTextFieldAdded);

And here it is my simplistic TextInputField class 

class TextInputField extends TextField

{

var _textFormat:TextFormat;

public var _conf:Dynamic;

public var validateSignal:Signal2<TextField, String>;

public function new() 

{

super();

KeyBinding.addOnRelease(Keyboard.ENTER, onKeyRelease);

this.selectable =  true;

}

public function onTextFieldAdded(e:Event):Void

{

removeEventListener(Event.ADDED_TO_STAGE, onTextFieldAdded);

this.type = flash.text.TextFieldType.INPUT;

         Reflect.field(this, 'nmeGraphics').nmeSurface.style.width = _conf.width + "px";

         Reflect.field(this, 'nmeGraphics').nmeSurface.style.height = _conf.height + "px";

Reflect.field(this, 'nmeGraphics').nmeSurface.style.overflow = "hidden";

if( this.wordWrap ){

Reflect.field(this, 'nmeGraphics').nmeSurface.style.whiteSpace = "normal";

}else{

Reflect.field(this, 'nmeGraphics').nmeSurface.style.whiteSpace = "nowrap";

}

if (_conf.embedFonts) {

Reflect.field(this, 'nmeGraphics').nmeSurface.style.setProperty("font-family", _conf.fontPath);

}

Reflect.field(this, 'nmeGraphics').nmeSurface.innerHTML = '';

}

function onKeyRelease() 

{

validateSignal.dispatch(this, this.get_Text());

}

public function get_Text():String {

var text:String = StringTools.replace( Reflect.field(tf, 'nmeGraphics').nmeSurface.innerHTML, 

                                                       '&nbsp;', ' ' ).split("<")[0];

return text;

}

}

There may be some typos, cause I simplified it quite a lot, but thst's it :)

Thank you again Alexander. You put me on right track, and maybe the webfonts trick can help you with StablexUI.

Cheers!

Óscar