UI Panels

[sinx]

Ok, to begin with, I have already created a UI Scene successfully, so I mostly understand that part.

Now, I need to make a Panel (ie container) class that I can reuse in parts of my UI. In UT2K4 I'd simply subclass GUIPanel and add my UI objects in the defaultproperties - very streamlined, easy to use, understand and debug.

Now in UT3 with UIScenes, you create your scene as a code class and then create the UI object in the UI Editor based on your code class. I can't quite see how I would do this for a Panel as the UI Editor seems only to deal with "UIScenes".

Another example could be a TabPage for a TabControl. I don't need to do this but what if you needed to create a single UI Class for a tab page so you could reuse it in different parts of your UI.

So far I can only see how to create new UIScenes in the UI Editor.

Does anyone know how to go about doing this?

[Tonester]

Alot of people are pretty lost about UIScenes - you seem to be further along than most people. :)

[sinx]

lol, I have a lot of UI work to do if I'm going to recreate my mod from UT2K4 for UT3.

Screenshots from the 2K4 version:
http://mapmixer.oceaniaut.com/index.php?game=ut2k4&mod=mapmixer&page=screenshots

So far I've spent a great deal of time on the UT3 UI and it's currently taking me a very, very long time to get nowhere.:rolleyes:

The UI Schism between packages and code is just not making life easy for me. To be honest, I could rant and rave in a very lucid fashion about the UI Editor but I just really want to get it working more than anything.

Anyone got any ideas on creating container classes?

[Tonester]

Well, the UI Editor should work for anything that "isa" UIScene so anything extending UIScene (or any object that already extends UIScene) should be editable in the UT3 Editor.

So, once you get a "panel" that you want to use over and over, just save the "template" version of it, and just extend from it whenever you want to create a new one.

I'm just guessing here since I haven't tried it, but that should work in theory.

[BattleMode]

Ok, to begin with, I have already created a UI Scene successfully, so I mostly understand that part.

Now, I need to make a Panel (ie container) class that I can reuse in parts of my UI. In UT2K4 I'd simply subclass GUIPanel and add my UI objects in the defaultproperties - very streamlined, easy to use, understand and debug.

Now in UT3 with UIScenes, you create your scene as a code class and then create the UI object in the UI Editor based on your code class. I can't quite see how I would do this for a Panel as the UI Editor seems only to deal with "UIScenes".

Another example could be a TabPage for a TabControl. I don't need to do this but what if you needed to create a single UI Class for a tab page so you could reuse it in different parts of your UI.

So far I can only see how to create new UIScenes in the UI Editor.

Does anyone know how to go about doing this? This tutorial might help: http://utforums.epicgames.com/showthread.php?t=588948

[sinx]

Thanks guy, I'll look into that stuff in a little while.

[sinx]

It appears that "Create Archetype" was what I'm after.

I created a group of objects that I thought I might like to reuse again, so I thought I'd give Create Archetype a go and that did the job it seems. Might seem pretty straight forward but when you have no documentation to go by, it's all experimentation.

[sinx]

Now I have to figure out how this "Archetype" that I created in the UI Editor links back to a code class, so I can control it programatically.

[sinx]

I tried opening my archetype in the UI editor and copying it to the clipboard then pasting it into a text editor and changing the ObjectArchetype. However, when I tried pasting it all back in the editor, it told me "This feature not yet supported for UIPrefabs".

Hmm...back to more fumbling round in the dark.

[sinx]

Ok, I think I've finally cracked it.

What I did was this:

Create a custom code class that extends UIPanel (for example) and make it "Placeable".

Then, in the UI Editor, place this on a temporary scene and add all the other widgets that will be associated as children.

Create an Archetype out of this UIPanel and it's children. Open up the archetype and give all the children some generic tags that make sense.

That's it as far as the archetype goes. Your custom class gets all the usual UI type events, eg PostInitialize() .

Now, if you need to access the instances of your archetype in a scene, you have to understand that the archetype is actually wrapped by a UIPrefab class. Whenever you place this archetype in a Scene, it gets instanced as a UIPrefabInstance. So if you need to refer to your UIPanel class, you will need to first search for the UIPrefabInstance. Then you can search its children for your custom class (eg UIPanel). If you only had once instance of the panel on screen you wouldn't have to do this, as you could search for its children directly but that's not a very friendly thing to do, as you have a custom class there and should interact with the class instead of it's children.

This is the only way I have found to accomplish a reusable, placeable, code-able Container UI Class. If anyone finds an easier way let me know.

The only thing that concerns me at the moment is if changes to the Archetype get propagated to various instances of it. There are comments in the UIPrefab class that appear to indicate this doesn't occur :( This is some serious hoohah if this is the case.

I long for the days of UT2K4 where subclassing a UI class was a piece of cake. Maybe it still is, and someone can find a better way.

[Joe Wilcox]

Changes to the prefab should be propagated and yes, this is the "official" way to do it.

That being said, I left in some helper code so that you can somewhat mimic how it was done in 2K4. Nothing stops you from defining the children in the default properties and then adding calling InsertChild inside the PostInitialize function. You should also be able to do the following:


var instanced UIButton MyButton;

defaultproperties
{
begin object class=UIButton name=bMyButton
...
end object;

MyButton=bMyButton
}
During initialization, UTUIScenes will take any non-null instanced members and auto-insert them in to the children's array. I seem to remember the only limitation is is it doesn't support structs but it's better than nothing. Of course you will manually have to setup all of the various members by hand (hint, setup a dummy object in the editor and copy it to the clipboard). You can see an example of this in UTUIButtonBar.uc!

Make sure your scene is a child of UTUIScene since the default system isn't setup to support this. Also UTUIScenes will also try to match any children in the scene to transient members. For example:

if I have a UIButton in my scene called "MyTestButton" and my script looks like this:

class blah extends blahblah;

var transient UILabel MyTestButton;

....


When the scene is initialized, it will auto-assign MyTestButton to the version in the scene. It will do this to *ANY* transient members. Again there are probably limitations and since we didn't really use this feature, it might have unforeseen issues.

[sinx]

Thanks Joe, I appreciate your time.

You've given me some things to look at and think about there, so thanks.

[[BIA]DarthMushak]

Hi,

I'm trying to figure out how to add a UIList to an interface I'm building.

I have subclassed UTUIFrontend and built a nice panel in the editor that includes some buttons, a button bar, LabelButtons, etc. I can make all those things work fine - act on events in my code class, etc.

UILists however are a whole different sort of beast - I am unable to figure out how to build the code/class for a DataProvider / DataSource / etc...

I can create a UIList and set the DataSource markup string to something like <StringList:VideoModes> and it will work. I've dug through the StringList class and the ini/int files to see how these strings get there and I think I could extend this and/or add new strings if I wanted.

However... What I really want to do is populate my list with data that is dynamic. The number of columns in the list will be static, etc. - but the data its self will be dynamic.

I've dug through other things that work this wasy (OnlineFriends, the server browser list, the mutators box in the server browser, etc.) - but a lot of these classes are primarily native and I can't dig into that part.

Is there a way to build a scripted subclass of a DataProvider / DataStore? It seems that the class would need to subclass the DataProvider and implement the two interfaces needed for lists (UIListElementCellProvider, UIListElementProvider) - but I haven't (as of yet) figured out how to do this. I think I need to do more than set the Tag in the defaultproperties in my new DataProvider subclass though I'm just not sure what those things are...

If anyone can help point me in the right direction, I'd be grateful!

[KISMETGIRL702]

Hey I'm new to the forums. I am currently in an Upper Level Game Design class and my task is to get a custom UI in the game. Now I have been reading through this blog and I think this might be the answer to my delima. I have made my templates in photoshop, they look great but now I need to get them into unreal as player UI. Can I follow the above tutorial and get them into the engine? Somebody please point me in the right direction!!

Thanks

[sinx]

Hey I'm new to the forums. I am currently in an Upper Level Game Design class and my task is to get a custom UI in the game. Now I have been reading through this blog and I think this might be the answer to my delima. I have made my templates in photoshop, they look great but now I need to get them into unreal as player UI. Can I follow the above tutorial and get them into the engine? Somebody please point me in the right direction!!
Thanks

All depends on how proficient you are with programming and your knowledge of Unrealscript. Another important consideration is how complicated your UI will be. In my experience, I had to scrap using the UI Editor and hand code everything BUT this will not be the same for everyone! It wasn't until I stopped using the UI Editor that I actually started making ground in my mod, however if what you want to achieve is simple then search around for tutorials on using the UI Editor. But here again, it all comes back to how familiar you are with UnrealScript. There's a huge "chasm" between having something in Photoshop and having a UI :)

[KISMETGIRL702]

Thanks for the reply. I have been advised that working with the script is probably the best way to approach it, but I was just wondering. According to a freind of mine who has also worked on MODS the best way to do it is to mimic or just plain copy/replace existing script within unreal. I am familiar with unreal script to a point, but I still have a long way to go.

I'll keep looking into tutorials, but I havent really found one that explains it clearly.

Thanks :)

[KISMETGIRL702]

Hey SINX do you know of any tutorials?

[sinx]

I know there was a couple around but I soon went down the hand-coding path, meaning that I don't use the UI Editor at all. So I'm not much help there sorry.