I'm using Visual States to show / hide some of my views.
On 2 of those views, I load a sub-view that the 2 views use using ViewModels. Something like this:
<local:SharedSubView DataContext="{Binding Path=SharedSubViewVM}" />
Problem is, I think it causes conflict because when I try to load the 2 views, it just hangs.
Is there another way to do this? Or should I just create another duplicate file for the view?
Thank you
Related
I have a common container component into which I would like to display different components depending on what the user has selected. I have got this working using the element in the container view and binding the view.model attribute to a model property, like this:
<compose view-model="./${componentName}" if.bind="haveComponent" model.bind="stuff"></compose>
I have methods in the view model which change the value of {componentName} and different views are displayed.It does seem to work but something doesn't feel right, I'm not quite sure.
Is this a legitimate way to achieve this? I'm pretty new to Aurelia so any pointers would be appreciated.
That is legitimate use case for compose
Don't be shy and join aurelia's discourse
I am using the ViewModel First approach and i have trouble navigating from one ViewModel to another.
For example, i have two folders, View and ViewModels and i have two files in each Page1View.xaml, Page2View.xaml and Page1ViewModel.cs, Page2ViewModel.cs
In my app launch i have this the line below and it works perfectly fine.
DisplayRootViewFor<Page1ViewModel>();
Now on a button click from Page1ViewModel event when i add the line below, i get a null reference exception.
_navigationService.NavitageToViewModel<Page2ViewModel>();
Am i missing something here? To give more information, This is a UWP application and the container that i am using is WinRTContainer and i have registered both the ViewModels.
You are taking a ViewModel-first approach. Note that DisplayRootViewFor doesn't create a Frame control and doesn't set up a NavigationService.
Have a look at:
https://github.com/Caliburn-Micro/Caliburn.Micro/issues/126
Either switch to a View-first approach, or in your root view, setup a NavigationService passing a Frame to it:
container.RegisterNavigationService(rootFrame);
I have my views and viewmodels in separate projects, and I use ViewLocator.AddNamespaceMapping() calls to map everything.
How do I continue to keep things separate and use the View.Context switching recommended here ?
Assume I have my viewmodel project with top level functional folders:
MyViewModels/
---/FormDesigner/FormDesignerViewModel.cs
---/GroupDesigner/GroupDesignerViewModel.cs
---/FilterDesigner/FilterDesignerViewModel.cs
etc.
And my view project like:
MyViews/
---/FormDesigner/FormDesignerView.xaml
---/GroupDesigner/GroupDesignerView.xaml
---/FilterDesigner/FilterDesignerView.xaml
And I currently map in my Bootstrapper like:
ViewLocator.AddNamespaceMapping("MyViewModels", "MyViews);
How would I introduce View.Context switching for alternate views for each of my current Xaml views? Thanks
I believe the built in conventions will take care of it for you (you could also specify additional conventions), provided your views are namespaced/named correctly (See "Multiple Views over the Same ViewModel").
Usually, you would place your views (if you wanted switching) in a structure like:
Folder: Views/FormDesigner/ // Folder Structure not critical
NameSpace: YourApp.Views.FormDesigner
XAML: YourApp.Views.FormDesigner.Master.Xaml
XAML: YourApp.Views.FormDesigner.Detail.Xaml
Binding: <ContentControl cal:View.Model="{Binding Path=ActiveItem}"
cal:View.Context="Master" />
Your binding may vary, and for switching, you'll want to bind the Context to a property on the ViewModel (which indicates either Master, or Detail in your situation.
You can use your existing view, but you'll have to change the name from FormDesignerView.xaml if you want to switch the context.
I had a crack at explaining the built in Caliburn.Micro conventions governing that behaviour in this answer: One ViewModel, multiple views
I have two scenarios I need help with, and I thought posting them together would prove more
valuable for myself, and other viewers.
Setup:
Worklight 6.1
dojo 1.9
Application:
MainView.html (Contains Body, and a transition Div, and NorthSouthView.js script reference)
View1.html (Contains a single Div that displays and unordered list
View2.html (Contains a single Div that Displays <p> data, and also plays audio)
View3.html (Contains a single Div that Displays instructional information)
application-descriptor <mainFile> MainView.html </mainFile>
All of the views are stored together in the application. There are no external http queries made by the application. All view transitions are local to the application.
Scenario #1:
At application start the MainView.html is invoked by worklight. Anticipated format::
<body>
<div>
<h1 id="SSheader" data-dojo-type="dojox.mobile.Heading" data-dojo-props='fixed:"top"'>Loan Snapshot</h1>
</div>
<div id="TransitionViewDiv">
/* Would like to load content of View1.html, View2.html, or View3.html here */
</div>
<script>SetView.js</script>
</body>
Description + Questions:
When the application starts, SetView.js will be loaded, and the purpose of this script is to look at localStorage and determine which view should be displayed. (View1, View2, or View3). The goal is to keep SSheader fixed at the top of the screen at all times. Only TransitionViewDiv would update.
Questions:
1) What coding approach can be used in SetView.js to load one of the 3 possible views into the TransitionViewDiv?. I did findin dojo 1.9 specs an example using dojox/mobile/ViewController but I was not able to get the sample code to work as documented by dojo.
2) Is the approach of having the TransitionViewDiv necessary, or could View1, 2 or 3 be loaded without TransitionViewDiv? Keep in mind that each view View1, 2, and 3 are defined as individual Div's.
Appreciate any advice to accomplish the above approach, or welcome any suggestion on the best practices to accomplish the transition.
Scenario #2:
As a follow-on to the scenario 1 above. Once View1, 2 or 3 is successfully loaded the views will have buttons defined that will want to cause the transition to another one of the remaining views. So, if inside SetView.js the decision is to slide in View2 to be displayed, View2
will have buttons that will want to load for example View3.html.
Description + Questions:
1) Would the best approach to load View3.html from View2.html be to use the moveTo on the button click, or should the button use the callback to invoke javascript to cause the transition similar to what was used to load the initial view?
Appreciate any advice on the best practices to managing multiple view stored in independent files. In the end the application will have upwards of 15+ ViewXX.html files each containing a Div. Based on this, having all of the views in one html file and forcing the hide, and show is not feasible.
Appreciate your time and help
To load an HTML fragment (View1.html, View2.html or View3.html), you can use the dojox/mobile/ContentPane. This widget allows you to provide a href property that can be used to specify the location of the view.
You can also alter it later on by setting the href property again, for example:
registry.byId("myContentPane").set("href", "View2.html");
You should keep the div#TransitionViewDiv and programmatically add the dojox/mobile/ContentPane to it, or use declarative syntax and add the following attributes:
<div id="TransitionViewDiv" data-dojo-type="dojox/mobile/ContentPane" data-dojo-props="href: 'View1.html'"></div>
Your second scenario is differs from the first one. In the first one, you actually have 1 view with many fragments, while in your second scenario you have many views.
If you only have 1 view, you cannot transition to other views (there are none). So if you want to use transitions you cannot use dojox/mobile/ContentPane.
However, if you have seperate views, then that means you need to move the header to each view (since they're part of it). For these, more complex cases I think you should look at the dojox/app module. This covers a lot of the MVC code for you and the only thing you need to do is configure it.
If you're not interested in the dojox/app module, you can try to inherit views. You might want to look at this answer I once provided. In the comment section of that answer you can also find a more detailed JSFiddle. In this example the header is actually inherited. I also wrote a more detailed article to handle this case .
Is it possible to generate dynamic WP7 controls in code behind (.cs) using .xaml template (like inflating in Android) ,
or should I generate it all manually? For example I need dynamic tabs (PivotItems)
Pete Brown recently demonstrated how to dynamically generate xaml here if you'd like to look into that route.
Dynamically Generating Controls in WPF and Silverlight
You can definitely do this:
var newItem = new PivotItem { Header = "Added" };
MyPivot.Items.Add(newItem);
Beware of potential performance implications of having lots of times though.
It is possible to do so - but definitely not recommended.
I am not sure why you would want to have more than three pivot items in any application anyway. Simply have three and reuse them as they wrap around. You only need to change the data in the pivotItems on a page transition, not create more and more of them.