New UI Widgets

Okay. thanks.
1.There is no data source property on any component that I can see in the table prefab.
2. I have no idea how to create an item. I kjind of hoped I could just do myDatasource.Add("a new string");

I looked at the example and it's very long and very confusing. I just need to know how I create a single item (a string) to add to the data source? Then I'm good

 

Oh wait. I see the data source now

 

Just replace TableClass, ItemClass and StringField with your own classes and field.

Code (CSharp):

1.     public class TestTable : MonoBehaviour
2.     {
3.         [SerializeField]
4.         TableClass table;
5.  
6.         public void Add()
7.         {
8.             table.DataSource.Add(new ItemClass(){StringField = "some string"});
9.         }
10.     }

 

Sorry man, but I'm not really getting it. I really don't know how to code this stuff well enough. Are you saying I need to create my own Add method in this example? And a new item class too? What should that look like? Is there a simpler way? This looks way too complicated for a plugin that's supposed to make my life easier

metricsList = GameObject.Find("Table_Metrics").GetComponent<Table>();
var r = metricsList.DataSource;
r.Clear();
//
r.Add(new ListItem("some string"));//this is the crazy bit I really don't get?

 

Oh wait! I get it. I can use your existing TableRow class like this:

r.Add(new TableRow (){Cell01="some string",Cell02="another string"});

That makes sense now. Thanks

 

Hi,
I would like to ask what is recommended way to apply sorting in ListViewCustom

In SteamSpyView you are doing it through direct sorting of dataset when clicking buttons. I suppose that this doesn't work when adding new item.

In some post in the past you recommended to specify Comparison, something like this.
dataSource.Comparison = (x, y) => x.Length.CompareTo(y.Length);

And there is an third way to set Sort and SortFunc but I suppose that this is deprecated now?

Best regards
Peter

 

DataSource.Comparison is recommended for most cases. But in sometimes is better when items added to end of list, so you can use DataSource.Sort()

Yes, new items will be added to end of list.
But in this case I use it because new items will not be added and it is easy to use DataSource.Reverse() instead creating new functions for desc sort.

Yes, it's deprecated.

 

The documentation of Creating own ListView may need an update. Item selection only seem to work if ImageAdvanced is used for DefaultItem. The documentation doesn't mention this.

 

Thanks.
It's another problem - I forgot to add IPointerDownHandler, IPointerUpHandler implementation to ListViewItem, without it events system does not raise click events even with IPointerClickHandler implemented. ImageAdvanced just hides this problem.

Fixed in 1.8.5b9

 

@ilih,
Any plans for a calendar Control?
https://developer.yahoo.com/yui/calendar/images/1up-sam.gif

 

Planned

 

@ilih - Just getting started with this, and the plugin looks great.

I want the windows for my UI to be draggable and resizable, but it seems that if I put these components on my windows, they can fight each other, in that the resize will also drag the window. Quite possibly I'm overlooking something simple that I should be doing to prevent this.

If I'm not overlooking the obvious, is there an easy way to have the resize script turn off dragging when it is resizing, or an easy way to make dragging operated by right click and resizing by left? Either of those solutions could solve the problem.

 

They work fine with few conditions:

1. Draggable component should have specified Handle (marked red on screenshot)
   
2. Handle size should be less Window.Size - Resizable.ActiveRegion, this area will be used for resize events (marked blue on screenshot)
3. Handle should have any Graphic component, otherwise EventSystem will not process clicks (you can use Image component with transparent color and enabled Raycast Target)

 

@ilih,
Can you please provide following list control with animation?
https://www.behance.net/gallery/36271421/Horizontal-Scroll-UID-IxD

 

Probably, but I am already have lot of things to add or improve, so it cannot be done in near future.

 

Ok no problem, when new version is expected?

 

Next week, if I don't meet any troubles.

 

@ilih, Awesome, and good luck

 

@ilih, In List Paginator, if we use mouse scroll up/down then scrolling gets messed up.

What happens is it doesnt scroll per page using mouse scroll up/down.

Please check

 

Fixed, please check 1.8.5b10

 

Hey, i just implemented ListViewCustomHeight as a Vertical List and i noticed that now you instantiate all the items when datasource is set, so if i have a datasource with 100 items, you create all the 100 items (which stuck even Unity Editor for many seconds) and when user start scrolling then move them to unused base. Please check this issue.

EDIT
Please also check ListViewCustomWidth in case it has the same issue.

 

Probably initial minimal height (width for ListViewCustomWidth) is very small or 0 (created items count based on this height), and later item content loaded from web and height greatly increased.
Add LayoutElement to DefaultItem and specify MinHeight (MinWidth) to 50-100, this should fix problem.

 

Thanks

 

@ilih,
Paginator List layout items in horizontal direction as following (lets say 2 rows, and 3 columns)
1,3,5,
2,4,6

But i want them to appear as
1,2,3,
4,5,6,

As its more understanding for users.
Please advise.

 

Is it about page numbers in Paginator or ListView items?

 

List View Items.
They way they appear

 

For now I cannot see how it can be done easily.
You can use script like this, but it's not perfect: items order on last page will be broken.
Also with such script you need to use TileViewReorder.OriginalItems instead TileViewSample.DataSource.

Code (CSharp):

1. using UnityEngine;
2. using System.Linq;
3. using UIWidgets;
4.  
5. namespace UIWidgetsSamples {
6.     public class TileViewReorder : MonoBehaviour
7.     {
8.         [SerializeField]
9.         public TileViewSample Tiles;
10.  
11.         public ObservableList<TileViewItemSample> OriginalItems = new ObservableList<TileViewItemSample>();
12.  
13.         void Start()
14.         {
15.             OriginalItems.OnCollectionChange += ReorderItems;
16.  
17.             if ((Tiles!=null) && (Tiles.ScrollRect!=null))
18.             {
19.                 ReorderItems();
20.  
21.                 var listener = Tiles.ScrollRect.GetComponent<ResizeListener>();
22.                 if (listener==null)
23.                 {
24.                     listener = Tiles.ScrollRect.gameObject.AddComponent<ResizeListener>();
25.                 }
26.                 listener.OnResize.AddListener(ReorderItems);
27.             }
28.         }
29.  
30.         void ReorderItems()
31.         {
32.             if (Tiles==null)
33.             {
34.                 return ;
35.             }
36.  
37.             var size = (Tiles.ScrollRect.transform as RectTransform).rect.size;
38.             var margin = Tiles.GetLayoutMargin();
39.             size.x -= margin.x + margin.y;
40.             size.y -= margin.z + margin.w;
41.  
42.             var per_row = Mathf.Max(1, Mathf.FloorToInt((size.x + Tiles.GetItemSpacingX()) / (Tiles.GetDefaultItemWidth() + Tiles.GetItemSpacingX())));
43.             var per_column = Mathf.Max(1, Mathf.FloorToInt((size.y + Tiles.GetItemSpacingY()) / (Tiles.GetDefaultItemHeight() + Tiles.GetItemSpacingY())));
44.             var per_page = per_row * per_column;
45.  
46.             var items = Tiles.DataSource;
47.             items.BeginUpdate();
48.             items.Clear();
49.  
50.             for (int i = 0; i < OriginalItems.Count + per_page; i++)
51.             {
52.                 var k = ((i / per_page) * per_page) + ((i % per_column) * per_row) + ((i % per_page) / per_column);
53.                 if (k >= OriginalItems.Count)
54.                 {
55.                     continue ;
56.                 }
57.                 items.Add(OriginalItems[k]);
58.             }
59.  
60.             items.EndUpdate();
61.         }
62.  
63.         void OnDestroy()
64.         {
65.             OriginalItems.OnCollectionChange -= ReorderItems;
66.  
67.             if ((Tiles!=null) && (Tiles.ScrollRect!=null))
68.             {
69.                 var listener = Tiles.ScrollRect.GetComponent<ResizeListener>();
70.                 listener.OnResize.RemoveListener(ReorderItems);
71.             }
72.         }
73.     }
74. }

 

Here is fixed version
Requirements:

• DefaultItem should be outside TileView.Container gameobject
• TileView.Container.EasyLayout.SkipInactive should be disabled
  
• Add to Component.SetData() silimar line and correctly process null item
  
  Code (CSharp):

  1.         public void SetData(TileViewItemSample item)
  2.         {
  3.             gameObject.SetActive(item!=null);

How it works:

• TileViewReorder.OriginalItems should be used instead TileViewSample.DataSource, except cases when you using SelectedIndex, SelectedIndicies, etc...
  
• When OriginalItems changed (added or removed items, sorted) items will be added to TileViewSample.DataSource with changed order, also null items will be added to maintain order on last page
• Same thing happens when ScrollRect size changed
• With this "gameObject.SetActive(item!=null);" item gameobject will disabled for null items
• Disabled EasyLayout.SkipInactive allow to use such gameobject in layout process

Code (CSharp):

1. using UnityEngine;
2. using System.Linq;
3. using UIWidgets;
4.  
5. namespace UIWidgetsSamples {
6.     public class TileViewReorder : MonoBehaviour
7.     {
8.         [SerializeField]
9.         public TileViewSample Tiles;
10.  
11.         public ObservableList<TileViewItemSample> OriginalItems = new ObservableList<TileViewItemSample>();
12.  
13.         [SerializeField]
14.         public TileViewItemSample EmptyItem = null;
15.  
16.         protected int PerRow = 1;
17.         protected int PerColumn = 1;
18.         protected int PerPage = 1;
19.  
20.         void Start()
21.         {
22.             OriginalItems.OnCollectionChange += ReorderItems;
23.  
24.             SizeChanged();
25.  
26.             var listener = Tiles.ScrollRect.GetComponent<ResizeListener>();
27.             if (listener==null)
28.             {
29.                 listener = Tiles.ScrollRect.gameObject.AddComponent<ResizeListener>();
30.             }
31.             listener.OnResize.AddListener(SizeChanged);
32.         }
33.  
34.         public void SizeChanged()
35.         {
36.             var size = (Tiles.ScrollRect.transform as RectTransform).rect.size;
37.             var margin = Tiles.GetLayoutMargin();
38.             size.x -= margin.x + margin.y;
39.             size.y -= margin.z + margin.w;
40.  
41.             PerRow = Mathf.Max(1, Mathf.FloorToInt((size.x + Tiles.GetItemSpacingX()) / (Tiles.GetDefaultItemWidth() + Tiles.GetItemSpacingX())));
42.             PerColumn = Mathf.Max(1, Mathf.FloorToInt((size.y + Tiles.GetItemSpacingY()) / (Tiles.GetDefaultItemHeight() + Tiles.GetItemSpacingY())));
43.             PerPage = PerRow * PerColumn;
44.  
45.             ReorderItems();
46.         }
47.  
48.         public void ReorderItems()
49.         {
50.             var items = Tiles.DataSource;
51.             items.BeginUpdate();
52.             items.Clear();
53.  
54.             var total = Mathf.CeilToInt((float)OriginalItems.Count / (float)PerPage) * PerPage;
55.             for (int i = 0; i < total; i++)
56.             {
57.                 var k = ((i / PerPage) * PerPage) + ((i % PerColumn) * PerRow) + ((i % PerPage) / PerColumn);
58.                 items.Add((k < OriginalItems.Count) ? OriginalItems[k] : null);
59.             }
60.  
61.             items.EndUpdate();
62.         }
63.  
64.         void OnDestroy()
65.         {
66.             OriginalItems.OnCollectionChange -= ReorderItems;
67.  
68.             if ((Tiles!=null) && (Tiles.ScrollRect!=null))
69.             {
70.                 var listener = Tiles.ScrollRect.GetComponent<ResizeListener>();
71.                 listener.OnResize.RemoveListener(SizeChanged);
72.             }
73.         }
74.     }
75. }

 

Im using a combo box but it seems I can only make a selection once and then its stuck on that forever. How can I amake it so that if my user changes their mind they can tap the combo box again to choose different content? This behaviour also seems to occur in the KeyValueComboBox demo scene.
Thanks

 

What Unity version you use? It's happens randomly with 4.6.6 version (it's can be with some other versions too) - gameobject is active but not rendered.

Or maybe SelectedItem gameobject is overlap Toggle button
Correct - SelectedItem not overlap Toggle button

Wrong - SelectedItem overlap Toggle button and when item selected once button cannot be clicked because it will be under SelectedItem gameobject

 

It doesn't look like that's my issue. My setup looks fine. ?!? In the end it seemed that List combo boxes seemed to be more reliable than key view ones but as soon as I put one inside a table it stopped working I've actually given up on this now after spending about a day trying to get it to work. I'm just rolling my own little system instead. Cheers

BTW Im using Unity 5.4.0f3

 

I have another question regarding Tables. I thought I figured this out once before but I'm trying to resize a table in a new project in code and having nothing but pain. My code reads:

Code (CSharp):

1.  
2. i.DataSource.Add(new UIWidgetsSamples.TableRow_ProductAllergens(){Cell01="new cell"});
3.        

But I get an 'invalid arguments' error. Again, I just want a bunch of strings the only difference being this time is that this is a 'ListViewItem' that i will eventually need to populate from code.

UPDATE...

I somewhow figured this should be

Code (CSharp):

1. i.DataSource.Add(new UIWidgetsSamples.TableRow(){Cell01="new cell",Cell02="",Cell03=null});

It compiles but at runtime I get an error in the UI widgets code:

NullReferenceException: Object reference not set to an instance of an object
UIWidgets.Extensions.Convert[TableRow,Int32] (System.Collections.Generic.List`1 input, System.Converter`2 converter) (at Assets/UIWidgets/Standart Assets/Utilites/Extensions.cs:105)


?

 

I write video demonstrating how to create table with comboboxes and use it
https://ilih.ru/unity-assets/video/UIWidgets-SampleTable.mp4

You should specify class used in your table definition
For example, this is table definition:

Code (CSharp):

1. public class SampleTable : ListViewCustom<SampleComponent,SampleItem>

So this table use SampleItem as data class and SampleComponent to display data.
And code should be this:

Code (CSharp):

1.  
2. i.DataSource.Add(new SampleItem(){FieldName="field value"});

Please show full stacktrace.

 

Is this all you need?

NullReferenceException: Object reference not set to an instance of an object
UIWidgets.Extensions.Convert[TableRow_ProductAllergens_Main,Int32] (System.Collections.Generic.List`1 input, System.Converter`2 converter) (at Assets/UIWidgets/Standart Assets/Utilites/Extensions.cs:105)
UIWidgets.ListViewCustom`2[TComponent,TItem].SetNewItems (UIWidgets.ObservableList`1 newItems) (at Assets/UIWidgets/Standart Assets/ListView/ListViewCustom.cs:1331)
UIWidgets.ListViewCustom`2[TComponent,TItem].UpdateItems () (at Assets/UIWidgets/Standart Assets/ListView/ListViewCustom.cs:781)
UIWidgets.ObservableList`1[UIWidgetsSamples.TableRow_ProductAllergens_Main].CollectionChanged (Boolean reSort) (at Assets/UIWidgets/Standart Assets/Utilites/ObservableList.cs:178)
UIWidgets.ObservableList`1[UIWidgetsSamples.TableRow_ProductAllergens_Main].CollectionChanged () (at Assets/UIWidgets/Standart Assets/Utilites/ObservableList.cs:156)
UIWidgets.ObservableList`1[UIWidgetsSamples.TableRow_ProductAllergens_Main].Add (UIWidgetsSamples.TableRow_ProductAllergens_Main item) (at Assets/UIWidgets/Standart Assets/Utilites/ObservableList.cs:325)
AllergyBasketManager.PopulateProductsAllergensTable () (at Assets/ALLERGY BASKET/Scripts/AllergyBasketManager.cs:53)
AllergyBasketManager.Awake () (at Assets/ALLERGY BASKET/Scripts/AllergyBasketManager.cs:63)

 

Yes, thanks.

Fix: add PopulateProductsAllergensTable.Start() call inside AllergyBasketManager.Awake() before adding items
Or update to 1.8.5b10, it is already fixed in this version.

 

@ilih,
How can i use AutoComplete for following case?

- User starts typing , autocomplete wait for user to atleast type x number of characters (lets say 3) and then dispatch an event which end user get and send a request to server, get response, parse and assign it to autocomplete.

- AutoComplete only dispatch this event when user types minimum x number of characters and dont type for x seconds. Please check Delay property in JQuery's AutoComplete

https://api.jqueryui.com/autocomplete/

Thanks

 

You need to override ApplyFilter() and use coroutine to send request to server.

Here is sample code:

Code (CSharp):

1. using UnityEngine;
2. using System.Collections;
3.  
4. namespace UIWidgets {
5.     /// <summary>
6.     /// Autocomplete for ListViewIcons.
7.     /// </summary>
8.     [RequireComponent(typeof(ListViewIcons))]
9.     public class AutocompleteRemote : AutocompleteCustom<ListViewIconsItemDescription,ListViewIconsItemComponent,ListViewIcons> {
10.         /// <summary>
11.         /// The minimum number of characters a user must type before a search is performed.
12.         /// </summary>
13.         [SerializeField]
14.         public int MinLength = 3;
15.  
16.         /// <summary>
17.         /// The delay in seconds between when a keystroke occurs and when a search is performed.
18.         /// </summary>
19.         [SerializeField]
20.         public float Delay = 0.5f;
21.  
22.         protected IEnumerator Coroutine = null;
23.  
24.         protected override void ApplyFilter(string input)
25.         {
26.             SetInput();
27.  
28.             if (Input==PrevInput)
29.             {
30.                 return ;
31.             }
32.             PrevInput = Input;
33.  
34.             if (Input.Length < MinLength)
35.             {
36.                 DisplayListView.DataSource.Clear();
37.                 HideOptions();
38.                 return ;
39.             }
40.  
41.             DisplayListView.Start();
42.             DisplayListView.Multiple = false;
43.  
44.             if (Coroutine!=null)
45.             {
46.                 StopCoroutine(Coroutine);
47.             }
48.             Coroutine = LoadData(input);
49.             StartCoroutine(Coroutine);
50.         }
51.  
52.         IEnumerator LoadData(string search)
53.         {
54.             yield return new WaitForSeconds(Delay);
55.  
56.             WWW www = new WWW("http://example.com/?search=" + WWW.EscapeURL(search));
57.             yield return www;
58.  
59.             DisplayListView.DataSource = Text2List(www.text);
60.  
61.             if (DisplayListView.DataSource.Count > 0)
62.             {
63.                 ShowOptions();
64.                 DisplayListView.SelectedIndex = 0;
65.             }
66.             else
67.             {
68.                 HideOptions();
69.             }
70.         }
71.  
72.         ObservableList<ListViewIconsItemDescription> Text2List(string text)
73.         {
74.             var result = new ObservableList<ListViewIconsItemDescription>();
75.  
76.             //convert text to items and add items to list
77.  
78.             return result;
79.         }
80.  
81.         protected override string GetStringValue(ListViewIconsItemDescription value)
82.         {
83.             return value.LocalizedName ?? value.Name;
84.         }
85.  
86.         public override bool Startswith(ListViewIconsItemDescription value)
87.         {
88.             if (CaseSensitive)
89.             {
90.                 return value.Name.StartsWith(Input) || (value.LocalizedName!=null && value.LocalizedName.StartsWith(Input));
91.             }
92.             return value.Name.ToLower().StartsWith(Input.ToLower()) || (value.LocalizedName!=null && value.LocalizedName.ToLower().StartsWith(Input.ToLower()));
93.         }
94.  
95.         public override bool Contains(ListViewIconsItemDescription value)
96.         {
97.             if (CaseSensitive)
98.             {
99.                 return value.Name.Contains(Input) || (value.LocalizedName!=null && value.LocalizedName.Contains(Input));
100.             }
101.             return value.Name.ToLower().Contains(Input.ToLower()) || (value.LocalizedName!=null && value.LocalizedName.ToLower().Contains(Input.ToLower()));
102.         }
103.  
104.     }
105. }

 

Current Example uses Unity's InputField while i require a TMPro's InputField based AutoComplete. Can you please update your package

 

Added, please update to New UI Widgets 1.8.5b11 and TextMeshPro support 1.8.5b1

 

Getting following error
Assets/UIWidgets-TMProSupport/Standart Assets/Autocomplete/AutocompleteCustomTMPro.cs(24,40): error CS0122: `UIWidgets.AutocompleteCustom<TValue,TListViewComponent,TListView>.inputFieldProxy' is inaccessible due to its protection level

 

AutocompleteCustom.cs, replace line 58
old line:

Code (CSharp):

1. IInputFieldProxy inputFieldProxy;

new line:

Code (CSharp):

1. protected IInputFieldProxy inputFieldProxy;

 

@ilih,
Ok i give it a Pro go in our game and found few issues.
1- AutoComplete acts more for keyboard than touch, for example when there is only 1 item and that item is already selected. ME as a Tablet user dont have up or down buttons so all i want to do is touch that item which should trigger select event, problem is in case of 1 item which is already selected i cant do that.
2- Secondly if you can add enforce selection to data source items, so if i type John and John Gate appears in list, i select it, then i also get a selectedItem property, and when i remove even 1 letter it means the item is no more JohnGate and so selectedItem becomes null, this way i can ask user to select only 1 item, and that item must be from datasource.
Thanks

 

One more requirement is that when i set selectedItem from code, it sets object and also set input with label.

This way when user select item, goes toa new scene, come back and we can show that item in selected state.

 

@ilih, any help?

 

Fix:
Autocomplete.cs, replace line 373

Code (CSharp):

1. DisplayListView.SelectedIndex = -1;

You need to create helper script, like this:

Code (CSharp):

1. using UIWidgets;
2. using UnityEngine;
3. using UnityEngine.UI;
4.  
5. namespace UIWidgetsSamples
6. {
7.     public class AutocompleteIconsHelper : MonoBehaviour
8.     {
9.         [SerializeField]
10.         public AutocompleteIcons Autocomplete;
11.  
12.         [SerializeField]
13.         public InputField Input;
14.  
15.         [SerializeField]
16.         ListViewIconsItemDescription item;
17.  
18.         public ListViewIconsItemDescription Item {
19.             get {
20.                 return item;
21.             }
22.             set {
23.                 Input.text = item.Name;
24.                 item = value;
25.             }
26.         }
27.  
28.         void Start()
29.         {
30.             Input.onEndEdit.AddListener(ResetItem);
31.             Autocomplete.OnOptionSelected.AddListener(SetItem);
32.         }
33.  
34.         void OnDestroy()
35.         {
36.             Input.onEndEdit.RemoveListener(ResetItem);
37.             Autocomplete.OnOptionSelected.RemoveListener(SetItem);
38.         }
39.  
40.         void ResetItem(string str)
41.         {
42.             item = null;
43.         }
44.  
45.         void SetItem()
46.         {
47.             item = Autocomplete.TargetListView.DataSource[0];
48.             Autocomplete.TargetListView.DataSource.Clear();
49.         }
50.     }
51. }

So you can use AutocompleteIconsHelper.Item to get selected item (will be null if text changed) and set item.

 

That worked great! Thank you!

 

Sorry for the delay, i tried this but im getting TargetListView null. on set Item

 

If you try this script with demo Autocomplete remove events from OnOptionSelected in inspector mode, they clear text input and this is reason why item is null.

 

@ilih, item is not null, but TargetListView is null.

 

Duplicate DisplayListView, disable copy and set it as TargetListView to AutocompleteIcons and AutocompleteIconsHelper components.