I'm using the BTProgressHUD Xamarin component in an app that is built using MvvmCross. I'm currently working on the iOS version of the app. My ViewModels make several web service calls and expose an 'IsBusy' property, which the associated views are binding to, in order to show or hide the progress spinner. This is pretty much the way things are set up in the N=34 MvvmCross sample (https://github.com/MvvmCross/NPlus1DaysOfMvvmCross/tree/master/N-34-Progress) as well.
The problem is that in some cases a ViewModel must automatically call a service as soon as it is created. I tried to make the call in the Start() function of the ViewModel, but I noticed that the BTProgressHUD spinner does not show up on top of the view. I suspect that the problem is that BTProgressHUD must be displayed only after a view has been made visible, and probably this is not the case when ViewModel.Start() runs.
Has anyone encountered this before? Is there a simple way to run code in the ViewModel after the view has been made visible?
Thanks.
Is there a simple way to run code in the ViewModel after the view has been made visible?
The N=42 video - http://slodge.blogspot.co.uk/2013/11/n42-is-my-viewmodel-visible-can-i-kill.html - introduces an IVisible interface that you can add to your ViewModel - it's your job to call this from your View - but this is easy to do on each platform. For example,, on iOS it is done using ViewDidAppear/ViewDidDisappear in https://github.com/MvvmCross/NPlus1DaysOfMvvmCross/blob/master/N-42-Lifecycles/Lifecycle.Touch/Views/FirstView.cs
protected IVisible VisibleViewModel
{
get { return base.ViewModel as IVisible; }
}
public override void ViewDidAppear(bool animated)
{
base.ViewDidAppear(animated);
VisibleViewModel.IsVisible(true);
}
public override void ViewDidDisappear(bool animated)
{
base.ViewDidDisappear(animated);
VisibleViewModel.IsVisible(false);
}
Related
We're trying to implement a Native UI Component that wraps an Android components that fetches data and displays it using our existing rendering framework (using an AdapterView). We don't know what the data will be in advance, so the height and contents of this component are completely arbitrary. This mostly works fine, except for the case where the rendered components request something else asynchronously (e.g. images). In that case, the image is retrieved, the ImageView is "displayed", but the UI ends up showing nothing (literally seems to be a transparent view of the appropriate size).
We know that these views work just fine in normal Android, but we seem to be missing something that tells RN/Yoga that it should re-render when images are loaded from the server so that they are properly displayed.
Here's more or less what this looks like:
public class ReactServerListComponent extends SimpleViewManager<LinearLayoutExtension> {
private static final String REACT_CLASS = "TAReactServerListComponent";
#Override
public String getName() {
return REACT_CLASS;
}
...
#ReactProp(name = "link")
public void setLink(final LinearLayoutExtension view, String theNewLink){
//async loader logic invokes this on success
view.loadRetrievedEntries(newEntries);
}
...
}
In this case LinearLayoutExtension contains all the views produced by the Adapter, which in turn will contain the asynchronously loading image views.
We've tried a few things, like returning a ShadowNode with a measure function, or keeping a reference of the ShadowNode and calling dirty(), etc on it.
What is the correct way to do this? Unfortunately, we have not found documentation or examples that deal with really complex components outside of "check the repo"...
You could try view.invalidate() on the group.
You could also remove the placeholder imageview and add a newer view with the correct image.
However if it is only refreshing the image view, you could also use something like volley, Picasso, Glide etc... to take care of the imageview itself.
I want to prevent the user that he will loose his changes in an EditView when changing the view to another.
I use MVP4G in my project and the project is divided as mvp's structure (one package for the template another one for views ..) is there any solution to detect the EditView in the eventBus. or detect the current View shown to user
Thanks in advance
Thanks to the Navigation Event feature in mvp4g, the presenter will get control before the view changes. At this point the presenter can decide if the navigation will be done or not. This is the correct place in a mvp4g application to save your data.
First zu have to mark all events in the eventbus that will change your view with:
#Event(..., navigationEvent = true)
void goToPage1();
Next your presenters have to implement the NavigationConfirmationInterface and the requires confirm-method:
public class Presenter extends ... implements NavigationConfirmationInterface {
public void confirm(NavigationEventCommand event) {
//pseudo method to verify if the view has changed
if (isViewModified(){
//Window shouldn't be used inside a presenter
//this is just to give a simple example
if (Window.confirm("Are you sure you want to leave?")){
event.fireEvent();
}
} else {
event.fireEvent();
}
}
}
And the last thing to do, is to set the presenter of the current view to the confirmation presenter by calling:
event.fireEvent(false);
This is usually done when the presenter gets control.
You will find the documentation here:
https://github.com/FrankHossfeld/mvp4g/wiki/03.-Defining-EventBus#navigation-event
Thanks to MVP4G's team including El Hoss who gives me a hint to check the MVP4G's blog.. I've solved my problem by following this example
http://mvp4g.blogspot.com/2011/06/navigation-control.html
We're using MVVMCross within our application and I've come up against something that I'm not sure I've solved in the best way possible.
One of our ViewModels contains 3 other view models - a dashboard and 2 lists. In iOS this is presented using a MvxTabBarViewController which works great. Android and WP present this view in a similar manner. An example of the object model is below:
public class ProjectViewModel : MvxViewModel
{
public DashboardViewModel Dashboard {get;set;}
public FirstListViewModel FirstList {get;set;}
public SecondListViewModel SecondList {get;set;}
}
We're now in the situation where if a certain action happens within the DashboardViewModel we would like to instruct the navigation to change the tab in iOS and the same thing to happen on the other platforms.
The only way I've been able to get the tab to change on iOS is to use this.SelectedIndex = 1; from within the iOS ProjectView.
At the moment also the only way I've managed to trigger this change is to fire an event from the DashboardViewModel and then the ProjectViewModel subscribes to this and fires another event which is subscribed to by the ProjectView to instruct it to change the tab in whatever device specific way it needs to. I can't help but think there is a better way to do this.
I've tried taking a look at a custom ViewPresenter for iOS and calling ShowViewModel FirstListViewModel from within the DashboardViewModel but the presenter doesn't appear to be getting used so we just transition normally. My idea was I could get in the middle, cancel the navigation request and then flip the active tab on the ProjectView.
Any suggestions would be appreciated on how we could do this in a better cross platform way using MVVMCross to handle the change if at all possible.
You should be able to do this in any of several ways:
using a custom presenter with overridden Show as you suggest
using a custom presenter with overridden ChangePresentation - and using a custom hint
using a custom binding or a binding to a property within the ProjectView to drive the transition
using a custom IMvxInteraction property
using a custom event from VM to View
using a messenger to send a message from the ViewModels to the Views.
Ultimately lots of these could work and which of these I might choose would depend on which one worked and which one the team are happy with - shipping the working app is always the ultimate goal.
Given where I am with MvvmCross experience, I'd probably opt today for trying the approach of trying a custom IMvxInteraction property. But this might not be for everyone... it certainly might be overkill for this sample...
However, to do this, I would try:
add a public enum Display { Dash, First, Second } to the Core project
add a ProjectViewModel property:
private MvxInteraction<Display> _display = new MvxInteraction< Display >();
public IMvxInteraction<Display> DisplayChange { get { return _display; } }
whenever this ViewModel wants to fire the change it can fire it using e.g. _display.Raise(Display.First)
the ProjectView could then bind Display to its own property which might be implemented like:
private IDisposable _subscription;
private IMvxInteraction<Display> _displayInteraction;
public IMvxInteraction<Display> ChangeDisplay
{
get { return _displayInteraction; }
set
{
if (_subscription != null)
{
_subscription.Dispose();
_subscription = null;
}
_displayInteraction = value;
if (_displayInteraction != null)
{
_subscription = _displayInteraction.WeakSubscribe(DoDisplayChange);
}
}
}
private void DoDisplayChange(Display which)
{
// change the tab display here
}
the binding would be added in ViewDidLoad like:
set.Bind(this).For(v => v.ChangeDisplay).To(vm => vm.DisplayChange);
I am trying to develope a component for my company wich should have an integrated dialog. Creating the component was easy until i hit the point with the Dialog. I want to use the com.ibm.xsp.extlib.component.dialog.UIDialog for my component because it has some nice features wich i want to use so creating my own dialog with a ClientSideDojo is not an option.
Normaly when adding a component to another i use component.getChildren().add(MyNewComp),but when i try this Code:
public class myComponentWithADialog extends UIComponentBase implements FacesComponent {
//...other Code...
public void buildContents(FacesContext context, FacesComponentBuilder builder)
throws FacesException {
UIDialog dialog = new UIDialog();
TypedUtil.getChildren(container).add(dialog);
dialog.setStyleClass("dlgUserPref");
dialog.setTitle("titelxyz");
dialog.setId("TagDialog");
UIPanelEx panel = new UIPanelEx();
panel.setTagName("div");
panel.setStyle("border:2px solid red;");
panel.setStyleClass("lotusList lotusTags lotusRelatedTags");
dialog.getChildren().add(panel);
this.getChildren.add(dialog);
}
//....
}
My Panel does not display inside the dialog when calling XSP.openDialog('dialogClientId') in my browser the dialog is shown but empty.
I already tried several other methods like dialog.getPopupContent.getChildren().add() but then i get the error: javax.faces.component.UIPanel incompatible with com.ibm.xsp.extlib.component.dialog.UIDialog$PopupContent.
Also i tried to find a solution on google but i only found a entry at openNTF from someone with the same problem but also without any solution.
Note: I also tried to 'inject' some content to a standard <xe:dialog> and to a <px:panel> inside the <xe:dialog> via a button with SSJS like keithstric does in his blog. Code:
var dialog:com.ibm.xsp.extlib.component.dialog.UIDialog =
getComponent('extlibdialog');
if(dialog.getChildren().size() > 0) {
dialog.getChildren().clear();
}
var TextField:com.ibm.xsp.component.xp.XspOutputText = new com.ibm.xsp.component.xp.XspOutputText();
TextField.setTitle("test");
TextField.setId("testTextField");
TextField.setValue("<p>This is the new Content</p>");
dialog.getChildren().add(TextField);
This code works fine for a standard <xp:panel> outside a dialog but not on the dialog itself or a panel inside it.
The dialogue is not pre - rendered when the page is loaded, but when you actually call for it in XSP.openDialog(...)
So you need to get your code run in that event (mobile now, can't check if it is exposed).
Plan B: do use a Dojo dialogue that is backed by a rest control, so you can transport whatever data you need back and forth.
A word of caution: popup dialogs are a UI concept transplanted from desktop apps. They are alien to Web apps and mostly not working in mobile. Consider and Inline form instead (or a wizard)
I need to implement a login/logout using MVVMCross, iOS only to start. After the user logs in, I want to close the view and make the "real" first view the root controller. For logout, I want to do the same in reverse. Whenever the LoginViewModel is requested, clear the root and replace it.
This Remove ViewController from stack indicates there is a ClearTop parameter, but it looks like it is gone in v3?
I then found this What is the best way to handle GoBack for the different MvvmCross (v3) platforms and I implemented this Presenter:
public override void Close(IMvxViewModel toClose)
{
if (toClose is LoginViewModel)
{
ClearBackStack();
Show(new MvxViewModelRequest() { ViewModelType = typeof(FirstViewModel)});
return;
}
base.Close(toClose);
}
public override void Show(MvxViewModelRequest request)
{
if (request.ViewModelType == typeof (LoginViewModel))
{
ClearBackStack();
}
base.Show(request);
}
Is this the correct way to handle this? Is there an easier mechanism (pre-v3 like)? Should I be overriding ChangePresentation instead?
Also, is there a mechanism to call ShowViewModel from a View? Do I need to resolve the IMvxViewDispatcher or is there a more straight forward method?
Yes, if you want to do custom presentation techniques then the easiest way is to implement your own view presenter.
For an introduction and some links on this, see How can I implement SplitView in another view in MvvmCross?
You are free to write code directly in your views, including navigation logic using resolved IoC objects. However, mvvmCross tries to encourage you to put this logic in the viewmodels - especially so that the 'logic' is more easily shared between platforms.