Unity foundation 2 editor expansion

UI Toolkit Editor Extension

Official document
Use UI Toolkit Can be in unity Customize some UI Tools , It can be run in runtime or editor state . for example , Farm management games can write an item editor ItemEditor, Card games can write card editors .

There are also cases on the official website .

Item Editor

For farm experience projects , Write an article editor ( Wheat field story course ) , It's convenient for us to operate CropDataList database （scriptableobject）, increase 、 Delete 、 Change item data .
Editor Window Create editor window

UI Document Templates that can be used to create items

C#
This file is the main script of the item editor
UXML
The file is similar to HTML equally , Describe the content of the item editor
double-click , By default UI Builder Open the edit window

USS
The file is similar to CSS , Describe the style of the item editor

---

Basic operation steps ：
Library window Contains various controls , Usually use first VisualElement Make containers , Put some more inside Lable Button Other controls
Hierarchy window Contains the hierarchical information of each control
Viewport window Preview the contents of the current item editor

create a window

《ItemEditor.cs》

public class ItemEditor : EditorWindow
{
    
	//  Show item editor options in the menu bar 
    // [MenuItem("Window/UI Toolkit/ItemEditor")]
    [MenuItem("My Tools/ItemEditor")]
    public static void ShowExample()
    {
    
        ItemEditor wnd = GetWindow<ItemEditor>();
        wnd.titleContent = new GUIContent("ItemEditor");
    }
}

load uxml

public void CreateGUI()
{
    
	// Each editor window contains a root VisualElement object
    VisualElement root = rootVisualElement;
	// Import UXML
    var visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Editor/UIBuilder/ItemEditor.uxml");
    VisualElement labelFromUXML = visualTree.Instantiate();
    root.Add(labelFromUXML);
}

Data binding

Make sure the Hierarchy The hierarchical order of each component in the window , Find control
Query control , from root Nodes by type ListView And name ItemList , Find for control

//  Get the left column we drew in the item editor  listview
private ListView listView;
//  The right detail bar of the item editor 
private ScrollView itemDetailsSection;

...

//  Find the left column in the item editor 
listView = root.Q<VisualElement>("ItemList").Q<ListView>("ListViewer");
itemDetailsSection = root.Q<ScrollView>("ItemDetails");

Bind a callback , When editing item data , Automatically write data back to the database
For the writing of callback, please refer to the official example

---

	itemNameField.RegisterCallback<ChangeEvent<string>>(
            evt =>
            {
    
                activeItem.itemName = evt.newValue;
                //  Refresh the name of the left item column after changing the name 
                listView.Rebuild();
            }
        );

Load data

Load item data

	//  Load item database 
    private void LoadDatabase()
    {
    
        //  What we found was  GUID  character string 
        var dataArray = AssetDatabase.FindAssets("t:ItemListSO");
        //  Other versions use strings  ItemListSO  It's OK 
        if (dataArray.Length > 0)
        {
    
            dataArray[0] = AssetDatabase.GUIDToAssetPath(dataArray[0]);
            database = AssetDatabase.LoadAssetAtPath<ItemListSO>(dataArray[0]);
        }

        itemList = database.itemDetailsList;

        //  To modify file data , The object must be marked 
        EditorUtility.SetDirty(database);

        //  load  cropData  Do not want to be in  editor window  Modify the contents in , Read only 
        dataArray = AssetDatabase.FindAssets("t:CropDataList_SO");
        if (dataArray.Length > 0)
        {
    
            dataArray[0] = AssetDatabase.GUIDToAssetPath(dataArray[0]);
            cropDatabase = AssetDatabase.LoadAssetAtPath<CropDataList_SO>(dataArray[0]);
        }

        cropDetailList = cropDatabase.cropDetailsList;
    }

Generate items

For example , Generate a list of items on the left

	private void GenerateListView()
    {
    
        Func<VisualElement> makeItem = () => itemTemplate.CloneTree();
        Action<VisualElement, int> bindItem = (e, i) =>
        {
    
            if (i < itemList.Count)
            {
    
                if (itemList[i].itemIcon != null)
                {
    
                    e.Q<VisualElement>("ItemIcon").style.backgroundImage = itemList[i].itemIcon.texture;
                }
                e.Q<Label>("ItemName").text = itemList[i].itemName == null ? "No Item" : itemList[i].itemName;
            }
        };
        listView.fixedItemHeight = 56;
        listView.itemsSource = itemList;
        listView.makeItem = makeItem;
        listView.bindItem = bindItem;

        listView.onSelectionChange += OnListSectionChange;
        //  When the left item is not selected , The right detail bar is not displayed 
        itemDetailsSection.visible = false;
    }

If you select an item on the left , Automatically generate right item details

	private void OnListSectionChange(IEnumerable<object> obj)
    {
    
        //  Parameters passed when the option is selected  obj  Indicates one or more selected objects   So take the first object to represent the currently selected object 
        activeItem = obj.First() as ItemDetails;
        //  After marking, you can perform editing 、 Undo, etc 
        itemDetailsSection.MarkDirtyRepaint();
        GetItemDetails();
        itemDetailsSection.visible = true;
    }