MvvmCross and UICollectionView how to bind SelectedItem from VM to View - ios

I'm using MvvmCross with UICollectionView.
Bindings work perfectly, I have all my data properly displayed, and even if I select an item in CollectionView it gets properly set in my ViewModel.
For SelectedItem I use the following binding:
set.Bind(_collectionViewSource).For(x => x.SelectedItem).To(vm => vm.SelectedMachine);
The only problem I have is that I want a first CollectionViewItem to be selected initially.
As the sources of MvvmCross say that's not supported currently (in the setter for SelectedItem):
// note that we only expect this to be called from the control/Table
// we don't have any multi-select or any scroll into view functionality here
So, what's the best way to perform initial pre-selection of an item? What's the place I can call _collectionView.SelectItem from?
I tried calling it when collection changes, but that doesn't seem to work.

If you need this functionality, you should be able to inherit from MvxCollectionViewSource and to add a property something like
public event EventHandler SelectedItemExChanged;
public object SelectedItemEx
{
get { return base.SelectedItem; }
set
{
base.SelectedItem = value;
var index = FindIndexPath(value); // find the NSIndexPath of value in the collection
if (index != null)
_collectionView.SelectItem(index, true, UICollectionViewScrollPosition.CenteredHorizontally);
var handler = SelectedItemExChanged;
if (handler != null)
handler(this, EventArgs.Empty);
}
}
That can then be bound instead of SelectedItem
What's the place I can call _collectionView.SelectItem from? I tried calling it when collection changes, but that doesn't seem to work.
If that doesn't work, then I'm not sure - you are probably heading into animation timing problems - see questions like uicollectionview select an item immediately after reloaddata? - maybe try editing your question to post a bit more of your code - something that people can more easily hope with debugging.

Related

Vaadin Dataprovider: how to avoid "auto-fetch"?

Use Case 1 is answered below, Use Case 2 has been moved to a separate question (Vaadin Flow: Returning to a view, the view should not reload data from the backend)
I'd like to use a Vaadin Flow (v14 LTS/v19) grid component backed by a lazy DataProvider which does not automatically fetch data from the backend when the grid is shown.
There are at least two use cases:
showing grid data does not make sense unless the user provided filter parameters
returning to a #PreserveOnRefresh tagged view should not replace the shown data with current data. (further elaborated in update)
Being pretty new to Vaadin 14+, I could not figure out how to achieve this. Every time my GridView is displayed, the count and fetch callbacks of DataProvider are queried. The call originates from the DataCommunicator of the grid.
So for Use Case 1: How to stop the DataProvider from fetching data as long as it does not make sense?
And for Use Case 2: How to prevent overwriting the grid state when adding a grid to the UI for the second time?
Thanks a lot!
StackTrace to my fetch callback (Vaadin Flow 14):
at org.vaadin.example.GridView.fetch(GridView.java:46)
at org.vaadin.example.GridView.lambda$new$c4b2c115$1(GridView.java:23)
at com.vaadin.flow.data.provider.CallbackDataProvider.fetchFromBackEnd(CallbackDataProvider.java:137)
at com.vaadin.flow.data.provider.AbstractBackEndDataProvider.fetch(AbstractBackEndDataProvider.java:61)
at com.vaadin.flow.data.provider.DataCommunicator.fetchFromProvider(DataCommunicator.java:362)
at com.vaadin.flow.data.provider.DataCommunicator.activate(DataCommunicator.java:647)
at com.vaadin.flow.data.provider.DataCommunicator.collectKeysToFlush(DataCommunicator.java:589)
at com.vaadin.flow.data.provider.DataCommunicator.flush(DataCommunicator.java:461)
at com.vaadin.flow.data.provider.DataCommunicator.lambda$requestFlush$2f364bb9$1(DataCommunicator.java:425)
at com.vaadin.flow.internal.StateTree.lambda$runExecutionsBeforeClientResponse$2(StateTree.java:390)
at [java.util.stream] omitted
at com.vaadin.flow.internal.StateTree.runExecutionsBeforeClientResponse(StateTree.java:387)
at com.vaadin.flow.server.communication.UidlWriter.encodeChanges(UidlWriter.java:411)
at com.vaadin.flow.server.communication.UidlWriter.createUidl(UidlWriter.java:187)
at com.vaadin.flow.server.communication.UidlRequestHandler.writeUidl(UidlRequestHandler.java:122)
at com.vaadin.flow.server.communication.UidlRequestHandler.synchronizedHandleRequest(UidlRequestHandler.java:91)
at com.vaadin.flow.server.SynchronizedRequestHandler.handleRequest(SynchronizedRequestHandler.java:40)
at com.vaadin.flow.server.VaadinService.handleRequest(VaadinService.java:1547)
at com.vaadin.flow.server.VaadinServlet.service(VaadinServlet.java:247)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:790)
update 20210430
Here's the code of my GridView which also fakes the backend DataProvider:
#Route(value = "grid", layout = MainView.class)
public class GridView extends VerticalLayout {
public GridView() {
final Grid<Person> g = new Grid(Person.class);
g.setColumns("name");
g.setDataProvider(DataProvider.fromCallbacks(q -> fetch(q), q -> count(q)));
add(g);
// filter omitted
final Button refresh = new Button("refresh");
refresh.addClickListener(e -> {
System.out.println("refresh clicked");
g.getDataProvider().refreshAll();
});
add(refresh);
add(new TextField("State check"));
}
// fake DataProvider
private int count(Query<Person, Void> q) { return 3; }
private Stream<Person> fetch(Query<Person, Void> q) {
q.getLimit(); //vaadin checks these have been called
q.getOffset(); //vaadin checks these have been called
System.out.println("fetching again");
new Exception().printStackTrace(); //figure out who called
return Arrays.asList(new Person("1"), new Person("2"), new Person("3")).stream();
}
}
My MainView is used to switch between GridView and EmptyView
#PreserveOnRefresh
public class MainView extends AppLayout {
private Component emptyBView;
private Component gridBView;
public MainView() {
final Button emptyB = new Button("Btn empty");
emptyB.addClickListener(e -> {
if (emptyBView == null) { emptyBView = new EmptyView();}
setContent(emptyBView);
});
addToNavbar(emptyB);
final Button gridB = new Button("Btn grid");
gridB.addClickListener(e -> {
if (gridBView == null) gridBView = new GridView();
setContent(gridBView);
});
addToNavbar(gridB);
}
}
MainView is an AppLayout used to switch the contents of the AppLayout from GridView to EmptyView and back.
Use Case 2 is: When returning to GridView, the GridView should be exactly same state as before (which works fine with the TextField).
open GridView -> grid should not be filled with data
enter filter params (not shown in code)
click "refresh" to populate the grid
enter "Spiderman" in TextField "stateCheck"
switch to EmptyView
in the real app: do something in EmptyView and potentially other views
return to GridView -> the grid should not reload the data, it should just stay as it was - just like the TextField still displays "Spiderman", the grid should display the same data as before without reloading it.
For Case 1: In the callback check if you have filter parameters, return an empty set if not. Using the new V17+ API it would look like this:
grid.setItems(query -> {
if(filterParameters.isEmpty()) {
// Return an empty stream
} else {
// Fetch from backend
}
});
You can read more in the docs here: https://vaadin.com/docs/latest/flow/binding-data/data-provider (V19) or https://vaadin.com/docs/v14/flow/binding-data/tutorial-flow-data-provider (V14)
I would need more info on what you're currently doing to help out with Case 2. How are you constructing the view, what does your code look like? A full stack trace with the "Caused by" would also help.
I would recommend only setting the DataProvider to the Grid once the first filter parameter is set. The client-side Grid expects to receive the number of items it requires from the fetch query; it might work in some corner case if you don't provide the requested numbers of items from fetch, but it's not designed to behave like that.
Note that this applies specifically to using DataProviders with filters in Vaadin 14 series - Vaadin 17 introduced a new optional simplified way of fetching items, which changes this equation a bit. It's not backported to Vaadin 14 yet (currently planned for 14.7).

Why am I getting a System.InvalidCastException when using a ViewCellRenderer in iOS Xamarin Project

I'm using a ViewModel first approach to Xamarin.Forms and have begun the process of writing my own Bindable TableView (I imagine plenty of people have). The project is going well and I'm already rendering cells in the UI based on my on CellViewModel types and wanted to move to the next phase of adding the 'effects' of things like 'Disclosure' and 'Checkbox' accessories to cells. It transpires that these things only really make sense in iOS projects so I found myself looking into ViewCellRenderers specifically in iOS.
In order to apply the appropriate accessory on the cell, I needed to create a class to do so:
public class AccessoryItemCellRenderer : ViewCellRenderer
which itself is relatively simple. It takes the BindingContext of the Xamarin Cell and then applies the accessory as appropriate:
var viewModel = item.BindingContext as TableCellViewModel;
if (viewModel != null )
{
UITableViewCell cell = base.GetCell(item, reusableCell, tv);
if (viewModel.Accessories == CellIndicators.Disclosure)
cell.Accessory = UIKit.UITableViewCellAccessory.DisclosureIndicator;
else if (viewModel.Accessories == CellIndicators.DisclosureDetail)
cell.Accessory = UIKit.UITableViewCellAccessory.DetailDisclosureButton;
else if (viewModel.Accessories == CellIndicators.Detail)
cell.Accessory = UIKit.UITableViewCellAccessory.DetailButton;
else if (viewModel.Accessories == CellIndicators.CheckMark)
cell.Accessory = UIKit.UITableViewCellAccessory.Checkmark;
}
At least I thought it was straightforward, as when the base.GetCell call gets made, it turns out my reusableCell property is null and this I am assuming is causing a System.InvalidCastException which then blow up. It's not very obvious to me what is causing it, the only real stack trace I get is this:
at Xamarin.Forms.Platform.iOS.ViewCellRenderer.GetCell (Xamarin.Forms.Cell item, UIKit.UITableViewCell reusableCell, UIKit.UITableView tv) [0x00000] in C:\BuildAgent2\work\aad494dc9bc9783\Xamarin.Forms.Platform.iOS\Cells\ViewCellRenderer.cs:28
Is it because somehow my cell doesn't have a reusable id? How do I provide one if this is the case? Any help would be greatly appreciated.
In the comments you mention that you're registering this AccessoryItemCellRenderer for TextCell. In the AccessoryItemCellRenderer you are inheriting from ViewCellRenderer which is for ViewCell. TextCell does not inherit from ViewCell and cannot be cast as a ViewCell and that's most likely where the exception is coming from.

Dynamic updating of label/button title in Swift

I want to update the title property of a user interface element on iOS using Swift. In this case it is a UIBarButton, but it could be a UILabel, UIButton or whatever. Currently I am using this code, which works:
func setStatusMessage(barButton: UIBarButtonItem) {
let currentVersion = StatusModel.getCurrentVersion()
var statusUpdates = [StatusModel]()
var statusForCurrentVersion: StatusModel!
var statusMessage = String()
// check if update required before setting the text
checkIfLocalStatusNeedsUpdate()
barButton.title = getLocalStatusMessage()
// Try to update status anyway...
getStatusFromRemoteSource { (statusUpdates) -> Void in
for status in statusUpdates {
if status.version == currentVersion {
statusForCurrentVersion = status
}
}
self.saveStatusFromRemoteSource(statusForCurrentVersion)
barButton.title = statusForCurrentVersion.message
}
}
Although effective, this solution is ugly too as it does require a user interface (view) element to be embedded in my model. Not exactly a sort of MVC beauty.....
I cannot simply use return because the local status will be returned before the remote status can be fetched. So I guess I need some kind of handler / listener / delegate (/*getting lost here*/) to update the view dynamically. In this case that means: set the title using the locally stored value and update it if a remote value is received.
What is the best way to approach this scenario in a MVC compliant way, removing UI elements from the model code (thereby increasing reusability)?
One intermediate step you could do is going over the controller to the UI, by replacing the barButton parameter with a reference to the controller
barButton.title = statusForCurrentVersion.message
->
self.controller.update(title: statusForCurrentVersion.message)
This way your code is allowed to grow (updating more labels etc), but it comes with a cost of more code and harder readability.

Monotouch.Dialog - How to push a view from an Element

It seems like this should be very easy, but I'm missing something. I have a custom Element:
public class PostSummaryElement:StyledMultilineElement,IElementSizing
When the element's accessory is clicked on, I want to push a view onto the stack. I.e. something like this:
this.AccessoryTapped += () => {
Console.WriteLine ("Tapped");
if (MyParent != null) {
MyParent.PresentViewController(new MyDemoController("Details"),false,null);
}
};
Where MyDemoController's gui is created with monotouch.dialog.
I'm just trying to break up the gui into Views and Controlls, where a control can push a view onto the stack, wiat for something to happen, and then the user navigates back to the previous view wich contains the control.
Any thought?
Thanks.
I'd recommend you not to hardcode behavior in AccessoryTapped method, because the day when you'll want to use that component in another place of your project is very close. And probably in nearest future you'll need some another behavior or for example it will be another project without MyDemoController at all.
So I propose you to create the following property:
public Action accessoryTapped;
in your element and its view, and then modify your AccessoryTapped is that way:
this.AccessoryTapped += () => {
Console.WriteLine ("Tapped");
if (accessoryTapped != null) {
accessoryTapped();
}
};
So you'll need to create PostSummaryElement objects in following way:
var myElement = new PostSummaryElement() {
accessoryTapped = someFunction,
}
...
void someFunction()
{
NavigationController.PushViewController (new MyDemoController("Details"), true);
}

UIAutomation: Check if element exists before tapping

We have a iPad app which includes a two-column news reader. The left view contains the list of news of which some link directly to a news and some push another view controller with another list of news. This will also cause a UIButton to be set as the leftBarButtonItem of the navigation bar. If we are on first level, a simple image that cannot be tapped will be the leftBarButtonItem.
My goal is now to have a test that taps every news on the first level. If a news leads to a second level list, it should tap the UIButton in the navigation bar.
How can I check, if the leftBarButtonItem is "tappable"? Since it can be either an image or a button, just calling navigationBar().leftButton().tap() will lead to an error if it's an image.
I'm also using the tuneup library if that's any help.
Almost all elements in UIAutomation could be tapped. It does not matter if it is an Image, View or a Button. You will get an error in case an object you are trying to tap is invalid.
How to check:
if ( navigationBar().leftButton().checkIsValid() )
{
navigationBar().leftButton().tap();
}
else
{
//do what you need.
}
or you can check if an object you are trying to tap is a button, for example (not the best way but it works):
if ( navigationBar().leftButton().toString() == "[object UIAButton]" )
{
navigationBar().leftButton().tap();
}
else
{
//do what you need.
}
checkIsValid() is available for all UI elements. It will return true if an object exists.
toString() will return [object UIAElementNil] if element is invalid or will return [object UIAButton] or [object UIAImage].
Also try to use Apple documentation:
http://developer.apple.com/library/ios/#documentation/ToolsLanguages/Reference/UIAElementClassReference/UIAElement/UIAElement.html
You can simply use
if (navigationBar().leftButton().exists)
{
navigationBar().leftButton().tap();
}
else
{
//do what you need.
}

Resources