JMonkeyEngine3——NiftyGui TextField

TextField

TextField 控件允许输入文本。可以使用 TextFieldBuilder 类从 Java 动态创建，也可以使用<control name="textfield"></control> 标签从 XML 创建。可以限制输入字段的长度，并且如果需要，可以使用可选密码字符隐藏实际输入。

常用属性

Name	Datatype	Default	Description
text	String	""	TextField 包含的初始文本。
maxLength	Integer	(没有设置)	此 TextField 可包含的最大字符长度。如果未设置或此值为 -1，则不应用任何限制。
passwordChar	Character	(没有设置)	如果设置，则 TextField 中的每个字符将被给定的字符替换。如果您为此使用“*”，则可以获得典型的密码输入字段。

EventBus Notification

TextField 控件支持对文本的任何更改进行 EventBus 通知。每当 TextField 的文本内容发生更改时，都会使用 TextField 的 ID 作为事件的主题发布 TextFieldChangedEvent。

Java Builder 示例

1 // Using the builder pattern
2 control(new TextFieldBuilder("passwordCharTextField", "*") {{ // init with the text "*"
3   maxLength(1); // force only a single character input
4   width("20px");
5 }});

XML 示例

1 <!-- simple password textfield example. please note: event notification requires an id -->
2 <control name="textfield" maxLength="20" passwordChar="*" />

参考

https://github.com/nifty-gui/nifty-gui/wiki/TextField

案例

添加一个NiftyGuiTextField.xml，内容如下：

 1 <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
 2 <nifty xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://nifty-gui.lessvoid.com/nifty-gui" xsi:schemaLocation="https://raw.githubusercontent.com/void256/nifty-gui/1.4/nifty-core/src/main/resources/nifty.xsd https://raw.githubusercontent.com/void256/nifty-gui/1.4/nifty-core/src/main/resources/nifty.xsd">
 3     <useControls filename="nifty-default-controls.xml"/>
 4     <useStyles filename="nifty-default-styles.xml"/>
 5     <screen id="screen0">
 6         <layer id="layer0" childLayout="center">
 7             <panel id="panel0" height="57px" style="nifty-panel-simple" width="401px" align="center" childLayout="vertical" valign="center" y="-1px" x="-1px">
 8                 <control name="textfield" id="textField0" text="user name" width="50%" align="center" valign="center" y="109" x="21"/>
 9                 <control name="textfield" id="textfield1" text="12355" width="50%" align="center" passwordChar="*" valign="center"/>
10             </panel>
11         </layer>
12     </screen>
13 </nifty>

注意第二个textfield我们设置了passwordChar属性值为*，意味着我们输入的字符全部使用*显示。

添加一个Java类，代码如下：

 1 import com.jme3.app.SimpleApplication;
 2 import com.jme3.math.ColorRGBA;
 3 import com.jme3.niftygui.NiftyJmeDisplay;
 4 import de.lessvoid.nifty.Nifty;
 5 
 6 /**
 7  * @date 2024年7月12日14点30分
 8  * @author JohnKkk
 9  */
10 public class NiftyGuiTextField extends SimpleApplication{
11 
12     private Nifty m_Nifty;
13     
14     public static void main(String[] args) {
15         NiftyGuiTextField niftyGuiLabel = new NiftyGuiTextField();
16         niftyGuiLabel.start();
17     }
18 
19     @Override
20     public void simpleInitApp() {
21         // 设置默认背景色
22         getViewPort().setBackgroundColor(ColorRGBA.DarkGray);
23         
24         // 初始化Nifty
25         NiftyJmeDisplay niftyDisplay = NiftyJmeDisplay.newNiftyJmeDisplay(
26                 assetManager,
27                 inputManager,
28                 audioRenderer,
29                 guiViewPort);
30         m_Nifty = niftyDisplay.getNifty();
31         // 将NiftyGUI显示对象添加到JME3中
32         guiViewPort.addProcessor(niftyDisplay);
33         
34         m_Nifty.fromXml("Interface/NiftyGuiTextField.xml", "screen0");
35         
36         // 禁用flyCam并显示鼠标
37         flyCam.setEnabled(false);
38         inputManager.setCursorVisible(true);
39     }
40     
41 }

此时启动后，可以看到正常显示并且可以输入文本：

我们希望实时获取输入过程中的回调，可以添加如下EventBus通知：

 1 import com.jme3.app.SimpleApplication;
 2 import com.jme3.math.ColorRGBA;
 3 import com.jme3.niftygui.NiftyJmeDisplay;
 4 import de.lessvoid.nifty.Nifty;
 5 import de.lessvoid.nifty.NiftyEventSubscriber;
 6 import de.lessvoid.nifty.controls.TextField;
 7 import de.lessvoid.nifty.controls.TextFieldChangedEvent;
 8 import de.lessvoid.nifty.screen.Screen;
 9 import de.lessvoid.nifty.screen.ScreenController;
10 
11 /**
12  * @date 2024年7月12日14点30分
13  * @author JohnKkk
14  */
15 public class NiftyGuiTextField extends SimpleApplication implements ScreenController{
16 
17     private Nifty m_Nifty;
18     
19     public static void main(String[] args) {
20         NiftyGuiTextField niftyGuiLabel = new NiftyGuiTextField();
21         niftyGuiLabel.start();
22     }
23     
24     @NiftyEventSubscriber(id="textField1")
25     public final void onTextFieldChange(final String id, final TextFieldChangedEvent textFieldChangedEvent){
26         System.out.println("控件id:" + id + ",当前输入的密码:" + textFieldChangedEvent.getText());
27     }
28 
29     @Override
30     public void simpleInitApp() {
31         // 设置默认背景色
32         getViewPort().setBackgroundColor(ColorRGBA.DarkGray);
33         
34         // 初始化Nifty
35         NiftyJmeDisplay niftyDisplay = NiftyJmeDisplay.newNiftyJmeDisplay(
36                 assetManager,
37                 inputManager,
38                 audioRenderer,
39                 guiViewPort);
40         m_Nifty = niftyDisplay.getNifty();
41         // 将NiftyGUI显示对象添加到JME3中
42         guiViewPort.addProcessor(niftyDisplay);
43         
44         m_Nifty.fromXml("Interface/NiftyGuiTextField.xml", "screen0");
45         
46         // 禁用flyCam并显示鼠标
47         flyCam.setEnabled(false);
48         inputManager.setCursorVisible(true);
49     }
50 
51     @Override
52     public void bind(Nifty arg0, Screen arg1) {
53     }
54 
55     @Override
56     public void onStartScreen() {
57     }
58 
59     @Override
60     public void onEndScreen() {
61     }
62     
63 }

注意第24~27行，然后xml中绑定NiftyGuiTextField这个ScreenController：

 1 <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
 2 <nifty xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://nifty-gui.lessvoid.com/nifty-gui" xsi:schemaLocation="https://raw.githubusercontent.com/void256/nifty-gui/1.4/nifty-core/src/main/resources/nifty.xsd https://raw.githubusercontent.com/void256/nifty-gui/1.4/nifty-core/src/main/resources/nifty.xsd">
 3     <useControls filename="nifty-default-controls.xml"/>
 4     <useStyles filename="nifty-default-styles.xml"/>
 5     <screen id="screen0" controller="mygame.NiftyGuiTextField" >
 6         <layer id="layer0" childLayout="center">
 7             <panel id="panel0" height="57px" style="nifty-panel-simple" width="401px" align="center" childLayout="vertical" valign="center" y="-1px" x="-1px">
 8                 <control name="textfield" id="textField0" text="user name" width="50%" align="center" valign="center" y="109" x="21"/>
 9                 <control name="textfield" id="textField1" text="12355" width="50%" align="center" passwordChar="*" valign="center"/>
10             </panel>
11         </layer>
12     </screen>
13 </nifty>

执行结果如下：

posted @ 2024-07-12 15:54 JhonKkk 阅读(35) 评论(0) 收藏举报

刷新页面返回顶部

JhonKkk