Creating a Xamarin.Forms.DataTemplate from a view function - xamarin.forms

A CollectionView (or ListView) provides a way to view a sequence of objects (of type T). It has the advantage, compared to a StackLayout or Grid, that views are only loaded as needed.
The natural way to specify the view for each object would be to provide a function v:T->View (F#).
However CollectionView/ListView expects a DataTemplate. The DataTemplate class is very tied to bindings and as such the API is unnatural, uninformative and type-unsafe. The useful property seems to be Values with type IDictionary<BindableProperty,Object>.
Is it possible to work around this API and make a function which takes a v:T->View and returns a DataTemplate? This would allow making a clean API for DataTemplate and therefore for ListView and CollectionView.

One way to achieve this would be to create your own DataTemplate and ViewCell.
DataTemplate only requires a type deriving from ViewCell to instantiate when needed by the ListView.
It then calls the OnBindingContextChanged method of this newly created/reused ViewCell and passes the corresponding value of the element.
At this moment, you have access to the ViewCell.View property which will contain the control you want to display.
You can execute your function at that time.
In your case, since you have a list of 'T, this would be something like this:
type FuncViewCell(createFunc: 'T -> View) =
inherit ViewCell()
override x.OnBindingContextChanged () =
let data = x.BindingContext :?> 'T
x.View <- createFunc data
type FuncDataTemplate(createFunc: 'T -> View) =
inherit DataTemplate(fun () -> FuncViewCell(createFunc))
(...)
let createViewForData data =
Button(Text = data.Text)
let listView = ListView()
listView.ItemTemplate <- FuncDataTemplate(createViewForData)
listView.ItemsSource <- dataSource
----
Or even directly:
type FuncListView(createFunc) =
inherit ListView(DataTemplate = FuncDataTemplate(createFunc))
let listView = FuncListView(createViewForData)
listView.ItemsSource <- dataSource
A similar approach can be found in Fabulous.XamarinForms.
The difference is that the element comes with its own view creation function. So there is no need to extend DataTemplate to pass a function.
https://github.com/fsprojects/Fabulous/blob/79c5df748fff7a108dfbcbf8609cb2265a8fddc7/Fabulous.XamarinForms/src/Fabulous.XamarinForms.Core/CustomControls.fs#L110-L151

the solution would be to use DataTemplateSelector.
Here is the link for this:-
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/templates/data-templates/selector
What you can do is get a DataTemplate Id from an API call and based on the Id you can select that particular DataTemplate. You will have make that many DataTemplates and store in the Xaml of the Page. This would be the most safest and easiest solution.

Related

navigationController!.pushViewController vs. presentViewController in iOS Swift

What are the implications of pushing a ViewController in UINavigation vs. presenting a ViewController modally in terms of changing values in the next view?
For example, why does the first work but not the second?
First:
var textController: TextViewController
textController = self.storyboard!.instantiateViewControllerWithIdentifier("TextViewController") as! TextViewController
presentViewController(textController, animated: false, completion: nil)
textController.textDetail.text = Categories[indexPath.row]
Second:
var textController: TextViewController
textController = self.storyboard!.instantiateViewControllerWithIdentifier("TextViewController") as! TextViewController
self.navigationController!.pushViewController(textController,animated:true)
textController.textDetail.text = Categories[indexPath.row]
I can't get the label's value to change when pushing in a navigation stack.
It appears as though when calling the presentViewController method, the view of the view controller is actually loaded during the call, whereas when calling the pushViewController on the navigation controller, the view itself is loaded after the call.
You can test this yourself by printing to the console before and after presenting/pushing the view controller, and printing to the console in the TextViewController's viewDidLoad method.
The view needs to be loaded for the textDetail variable to load (you haven't said so, but I'm assuming this is an IBOutlet) and the textDetail variable needs to load for you to be able to modify its text property.
To use pushViewController you could for example set a variable on your TextViewController class, and override its viewDidLoad method, where you could then set the text property on the textDetail variable.

swt/jface databinding: PojoProperties vs PojoObservable

I'm writing a JFace dialog, and I'd like to use databing to a model object.
Looking at code I can see that there are times when I find a PojoProperties used to build the binding, while other time it is used a PojoObservables.
Looking at the Javadoc I can read:
PojoObservables: A factory for creating observable objects for POJOs (plain old java objects) that conform to idea of an object with getters and setters but does not provide property change events on change.
PojoProperties: A factory for creating properties for POJOs (plain old Java objects) that conform to idea of an object with getters and setters but does not provide property change events on change.
The same question applies to the difference that exists between BeansObservables and BeansProperties
The (obvious) difference sems to be that the observable allows to observe objects and the properties allows to observe properties, but since a Pojo has a getter and a setter for its data, what is the difference between them? And which of them should I choose for my dialog?
Here follows a code excerpt:
The POJO:
public class DataObject {
private String m_value;
public String getValue() {
return m_value;
}
public void setValue(String i_value) {
m_value = i_value;
}
}
The DIALOG (relevant part):
#Override
protected Control createDialogArea(Composite parent) {
Composite container = (Composite) super.createDialogArea(parent);
m_combo = new Combo(container, SWT.BORDER);
m_comboViewer = new ComboViewer(container, SWT.NONE);
}
The BINDING (relevant part):
// using PojoObservable
IObservableValue observeValue = PojoObservables.observeValue(m_dataObject, "value");
IObservableValue observeWidget = SWTObservables.observeSelection(m_combo);
// using PojoProperties
IObservableValue observeValue = PojoProperties.value("value").observe(m_dataObject);
IObservableValue observeWidget = ViewerProperties.singleSelection().observe(m_comboViewer);
I understand that one time I'm using a combo and another I'm using a ComboViewer, but I can get the combo from the viewer and bind the other way if I need...
Also, can I mix the two, for example use the observeValue with the ViewerProperties?
IObservableValue observeValue = PojoObservables.observeValue(m_dataObject, "value");
IObservableValue observeWidget = ViewerProperties.singleSelection().observe(m_comboViewer);
I am playing around a little with JFace viewers (especially ComboViewer) & databinding and discovered that if I use
SWTObservables.observeSelection(comboViewer.getCombo());
then databinding is not working correctly.
However, if I use
ViewersObservables.observeSingleSelection(comboViewer);
Then everything is working as expected.
Maybe this is a special for my case, so to get it a better overview I'll describe my set up in following paragraph.
I have modelObject with field named selectedEntity and entities and bind this ComboViewer to the modelObject.
I want to display all "entities" in model object, if I add any entity to the modelObject.entities collection then I want to this entity be added to combo automatically.
If user selects some item in combo I want to modelObject.selectedEntity be set automatically.
If I set modelObject.selectedEntity I want to combo selection be set automatically.
Source code can be found at: https://gist.github.com/3938502
Since Eclipse Mars, PojoObservables is deprecated in favor of PojoProperties and BeansObservables is deprecated in favor of BeanProperties so the answer to which one should be used has now become evident.

Flex: Filter HierarchicalData child rows

I have an ArrayCollection of objects used as the source for a HierarchicalData object. My object looks roughly like this:
ObjectName (String)
SubCollection (ArrayCollection)
I am using the HierarchicalData in an AdvancedDataGrid to display the data in a grouped format.
I am able to filter the data in the ArrayCollection using a filterFunction. What I want to do now is also filter the records in the SubCollection as well so that only the items that match the filter are displayed in the AdvancedDataGrid.
Can anyone tell me how I can filter the child rows in a HierarchicalData?
This answer isn't a direct answer to your question, but it should help with some of the background. Essentially I am in the same position as you, where I need to show a specific data set depending on what type of parent node I have.
In this case, starting with an override to HierarchicalData.getChildren(node:Object):Object this will give you access to filter the first level children, and will also give you the ability to call a filtered method for sub-children to any n-th level.
You then use your extended class as the source to the ADG.
A pseudo-code example:
Class MyCollection extends HierarchicalData
override public function getChildren(node:Object):Object
{
if (node is a TopLevelObject)
(node.children as ArrayCollection).filterFunction = filterSub;
node.children.refresh();
else if (node is a SubCollectionObject)
(node.children as ArrayCollection).filterFunction = filterGrandChildren;
node.children.refresh();
// - OR -
//a more complex process of allowing the sub-node to determine it's filter
return node.filterSubCollectionGrandChildren();
return node;
}

Flex data binding with View-Model pattern

I'm trying to move toward using the View/Model/View-Model or Presentation Model pattern in a Flex application since it definitely feels like the "correct" way to do things. I have a question about how something should work with Flex data binding though.
Say I have a Project model class which contains a bindable name field. I want to make a report to display information about the project. The title of the report should be [Project Name] Summary. I want to make a View-Model class to provide the backing for the report. This SummaryViewModel class will have a title field to provide the report title.
In my report mxml I would bind the title label to summaryModel.title, however title needs to somehow be bound to projectModel.name so if the name is changed in another part of the program the report title updates also.
What's the correct way to accomplish this "two-level" data binding in Flex? Should I be doing things a different way?
Let's say you have a model like this:
[Bindable]
public class Project {
public var name:String;
}
And you have your presentation model:
[Bindable]
public class SummaryPresentationModel
{
private var projectModel:Project = new Project();
public var title:String;
}
In your constructor, you can data bind the setter of the model to a function that sets the title:
public function SummaryPresentationModel() {
BindingUtils.bindSetter(modelNameChanged, projectModel, "name");
}
And then set the value of title:
private function modelNameChanged(newValue:String):void {
title = "[" + projectModel.name + "] Summary";
}
You are then free to bind to the summaryPM.title and everything will chain to the UI when projectModel.name changes.
You can get more complicated and use a "getter" function on title (as opposed to just setting it like I am here), but you need to propagate the change notification. I is not too terribly difficult to do, but I find that this method is a bit easier to follow.
Hope this helps!
No different than any other binding, they will both be updated (both being the place you're putting the title and the summary model).
If you post how you are defining your values I can help you with syntax, but this isn't a difficult binding operation. Where things get mildly more complicated would be with two way binding.

Best way of implementing DropDownList in ASP.NET MVC 2?

I am trying to understand the best way of implementing a DropDownList in ASP.NET MVC 2 using the DropDownListFor helper. This is a multi-part question.
First, what is the best way to pass the list data to the view?
Pass the list in your model with a SelectList property that contains the data
Pass the list in via ViewData
How do I get a blank value in the DropDownList? Should I build it into the SelectList when I am creating it or is there some other means to tell the helper to auto create an empty value?
Lastly, if for some reason there is a server side error and I need to redisplay the screen with the DropDownList, do I need to fetch the list values again to pass into the view model? This data is not maintained between posts (at least not when I pass it via my view model) so I was going to just fetch it again (it's cached). Am I going about this correctly?
Your best bet is to create a SelectList in your Controller - use my extension method here:
http://blog.wekeroad.com/2010/01/20/my-favorite-helpers-for-aspnet-mvc
Pop that into ViewData using the same key as your property name:
ViewData["statusid"]=MySelectList
Then just use Html.DropDownFor(x=>x.StatusID) and you're all set.
Answering in parts:
The best way IMHO is to pass the list in the ViewModel like this:
public SelectList Colors
{
get
{
// Getting a list of Colors from the database for example...
List<Color> colors = GetColors().ToList();
// Returning a SelectList to be used on the View side
return new SelectList(colors, "Value", "Name");
}
}
To get a blank or default option like ( -- Pick a color -- ), you can do this on the view side:
#Html.DropDownListFor(m => m.Color, Model.Colors, "-- Pick a color --")
You'll have to fetch/populate the list again if it's part of the ViewModel.
Take a look at the following blog post. It can give you some tips:
Drop-down Lists and ASP.NET MVC
You could do something like:
<%= Html.DropDownListFor((x => x.ListItems), Model.ListItems, "")%>
or
<%= Html.DropDownList("ListItems", Model.ListItems, "")%>
The last param 'optionLabel' makes a blank list item
In this case, you can see ListItems is a property of the model.
I have made the view strongly typed to the model also.
(You know this already!)
Pass the list in your model with a SelectList property that contains the data
Yes, add it when you build the SelectList. (If you build the list using LINQ, Union might come in handy.)
Yes do do, and yes you are.
I find it more intuitive to work with a sequence of SelectListItems (rather than a SelectList).
For example, this would create an IEnumerable<SelectListItem> from a sequence of customer objects that you can pass to the Html.DropDownListFor(...) helper. The 'Selected' property will optionally set the default item in the dropdown list.
var customers = ... // Get Customers
var items = customers.Select(c => new SelectListItem
{
Selected = (c.Id == selectedCustomerId),
Text = c.Email,
Value = c.Id.ToString()
});

Resources