Xamarin: GETTING STARTED WITH PRISM 6 (PART 2) – Command

XamarinMainImage

Image Credit to TechCrunch

For the second part of this Getting started Xamarin with Prism series, I would like to discuss on how to use Command in Xamarin forms. By the way if you missed the Part 1 of this series you can check this article.

Command

When you say Command, for example in Win Forms it’s just an event that was fired
due to let’s say a button click or an event brought by textbox lost/on focus but in Xamarin
Commands are just methods that are directly binded from your view e.g. (Button, MenuItem, ToolbarItem) and executes the binded method in your ViewModel.

Now let’s use Prism’s Command implementation, will still be using our previous solution “XamarinPrismSample” that we have created in the first part of the series. Let’s modify our MainPage.xaml, let’s put the stack layout in the Grid and add a label which is binded to Greeting. Will also add a button where in when user clicks it, will display the most famous words “Hello Word” in our label with the Greeting binding as shown in Figure 1.

MainPageXamlContent.jpg

Figure 1. XAML Code for our U.I.

Let’s try to build our application and see the current User Interface in Figure 2.

AndroidEmulator1

Figure 2. Android Emulator showing our U.I.

Now let’s go to our MainPageViewModel to setup the contents of our binding for our Command and Property. For Prism implementation of Command, it uses DelegateCommand Class. But first we need to declare a property called Greeting and implement it’s Getter and Setters. As you can see it doesn’t uses the INotifyPropertyChanged but instead implements the BindableBase which is the Prism own way of implementing the INotifyPropertyChange interface. Kindly see Figure 3 for the property implementation.

Property.jpg

Figure 3. Greeting Property.

So after implementing our Property Greeting, let’s try to implement a simple command where in if the user clicks the button it will update the display of our Greeting to Hello World. Will create another property but this time it’s of type DelegateCommand which the Prism framework is using. Then create it’s delegate method by setting the Greeting property to “Hello World” string as shown in Figure 4.

Commanding

Figure 4. DelegateCommand

When user clicks the button it will show Hello World string in your U.I. as shown in figure 5.

HelloWorldDisplay

Figure 5. Hello World Displayed when button was Clicked

Now let’s say you want to enable your button when the user types something on your Edit control because by default we set our CanExecute to return true always. So let’s add an Edit Control to our U.I.

AndroidUINew

Figure 6. Edit Control in our U.I.

In order to enable our Button when someone inputs something in our Edit Control we need to return a Boolean result based on the Name property if it is empty or not.

AddedCanExecute


Figure 7. Modifications of CanExecute

Now let’s try to run our application, then try to type something in our Edit Control and we should expect that our button should be enabled….. hmmm… but our Button is still disabled even though our Edit Control already contains a string.

HelloXamarinForms

Figure 8. Button is still disabled

It’s a general rule when something is updated in your View side the bindings should be updated through your properties like for example the INotifyPropertyChanged and for the Command you should call the RaiseCanExecuteChanged method to update the button.

ModifyNameSetter

Figure 9. Calling RaiseCanExecuteChanged method

Let’s try again to run our application and type something in our Edit Control…. and boom… our button is automatically enabled.

AndroidEmulatorEnabledButton

Figure 10. Button is enabled

Well it’s good that our button is already being triggered by our Edit Control… but what if you don’t want to add additional codes in your setters, this is where Prism Delegatecommand ObservesProperty method comes in. It allows you to Observe a property and it’s following changes. So we need to remove the calling of RaiseCanExecuteChanged in our setter and instead use ObservesProperty and pass a function which observes the Name property like in Figure 11.

ModifiedSetter

Figure 11. ObservesProperty method of Delegate Command

Now let’s try to run our application and try to type something in our Entry Control…. then boom… same result it still enables our button with the luxury of a more cleaner setter.

EnabledButton

Figure 12. Using ObservesProperty to enable our button

For the last part of this article, I would like to discuss about using the Command Parameter feature of Prism. Let’s try to modify our Button first by adding a Property Called ButtonName then bind it to our text attribute then let’s add a CommandParameter and bind it to the Name property so that whatever value of the Name property will pass it to our DelegateCommand.

ButtonName

Figure 13. Command Parameter

Next up is to edit our DelegateCommand by adding a type string and also adding string parameters for our ShowHelloWorld and CanExecute methods.

DelegateOfTypeT

Figure 14. DelegateCommand of type String

Now let’s try to run our application and type in our edit control, once you click the button the Content of the button should be equal to the content our Edit control…. yup there you have it our edit control and button control have the same Content using the CommandParameter of our DelegateCommand.

HelloXamarinForms1

Figure 15. Using Command Parameter

Conclusion

Just a quick wrap up, we have learned about using the Delegate Command of prism. We used the ObservesProperty method of our delegate command in order to observe a property without additional codes in our setters. We also discussed about the Command Parameters by using the the type T of our Delegate Command. So that’s it I hope it helped you to kick start your Xamarin Forms adventure and the next part I’ll try to discuss about Navigations.

Happy Coding 🙂

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s