AwaitablePopups 0.3.0

Awaitable Popups

Table of Contents

Codacy NuGet

Awaitable Popups is a neat blend of the Rg.Plugins.Popup and AsyncAwaitBestPractices plugins to bring you a quick way to add popups into your Xamarin Forms App using familiar concepts

GETTING STARTED

Getting Started

First, you must follow the initialisation guide set out by Rg.Plugins.Popup, once you have that, have a look at usage down below

Installation

You can install the nuget by looking up 'AwaitablePopups' in your nuget package manager, or by getting it here

USAGE EXAMPLES

Usage

here is an example of what this plugin makes easy (Looks slow due to giphy)

I have included the older, 'safer' example, and the new simplfied example.

New Example

To Use the plugin for its inbuilt popup pages (Dual/Single Response, TextInput and loader.) All you need are these one liners

SingleResponse Popup Page

return await SingleResponseViewModel.GeneratePopup(new PopupButton(Color.Goldenrod, Color.Black, "Okay"), Color.Gray, "Your Phone Number or Pin is incorrect, please try again.", "NoSource.png");

DualResponse Popup Page

return await DualResponseViewModel.GeneratePopup(new PopupButton(Color.Green, Color.Black, "I Accept"), new PopupButton(Color.Red, Color.Black, "I decline"), Color.Gray, "Do you accept the terms and conditions?", "NoSource.png");

Loader Popup Page

  await PopupService.WrapTaskInLoader(Task.Delay(10000), Color.Blue, Color.White, LoadingReasons(), Color.Black);

Text Input PopupPage

await TextInputViewModel.GeneratePopup(new PopupButton(Color.Green, Color.Black, "I Accept"), new PopupButton(Color.Red, Color.Black, "I decline"), Color.Green, "TEXT HERE", "Placeholder");

or, to return from the loader a value

await PopupService.WrapReturnableTaskInLoader<bool>(IndepthCheckAgainstDatabase(), Color.Blue, Color.White, LoadingReasons(), Color.Black);

you can also add in synchronous functions, however they are wrapped in a task

private bool LongRunningFunction(int millisecondDelay)
{
    Thread.Sleep(millisecondDelay);
    return true;
}
await PopupService.WrapReturnableFuncInLoader(LongRunningFunction, 6000, Color.Blue, Color.White, LoadingReasons(), Color.Black);

That's it! for a more indepth of how it works, read on (and check the wiki!)

Older 'Safer' Example

This example is safer as it allows you to do more direct manipulation with the commands, instead of relying on sneaky wrapping and whatnot. This is a function that is called when a user logs in using the incorrect credentials.

First, there is the loader. This is a new addition to the Plugin, and it allows you to wrap any function in a Progress loader, and it will automatically disappear when that task is complete. It has an extra of allowing you to scroll through messages that will display to the end user, if you so choose.

Second, now that the Login attempt is over, We create the ViewModel, and then assign the ViewModel properties with what we want. The most important is the Single Button Command here, (which can accept the AsyncCommand from AsyncAwaitBestPractices or anything that implements ICommand).

This property allows you to enact any functionality within the popup once a button is pressed, this could be a call to an API, an extended amount of processing, it does however, need to finish with SafeCloseModal, a function which will return whatever value you place inside it (aslong as it matches pushasync, which is below)

Once you have setup the rest of the properties (image is important), you then use PushAsync. PushAsync is the generic glue that holds this all together. With it, you will specify the ViewModel, the Page, and the type you are returning using safeclosemodal.

This is because one ViewModel could be used for several popuppages, and so forth.

A limitation here is that no matter what, you return one type. This is something I will need to workaround in the future.

private async Task<bool> IncorrectLoginAsync()
{
    System.Collections.Generic.List<string> Reasons = new System.Collections.Generic.List<string>
    {
        "Twiddling Thumbs",
        "Rolling Eyes",
        "Checking Watch",
        "General Complaining",
        "Calling in late to work",
        "Waiting"
    };
    await PopupService.WrapTaskInLoader(Task.Delay(10000), Xamarin.Forms.Color.Blue, Xamarin.Forms.Color.White, Reasons, Xamarin.Forms.Color.Black);

    var incorrectLoginError = new SingleResponseViewModel(PopupService);
    incorrectLoginError.SingleButtonCommand = new Xamarin.Forms.Command(() => incorrectLoginError.SafeCloseModal(false));
    incorrectLoginError.SingleButtonColour = Xamarin.Forms.Color.Goldenrod;
    incorrectLoginError.SingleButtonText = "Okay";
    incorrectLoginError.MainPopupInformation = "Your Phone Number or Pin is incorrect, please try again.";
    incorrectLoginError.MainPopupColour = Xamarin.Forms.Color.Gray;
    incorrectLoginError.SingleDisplayImage = "NoSource.png";
    return await PopupService.PushAsync<SingleResponseViewModel, SingleResponsePopupPage, bool>(incorrectLoginError);
}

This function then is called like this:

if (string.IsNullOrEmpty(Mobile) || string.IsNullOrEmpty(Password))
{
    loginResult = await IncorrectLoginAsync();
}

And then, if a user puts in an incorrect login, the popup will show, wait for user interaction, and fire off incorrectLoginError.SafeCloseModal(false)) which in turn, makes loginResult = false.

If you want to make your own Popup Page

This is the real power of this Plugin (Thanks in no small amount to Rotorgames amazing plugin). If you look at the source for DualResponsePopupPage, or the SingleResponse version you'll notice that they are just simple Xaml Pages. Nothing fancy. (except for the rg popup spice).

All you need to do is follow that example. So:

1. Create Xaml Page with codebehind
2. Create your ViewModel that is associated with the popup, lets call ours InformationPopupPage
3. Ensure your ViewModel inherits from PopupViewModel<TReturnable> where TReturnable is what you want the popuppage to return to its caller
4. Ensure that your xaml page codebehind inherits from PopupPage (requirement to use rg plugins popup) and IGenericViewModel<TViewModel> where TViewModel is your Viewmodel, in our case it will be IGenericViewModel<InformationPopupPage>
5. You're ready to start using it the same as DualResponsePopupPage

Contact

My Github, or reach me on the Xamarin Slack, or on my E-mail

Project Link: AwaitablePopups