Slider used in Xamarin.froms to control value - mvvm

I'm adding a slider into my xamarin app, but im using view models to capture values. How can I move the slider on the GUI and show the value incrementing up and down and then capture its value?
or is there a way I can include the "MySlider_ValueChanged" event and apply it to the view model page rather than the content page code behind file?

is there a way I can include the "MySlider_ValueChanged" event and apply it to the view model page rather than the content page code behind file?
You have to find a BindableProperty which could be bound inside view model(ICommand) ,it should do the same work as the event ValueChanged .
For exmaple
We could handle Tapped event of TapGestureRecognizer in page code behind , we also could create new ICommand inside view model , and bind it with Command of TapGestureRecognizer .
However, Slider does not have command whose function is detecting the value changed , there is only DragStartedCommand and DragCompletedCommand ,
so the only solution is to trigger your method inside the setter method of Value .
Xaml
<Slider Value="{Binding CurrentProgress}" />
View Model
public double CurrentProgress
{
get { return currentProgress; }
set
{
currentProgress = value;
NotifyPropertyChanged("CurrentProgress");
YourMethod(value);
}
}
Refer https://stackoverflow.com/a/25141043/8187800.

Related

How to access control from the popup fragment by ID

I want my text area to be empty after I press OK button.
I have try this line this.byId("id").setValue("")
onWorkInProgress: function (oEvent) {
if (!this._oOnWorkInProgressDialog) {
this._oOnWorkInProgressDialog = sap.ui.xmlfragment("WIPworklist", "com.sap.FinalAssestments.view.WorkInProgress", this);
//this.byId("WIP").value = "";
//this.byId("WIP").setValue();
this.getView().addDependent(this._oOnWorkInProgressDialog);
}
var bindingPath = oEvent.getSource().getBindingContext().getPath();
this._oOnWorkInProgressDialog.bindElement(bindingPath);
this._oOnWorkInProgressDialog.open();
},
//function when cancel button inside the fragments is triggered
onCancelApproval: function() {
this._oOnWorkInProgressDialog.close();
},
//function when approval button inside the fragments is triggered
onWIPApproval: function() {
this._oOnWorkInProgressDialog.close();
var message = this.getView().getModel("i18n").getResourceBundle().getText("wipSuccess");
MessageToast.show(message);
},
The text area will be in popup in the fragment. I am expecting the text area to be empty.
If you instantiate your fragment like this:
sap.ui.xmlfragment("WIPworklist", "com.sap.FinalAssestments.view.WorkInProgress", this);
You can access its controls like this:
Fragment.byId("WIPworklist", "WIP").setValue(""); // Fragment required from "sap/ui/core/Fragment"
Source: How to Access Elements from XML Fragment by ID
The better approach would be to use a view model. The model should have a property textAreaValue or something like that.
Then bind that property to your TextArea (<TextArea value="{view>/textAreaValue}" />). If you change the value using code (e.g. this.getView().getModel("view").setProperty("/textAreaValue", "")), it will automatically show the new value in your popup.
And it works both ways: if a user changes the text, it will be automatically updated in the view model, so you can access the new value using this.getView().getModel("view").getProperty("/textAreaValue");.
You almost have it, I think. Just put the
this.byId("WIP").setValue("") line after the if() block. Since you are adding the fragment as a dependent of your view, this.byId("WIP") will find the control with id "WIP" every time you open the WIP fragment and set its value to blank.
You are likely not achieving it now because A. it is not yet a dependent of your view and B. it is only getting fired on the first go-around.

kendo ui set view model page data-title dynamically mvvm

I am trying to set the title of my view dynamically with no success so far.
I am trying something like this:
<div data-role="view"
id="mt-details-view"
data-title="#= pageTitle #" <---- this one
data-layout="mt-main-layout"
data-init="X.details.onInit"
data-before-show="X.details.beforeShow"
data-show="X.details.onShow"
data-model="X.details.viewModel"
data-use-native-scrolling="true">
I tried using a function, tried setting a viewModel variable, tried passing the title from the view.params, tried also to set the title on the onShow function like that:
function onShow(e) {
X.debug.dbg2(e.view.id, "onShow");
viewModel.setViewParams(e.view.params);
e.view.title = e.view.params.pageTitle;
e.view.options.title = e.view.params.pageTitle;
fetchSomeDetails();
}
nothing works.
Enlighten me please!
Here is one approach you can try. After declaring your viewmodel, bind a function to its 'set' method. Within here, check whether the field being set is the page title property on the viewmodel. If it is, find the dom element holding the title text and set its html to the value being 'set':
X.details.viewModel.bind("set", function(e) {
if (e.field == "pageTitle") {
$("#mt-details-view [data-role='view-title']").html(e.value);
}
})
Whenever that property is changed on the viewmodel, you will now see it reflected on the page. However there is still the issue of setting the value in the UI initially. You can do this in your onShow function which of course happens after the view is rendered and all the dom elements have been created:
function onShow(e) {
var temp = viewModel.pageTitle;
viewModel.set("pageTitle", null);
viewModel.set("pageTitle", temp);
}
That will force the 'set' method on the viewmodel to run and the UI should then update.

$ionicHistory.goBack() not working correctly with ion tabs

My page contains 3 tabs, if i forward to next page from tab3 and then coming back from that page using $ionicHistory.goBack() it redirects to tab1. how to make it redirects to tab3 itself
function sample($scope,$ionicHistory){
$ionicHistory.goBack();
};
}
I'm not sure it's possible to do that just through $state. I'm new to Ionic myself as I had my first peek back in December (2016). However, I happened to have this exact scenario. This is how I solved it.
In my case, I was not using tabs. Instead, I had three different DIVs that were visible depending on the "tab number". When initializing the view, I set it to "1" and used the property to control what code is executed.
I'm guessing that the control you're using has a property like that to identify and set the particular tab you need, as this is the most likely way to change tabs on tab-click. Consider putting the value of that property "tab #" into the appropriate service used by the controller. This is a stripped-down version of actual code in one of my services defined via Factory.
YourService.js:
// controllers are instances. When navigating away, state is lost. This
// tracks the tab we wish to view when we load the home page.
var activeHomePageTab = 1;
var service = {
getActiveTab: getActiveTab,
setActiveTab: setActiveTab,
...
};
return service;
////////////////
function getActiveTab() { return activeHomePageTab; }
function setActiveTab(num) { activeHomePageTab = num; }
...
Here, the functions are private. In your controller, when you set your tab, also set this property. As a singleton, this will remain in effect as long as your application is running.
Next, in your init() routine, when the controller is loaded, check for this property and set the tab if it is defined:
function init() {
var tab = YourService.getActiveTab();
if (tab !== undefined) {
setTab(tab);
} else {
setTab(1)
}
...
}
Of course, there are other ways - maybe using Value or a property on a Constant object.

Radio button change handler refreshing the page

I'm using UploadItem, RadioGroupItem and some other widgets. RadioButton is having onChangeHandler which will decide what all other components need to be displayed. I've uploaded some file using UploadItem. Then I changed the radio button selection. On changing the radio button, required widgets are getting displayed properly but whatever file I'd selected using UploadItem is going away. Fresh UploadItem widget is getting displayed. In other words page is getting refreshed.
My requirement is whenever I change radio button option, required widget should displayed along with that whatever file I had selected using UploadItem should remain same.
My Code is something like this:
UploadItem upload = new UploadItem();
RadioGroupItem radioGroup = new RadioGroupItem();
HashMap map = new HashMap();
map.put("option1","option1");
map.put("option2","option2");
radioGroup.setValueMap(map);
TextItem textbox = new TextItem();
radioGroup.addChangeHandler(new ChangeHandler(){
public void onChanged(ChangedEvent event) {
String radioValue =((String)event.getValue());
if(radioValue.equalsIgnoreCase("option2")){
textbox.show();
}else{
textbox.hide();
}
}
});
Add all created widgets to DynamicForm object using dynamicForm.setFields(all created widgets)
Changing the radio button should hide and show the textBox. But while doing that page is getting refreshed and whatever file we had selected using UploadItem is lost.
As per the documentation for hide() and show() of FormItem class, invocation of any of these methods, will cause the DynamicForm to be redrawn.
So it may cause the problem you're getting.
To overcome this issue, I would suggest you to put UploadItem in a separate DynamicForm.
fire an event on radio Selection change as
radioButton.addListener(Events.Change, new Listener<BaseEvent>() {
#Override
public void handleEvent(BaseEvent be) {
if(radioButton.getValue()){
//fire an event here for ur widget
}
}
});

Identify which instance of the view is currently active in RCP?

I am creating an RCP application. I need to open multiple instances of the same view but with different data. I did it by setting secondary id for different instances of the same view. Specifically, my problem is as follows: Please take a look
I have a graph view called Views.GraphView. I opened different instances of it from a command called openGraphView to show different graphs. The command is as follows:
page.showView("Views.GraphView", Integer.toString(instanceNum++), IWorkbenchPage.VIEW_ACTIVATE);
Now, I have a command called TreeLayout on this Views.GraphView toolbar, which suppose to change the layout of the graph and it will operate on each instance of the view. But for this, I think, I need to identify which instance of the view is active. The TreeLayout command looks something like this:
IViewPart findView = HandlerUtil.getActiveWorkbenchWindow(event).getActivePage(). findView( "Views.GraphView"); //I think in the findView I need to give the id of the view [but how can I put the secondary id?]
GraphView view = (GraphView) findView;
view.changeLayout(); //I wrote this method in the graph view to change the layout
//I just tried to print the secondary id, but it did not print anyting
System.out.println("From treelayout command:- " + view.getViewSite().getSecondaryId());
So how can I identify which instance of the view is currently active and to operate on it?
You can use IWorkBenchPage.findViewReference(String viewId, String viewId) , if it returns null, the view with viewId and viewId is not present in the current perspective.
If you have a ViewReference you can use ViewReference.getView(boolean restore) to get the view
so in your handler you get something like:
final IWorkbenchPage page = HandlerUtil.getActiveWorkbenchWindow(
event).getActivePage();
final int instanceNum = 8;//the number of instances that are created
for (int index = 0; index < instanceNum; index++) {
final IViewReference viewReference = page.findViewReference(
"Views.GraphView", Integer.toString(index));
if (viewReference != null) {
final IViewPart view = viewReference.getView(true);
if (view instanceof GraphView) {
final GraphView graphView = (GraphView) view;
graphView.changeLayout();
}
}
}
The view.getViewSite().getSecondaryId() method is the good one to identify a secondary view. This method only returns the Null string for the "primary" view: the one opened when user click Window -> Show View - Your View.
I don't understand why your view toolbar button has to operate on all the view instances. TO my eyes, you should have one button in each view instance toolbar operating only in its own view. If you really need to operate from one button to ALL the views I think you will have to keep the open views references yourself, because I think the workbench doesn't provide a findViews method returning a view array.
using the below code you should be able to get the current active view.
PlatformUI.getWorkbench().getActiveWorkbenchWindow().getActivePage().getActivePart()
Active view and Editor name display on MessageDialogbox
public class Active_Workbench extends AbstractHandler{
#Override
public Object execute(ExecutionEvent event) throws ExecutionException {
// A part service tracks the creation and activation of parts within a workbench page.
IPartService service = PlatformUI.getWorkbench().getActiveWorkbenchWindow().getPartService();
MessageDialog.openInformation(HandlerUtil.getActiveWorkbenchWindow(
event).getShell(), "Current Workbench Window", service.getActivePart().getTitle().toString());
return null;
}
}
I hope this answer is useful.