Dynamically creating tabs

Unity Engine
1

Hello everyone
what I’m trying to accomplish here is to create a tab table which can be managed externally. Right now I’m using XML to create a tree structure of nodes, which looks something like this:

root
  - Hong Kong
      - Causeway Bay
      - Kowloon Tong
      - Sha Tin
      - Kwai Fong
      - Wong Tai Sin
  - Japan
      - Tokyo
      - Osaka
      - Okinawa
      - Tokohama
  - England and Wales
      - Oxford
      - Cardiff
      - London
          - Lancaster Gate
          - Westminster
          - Knightsbridge
      - Bath
      - Salisbury

I created a perfab which is called tabContentPrefab, this prefab is responsible for creating rows inside the tab table. I have another prefab called tabPrefab, which is responsible for creating the tab itself.

Currently I am able to traverse all nodes and put them all inside a single row (that means only 1 tabContentPrefab), and the tab themselves are not “created” structurally like what the tree looks (like above).

Ultimately I want to achieve a dynamic tab table in which the whole structure is created at the start, including all children. The default “selected” tab will be the first child of each “branch”. So the “default” look of the tab table should have 3 rows, with “Hong Kong” and “Causeway Bay” selected. When I select “England and Wales” then “London”, an extra row will be created at real time and have “Lancaster Gate” selected as default.

Any idea or help will be greatly appreciated.

ps. forgot the mention that I’m using Unity 3.5.7f6 and NGUI 2.6.4

2

Being unsure of how you are handling reading the XML file, I can only suggest that prehaps you add an attribute to each node that is supposed to be a tab to flag it as such. When you are parsing the XML in your script and happen on that attribute, create the tab then.

3

I am using TextAsset and XmlDocument to handle the xml
here’s the code:

TextAsset textXML = (TextAsset)Resources.Load("config/tabs", typeof(TextAsset));
XmlDocument xml = new XmlDocument();
xml.LoadXml(textXML.text);

I know that there’s a XmlSerializer, but I don’t really understand how to use it. Besides, I only need to read data from the xml, I don’t really need to create one

4

You could try something like the following for parsing and creating each tab from you document. The snippet doesn’t handle anything related to the information under each tab node, but might give you a decent starting point.

// Parse tab document
XmlDocument doc = new XmlDocument();
doc.Load(Application.persistentDataPath + "/TabInformation.xml");
XmlNodeList nodes = doc.SelectNodes("//information/tabs");
for(int i = 0; i < nodes.Count; i++)
{
	int id = int.Parse(nodes[i].Attributes["id"].Value);
	string name = nodes[i].Attributes["name"].Value;

	// Handle Tab creation here with above attributes
}
5

here’s my current code:

public GameObject prefab;
	
	private int currentLevel=0;
	private const int levelLimit = 1;
	private int levelCounter = 0;
	private List<string> nameList = new List<string>();

	// Use this for initialization
	void Start () 
	{
		readXML();
	}
	
	void readXML()
	{
		TextAsset textXML = (TextAsset)Resources.Load("config/tabsTest", typeof(TextAsset));
		XmlDocument xml = new XmlDocument();
		xml.LoadXml(textXML.text);
		
		generateTabContent(nameList, xml.ChildNodes);
		
	}
	
	void readXMLNode(XmlNodeList nodesList)
	{
		foreach(XmlNode node in nodesList)
		{
			if(node.Attributes!=null)
			{
				var rootAttribute = node.Attributes["root"];
				var nameAttribute = node.Attributes["name"];
				var levelAttribute = node.Attributes["level"];
				
				if( nameAttribute != null  rootAttribute == null  levelAttribute.Value.Equals(currentLevel.ToString()))
				{
					nameList.Add(nameAttribute.Value);
				}// else if(){}
			}
			
			if(node.HasChildNodes == true)
			{
				currentLevel++;	
			}			

			readXMLNode(node.ChildNodes);
			
			if(node.NextSibling == null)
			{
				currentLevel--;
			}	

		}

		
	}

	
	void generateTabContent(List<string> theNameList, XmlNodeList nodesList)
	{
		readXMLNode(nodesList);
		
		GameObject tabContent = Instantiate(prefab) as GameObject;
		tabContent.transform.parent = this.transform;
		tabContent.transform.localScale = transform.localScale;
		tabContent.transform.localPosition = transform.position;
		
		generateButtonScript buttonScript = tabContent.GetComponent<generateButtonScript>();
		buttonScript.generateTabs(theNameList);
		
		UITable uitable = tabContent.GetComponent<UITable>();
		uitable.Reposition();
	}

so actually i can already create tabs from the xml, however, all tabs are “grouped” inside a single row (that means all tabs prefab are grouped under tabContentPrefab)

6

and this is my xml:

<TabsCollection root="root" level="0">
	<Tab level="1" name="Hong Kong">
		<Tab level="2" name="Causeway Bay"></Tab>
		<Tab level="2" name="Kowloon Tong"></Tab>
		<Tab level="2" name="Sha Tin"></Tab>
		<Tab level="2" name="Kwai Fong"></Tab>
		<Tab level="2" name="Wong Tai Sin"></Tab>
	</Tab>
	
	<Tab level="1" name="Japan">
		<Tab level="2" name="Tokyo"></Tab>
		<Tab level="2" name="Osaka"></Tab>
		<Tab level="2" name="Okinawa"></Tab>
		<Tab level="2" name="Yokohama"></Tab>
	</Tab>
	
	<Tab level="1" name="England and Wales">
		<Tab level="2" name="Oxford"></Tab>
		<Tab level="2" name="Cardiff"></Tab>
		<Tab level="2" name="London">
			<Tab level="3" name="Lancaster Gate"></Tab>
			<Tab level="3" name="Westminster"></Tab>
			<Tab level="3" name="Knightsbridge"></Tab>
		</Tab>
		<Tab level="2" name="Bath"></Tab>
		<Tab level="2" name="Salisbury"></Tab>
	</Tab>
</TabsCollection>