My application is designed to load up an XML file and display an error(s) (if any).
The problem I have is how to display both (the XML and Errors) on screen without coupling (my application does currently work).
My application currently looks like (no laughing or comments about me going on a Photoshop\UI course please):
The brown colour is a different view called XmlView.
The red box is where I want errors to be displayed.
So, the user clicks File->Open, selects the file and the .XML content is displayed in my XmlView (brown) and my error messages are shown in red. This works but, I have a horrible feeling my design is poor as I have totally coupled my MainWindow and XmlView.
The way I have this working is, when the user selects a valid XML file (from File->Open), I create an instance of my XmlView and bind it to my Views property of my MainWindow class. My XmlView takes 1 parameter which is the MainWindow type.
So, within my XmlView, to update my ErrorList, I would write code similar to
_mainWindow.ErrorList.Add(//newError)
But this now means my XmlView knows about my MainWindow which I thought was undesired.
So, finally, my question! Is my design poor or is this OK?
You should consider using an MVVM framework if you are doing MVVM.
It would depend on whose responsibility it was to load the XML, but I would suggest the XmlViewModel, not the MainViewModel.
In that case the MainViewModel should just be a conductor of other view models. In your first case, it would instantiate the XmlViewModel, passing the file path and set it as its current view.
The XmlViewModel would be responsible for loading and validating the XML. It too could have a child view model which displays the validation errors. It should load the XML asynchronously, with some form of busy notification.
The MainViewModel is likely to want to conduct many view models, so if you were going to use a framework such as Caliburn.Micro, this would be a conductor type.
Related
I have followed the tutorials and now I am trying to extend that learning into a real app. In my app I use a JSON model. Unlike the tutorials, mine is a real-world app and I have to get user credentials to act as a filter when I load the data model. In the tutorials the model is loaded in component.js. In my app I have to prompt the user for id and password so I have a login fragment that appears modally over the first view in the app. This happens to be a master view, and critically it runs after component.js. After validating the user I collect JSON data from the server via Ajax and place it into the default model via this.setData(my_json).
When testing the routing from master to detail view I produced a stubborn bug in that this.getModel() called in the detail view produced an empty model. Huh - I just set the model in the master view and can see the data in the table control - what gives?
I considered a routing issue but confirmed that was not the problem - I can console log the parameters that pass through the router and anyway the detail view appears so routing is ok.
Recap: I use this.setModel() in the master page then this.getModel() in the detail page but the latter is an empty model.
Question: I want the model to be available across the app. The tutorials focus on setting model in component.js but I cannot. What is the correct syntax for setting the global model from the master view for example, or any other place that is not the component.js.
I think I need to use the following in the master (last line is significant):
var oModel = new JSONModel(); // declare a JSON model
oModel.setData(<json string>); // load a JSON string fetched from serve etc.
sap.ui.getCore().setModel(oModel); // important - set as the core model
I think the source of my confusion is that in the tutorials it seems that models are set in the component via
this.setModel(oModel); // a line in component.js
I therefore assume that this in component.js context is app-global whilst this in a view relates to the view along, which makes sense. Am I right?
In the tutorials this.setModel(...) inside the Component.js will set the model on the Component directly. Therefore, the model is visible in all views inside that Component.
When you see this.getView().setModel(...) inside a controller you know that the model is only set on that one view (and therefore it's also visible for it's children).
However, if you see something like this.setModel(...) inside a controller you should check what happens inside this.setModel(...). It is possible that the model is set on the view, or on the Component, or even somewhere else! Some of the tutorials make use of the so called "BaseController" concept. This is basically a parent controller of other controllers and therefore this approach allows to code some handy APIs that you can easily reuse in the child controllers that extend from this BaseController. For example, have a look at the BaseController of the Worklist App. There you can see that the setModel(...) API is setting the model on the view. That means whenever you call this.setModel(...) in your controllers which extend from that BaseController your model is set on the view!
Furthermore, because in a Master-Detail app there is no hierarchy between Master and Details page (parent/child relation) your models on the Master view are not visible on the Detail view.
In your case it seems to be best setting the model on the Component directly. You can do this by calling
this.getOwnerComponent().setModel(...);
inside any of your controllers. Or just do it directly on the Component.js like in the Wordlist tutorial. You can propagate the data to that model later, i.e. at anytime later from within your controllers.
I am loading controls dynamically from the web server from separate XAP files. After creating an instance I want to show them in tab Pages. The controls can be MMVM controls using CM but also non MVVM standard controls.
Before trying the tab I tested to simply show a control dynamically on the page by using:
<ContentControl Name="TestControl" />
Test control is a property of Type UserControl which is set via creating a new Instance of a dynamically loaded control. Now this gives me an error that it can't find the view. In case of non MVVM controls there is of course no view, so how do I load a non MVVM control?
I tried to make the test control a MVVM control, but still get the cannot load view error. Makes sense as such instance is not created. If I create an instance of the dynamically loaded view besides the view model, how do I "Add" this so that CM finds it?
Last but not least, how do I bind this to a tab control in Silverlight? The idea is to have a collection of user controls (plugins) which each is rendered in its separate tab page.
Thanks for any help.
(I got this done in no time NOT using MVVM, still not sure if MVVM is worth all the complexity)
There's no such thing as "mvvm control". MVVM is just a pattern not a control type. Basically, in Caliburn you don't need to work vith UserControls or Views directly, but if you pick the ViewModel first approach, Caliburn framework should be able to find the matching view for you. In your case since you're loading XAP files dynamically, you need to add them to the list of assemblies Caliburn looks to find a View/ViewModel (and bind them together) and this is done through IAssemblySource interface. According to the documentation here:
So, what is AssemblySoure.Instance? This is the place that
Caliburn.Micro looks for Views. You can add assemblies to this at any
time during your application to make them available to the framework,
but there is also a special place to do it in the Bootstrapper.
Lets say that on all my views, or generally at any time in my app, I want to be able to show an error message popup, and it always looks the same. How do I do that?
First thought is having all my view models extend a base view model which facilitates these things, but after that, do I have this base view model actually create the UI widgets and display them?
thanks,
Mark
If you've got some common functionality that you want to provide across a range of views, then you can implement a base class that inherits from the PhoneApplicationPage, and then derive all your classes from that class instead. The XAML for your pages then looks like this:
<local:BasePage xmlns ...
xmlns:local="clr-namespace:MyNamespace"
x:Class="MyNamespace.MyPage">
However, you will not be able to define common UI components in the XAML for your base page. If you wanted to have common UI components you would have create them manually in the code-behind for the base page, perhaps in a handler for the Loaded event, but I think a better solution would be to provide your common UI in a UserControl, which you then add to each of your pages.
If you want to show a Toast or Message Box, then I would recommend the ToastRequestTrigger and MessageBoxRequestTrigger from the Silverlight Toolkit as described in the patterns & practices WP7 Developer Guide.
you could probably define an event on base view model, which is fired inside view model whenever an error occurs, then in view, you can subscribe to this event and display the popup. You can carry error context in EventArgs of the fired event.
Additionally you could unify the logic for displaying the popup but that's probably another story :)
This is testable and nicely decoupled from the view.
Hope this helps,
Robert
I'm a little confused about MVVM.
I understand the concept and can see the advantages. My problem is: does the ViewModel pass data directly from the model.
For example, let's say I have a "User" model with a findByName() method. The ViewModel would call this in order to pass
the relevant user details to the view.
The model would likely retrun a set of "User" objects each which has properties such as name, email address etc and may also have methods.
My question is, should the ViewModel return the set of User objects to the view, or return a restructured version of this which
contains only what the view needs?
As I understand it, the "User" object in this case is part of the model layer and in MVVM the View should be dependant only on the ViewModel.
My issue with this is the ammount of seemingly redundant binding logic required in the ViewModel that would be created to restructure the output.
Passing the set of User objects directly to the View (via the ViewModel) would be far simpler.
There's a little bit of redundancy, sure. However, if you implement MVVM by presenting the objects, you get to
format the model information for the view without polluting the model with presentation logic
notify the view when anything changes
use WPF's validation (if you're using WPF)
run acceptance tests from the VM level rather than the GUI if you want to
abstract your presentation away from any changes to the model.
That last one's important. Mostly presentation bindings nowadays are dynamic and fail silently - web pages, WPF, you name it. That means that if someone decides to rename something on the model, it will suddenly break in your GUI and you won't know.
By putting a VM between your Model and View you buffer yourself from changes like this.
If you want to go ahead and get something working with the Users as they are, I say go for it - it'll help you get fast feedback on your GUI. However, the first time those User objects don't do exactly what the View needs, or you need to notify the View of a change, or you find yourself polluting the model, or something in the binding breaks, maybe that's a good time to move to MVVM.
Doesn't that just move the break to the ViewModels which are using the model? You'd still need to go through and update all of those.
If I renamed something (e.g. changed "surname" to "lastname") I'd expect things to break. I don't see how adding the binding in the VM layer fixes that.
I'm a beginner with Eclipse RCP and I'm trying to build an application for myself to give it a go. I'm confused about how one actually goes about handling model objects. None of the examples I can find deal with the problem I'm having, so I suspect I'm going about it the wrong way.
Say I need to initialise the application with a class that holds authenticated user info. I used my WorkbenchWindowAdvisor (wrong place?) to perform some initialisation (e.g. authentication) to decide what view to show. Once that's done, a view is shown. Now, that view also needs access to the user info I had earlier retrieved/produced.
The question is, how is that view supposed to get that data? The view is wired up in the plugin.xml. I don't see any way I can give the data to the view. So I assume the view has to retrieve it somehow. But what's the proper place for it to retrieve it from? I thought of putting static variables in the IApplication implementation, but that felt wrong. Any advice or pointers much appreciated. Thanks.
The problem you are facing here is in my opinion not RCP related. Its more an architectural problem. Your view is wired with business logicand!
The solution can be done by two (common) design-patterns:
Model-View-Controler (MVC)
Model-View-Presenter (MVP)
You can find plenty information about this in the web. I am going to point a possible solution for your particular problem using MVP.
You will need to create several projects. One is of course an RCP plugin, lets call it rcp.view. Now you create another one, which doesnt make UI contributions (only org.eclipse.core.runtime to start with) and call it rcp.presenter. To simplify things, this plugin will also be the model for now.
Next steps:
Add the rcp.presenter to the
dependencies of rcp.view (its
important that the presenter has no
reference to the view)
Export all packages that you are
going to create in the rcp.presenter
so they are visible
In rcp.presenter create an interface
IPerspective that has some methods
like (showLogiDialog(), showAdministratorViews(User user), showStandardViews(User user))
Create a class PerspectivePresenter that takes IPerspective in the constructor and saves it in an attribute
In rcp.view go to your Perspective, implement your interface IPerspective, and in the constructor create a new reference presenter = new PerspectivePresenter(this)
call presenter.load() and implenent
this in the presenter maybe like this
code:
public void load()
{
User user = view.showLoginDialog(); // returns a user with the provided name/pw
user.login(); // login to system/database
if(user.isAdministrator())
view.showAdministratorViews(user);
else
view.showStandardViews(user);
}
As you can see, the view just creates a reference to the presenter, which is responsible for all the business logic, and the presenter tells the view what to display. So in your Perspective you implement those interface functions and in each one you can set up your Perspective in a different way.
For each View it goes in the same way, you will need a presenter for the view which performs operations and tells the view (using the interface) what to display and passing down the final data. The view doesnt care about the logic. This is also very usefull when using JFace-Databindings (then only bound data is passed to the view).
For example, the WorkbenchWindowAdisor will just create everything that is needed in the application. Other views, perspectives, then can enable/disable menus and so on depending on the data they got (like when isAdministrator you might want to enable an special adminMenu).
I know this is quite a heavy approach, but the Eclipse RCP is designed for big (as the name says rich) applications. So you should spend some time in the right architecture. My first RCP app was like you described...I never knew where to store things and how to handle all the references. At my work I learned about MVP (and I am still learning). It takes a while to understand the concept but its worth it.
You might want to look at my second post at this question to get another idea on how you could structure your plugins.