<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<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">
<useControls filename="nifty-default-controls.xml"/>
<useStyles filename="nifty-default-styles.xml"/>
<screen id="ListBoxScreen" controller="mygame.appState.ListBox01AppState">
<layer id="ListBoxLayer" childLayout="absolute">
<control name="listBox" id="myListBox" childLayout="overlay" horizontal="optional" width="612px" x="104" y="163" valign="center" vertical="optional" align="center" selectionMode="Single" displayItems="5" height="244px"/>
</layer>
</screen>
</nifty>
Java控制器，代码如下：
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
package mygame.appState; import com.jme3.app.Application;
import com.jme3.app.SimpleApplication;
import com.jme3.app.state.BaseAppState;
import com.jme3.niftygui.NiftyJmeDisplay;
import de.lessvoid.nifty.Nifty;
import de.lessvoid.nifty.NiftyEventSubscriber;
import de.lessvoid.nifty.controls.ListBox;
import de.lessvoid.nifty.controls.ListBoxSelectionChangedEvent;
import de.lessvoid.nifty.render.batch.BatchRenderConfiguration;
import de.lessvoid.nifty.screen.Screen;
import de.lessvoid.nifty.screen.ScreenController;
import java.util.List; /**
*
* @author JhonKkk
*/
public class ListBox01AppState extends BaseAppState implements ScreenController{
private Nifty nifty;
private NiftyJmeDisplay niftyDisplay;
public class JustAnExampleModelClass {
private String label; public JustAnExampleModelClass(final String label) {
this.label = label;
} public String toString() {
return label; // we could really use anything in here, the name of the sword or something ;-)
}
}
@Override
protected void initialize(Application app) {
SimpleApplication simpleApplication = (SimpleApplication) app;
BatchRenderConfiguration config = new BatchRenderConfiguration();
config.atlasWidth = 1024;
config.atlasHeight = 1024;
config.fillRemovedImagesInAtlas = false;
config.disposeImagesBetweenScreens = false;
config.useHighQualityTextures = true;
niftyDisplay = NiftyJmeDisplay.newNiftyJmeDisplay(
simpleApplication.getAssetManager(),
simpleApplication.getInputManager(),
simpleApplication.getAudioRenderer(),
simpleApplication.getGuiViewPort(),config);
nifty = niftyDisplay.getNifty();
nifty.enableAutoScaling(800, 600);
nifty.fromXml("Interface/ListBox01.xml", "ListBoxScreen", this);
simpleApplication.getGuiViewPort().addProcessor(niftyDisplay);
} @Override
protected void cleanup(Application app) {
} @Override
protected void onEnable() {
} @Override
protected void onDisable() {
} @Override
public void bind(Nifty nifty, Screen screen) {
// ListBox listBox = screen.findNiftyControl("myListBox", ListBox.class);
// listBox.addItem("a");
// listBox.addItem("b");
// listBox.addItem("c");
ListBox<JustAnExampleModelClass> listBox = (ListBox<JustAnExampleModelClass>) screen.findNiftyControl("myListBox", ListBox.class);
listBox.addItem(new JustAnExampleModelClass("You can add more lines to this ListBox."));
listBox.addItem(new JustAnExampleModelClass("Use the append button to do this."));
}
@NiftyEventSubscriber(id="myListBox")
public void onMyListBoxSelectionChanged(final String id, final ListBoxSelectionChangedEvent<JustAnExampleModelClass> event) {
List<JustAnExampleModelClass> selection = event.getSelection();
for (JustAnExampleModelClass selectedItem : selection) {
System.out.println("listbox selection [" + selectedItem.label + "]");
}
} @Override
public void onStartScreen() {
} @Override
public void onEndScreen() {
} }
其中@NiftyEventSubscriber(id="myListBox")注解方法onMyListBoxSelectionChanged在每次listBox发生事件时回调,然后我们在方法里获取当前选择项并打印。
注意，该注解并非监听onSelect或onCheck事件，而是监听事件发生。
如图:
如果需要改变ListBox的字体，需要通过修改ListBox的Style来实现，通过研读默认的Style，可以发现ListBox使用默认的NiftyLabel作为Item，而默认的NiftyLabel又使用了默认的字体。所以我们只需要改变ListBox的Style，甚至可以通过Style修改用其他控件作为ListBox的Item。
默认的Style文件:
<?xml version="1.0" encoding="UTF-8"?>
<nifty-styles xmlns="http://nifty-gui.lessvoid.com/nifty-gui"> <style id="nifty-listbox">
<attributes/>
</style>
<style id="nifty-listbox#scrollpanel">
<attributes focusable="true" padding="1px"/>
<effect overlay="true">
<onActive name="colorBar" color="#666f" post="false" neverStopRendering="true" timeType="infinite"/>
<onActive name="border" border="1px" color="#222f" inset="1px,0px,0px,1px"/>
<onFocus name="border" border="1px" color="#f006"/>
<onEnabled name="renderQuad" startColor="#2228" endColor="#2220" post="false" length="150"/>
<onDisabled name="renderQuad" startColor="#2220" endColor="#2228" post="false" length="150"/>
</effect>
</style>
<style id="nifty-listbox#bottom-right">
<attributes width="23px" height="23px"/>
</style>
<style id="nifty-listbox-item" base="nifty-label">
<attributes color="#000f" width="100%" align="left" textVAlign="center" textHAlign="left"/>
<interact onClick="listBoxItemClicked()"/>
<effect>
<onCustom customKey="focus" name="colorBar" post="false" color="#444f" neverStopRendering="true"
timeType="infinite"/>
<onCustom customKey="select" name="colorBar" post="false" color="#444f" neverStopRendering="true"
timeType="infinite"/>
<onCustom customKey="select" name="textColor" post="false" color="#fc0f" neverStopRendering="true"
timeType="infinite"/>
<onHover name="colorBar" color="#444f" post="false" neverStopRendering="true" timeType="infinite"
inset="1px"/>
<onClick name="focus" targetElement="#parent#parent"/>
</effect>
</style>
</nifty-styles>
其中<style id="nifty-listbox-item" base="nifty-label">表明了ListBox默认使用自带的NiftyLabel作为Item，而默认的NiftyLabel使用默认的字体。
自定义Item
通过研读默认的nifty-listbox.xml，我们会发现默认的ListBox的item是一个NiftyLabel。而我们在游戏开发中往往不仅仅局限于显示文本列表。更多的是复杂的图文列表。那么，NiftyGUI是否可以像Android一样，提供自定义List Item的接口呢？答案是肯定的。
具体而言，我们需要了解ListBox如何渲染一个Item，通过Wiki和源码可以简单了解到，ListBox渲染一个Item需要先提供模板控制器，然后每次渲染时通过模板控制器去获取Item并适配相应数据，这个过程其实和Android的RecylerView差不多，在Android里面，使用RecylerView渲染自定义Item，通常，我们可以用一个独立的布局文件来作为Item的模板，然后在java代码里实现适配器，加载对应的布局item，并填充数据。在NiftyGUI里，也是类似的。
第一步，添加一个自定Item，在NiftyGUI中，UI控件分为两大类，一类是NiftyElement（如Layer，Panel等），另一类就是具体的控件类型（如Button，Label等），所以，在NiftyGUI中，添加一个自定义控件，就是一个自定义Control。在SDK中，在Interface目录下创建一个control目录，然后右键新建一个名为ImgLabelItem的Item控制器，如下:
<?xml version="1.0" encoding="UTF-8"?>
<nifty-controls xmlns="http://nifty-gui.lessvoid.com/nifty-gui">
<controlDefinition style="img-label-listbox" name="img-label-item">
<panel style="#panel" childLayout="horizontal" width="100%" align="center">
<image id="#icon" width="23px" height="23px" />
<control id="#text" name="label" align="left" style="img-label-listbox-label-item" textHAlign="left" height="23px" width="*" wrap="true" />
</panel>
</controlDefinition>
</nifty-controls>
分析下这里的代码，首先第一行<nifty-controls>标签定义这是一个nifty控制器(所有具体的ui控件都是一个控制器或element)，这表明我们正在创建一个自定义nifity控件；接下来的<controlDefinition>表明我们的控件定义从这里开始，在controlDefinition标签中，有一个style属性，这个非常重要，我们引用自己定义的img-label-listbox样式，这在接下来介绍，接着name属性指定了这个控件的名称是img-label-item(为何不叫id呢？其实可以这样理解，id是一个具体的实例的标识符，而name表明这是一个类的名称)，以便我们在布局文件中使用这种控件。
接着，我们通过组合基础控件类panel，image，control完成了我们这个自定义控件的内容（panle，image和control这些是基础类型控件，复杂的自定义控件都是通过组合基础类型得到，就像复合数据类型是通过组合各种基础数据类型实现的道理一样）。
panel提供了一个容器，使用id为#panel的样式（这个样式定义在默认的nifty中，你可能会不解，没看到哪里引入了这个样式文件，没错，这里没有引入其他样式文件，因为我们在最后的屏幕布局中才引入默认的nifty style，同样，上面的img-label-listbox是一个自定义样式的id，但是在这个xml中我们并没有看到任何引入样式文件的代码，因为我们统一在最后的屏幕布局中才引入），childLayout指定子对象使用水平布局，width指定为填充100%宽度，而algin指定了panel对齐中心于父控件。
image提供了一个图标控件，id为#icon，width为23像素，height为23像素。
control的name属性表明这个control是一个label-control控件，有一点需要注意，image和panel都是element类型的控件，所以直接用image或panel作为标签名；而label是一个control类型的控件，所以通过control并指定name属性来描述这种控件。style使用id为img-label-listbox-label-item的样式，其他属性不用多说都能理解是什么意思。
自定义控件定义好了，接下来，创建我们的自定义控件的样式文件，如果不创建自定义样式文件，则不存在上面id为img-label-listbox和img-label-listbox-label-item的样式，则只能使用默认的样式（样式必须显式指定，否则渲染会黑屏，但由于复杂控件由基础控件组成，基础控件默认就指定了样式，所以可以忽略style属性，但是controlDefinition必须显式指定样式）。我们在Interface下创建一个styles文件夹，然后添加一个名为img-label-list.xml的空样式文件，如下:
打开样式文件，我们找到默认的nifty的listbox样式文件，具体位置在如下位置:
把里面的内容复制到我们新建的style中，然后进行修改，如下:
1 <?xml version="1.0" encoding="UTF-8"?>
2 <nifty-styles xmlns="http://nifty-gui.lessvoid.com/nifty-gui">
3
4 <style id="img-label-listbox">
5 <attributes/>
6 </style>
7 <style id="img-label-listbox#scrollpanel">
8 <attributes focusable="true" padding="1px"/>
9 <effect overlay="true">
10 <onActive name="colorBar" color="#666f" post="false" neverStopRendering="true" timeType="infinite"/>
11 <onActive name="border" border="1px" color="#222f" inset="1px,0px,0px,1px"/>
12 <onFocus name="border" border="1px" color="#f006"/>
13 <onEnabled name="renderQuad" startColor="#2228" endColor="#2220" post="false" length="150"/>
14 <onDisabled name="renderQuad" startColor="#2220" endColor="#2228" post="false" length="150"/>
15 </effect>
16 </style>
17 <style id="img-label-listbox#bottom-right">
18 <attributes width="23px" height="23px"/>
19 </style>
20 <style id="img-label-listbox-label-item" base="nifty-label">
21 <attributes color="#000f" width="100%" align="left" textVAlign="center" textHAlign="left"/>
22 <interact onClick="listBoxItemClicked()"/>
23 <effect>
24 <onCustom customKey="focus" name="colorBar" post="false" color="#444f" neverStopRendering="true"
25 timeType="infinite"/>
26 <onCustom customKey="select" name="colorBar" post="false" color="#444f" neverStopRendering="true"
27 timeType="infinite"/>
28 <onCustom customKey="select" name="textColor" post="false" color="#fc0f" neverStopRendering="true"
29 timeType="infinite"/>
30 <onHover name="colorBar" color="#444f" post="false" neverStopRendering="true" timeType="infinite"
31 inset="1px"/>
32 <onClick name="focus" targetElement="#parent#parent"/>
33 </effect>
34 </style>
35 </nifty-styles>
在第4行定义了一个id为img-label-listbox的样式，但这是一个空样式；接着在第7行和第17行定义了img-label-listbox的伪类样式，这才是真正的img-label-listbox的各个项的样式；然后，在第20行定义了一个img-label-listbox#bottom-right样式，通过base属性表明该样式继承自nifty-label样式，说明这是一个为label控件类型定制的样式。我们看看这个样式定义，首先attributes定义了color，width，align等一些属性，然后通过interact标签定义了用户交互响应listBoxItemClicked()函数，这个是函数是默认的listbox控制器内部的函数，建议你直接用这个，因为你自己实现的话需要写适配器，绑定等一系列逻辑；接下来effect标签定义了控件的一些效果，比如鼠标悬浮时(onHover事件)的效果，或者点击时(onClick事件)的效果，另外，也可通过onCustom标签来描述事件，比如将onClick事件改为onCustom描述则是：<onCustom customKey="click"/>，所以，我们通过onCustom标签分别定义了focus事件，select事件发生时，哪些属性产生效果；如<onCustom customKey="focus" name="colorBar".../>定义了当focus事件发生时,属性colorBar产生特效效果，具体效果由后面的post,color,neverStopRendering等参数定义。
现在，我们完成了自定义样式和自定义控件，可以实现我们的listBox的自定义item了，我们创建一个新的名为ImgLabelListBox01的gui文件，然后，代码如下:
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 <!--引入自定义控制器-->
5 <useControls filename="Interface/control/ImgLabelItem.xml"/>
6 <useStyles filename="nifty-default-styles.xml"/>
7 <!--引入自定义样式-->
8 <useStyles filename="Interface/styles/img-label-listbox.xml"/>
9 <screen id="ListBoxScreen" controller="mygame.appState.ImgLabelItemListBoxAppState">
10 <layer id="ListBoxLayer" childLayout="absolute">
11 <control name="listBox" id="myListBox" childLayout="overlay" horizontal="optional" width="612px" x="104" y="163" valign="center" vertical="optional" align="center" selectionMode="Single" displayItems="5" height="244px" viewConverterClass="mygame.gui.ImgLabelConverter">
12 <control name="img-label-item" controller="de.lessvoid.nifty.controls.listbox.ListBoxItemController" />
13 </control>
14 </layer>
15 </screen>
16 </nifty>
这里可以看到，我们在自定义控件中使用的样式（如id为img-listbox的样式），是包含在img-label-listbox.xml这个文件中，我们在gui文件中引入了这个样式文件，然后引入了自定义控制器文件ImgLabelItem.xml。这样，我们的gui文件就可以访问到自定义控件，同时可以访问我们的自定义样式了。
在第11行这里，我们定义了一个id为myListBox的listBox控件，然后添加了一个viewConverterClass="mygame.gui.ImgLabelConverter"属性，这个是item数据适配器对象，是一个我们自定义的item适配器java类，等会我们会介绍；然后，我们在内部定义了一个control标签，这个标签的name属性表明，这个control是一个img-label-item类型的控件，也就是我们自定义的类型为img-label-item的控件。同时指定controller属性，这个值可以写死，它使用默认的控制器类处理控件交互。
接下来实现名称为mygame.gui.ImgLabelConverter的类，代码如下:
1 /*
2 * To change this license header, choose License Headers in Project Properties.
3 * To change this template file, choose Tools | Templates
4 * and open the template in the editor.
5 */
6 package mygame.gui;
7
8 import de.lessvoid.nifty.controls.ListBox;
9 import de.lessvoid.nifty.elements.Element;
10 import de.lessvoid.nifty.elements.render.ImageRenderer;
11 import de.lessvoid.nifty.elements.render.TextRenderer;
12
13 /**
14 *
15 * @author JhonKkk
16 */
17 public class ImgLabelConverter implements ListBox.ListBoxViewConverter<ImgLabel>{
18 private static final String ICON = "#icon";
19 private static final String TEXT = "#text";
20
21 /**
22 * Default constructor.
23 */
24 public ImgLabelConverter() {
25 }
26
27 /**
28 * {@inheritDoc}
29 */
30 @Override
31 public final void display(final Element listBoxItem, final ImgLabel item) {
32 final Element text = listBoxItem.findElementById(TEXT);
33 final TextRenderer textRenderer = text.getRenderer(TextRenderer.class);
34 final Element icon = listBoxItem.findElementById(ICON);
35 final ImageRenderer iconRenderer = icon.getRenderer(ImageRenderer.class);
36 if (item != null) {
37 textRenderer.setText(item.getLabel());
38 iconRenderer.setImage(item.getIcon());
39 } else {
40 textRenderer.setText("");
41 iconRenderer.setImage(null);
42 }
43 }
44
45 /**
46 * {@inheritDoc}
47 */
48 @Override
49 public final int getWidth(final Element listBoxItem, final ImgLabel item) {
50 final Element text = listBoxItem.findElementById(TEXT);
51 final TextRenderer textRenderer = text.getRenderer(TextRenderer.class);
52 final Element icon = listBoxItem.findElementById(ICON);
53 final ImageRenderer iconRenderer = icon.getRenderer(ImageRenderer.class);
54 return ((textRenderer.getFont() == null) ? 0 : textRenderer.getFont().getWidth(item.getLabel()))
55 + ((item.getIcon() == null) ? 0 : item.getIcon().getWidth());
56 }
57
58 }
其中该类继承自ListBoxViewConverter类，这是item适配器父类，实现了两个方法display和getWidth。其中display在每个item被渲染时回调，在这里填入item的数据（就跟Android里的RecerverView适配器一样）；在getWidth返回当前渲染的item的宽度，返回0不可见。
其中ImgLabel是一个javaBean类，代码如下:
1 /*
2 * To change this license header, choose License Headers in Project Properties.
3 * To change this template file, choose Tools | Templates
4 * and open the template in the editor.
5 */
6 package mygame.gui;
7
8 import de.lessvoid.nifty.render.NiftyImage;
9
10 /**
11 *
12 * @author JhonKkk
13 */
14 public class ImgLabel {
15 private String label;
16 private NiftyImage icon;
17
18 public ImgLabel(String label, NiftyImage icon) {
19 this.label = label;
20 this.icon = icon;
21 }
22
23 public NiftyImage getIcon() {
24 return icon;
25 }
26
27 public String getLabel() {
28 return label;
29 }
30
31 }
这没啥好说的，就是包含一个label和icon的数据结构。接着，我们创建名为mygame.appState.ImgLabelItemListBoxAppState的gui屏幕控制器类，用于实现最终整合gui的逻辑。如下:
1 /*
2 * To change this license header, choose License Headers in Project Properties.
3 * To change this template file, choose Tools | Templates
4 * and open the template in the editor.
5 */
6 package mygame.appState;
7
8 import com.jme3.app.Application;
9 import com.jme3.app.SimpleApplication;
10 import com.jme3.app.state.BaseAppState;
11 import com.jme3.niftygui.NiftyJmeDisplay;
12 import de.lessvoid.nifty.Nifty;
13 import de.lessvoid.nifty.NiftyEventSubscriber;
14 import de.lessvoid.nifty.controls.ListBox;
15 import de.lessvoid.nifty.controls.ListBoxSelectionChangedEvent;
16 import de.lessvoid.nifty.render.batch.BatchRenderConfiguration;
17 import de.lessvoid.nifty.screen.Screen;
18 import de.lessvoid.nifty.screen.ScreenController;
19 import java.util.List;
20 import mygame.gui.ImgLabel;
21
22 /**
23 *
24 * @author JhonKkk
25 */
26 public class ImgLabelItemListBoxAppState extends BaseAppState implements ScreenController{
27 private Nifty nifty;
28 private NiftyJmeDisplay niftyDisplay;
29 public class JustAnExampleModelClass {
30 private String label;
31
32 public JustAnExampleModelClass(final String label) {
33 this.label = label;
34 }
35
36 public String toString() {
37 return label; // we could really use anything in here, the name of the sword or something ;-)
38 }
39 }
40 @Override
41 protected void initialize(Application app) {
42 SimpleApplication simpleApplication = (SimpleApplication) app;
43 BatchRenderConfiguration config = new BatchRenderConfiguration();
44 config.atlasWidth = 1024;
45 config.atlasHeight = 1024;
46 config.fillRemovedImagesInAtlas = false;
47 config.disposeImagesBetweenScreens = false;
48 config.useHighQualityTextures = true;
49 niftyDisplay = NiftyJmeDisplay.newNiftyJmeDisplay(
50 simpleApplication.getAssetManager(),
51 simpleApplication.getInputManager(),
52 simpleApplication.getAudioRenderer(),
53 simpleApplication.getGuiViewPort(),config);
54 nifty = niftyDisplay.getNifty();
55 nifty.enableAutoScaling(800, 600);
56 nifty.fromXml("Interface/ImgLabelListBox01.xml", "ListBoxScreen", this);
57 simpleApplication.getGuiViewPort().addProcessor(niftyDisplay);
58 }
59
60 @Override
61 protected void cleanup(Application app) {
62 }
63
64 @Override
65 protected void onEnable() {
66 }
67
68 @Override
69 protected void onDisable() {
70 }
71
72 @Override
73 public void bind(Nifty nifty, Screen screen) {
74 ListBox<ImgLabel> listBox = screen.findNiftyControl("myListBox", ListBox.class);
75 listBox.addItem(new ImgLabel("Help", nifty.getRenderEngine().createImage(screen, "Interface/help.png", false)));
76 listBox.addItem(new ImgLabel("Text", nifty.getRenderEngine().createImage(screen, "Interface/help.png", false)));
77 }
78 @NiftyEventSubscriber(id="myListBox")
79 public void onMyListBoxSelectionChanged(final String id, final ListBoxSelectionChangedEvent<ImgLabel> event) {
80 List<ImgLabel> selection = event.getSelection();
81 for (ImgLabel selectedItem : selection) {
82 System.out.println("listbox selection [" + selectedItem.getLabel() + "]");
83 }
84 }
85
86 @Override
87 public void onStartScreen() {
88 }
89
90 @Override
91 public void onEndScreen() {
92 }
93
94 }
在bind()函数中初始化数据项目，在onMyListBoxSelectionChanged()方法中，获取选中的item并打印。最终效果如下:
很显然，这就是我们的自定义Item。
总结，一个自定义Item的实现需要以下几个步骤：
1.实现自定义控件布局
2.实现自定义控件样式
3.实现自定义控件Item适配器
需要注意的一点，如果你的自定义Item无法选中，即无法获取选中事件，那么极有可能是你没有为Item定义样式并定义Effect效果，要是一个item能够被选中，必须包含select效果，在这个例子中，是这样的:
1 <onCustom customKey="select" name="colorBar" post="false" color="#444f" neverStopRendering="true"
2 timeType="infinite"/>
3 <onCustom customKey="select" name="textColor" post="false" color="#fc0f" neverStopRendering="true"
4 timeType="infinite"/>
还有一点需要注意，我们仅仅为id为#text控件定义了select效果，所以点击#text控件会有效，但是点击id为#icon的控件仍然无效。
![[WPF 自定义控件]自定义控件库系列文章](https://www.kunjuke.com/file/css/thumb/6.jpg/280-180.jpg)
