Hello,
I would like to implement a textarea control. It’s a box where you can write text in. However, I want only a few features for now:
-Not editable by the user of the GUI, only for displaying text for now
-Has methods append and appendLine which lets you append text after the old one or in a new line
-You can set the size of it, but the user cannot drag it bigger or smaller
-You can turn on horizontal scrolling: If it is on, it will scroll the text horizontally and make a linebreak only with appendLine, otherwise it will make a linebreak when the current line is longer than the horizontal end of the textarea
-It adds a vertical scrollbar when the text does not fit in the height anymore
Now I have no experience with GUI programming. So I am asking for tips how I can implement this in Nifty. What classes/methods can I use to guarantee those features?
I know how to do control definitions, I am asking for implementation specifics for this kind of textarea.
Hello,
I think that this will help you on gui. Here is a tutorial for custom text, and here is some code for adding text:
[java]guiNode.detachAllChildren();
guiFont = assetManager.loadFont(“Interface/Fonts/Default.fnt”);
BitmapText helloText = new BitmapText(guiFont, false);
helloText.setSize(guiFont.getCharSet().getRenderedSize());
helloText.setText(“Hello World”);
//300 is x coordinates, 0 is y
helloText.setLocalTranslation(300, helloText.getLineHeight(), 0);
guiNode.attachChild(helloText);[/java]
Hope this helps!
dangerdoc
@myamo: It’s not difficult. Add a panel and add a text element to it. Just look into the nifty source code and see how the stardard control definitions are created.
guiNode.detachAllChildren();
guiFont = assetManager.loadFont("Interface/Fonts/Default.fnt");
BitmapText helloText = new BitmapText(guiFont, false);
helloText.setSize(guiFont.getCharSet().getRenderedSize());
helloText.setText("Hello World");
//300 is x coordinates, 0 is y
helloText.setLocalTranslation(300, helloText.getLineHeight(), 0);
guiNode.attachChild(helloText);
Nifty has control definitions for this, label, text.. And for editing their text internally:
[java]
text.getRenderer(TextRenderer.class).setText("Whatever you like!");
[/java]
So a panel with text with it?
But the panel has to be dynamic size to guarantee the scrolling functionality. Is this possible?
Then use a ScrollPanel instead.
I made a test controldefinition now:
[xml]
<controlDefinition name=“textarea” controller=“gui.TextareaControl”>
<control name=“scrollPanel” id=“textpanel” horizontalScrollbar=“false” height=“200px” width=“300px”>
<panel childLayout=“horizontal” backgroundColor="#00FFFFFF" height=“400px” width=“300px”>
<text align=“left” valign=“top” text=“Hello World Textarea!”/>
</panel>
</control>
</controlDefinition>
[/xml]
The output is:
My questions now is:
Where is the text? Why is there a horizontal scrollbar?
The parameters to use for scrollPanel are “horizontal” and “vertical” (no “Scrollbar” suffix).
If you want multiple lines you may want wrap=“true” in the text element as well (and maybe make it fill the panel).
I’m working on an editable textarea currently, which is partly working (can handle multiple lines if you makes new lines with the Return key, handles only cursor left and right, not up/down), but it needs some changes in nifty itself (NiftyRenderEngineImpl) to make selection work and it doesn’t handle normal wrapping well yet.
Ok, I changed it to:
[xml]
<control name="scrollPanel" id="textpanel" horizontal="false" height="200px" width="300px">
<panel childLayout="horizontal" backgroundColor="#FFFFFF00" height="400px" width="300px">
<text wrap="true" align="left" width="100%" height="100%" text="Hello World Textarea!"/>
</panel>
</control>
[/xml]
But I still see no text. And the scrollpanel still shows a horizontal scrollbar?
Didn’t you get a nifty error about not having a font in your text element?
You need a font (or just use style=“nifty-label” or style=“base-font”) to be able to render the text.
Why the scrollPanel would still show a horizontal scrollbar I don’t know, it works for me. It should however show a vertical one.
After adding style=“nifty-label” or style=“base-font” I still see no text.
You have to understand how the things works internaly, I recommend you to look at the nifty source code to make sure you know what you are doing.
Where can I find the XML with nifty standard control definitions?
Nothing better than a quick search on google 
https://nifty-gui.svn.sourceforge.net/svnroot/nifty-gui/nifty-default-controls/trunk/src/main/resources/nifty-controls/.
Ok, so when I have following xml definition:
[xml] <panel childLayout=“horizontal” backgroundColor="#000000FF" height=“200px” width=“300px”>
<text style=“base-font” text=“Hello World Textarea!”/>
</panel>
[/xml]
It’s all fine. It renders a panel with text in it.
But when I add it into a scrollpanel like:
[xml]
<control name=“scrollPanel” id=“textpanel” horizontal=“false” height=“200px” width=“300px”>
[/xml]
It only renders the scrollpanel and no child elements. I don’t quite understand how those scrollpanels work.
Elements added to a scrollpanel need to have an absolute width and height set.
The easiest way to go about it is probably to add a panel with a set width and height inside the scrollpanel and then add your textfield to that.
The problem is that the child element isn’t rendered at the same position as the scrollpanel. I added a panel to the scrollpanel. The panel is rendered at the top left of the screen while the scrollpanel is rendered in the middle. Therefore the panel is not visible.
How can I make the panel render at the same position as the scrollpanel?
I don’t understand why it would do that.
I’ve used the Nifty scrollpanel several times in my project and they would work as expected regarding drawing of the inner panel.
Perhaps you could show some context code and layout to bring more light to the problem.
Here is the textarea control definition:
[xml] <controlDefinition name=“textarea” controller=“gui.TextareaControl”>
<control name=“scrollPanel” id=“textScrollpanel” horizontal=“false” height=“200px” width=“300px”>
<panel id=“textpanel” childLayout=“horizontal” backgroundColor="#000000FF" height=“200px” width=“300px”>
< text style=“base-font” text=“Hello World Textarea!” />
</panel>
</control>
</controlDefinition>
[/xml]
The screen where I use it:
[xml] <screen id=“start” controller=“controllers.LoginScreenController”>
<layer id=“0” backgroundColor="#00000000" childLayout=“vertical”>
<!-- stuff -->
</layer>
<layer id=“1” backgroundColor="#00000000" childLayout=“center”>
<!-- stuff -->
</layer>
<layer id=“2” backgroundColor="#00000000" childLayout=“center”>
<!-- stuff -->
</layer>
<layer id=“13” backgroundColor="#00000000" childLayout=“center”>
<control name=“textarea” id=“tar_0” />
</layer>
</screen>[/xml]
The controllers aren’t doing anything with the elements.
Ok, I tested your code and if you add an outer panel to your control definition (I recalled I always do that) it works as expected.
[java]<controlDefinition name="textarea" controller="gui.TextareaControl">
<panel childLayout="center">
<control name="scrollPanel" id="textScrollpanel" horizontal="false" height="200px" width="300px">
<panel id="textpanel" childLayout="horizontal" backgroundColor="#000000FF" height="200px" width="300px">
<text style="base-font" text="Hello World Textarea!" />
</panel>
</control>
</panel>
</controlDefinition>[/java]
Is it somehow possible to get a reference to the text element in my TextareaControl?
I’d like to manipulate it from there. Set its text dynamically etc.