Implementing textarea (37 posts)

  • Profile picture of myamo myamo6p said 4 months ago:

    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.

    #
  • Profile picture of said 3 months, 4 weeks ago:

    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:

    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);

    Hope this helps!

    dangerdoc

    #
  • Profile picture of glaucomardano glaucomardano252p said 3 months, 4 weeks ago:

    @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:

    text.getRenderer(TextRenderer.class).setText("Whatever you like!");
    #
  • Profile picture of myamo myamo6p said 3 months, 4 weeks ago:

    So a panel with text with it?

    But the panel has to be dynamic size to guarantee the scrolling functionality. Is this possible?

    #
  • Profile picture of glaucomardano glaucomardano252p said 3 months, 4 weeks ago:

    Then use a ScrollPanel instead.

    #
  • Profile picture of myamo myamo6p said 3 months, 2 weeks ago:

    I made a test controldefinition now:

    	<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>

    The output is:

    My questions now is:

    Where is the text? Why is there a horizontal scrollbar?

    #
  • Profile picture of Tumaini Tumaini79p said 3 months, 2 weeks ago:

    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.

    #
  • Profile picture of myamo myamo6p said 3 months, 2 weeks ago:

    Ok, I changed it to:

    		<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>

    But I still see no text. And the scrollpanel still shows a horizontal scrollbar?

    #
  • Profile picture of Tumaini Tumaini79p said 3 months, 2 weeks ago:

    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.

    #
  • Profile picture of myamo myamo6p said 2 months, 1 week ago:

    After adding style=”nifty-label” or style=”base-font” I still see no text.

    #
  • Profile picture of glaucomardano glaucomardano252p said 2 months, 1 week ago:

    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.

    #
  • Profile picture of myamo myamo6p said 2 months, 1 week ago:

    Where can I find the XML with nifty standard control definitions?

    #
  • Profile picture of glaucomardano glaucomardano252p said 2 months, 1 week ago:

    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/.

    #
  • Profile picture of myamo myamo6p said 2 months, 1 week ago:

    Ok, so when I have following xml definition:

    			<panel childLayout="horizontal" backgroundColor="#000000FF" height="200px" width="300px">
				<text style="base-font" text="Hello World Textarea!"/>
			</panel>

    It’s all fine. It renders a panel with text in it.

    But when I add it into a scrollpanel like: 

    <control name="scrollPanel" id="textpanel" horizontal="false" height="200px" width="300px">

    It only renders the scrollpanel and no child elements. I don’t quite understand how those scrollpanels work.

    #
  • Profile picture of Tumaini Tumaini79p said 2 months, 1 week ago:

    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.

    #