DEV Community: Jefry Pozo

Ripple effect in Xamarin.Android

Jefry Pozo — Sun, 04 Jul 2021 12:29:40 +0000

If you want your controls to have ripple effect in Xamarin.Android you can use the TouchEffect from the Xamarin Community Toolkit, for most use cases it should work well.

But I wanted to have ripple effect in a CollectionView and I need a Switch in the ItemTemplate to receive click events and according to this issue the TouchEffect doesn't work well on Android if your view has clickable children, so I had to roll my own.

Creating a ripple effect in Xamarin.Android

To achieve our goal, we're going to need to handle the touch events ourselves in order to fire the ripple effect. But first, let's create a RoutingEffect with some bindable properties to be used in the Android project.

Creating a RoutingEffect

We are going to add some bindable properties to our Effect:

Command
CommandParameter
LongPressCommand
LongPressCommandParameter
NormalColor
RippleColor
SelectedColor.

First, let's create a new class for our RoutingEffect.
Always remember to add the company name to avoid clashes with other effects.

public class TouchRippleEffect : RoutingEffect
{
        public TouchRippleEffect() : base("companyName.TouchRippleEffect")
        {
        }
}

Now, let's add the bindable properties:

public static readonly BindableProperty CommandProperty = BindableProperty.CreateAttached(
    "Command",
    typeof(ICommand),
    typeof(TouchRippleEffect),
    default(ICommand),
    propertyChanged: OnCommandChanged
);

public static readonly BindableProperty CommandParameterProperty = BindableProperty.CreateAttached(
    "CommandParameter",
    typeof(object),
    typeof(TouchRippleEffect),
    null,
    propertyChanged: OnCommandParameterChanged
);

public static readonly BindableProperty LongPressCommandProperty = BindableProperty.CreateAttached(
    "LongPressCommand",
    typeof(ICommand),
    typeof(TouchRippleEffect),
    default(ICommand),
    propertyChanged: OnLongPressCommandChanged
);

public static readonly BindableProperty LongPressCommandParameterProperty = BindableProperty.CreateAttached(
    "LongPressCommandParameter",
    typeof(object),
    typeof(TouchRippleEffect),
    null,
    propertyChanged: OnLongPressCommandParameterChanged
);

public static void SetCommand(BindableObject bindable, ICommand value)
{
    bindable.SetValue(CommandProperty, value);
}

public static ICommand GetCommand(BindableObject bindable)
{
    return (ICommand) bindable.GetValue(CommandProperty);
}

private static void OnCommandChanged(BindableObject bindable, object oldValue, object newValue)
{
    AttachEffect(bindable);
}

public static void SetCommandParameter(BindableObject bindable, object value)
{
    bindable.SetValue(CommandParameterProperty, value);
}

public static object GetCommandParameter(BindableObject bindable)
{
    return bindable.GetValue(CommandParameterProperty);
}

private static void OnCommandParameterChanged(BindableObject bindable, object oldValue, object newValue)
{
    AttachEffect(bindable);
}

public static void SetLongPressCommand(BindableObject bindable, ICommand value)
{
    bindable.SetValue(LongPressCommandProperty, value);
}

public static ICommand GetLongPressCommand(BindableObject bindable)
{
    return (ICommand) bindable.GetValue(LongPressCommandProperty);
}

private static void OnLongPressCommandChanged(BindableObject bindable, object oldValue, object newValue)
{
    AttachEffect(bindable);
}

public static void SetLongPressCommandParameter(BindableObject bindable, object value)
{
    bindable.SetValue(LongPressCommandParameterProperty, value);
}

public static object GetLongPressCommandParameter(BindableObject bindable)
{
    return bindable.GetValue(LongPressCommandParameterProperty);
}

private static void OnLongPressCommandParameterChanged(BindableObject bindable, object oldValue,
    object newValue)
{
    AttachEffect(bindable);
}

public static readonly BindableProperty NormalColorProperty = BindableProperty.CreateAttached(
    "NormalColor",
    typeof(Color),
    typeof(TouchRippleEffect),
    Color.White,
    propertyChanged: OnNormalColorChanged
);

public static void SetNormalColor(BindableObject bindable, Color value)
{
    bindable.SetValue(NormalColorProperty, value);
}

public static Color GetNormalColor(BindableObject bindable)
{
    return (Color) bindable.GetValue(NormalColorProperty);
}

static void OnNormalColorChanged(BindableObject bindable, object oldValue, object newValue)
{
    AttachEffect(bindable);
}

public static readonly BindableProperty RippleColorProperty = BindableProperty.CreateAttached(
    "RippleColor",
    typeof(Color),
    typeof(TouchRippleEffect),
    Color.LightSlateGray,
    propertyChanged: OnRippleColorChanged
);

public static void SetRippleColor(BindableObject bindable, Color value)
{
    bindable.SetValue(RippleColorProperty, value);
}

public static Color GetRippleColor(BindableObject bindable)
{
    return (Color) bindable.GetValue(RippleColorProperty);
}

static void OnRippleColorChanged(BindableObject bindable, object oldValue, object newValue)
{
    AttachEffect(bindable);
}

public static readonly BindableProperty SelectedColorProperty = BindableProperty.CreateAttached(
    "SelectedColor",
    typeof(Color),
    typeof(TouchRippleEffect),
    Color.LightGreen,
    propertyChanged: OnSelectedColorChanged
);

public static void SetSelectedColor(BindableObject bindable, Color value)
{
    bindable.SetValue(SelectedColorProperty, value);
}

public static Color GetSelectedColor(BindableObject bindable)
{
    return (Color) bindable.GetValue(SelectedColorProperty);
}

static void OnSelectedColorChanged(BindableObject bindable, object oldValue, object newValue)
{
    AttachEffect(bindable);
}

static void AttachEffect(BindableObject bindable)
{
    if (bindable is not VisualElement view || view.Effects.OfType<TouchRippleEffect>().Any())
        return;

    view.Effects.Add(new TouchRippleEffect());
}

Notice we're are attaching the Effect to the view if one of the properties change, this is so we can use the Effect directly on the control without having to add it to the collection of the control.

Adding the PlatformEffect in the Android project

Now that the Effect is ready, let's go to our Android project and add a PlatformEffect:

public class PlatformTouchRippleEffect : PlatformEffect
{
  public bool IsDisposed => (Container as IVisualElementRenderer)?.Element == null;
}

Remember to export the effect:

[assembly: ExportEffect(typeof(PlatformTouchRippleEffect), nameof(TouchRippleEffect))]

If this is the first effect in your solution, then you must also add the ResolutionGroupName:

[assembly: ResolutionGroupName("companyName")]

OnAttached logic

When the effect is attached, we simply need to subscribe to the OnTouch and LongClick events so we can execute the respective commands:

protected override void OnAttached()
{
    if (Container != null)
    {
        SetBackgroundDrawables();
        Container.HapticFeedbackEnabled = false;
        var command = TouchRippleEffect.GetCommand(Element);
        if (command != null)
        {
            Container.Clickable = true;
            Container.Focusable = false;
            Container.Touch += OnTouch;
        }

        var longPressCommand = TouchRippleEffect.GetLongPressCommand(Element);
        if (longPressCommand != null)
        {
            Container.LongClickable = true;
            Container.LongClick += ContainerOnLongClick;
        }
    }
}

OnDetached

We simply unsubscribe from the events to prevent memory leaks:

protected override void OnDetached()
{
    if (IsDisposed) return;

    Container.Touch -= OnTouch;
    Container.LongClick -= ContainerOnLongClick;
}

Adding background drawables

In Android, in order to change the color applied when the view state changes, you must set the background (or foreground) with a drawable that will be used on certain state.

We are going to add a drawable to the background for each of the states of our properties (Normal, Pressed (ripple) and Selected) with a StateListDrawable:

private void SetBackgroundDrawables()
{
    var normalColor = TouchRippleEffect.GetNormalColor(Element).ToAndroid();
    var rippleColor = TouchRippleEffect.GetRippleColor(Element).ToAndroid();
    var selectedColor = TouchRippleEffect.GetSelectedColor(Element).ToAndroid();

    var stateList = new StateListDrawable();
    var normalDrawable = new GradientDrawable(GradientDrawable.Orientation.LeftRight,
        new int[] {normalColor, normalColor});
    var rippleDrawable = new RippleDrawable(ColorStateList.ValueOf(rippleColor), _normalDrawable, null);
    var activatedDrawable = new GradientDrawable(GradientDrawable.Orientation.LeftRight,
        new int[] {selectedColor, selectedColor});

    stateList.AddState(new[] {Android.Resource.Attribute.Enabled}, normalDrawable);
    stateList.AddState(new[] {Android.Resource.Attribute.StatePressed}, rippleDrawable);
    stateList.AddState(new[] {Android.Resource.Attribute.StateActivated}, activatedDrawable);

    Container.SetBackground(stateList);
}

Handling user touch

Since we are going to handle the touch interactions ourselves, let's add some flags to know the current state of the touch event:

private float _prevY;
private bool _hasMoved;
private bool _isLongPress;

Handling click event

The first thing we need is to save the current action and position when the touch interaction starts:

Touch start

private void OnTouch(object sender, AView.TouchEventArgs e)
{
    e.Handled = false;
    var currentY = e.Event.GetY();

    var action = e.Event?.Action;
    switch (action)
    {
        case MotionEventActions.Down:
            _prevY = e.Event.GetY();
            break;
    }
}

Touch finished

Now, we need to handle each case when the user finishes the touch, moves the finger, or the touch event is cancelled. First let's see the finish and cancel cases:

case MotionEventActions.Up:
{
    // The TouchEvent is called again after a long click
    // here we ensure the ClickCommand is only called 
    // when not doing a long click
    if (!_isLongPress)
    {
        if (_hasMoved) return;
        if (Container.Activated) Container.Activated = false;
        var command = TouchRippleEffect.GetCommand(Element);
        var param = TouchRippleEffect.GetCommandParameter(Element);
        command?.Execute(param);
    }

    // If a long click was fired, set the flag to false
    // so we can correctly register a single click again
    _isLongPress = false;
    _hasMoved = false;
    break;
}

case MotionEventActions.Cancel:
{
    _isLongPress = false;
    _hasMoved = false;
    break;
}

Touch move

Now, the tricky part is the Move action.
It happened that sometimes the current view would get the selected color if you touched it and then scrolled, and would lose the state if it was selected.

case MotionEventActions.Move:
{
    var diffY = currentY - _prevY;
    var absolute = Math.Abs(diffY);
    if (absolute > 8) _hasMoved = true;
    if (_hasMoved && Container.Background is StateListDrawable drawable)
    {
        // Keep the NormalColor on scroll
        if (!Container.Activated)
        {
            drawable.SetState(new[] {Android.Resource.Attribute.Enabled});
            drawable.JumpToCurrentState();
        }
        else
        {
            // Keep the SelectedColor when scrolling and the touched view is a selected item
            drawable.SetState(new[] {Android.Resource.Attribute.StateActivated});
            drawable.JumpToCurrentState();
        }
    }

    break;
}

I had to check the Container.Activated state to see if the item was selected to handle each case. This flag is set in the long click event.

Handling long click

In the long click event, we will set the _isLongPress flag to true, since the Touch event fires again after the long click. We will also notify the user by performing the haptic feedback.

private void ContainerOnLongClick(object sender, AView.LongClickEventArgs e)
{
    // Notify to the user that the item was selected
    (sender as AView)?.PerformHapticFeedback(FeedbackConstants.LongPress);

    // If item is currently selected, disable long click
    if (_hasMoved)
    {
        _hasMoved = false;
        return;
    }

    var command = TouchRippleEffect.GetLongPressCommand(Element);
    var param = TouchRippleEffect.GetLongPressCommandParameter(Element);
    command?.Execute(param);
    _isLongPress = true;

    // Set the Container.Activated and the selected color drawable
    // so we know the item is selected on a next touch
    if (Container.Background is StateListDrawable drawable)
    {
        drawable.SetState(new[] {Android.Resource.Attribute.StateActivated});
        Container.Activated = true;
    }

    // Bubble up the event to avoid touch errors 
    e.Handled = false;
    _hasMoved = false;
}

Using the ripple effect

With all that in place, now it's time to put our effect to good use so let's create a simple app to see it in action.

The model:

public class TouchEffectModel
    {
        public TouchEffectModel(string labelText)
        {
            LabelText = labelText;
        }

        public string LabelText { get; set; }
    }

The ViewModel is a simple ViewModel with two command and a collection, I'll omit the Commands for brevity:

private ICollection<TouchEffectModel> _collection;
public ICollection<TouchEffectModel> Collection
{
    get => _collection;
    set
    {
        _collection = value;
        RaisePropertyChanged();
    }
}

void InitializeCollection()
{
    if (_collection is null) _collection = new List<TouchEffectModel>();
    _collection.Add(new TouchEffectModel("I'm item 1"));
    _collection.Add(new TouchEffectModel("I'm item 2"));
    _collection.Add(new TouchEffectModel("I'm item 3"));
    _collection.Add(new TouchEffectModel("I'm item 4"));
    _collection.Add(new TouchEffectModel("I'm item 5"));
}

The View:

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:viewModels="clr-namespace:XamarinSamples.ViewModels;assembly=XamarinSamples"
             xmlns:effects="clr-namespace:XamarinSamples.Effects;assembly=XamarinSamples"
             x:Class="XamarinSamples.Views.TouchEffectView">

    <ContentPage.BindingContext>
        <viewModels:TouchEffectViewModel x:Key="ViewModel" />
    </ContentPage.BindingContext>

    <ContentPage.Content>        
        <CollectionView x:Name="CollectionView"
                        ItemsSource="{Binding Collection}">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <StackLayout Orientation="Horizontal" Margin="10"
                                 effects:TouchRippleEffect.Command="{Binding BindingContext.ClickCommand, Source={x:Reference CollectionView}}"
                                 effects:TouchRippleEffect.LongPressCommand="{Binding BindingContext.LongClickCommand, Source={x:Reference CollectionView}}">
                        <Label HorizontalOptions="CenterAndExpand" 
                               VerticalOptions="Center"
                               InputTransparent="True"
                               Text="{Binding LabelText}" FontSize="16"
                               Margin="{x:OnPlatform Android='5,0,0,-13', iOS='0,0,0,-15'}" />
                        <Switch InputTransparent="False"
                                HorizontalOptions="End" VerticalOptions="Center"
                                Margin="{x:OnPlatform Android='0,0,5,0', iOS='0,0,5,0'}" />                        
                    </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </ContentPage.Content>
</ContentPage>

Now we can see our effect in action:

Repository

The code for the article is at this repo.

jpozo20 / xamarin-samples

Xamarin code for posts published at dev.to/jefrypozo

xamarin-samples

Xamarin code for posts published at dev.to/jefrypozo

View on GitHub

Conclusions

Though in general Xamarin works really well out of the box, more often than not I've found that if you want niceties in Xamarin.Forms you have to put your hands at the native platforms for certain features.

In the next entry I'll be talking about adding a contextual menu for multiple selection in the toolbar when using a CollectionView, like the menu that Whatsapp or Telegram display when you select a chat or a message.

TabPal : My first Chrome extension

Jefry Pozo — Fri, 02 Jul 2021 19:10:14 +0000

I'm always on the look to extend or add new features to the tools that I use. This time I decided to make a simple extension for Chrome after getting tired of the way it handles the next active tab when you close a tab.

Current features

For now, the extension simply allows you to choose whether to select the left or the right tab after you close a tab, as well as adding a few shorcuts for some features you only get by right clicking a tab.

Shorcuts:

Alt + Shift + T: Open a new tab to the right
Alt + Shift + P: Pin selected tabs
Alt + Shift + M: Mute selected tabs (the tab, not the whole site)
Alt + Shift + S: Go to the first tab playing sounds

Options page:

Next steps

If you find this interesting or useful, I'd like you to give it a try and tell me what you think about.

In the future I plan to add more interesting features such as choosing the last active tab from the same domain after closing a tab or the last active, if there is none from the same domain. Useful when you go back and forth between a set of tabs.

Link to the extension: TabPal

Enhancing Chrome Extension developer experience with CRA (create-react-app)

Jefry Pozo — Thu, 24 Jun 2021 16:00:42 +0000

Introduction

Hello again, I hope all of you are doing okay and getting vaccinated so we can get rid of this effing pandemic.

Recently I've been coding a Chrome extension to scratch my itch with the way Chrome switches to the next tab when you close a tab and here I'll be documenting some useful things I learned along the way.

I won't delve into the basics of how a Chrome extension works, so you if you're new to it you can read these posts that explain it in a better way:

Creating aliases for node
Creating browser extension project with CRA
Add sourcemaps during development
Add eslintrc to change linting rules
Configure project for stagin/release*

Creating aliases for node

If you're like me, you don't like typing the same commands again and again and again. Since we're going to use npm to install the packages, I have some aliases for the most used commands.

You can install these aliases by just running the command in your terminal, but they'll be lost once that session ends. To make them permanent, add them to your ~/.bashrc or ~/.zshrc profile.

To install a package globally:

alias npi='npm i -g'

To install and save a package as a dev dependency:

alias npd='npm i -D'

To uninstall a package:

alias npu='npm un'

To run a custom script in your package.json:

alias npr='npm run'

To reload the profile from the terminal I use this command (for zsh):

alias ssz='source ~/.zshrc'

Creating browser extension project with CRA

We're going to create the project using the create-react-extension script:

npx create-react-app --scripts-version react-browser-extension-scripts --template browser-extension <project name>

This will configure the tools and file structure needed for the extension, namely the .html files (options, popup) as well their javascript files and the manifest.json.

You can run the extension with npm start then, once it builds you can go to your browser and open the chrome://extensions page. Once there you can click the "Developer mode" switch, click the "Load unpacked" button and select the dev folder generated by CRA.

Configuring the project to enhance the experience

Now that the extension is installed and you can test it, it's time to configure the project to suit our needs.

We are going to:

Install react-app-rewired
Configure VSCode and Webpack for alias support
Configure react-devtools
Add sourcemaps during development
Add eslintrc to change linting rules
Configure project for release

Installing and configuring react-app-rewired

Since CRA abstracts all the configuration, webpack and whatnot from you, if you want to modify or tweak a setting you need to eject the project and this is an irreversible operation. And once you do, you need to maintain the configuration and keep it updated by yourself, so this isn't recommended.

Enter react-app-rewired. What this package does is it allows you to hook into the Webpack config process so you can change settings, add loaders or plugins, and so on. It's like having all the pros of ejecting (mainly, access to the webpack.config.js) without actually ejecting.

Install the package by running npd react-app-rewired if you're using my alias from the previous section, otherwise:

npm install react-app-rewired --save-dev

Now you need to add a config-overrides.js at the root of your project (i.e: at the same level as the node_modules and src folders) where we will put our custom configuration.

Finally, change the scripts section of your package.json to use react-app-rewired instead of the react-scripts package:

/* in package.json */
"scripts": {
  "start": "react-app-rewired start",  
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

Configure VSCode and Webpack for alias support

Now that react-app-rewired is configured, let's start hacking away.

Configuring VSCode for alias support

If you have a deep components structure, sometimes you may get tired of writing ./MyComponent or ../../MyParentComponent. VSCode has support for using aliases, so you can import your package with an alias, get intellisense and go to definition:

import MyComponent from "@Components/MyComponent"

In order to do so, add a jsconfig.json in the src folder of your project, which will tell the TypeScript Language Server from VSCode to do some nice things for us:

{
    "compilerOptions": {
        "baseUrl": ".",
        "module": "commonJS",
        "target": "es6",
        "sourceMap": true,
        "paths": {
            "@Config/*": ["config/*"],
            "@Components/*": ["components/*"],
            "@Containers/*": ["containers/*"],
            "@Handlers/*": ["handlers/*"],
            "@Utils/*": ["utils/*"],
            "@Style": ["style/style.js"]
        }
    },
    "typeAcquisition": {
        "include": ["chrome"]
    },
    "include": ["./**/*"],
    "exclude": ["node_modules"]
}

You can read about the compilerOptions here, but have a brief description of the most important ones:

baseUrl indicates the base path used for the paths property, the src folder in this case
paths is an array of in which you will configure how aliases are resolved when importing
typeAcquisition is required if you want intellisense for some packages, such as chrome apis in this case
include and exclude tells TypeScript which files are to be used for resolving and compiling

In order for the changes to take effect, you need to restart VSCode.

Configuring Webpack for alias support

Once the jsconfig.json is configured, you can import your packages using the alias import and get intellisense from VSCode as well as clicking F12 to go the file definition. But since webpack doesn't know about those alias, the project will not compile.

Let's modify our config-overrides.js to tell webpack about those aliases.

const path = require("path");

module.exports = function override(config) {
    config.resolve = {
        ...config.resolve,
        alias: {
            ...config.alias,
            "@Config": path.resolve(__dirname, "src/config"),
            "@Components": path.resolve(__dirname, "src/components"),
            "@Containers": path.resolve(__dirname, "src/containers"),           
            "@Utils": path.resolve(__dirname, "src/utils"),
            "@Style$": path.resolve(__dirname, "src/style/style.js"),
        },
    };

    return config;
};

What we are doing is getting a config object from the webpack.config.js used by react when compiling and running the app, and appending our custom aliases to the aliases collection in case any exists. Now you can save the file and run npm start in the console and you can start using your aliases.

Note:
Most aliases allow you to import by writing

import MyFileInsideTheFolder from "@MyAliasName/MyFileInsideTheFolder"

but if you want to import a specific file you can append '$' at the end and include the full path of the file as is seen with the styles.js file.
And then you can import file like this:

import Styles from "@Styles"

Configure react-devtools

Due to Chrome security policies, other extensions cannot access the code or markup of an extension. So if you want to use the React dev-tools with your extension, you need to install the stand-alone version of the tool:

npx react-devtools

This will install and run the dev-tools in a new Chrome frame, which is a web socket that will be listening in the port 8097.
But to actually use it, we need to do two things: add the script to the relevant html page and tell chrome to connect to it.

Copy the script and paste in the head of the html you want to use, in my case it's public/options.html:

<script src="http://localhost:8097"></script>

Now go into the public/manifest.json and paste this line at the end:

"content_security_policy": "script-src 'self' 'unsafe-eval' http://localhost:8097; object-src 'self'; connect-src ws://localhost:4000 ws://localhost:8097"

This line tells Chrome a few things related to our environment:

script-src refers to the origin of the scripts to be used by the extension
- self tells to load scripts from the same origin
- unsafe-eval tells to allow code to be run by eval (this is used by webpack to generate the sourcemaps)
- http://localhost:8097 allow scripts coming from the React dev-tools
connect-src tells Chrome to allow some protocols (like websockets in this case) to connect to our app
- http://localhost:8097 again, allow the React dev-tools to connect to our extension
- ws://localhost:4000 this is used by webpack for the hot reload

You can read more about the Content Security Policy here.

Add sourcemaps during development

By default, webpack only emits the bundled files to the dev folder, in order to debug your code directly from chrome we can tel webpack to generate the source map from our code.

To do this, go to the config-overrides.js and add this line before returning the config:

config.devtool = "eval-source-map";

This will make our build slower, but will allow you to see you full source code in the Chrome dev tools.
More information about the different options for the source map generation here.

Add eslintrc to change linting rules

Sometimes ESLint complains about things it could ignore, like discards not being used or a parameter not being used, among other things. If you're a bit obsessive and don't like those complaints, you can add a .eslintrc.js (it may be a json, js or yaml) at the root of your project to configure the rules and behavior of ESLint.

if you haven't done so, install with:

npm install --save-dev eslint

Then run with npx to fire the assistant:

npx eslint --init

Once you're done configuring the options, ESLint will generate the .eslintrc for you (or you can manually add it if you already had ESLint installed).

To change a rule, simply add the rule to the rules array with the desired options. In my case, I modified the no-unused-vars to ignore discards (_):

rules: {
        "no-unused-vars": [
            "warn",
            {
                vars: "all",
                args: "after-used",
                ignoreRestSiblings: false,
                varsIgnorePattern: "_",
                argsIgnorePattern: "_",
            },
        ],

You can see a list of all the rules here.

Configure project for stagin/release

Finally, once you're ready to build and publish your app, we need to tell webpack to make some changes. I use a lot of console.log() during development to keep track of things like windows or tabs id, but I want them removed from the production script.

To do this, we're going to:

Add the customize-cra package to allow the injection of plugins and loaders
Add the transform-remove-console babel plugin to remove all console.* calls from our code
Disable the sourcemap generation

Install the packages with

npm install --save-dev customize-cra babel-plugin-transform-remove-console

Now, for customize-cra to work we need to modify the config-overrides.js file once again. The override method from customize-cra receives a list of functions, so we need to change the signature like this:

const path = require("path");
const { override, addBabelPlugin } = require("customize-cra");

module.exports = override(
);

Inside, we will tell it to load the transform-remove-console plugin:

const path = require("path");
const { override, addBabelPlugin } = require("customize-cra");

module.exports = override(
  addBabelPlugin("transform-remove-console")
);

Now, we are going to move the code we had before to a new function and add a call to it as part of the override list:

const path = require("path");
const { override, addBabelPlugin } = require("customize-cra");

module.exports = override(
  addBabelPlugin("transform-remove-console"), 
  (config, env) => customOverride(config, env)
);

function customOverride(config, env) {
    config.devtool = "eval-source-map";
    config.resolve = {
        ...config.resolve,
        alias: {
            ...config.alias,
            "@Config": path.resolve(__dirname, "src/config"),
            "@Components": path.resolve(__dirname, "src/components"),
            "@Containers": path.resolve(__dirname, "src/containers"),
            "@Handlers": path.resolve(__dirname, "src/handlers"),
            "@Utils": path.resolve(__dirname, "src/utils"),
            "@Style$": path.resolve(__dirname, "src/style/style.js"),
        },
    };  

    return config;
}

Finally, we need to tell webpack to remove the sourcemaps when we are building for an environment that isn't development, so our final config-overrides.js will look like this:

const path = require("path");
const { override, addBabelPlugin } = require("customize-cra");

module.exports = override(
  addBabelPlugin("transform-remove-console"),
  (config, env) => customOverride(config, env)
);

function customOverride(config, env) {
    config.devtool = "eval-source-map";
    config.resolve = {
        ...config.resolve,
        alias: {
            ...config.alias,
            "@Config": path.resolve(__dirname, "src/config"),
            "@Components": path.resolve(__dirname, "src/components"),
            "@Containers": path.resolve(__dirname, "src/containers"),
            "@Handlers": path.resolve(__dirname, "src/handlers"),
            "@Utils": path.resolve(__dirname, "src/utils"),
            "@Style$": path.resolve(__dirname, "src/style/style.js"),
        },
    };

    if (env !== "development") {
        config.devtool = false;
    }

    return config;
}

Conclusion

I spent many nights fighting with the packages until I finally got it working the way I wanted, so I hope this article is useful to you. Stay safe.

Creating an outlined entry in Xamarin.Forms

Jefry Pozo — Tue, 02 Mar 2021 01:38:56 +0000

As you may know, in Xamarin.Forms entries are styled with Google's Material Design and the normal iOS control are used on iPhone. In a project I'm coding I wanted to create an Entry with the outlined style (border and floating label) from Material Design but currently, there is no default way to render an entry with this style.

This time we are going to create a custom control to simulate this behavior.

Creating custom renderer

In order to create an outlined entry as per the Material Design, we need to customize the Entry and remove its borders in both platforms, so we are going to use a custom renderer based on the Entry control. We are going to name the control BorderlessEntry.

namespace XamarinSamples.Views.Controls
{
    public class BorderlessEntry : Entry
    {

    }
}

Then we are going to crear a renderer for each platform.

[assembly: ExportRenderer(typeof(BorderlessEntry), typeof(BorderlessEntryRenderer))]
namespace XamarinSamples.Droid.UI.Renderers
{
    public class BorderlessEntryRenderer : EntryRenderer
    {
        public BorderlessEntryRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged(e);

            //Configure native control (TextBox)
            if(Control != null)
            {
                Control.Background = null;
            }

            // Configure Entry properties
            if(e.NewElement != null)
            {

            }
        }
    }
}

[assembly: ExportRenderer(typeof(BorderlessEntry), typeof(BorderlessEntryRenderer))]
namespace XamarinSamples.iOS.UI.Renderers
{
    public class BorderlessEntryRenderer : EntryRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged(e);

            //Configure Native control (UITextField)
            if (Control != null)
            {
                Control.Layer.BorderWidth = 0;
                Control.BorderStyle = UIKit.UITextBorderStyle.None;
            }
        }
    }
}

Adding custom contol with the BorderlessEntry

Once we have the Entry without the borders, it's time to create our custom control that will host this Entry. For ease of use of the control we are going to add some bindable properties so you can configure the control directly from XAML. These properties will be Text, Placeholder, PlaceholderColor and BorderColor.

namespace XamarinSamples.Views.Controls
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class EntryOutlined : ContentPage
    {
        public EntryOutlined()
        {
            InitializeComponent();
            this.TextBox.PlaceholderColor = PlaceholderColor;
        }

        public static readonly BindableProperty TextProperty =
            BindableProperty.Create(nameof(Text), typeof(string), typeof(EntryOutlined), null);

        public string Text
        {
            get { return (string)GetValue(TextProperty); }
            set { SetValue(TextProperty, value); }
        }

        public static readonly BindableProperty PlaceholderProperty =
            BindableProperty.Create(nameof(Placeholder), typeof(string), typeof(EntryOutlined), null);

        public string Placeholder
        {
            get { return (string)GetValue(PlaceholderProperty); }
            set { SetValue(PlaceholderProperty, value); }
        }

        public static readonly BindableProperty PlaceholderColorProperty =
            BindableProperty.Create(nameof(PlaceholderColor), typeof(Color), typeof(EntryOutlined), Color.Blue);

        public Color PlaceholderColor
        {
            get { return (Color)GetValue(PlaceholderColorProperty); }
            set { SetValue(PlaceholderColorProperty, value); }
        }

        public static readonly BindableProperty BorderColorProperty =
            BindableProperty.Create(nameof(BorderColor), typeof(Color), typeof(EntryOutlined), Color.Blue);

        public Color BorderColor
        {
            get { return (Color)GetValue(BorderColorProperty); }
            set { SetValue(BorderColorProperty, value); }
        }

    }
}

<?xml version="1.0" encoding="utf-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamarinSamples.Views.Controls.EntryOutlined"
             xmlns:controls="clr-namespace:XamarinSamples.Views.Controls;assembly=XamarinSamples"
             Margin="{OnPlatform Android='3,0,3,5', iOS='3,0,3,5'}"
             x:Name="this">
    <ContentView.Content>
        <StackLayout>
            <Grid>
                <Frame HasShadow="False"
                       x:Name="EntryFrame"
                       BorderColor="{Binding BorderColor, Source={x:Reference this}}"
                       CornerRadius="{OnPlatform Android=3}"
                       Padding="{OnPlatform Android='5,0,5,0', iOS='8,0,8,0'}"
                       Margin="{OnPlatform Android='0,0,0,0', iOS='0,0,0,0'}" />

                <Label x:Name="PlaceHolderLabel"
                       BackgroundColor="White" HorizontalOptions="Start"
                       TextColor="{Binding PlaceholderColor, Source={Reference this}}"
                       Text="{Binding Placeholder,Source={x:Reference this}}"
                       Margin="10,0,0,0"
                       VerticalOptions="Center" />

                <controls:BorderlessEntry
                    HeightRequest="{OnPlatform iOS=40}"
                    x:Name="TextBox" VerticalOptions="FillAndExpand"
                    Text="{Binding Text,Source={x:Reference this},Mode=TwoWay}"
                    Margin="10,0,0,0"
                    />
            </Grid>
        </StackLayout>
    </ContentView.Content>
</ContentView>

Now we are going to add the control to a simple page and it should look like this:

Translating placeholder into and out of the entry

Now that we have our control in place, it's time to move the placeholder into the top of the border when the Entry is focused and move it back to the Entry when focus is lost and the text is empty. So we are going to add a handler for the Focused and Unfocused events.

async void TextBox_Focused(object sender, FocusEventArgs e)
{
    await TranslateLabelToTitle();
}

async void TextBox_Unfocused(object sender, FocusEventArgs e)
{
    await TranslateLabelToPlaceHolder();
}

async Task TranslateLabelToTitle()
{
    if (string.IsNullOrEmpty(this.Text))
    {
        var placeHolder = this.PlaceHolderLabel;
        var distance = GetPlaceholderDistance(placeHolder);
        await placeHolder.TranslateTo(0, -distance);
    }

}

async Task TranslateLabelToPlaceHolder()
{
    if(string.IsNullOrEmpty(this.Text))
    {
        await this.PlaceHolderLabel.TranslateTo(0, 0);
    }
}

double GetPlaceholderDistance(Label control)
{
    // In Android we need to move the label slightly up so it's centered in the border frame.
    var distance = 0d;
    if(Device.RuntimePlatform == Device.iOS) distance = 0;
    else distance = 5;

    distance = control.Height + distance;
    return distance;
}

Now let's add these events to our control and test again our control in runtime.

<controls:BorderlessEntry
    HeightRequest="{OnPlatform iOS=40}"
    x:Name="TextBox" VerticalOptions="FillAndExpand"
    Text="{Binding Text,Source={x:Reference this},Mode=TwoWay}"
    Margin="10,0,0,0"
    Focused="TextBox_Focused"
    Unfocused="TextBox_Unfocused"
    />

With these changes, our control should behave like this:

Adding text changed event for consumers

Finally, since we'd like to be notified when the text changes we're going to add an event to the EntryOutlined and wire it to the inner Entry

public event EventHandler<TextChangedEventArgs> TextChanged;

public virtual void OnTextChanged(System.Object sender, Xamarin.Forms.TextChangedEventArgs e)
{
    TextChanged?.Invoke(this, e);
}

<controls:BorderlessEntry
    HeightRequest="{OnPlatform iOS=40}"
    x:Name="TextBox" VerticalOptions="FillAndExpand"
    Text="{Binding Text,Source={x:Reference this},Mode=TwoWay}"
    Margin="10,0,0,0"
    Focused="TextBox_Focused"
    Unfocused="TextBox_Unfocused"
    TextChanged="OnTextChanged" />

And lastly, we can use the control from our page like this

<controls:EntryOutlined
            Placeholder="I'm an entry"
            BorderColor="Blue"
            PlaceholderColor="Red"
            TextChanged="EntryOutlined_OnTextChanged" />

Repository

Some people have asked me to provide a repository. Here is a basic repo with the code from the post.

jpozo20 / xamarin-samples

Xamarin code for posts published at dev.to/jefrypozo

xamarin-samples

Xamarin code for posts published at dev.to/jefrypozo

View on GitHub

Conclusions

This time we saw a simple and easy way to create an outlined entry based on Google's Material Design. Thankfully, the folks from Xamarin.Forms have done a very nice work and we just need to do some simple things to achieve the desired result and in the next entry I'll show you how to add a label underneath the entry for validation purposes.

Stay tuned!

Open multiple images from Gallery with Xamarin.Forms on Android

Jefry Pozo — Fri, 26 Feb 2021 00:11:30 +0000

If you've ever developed for Android, be it native with Java/Kotlin or using a cross-platform framework like Xamarin, you may have noticed the process for getting a file from the user storage (an image from the Gallery in this case) is a bit complicated. You need to launch an Intent, then await its Result and handle any ClipData associated with it.

Fortunately for us Xamarin developers, the Xamarin team and the community have created the Xamarin Essentials library and one of its utilities is the MediaPicker, which abstracts from you the logic for taking a picture with the camera or getting an image from the storage. You can read the documentation for the Media picker here.

Unfortunately, the MediaPicker from the Xamarin Essentials only supports to take or load one image, so if you need to get multiple pictures you need to roll your own. In this post, I'll show you how do it.

Configuring permissions needed to load files from storage

In order to access the user's storage, you need to tell Android you need the READ_EXTERNAL_STORAGE permission. In Xamarin.Android, there are two ways to do so:

1) By adding an attribute in the Android project's AssemblyInfo.cs

[assembly: UsesPermission(Android.Manifest.Permission.ReadExternalStorage)]

2) By adding the request in the AndroidManifest.xml

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

Adding classes for the PhoneMediaPicker service

In order to open the file picker, we need to create an interface in our shared project so we can use Dependency Injection and run the corresponding implementation according to the runtime platform.

public interface IPhoneMediaPicker
{
    Task<IEnumerable<MediaFile>> PickPhotosAsync(string intentTitle);
}

Then we create an implementation of this interface in our Android project:

public class PhoneMediaPicker : IPhoneMediaPicker
{
}

And the class we'll be using as our model containing the image:

public class MediaFile
{
    public string MimeType { get; set; }
    public Stream FileStream { get; set; }
}

Implementing the IPhoneMediaPicker

Now, it's time to roll up our shirt's sleeves and getting our hands dirty and start coding the implementation.

Ensure permission and launch intent

Even though we configured the READ_EXTERNAL_STORAGE permission, since Android 6 (API Level 23) you need the user to approve the permission at runtime. Thus, before launching the intent we're gonna use the Xamarin.Essentials Permissions API to show the request.

We're gonna need a constant to know the request is coming from our service and since our service is going to launch an intent and it request will be fulfilled in another thread, we need a way to hold on to the async task while the process is complete. For this, we are going to use a TaskCompletionSource.
Then we are going to add a method for handling the ActivityResult from the MainActivity.

Then, the code in our IPhoneMediaService should be like this.

public class PhoneMediaPicker : IPhoneMediaPicker
{
    /// We use this constant on the MainActivity to know the intent was launched by our MediaPicker 
    private const int MediaPickerRequest = 2001;
    private TaskCompletionSource<IEnumerable<MediaFile>> _completionSource;


      public async Task<IEnumerable<MediaFile>> PickPhotosAsync(string title)
      {
          var results = new List<MediaFile>();
          var permissionStatus = await Permissions.RequestAsync<Permissions.StorageRead>();

          if (permissionStatus == PermissionStatus.Denied)
          {
              return results;
          }

          var intent = new Intent(Intent.ActionPick);
          intent.PutExtra(Intent.ExtraAllowMultiple, true);
          intent.SetType("image/*");

          string pickerTitle = string.IsNullOrWhiteSpace(title) ? "Select pictures" : title;
          var pickerIntent = Intent.CreateChooser(intent, title);
          try
          {
              var intentChooser = Intent.CreateChooser(pickerIntent, pickerTitle);
              _completionSource = new TaskCompletionSource<IEnumerable<MediaFile>>();
              var mainActivity = Platform.CurrentActivity as MainActivity;
              mainActivity.ActivityResult += OnActivityResult;
             mainActivity.StartActivityForResult(intentChooser, RequestMediaPicker);

              return await _completionSource.Task;
          }
          catch (Exception ex)
          {
              return results;
          }
      }

    public static void OnActivityResult(Result resultCode, Intent data)
    {
    }
}

Get Intent result in MainActivity

As we are going to use the MainActivity for handling the intent result, we need to override the OnActivityResult method there and call this event that were are going to subscribe to in the PhoneMediaPicker.

public event Action<int, Result, Intent> ActivityResult;

protected override void OnActivityResult(int requestCode, Result resultCode, Intent data)
{
    base.OnActivityResult(requestCode, resultCode, data);
    if (ActivityResult != null)
    {
        ActivityResult(requestCode,resultCode, data);
    }            
}

Reading ClipData and Uri from the Intent

Once we get the result from the Intent, we need to iterate over the ClipData that comes from the Intent (if there are multiple images selected) or load the file from the Uri in the Data field from the Intent.

private void OnActivityResult(int requestCode, Result resultCode, Intent data)
        {
            if (data != null)
            {
                var fileResults = new Collection<MediaFile>();
                if (resultCode == Result.Ok)
                {
                    ClipData clipData = data.ClipData;
                    if (clipData != null && clipData.ItemCount > 0)
                    {
                        for (int i = 0; i < clipData.ItemCount; i++)
                        {
                            var item = clipData.GetItemAt(i);
                            var result = GetFileFromUri(item.Uri);
                            if (result != null)
                            {
                                fileResults.Add(result);
                            }
                        }
                    }
                    else
                    {
                        Uri fileUri = data.Data;
                        var result = GetFileFromUri(fileUri);
                        if (result != null)
                        {
                            fileResults.Add(result);
                        }
                    }
                }

                _completionSource?.TrySetResult(fileResults);
            }
                var mainActivity = Platform.CurrentActivity as MainActivity;
                mainActivity.ActivityResult -= OnActivityResult;
        }

Read the file from the storage and return the MediaFile

The code for reading a file from the storage in Android is a bit needlessly complex. The information is like a database (MediaStore) that you can query and we need to follow a certain procedure in order to get the file from the Uri, like this:

1) Get the ContentResolver from the current activity
2) Make a string projection with the columns (in this case we need the Id and Data columns from the MediaStore)
3) Call the Query method from the ContentResolver and pass the Uri from the file to get a Cursor
4) If the Cursor has information, then query the Id column and get its string data (which contains the actual path of the file)
5) If the Cursor doesn't have the information, then we need to try and get the file id from the DocumentsContract and make a new projection with this id
6) Once we have the Id we need to get a new Cursor using the projection and InternalContentUri or the ExternalContentUri if the former fails
7) Finally, query the data column get and its string Data which should contain the actual file path for you to use

private MediaFile GetFileFromLegacyUri(Uri uri)
{
    MediaFile result = null;

    ICursor imageCursor = null;
    try

    {
        var contentResolver = Platform.CurrentActivity.ContentResolver;
        const string idColumn = MediaStore.Images.ImageColumns.Id;
        const string dataColumn = MediaStore.Images.ImageColumns.Data;
        var internalContentUri = MediaStore.Images.Media.InternalContentUri;
        var externalContentUri = MediaStore.Images.Media.ExternalContentUri;

        result = new MediaFile();
        var projection = new string[] {dataColumn};
        imageCursor = contentResolver.Query(uri, null, null, null, null,null);
        if (imageCursor != null)
        {
            imageCursor.MoveToFirst();
            int dataIndex = imageCursor.GetColumnIndex(dataColumn);
            if (dataIndex != -1)
            {
                var mime = contentResolver.GetType(uri);
                var idIndex = imageCursor.GetColumnIndexOrThrow(idColumn);
                var path = imageCursor.GetString(idIndex);

                result.MimeType = mime;
                result.PathUri = new System.Uri(path);
                result.FileStream = System.IO.File.OpenRead(path);
            }
            else
            {
                var documentId = DocumentsContract.GetDocumentId(uri);
                var pictureId = documentId.Contains(":") ? documentId.Split(":")[1] : documentId;
                var whereSelection = idColumn + "=?";
                imageCursor = contentResolver.Query(internalContentUri, projection, whereSelection,
                    new string[] {pictureId}, null,null);
                if (imageCursor.Count == 0)
                {
                    imageCursor = contentResolver.Query(externalContentUri, projection, whereSelection,
                        new string[] {pictureId}, null, null);
                }


                var columnData = imageCursor.GetColumnIndexOrThrow(dataColumn);
                imageCursor.MoveToFirst();
                var path = imageCursor.GetString(columnData);
                result.FileStream = System.IO.File.OpenRead(path);
            }
        }

        return result;
    }
    catch (Exception e)
    {
        Console.WriteLine(e);
        throw;
    }
    finally
    {
        if (imageCursor != null)
        {
            imageCursor.Close();
            imageCursor.Dispose();
        }
    }
}

Loading the images from the storage on Android 10 (API Level 29) and up

When I was trying to load the images from the storage on my emulator I noticed the code in the previous section doesn't work and and every file I tried to load was causing an exception citing missing permissions even though the Storage permission was approved.

Most code you can find on the Internet for loading files from the storage is identical to that code above and after a long search I found that from Android 10 and on there is a new policy called Scoped storage and this causes an exception saying you're not authorized to read the file. The good thing is that there is a simplified way to get a file from the storage once you have the Uri.
For this we are going to use the OpenInputStream method from the ContentResolver.

private MediaFile GetScopedFileFromUri(Uri uri)
{
    MediaFile result = null;
    try
    {
        var contentResolver = Platform.CurrentActivity.ContentResolver;
        var mime = contentResolver.GetType(uri);
        result = new MediaFile();
        result.MimeType = mime;
        result.FileStream = contentResolver.OpenInputStream(uri);
        return result;
    }

    catch (Exception e)
    {
        Console.WriteLine(e);
        return result;
    }
}

Having this in mind we need to add code to get the file when the user has Android 10+ and use our legacy code when not.

private MediaFile GetFileFromUri(Uri uri)
{
    if (Android.OS.Build.VERSION.SdkInt >= BuildVersionCodes.P)
    {
        return GetScopedFileFromUri(uri);
    }
    else
    {
        return GetFileFromLegacyUri(uri);
    }
}

Opting-out of ScopedStorage

On Android 10 (API Level 29 or in Android 11 with API Level 29 as target) you have the option to set a flag in the AndroidManifest.xml to opt-out of ScopedStorage and use the legacy method for reading files from the storage, but this flag will be ignored when you target API Level 30 and above.

Although it didn't work when I tested it on the emulator, some people have said that it does work on Android 10.

<manifest ... >
<!-- This attribute is "false" by default on apps targeting
     Android 10 or higher. -->
  <application android:requestLegacyExternalStorage="true" ... >
    ...
  </application>
</manifest>

Conclusions

It's been a while since I last published here so I wanted to share my findings in this aspect when I got that unexpected error. The code is a bit verbose due to the nature of Android but once you understand the process it's ezpz.

I hope this can be useful to you and stay tuned for the next post, where I'll be showing you have to make an outlined material entry in Xamarin.Forms.

References

Select Multiple Images and Videos in Xamarin Forms by XamBoy
https://www.xamboy.com/2019/03/12/select-multiple-images-and-videos-in-xamarin-forms/

Select multiple images from the gallery in Xamarin Forms by Daniel Kondrashevich
https://medium.com/swlh/select-multiple-images-from-the-gallery-in-xamarin-forms-df2e037be572

Xamarin.Essentials Media Picker
https://docs.microsoft.com/en-us/xamarin/essentials/media-picker?tabs=android

Storage updated in Android 11
https://developer.android.com/about/versions/11/privacy/storage

Opting out of scoped storage
https://developer.android.com/training/data-storage/use-cases#opt-out-scoped-storage

Android docs for opening media files
https://developer.android.com/training/data-storage/shared/media#open-file

Overloading binary operators in C#

Jefry Pozo — Sun, 26 May 2019 13:55:38 +0000

This is the third entry in the series about operators in C#. This time, we'll see how to overload binary operators and some use cases for them.

Previous entries:

Binary operators

As you might know, binary operators are those that apply to two operands. Most of them are math operators and some others are logical operators, as well as equality/comparison operators.
The binary operators available for overload in C# are:

Addition (+)
Subtration (-)
Product (*)
Division (/)
Logical AND (&) and logical OR (|)
Logical XOR (^)
Left shift (<<) and Right Shift (>>)
Comparison operators
- Equality (==)
- Inequality (!=)
- Lesser than (<)
- Greater than (>)
- Lesser or equal than (<=)
- Greater or equal than (>=)

Addition

Continuing with the Temperature data class, we will override the binary addition operator so it can sum two temperatures that are in different scales.
To keep the code consise, I'll only consider converting from Celsius to Farenheit and viceversa:

public static Temperature operator +(Temperature tempA, Temperature tempB)
{
    if (tempA.Type == tempB.Type) tempA.Value += tempB.Value;
    if (tempA.Type == TemperatureType.Celsius && tempB.Type == TemperatureType.Farentheit)
    {
        double tempInCelsius = (tempB.Value - 32) * (5d / 9d);
        tempA.Value += tempInCelsius;
    }
    else if (tempA.Type == TemperatureType.Farentheit && tempB.Type == TemperatureType.Celsius)
    {
        double tempInFarenheit = tempB.Value  * (9d / 5d) + 32;
        tempA.Value += tempInFarenheit;
    }
    return tempA;
}

An then you could use it like this:

 var celsius = new Temperature(20, TemperatureType.Celsius);
 var farenheit = new Temperature(68, TemperatureType.Farentheit);
 celsius = celsius + farenheit;

 // Prints "The current temperature in Celsius is: 40"
 Console.WriteLine("The current temperature in Celsius is: " + celsius.Value);
 Console.ReadLine();

Subtraction

The code for the subtraction operator is almost the same as for the addition:

public static Temperature operator +(Temperature tempA, Temperature tempB)
{
    if (tempA.Type == tempB.Type) tempA.Value -= tempB.Value;
    if (tempA.Type == TemperatureType.Celsius && tempB.Type == TemperatureType.Farentheit)
    {
        double tempInCelsius = (tempB.Value - 32) * (5d / 9d);
        tempA.Value -= tempInCelsius;
    }
    else if (tempA.Type == TemperatureType.Farentheit && tempB.Type == TemperatureType.Celsius)
    {
        double tempInFarenheit = tempB.Value  * (9d / 5d) + 32;
        tempA.Value -= tempInFarenheit;
    }
    return tempA;
}

and so on for the product and division operators.

Logical operators

You can override the logical AND and OR operators in order to modify the behavior of the && and || operators for use in condition statements. We'll briefly see their definition along the XOR operator and a simple example of using them.
For the AND operator we'll return true if their types are the same.
For the OR operator we'll return true if either value is above a threshold.
And for the XOR operator we'll return true if their types are different.

public static bool operator &(Temperature tempA, Temperature tempB)
{
    if (tempA.Type == tempB.Type) return true;
    else return false;
}

public static bool operator |(Temperature tempA, Temperature tempB)
{
    var tempAInCelsius = tempA.Type == TemperatureType.Celsius ? tempA.Value : (tempA.Value - 32) * (5d / 9d);
    var tempBInCelsius = tempB.Type == TemperatureType.Celsius ? tempB.Value : (tempB.Value - 32) * (5d / 9d);

    if (tempAInCelsius >= 37 || tempBInCelsius >= 37) return false;
    else return true;
}

public static bool operator ^(Temperature tempA, Temperature tempB)
{
    if (tempA.Type != tempB.Type) return true;
    else return false;
}

With that, then we can use the overloaded operators as follows

var celsius = new Temperature(20, TemperatureType.Celsius);
var farenheit = new Temperature(68, TemperatureType.Farentheit);

if (celsius & farenheit)
{
    Console.WriteLine("The temperatures are equivalent");
}
if (celsius | farenheit)
{
    Console.WriteLine("The temperatures are cool");
}
if (celsius ^ farenheit)
{
    Console.WriteLine("The temperatures are different");
}

//Prints "The temperature are coool" and "The temperatures are different"
Console.ReadLine();

The && and || operators are not overloadable, but you can virtually do so by overloading the & or the | along the true and false operators.

Comparison operators

For the comparison operators you need to overload them in pairs. This means that if you overload the equality (==) comparison operator you also need to overload the inequality (!=) comparison operator, otherwise you'll get a compiler error.

Here is the code for the Celsius and Farenheit temperatures:

public static bool operator == (Temperature tempA, Temperature tempB){
    if(tempA.Type == tempB.Type) return tempA.Value == tempB.Value;
    var tempValueA = tempA.Type == TemperatureType.Celsius ? tempA.Value : (tempA.Value - 32) * (5d / 9d);
    var tempValueB = tempB.Type == TemperatureType.Celsius ? tempB.Value : (tempA.Value - 32) * (5d / 9d);
    return tempValueA == tempValueB;

}

public static bool operator　!= (Temperature tempA, Temperature tempB){

    if(tempA.Type == tempB.Type) return tempA.Value != tempB.Value;
    var tempValueA = tempA.Type == TemperatureType.Celsius ? tempA.Value : (tempA.Value - 32) * (5d / 9d);
    var tempValueB = tempB.Type == TemperatureType.Celsius ? tempB.Value : (tempB.Value - 32) * (5d / 9d);
    return tempValueA != tempValueB;
}

Now you can use the comparison operator to evaluate directly the value of the temperatures without the need to do yourself the conversion:

var tempA = new Temperature(25.8, TemperatureType.Celsius);
var tempB = new Temperature(78.44, TemperatureType.Farentheit);
var tempAreEquals = tempA == tempB;

// Prints true
Console.WriteLine("Are temperature equals? "+ tempAreEquals);
Console.ReadLine();

Conclusion

In this entry we saw how to apply the binary operators to our custom data types, although their use cases are minimal they provide an easy and concise way to provide additional behaviors and comparison capabilities to our objects.

Stay tuned for the next and final entry of this series, in which I'll be talking about the explicit and implicit operators for casting between types as well as the indexing operator for array-like index access.

Overloading unary operators in C#

Jefry Pozo — Wed, 10 Apr 2019 20:03:18 +0000

This is the second entry in a series of posts about overloading operators in C#.

Previous entries:
-Introduction to operator overloading in C#

This time we're gonna see how to overload unary operators and some use cases.
Remember that in C# the unary operators are:

Addition (+)
Subtraction (-)
Logical negation (!)
Increment and decrement (++ and --)
Bitwise complement (~)
true and false

Basics of operator overloading

The C# language has a simple structure for the overload of operators, basically you define a static method on a type whose return type and parameters are the type itself. For example:

 public static <TypeName> operator <OperatorSymbol>(<Type>Name> typeName)

where TypeName is the enclosing type, and OperatorSymbol is the operator to overload (+, -, and so on). You will understand it better when we get to the concrete examples.

For giving concrete examples and an easier comprehension, I'll be using a Temperature class on which we will overload the operators and apply our custom logic.

namespace UnaryOperators
{
    public enum TemperatureType
    {
        Celsius = 1,
        Farentheit,
        Kelvin
    }

    public class Temperature
    {
        public double Value { get; set; }
        public TemperatureType Type { get; set; }

        public Temperature(double value = 0, TemperatureType type = TemperatureType.Celsius)
        {
            Value = value;
            Type = type;
        }
  }

We'll see how to use the operators on the Temperature object but modifying its underlying Value property.

The addition (+) operator

The addition operator by default just returns the current value of a numeric type in its unary form. We will change this behavior so it returns the absolute value of the temperature if it's lesser than 0 and return the current temperature value otherwise.

public static Temperature operator + (Temperature tempA)
{
   if (tempA.Value < 0) tempA.Value = System.Math.Abs(tempA.Value);
   return tempA;
}

As you can see, the method receives a Temperature object and returns a Temperature object which, should be the rule since you will apply the operator on a Temperature object. When we get to the binary operators we'll see how to apply operands between our custom type and any other type.

The subtraction (-) operator

The subtraction operator by default returns the negative value of a numeric type. We will override this behavior so we can modify the underlying value by applying the operator to the Temperature object:

public static Temperature operator - (Temperature temp)
{
    temp.Value = - temp.Value;
    return temp;
}

The increment (++) and decrement (--) operators

These are very straightforward, we will modify their behavior so they increment or decrement the temperature by 10 units.

public static Temperature operator ++(Temperature temp)
{
    temp.Value += 10;
    return temp;
}

public static Temperature operator --(Temperature temp)
{
    temp.Value -= 10;
    return temp;
}

True and False operators

I don't really see a need to overload these operators, since you can use boolean flags instead. But one particular and very specific use these operators have is when you need to overload the OR (|) and AND (&) operators, since you need to implement the True and False for them to work.
Also, True and False work in pairs so if you overload one you must overload the other.

public static bool operator true (Temperature temp)
{
    if (temp.Type == TemperatureType.Celsius) return temp.Value < 40;
    if (temp.Type == TemperatureType.Farentheit) return temp.Value < 104;
    return temp.Value < 313.5;
}

public static bool operator false (Temperature temp)
{
    if (temp.Type == TemperatureType.Celsius) return temp.Value >= 40;
    if (temp.Type == TemperatureType.Farentheit) return temp.Value >= 104;
    return temp.Value >= 313.5;
}

Say you'd like to check if a Temperature is at a high level and can cause dehydration .As you see in the code, I set the 40 grades celsius temperature as the threshold, so in practice you could use it like this:

var temperature = new Temperature(41, TemperatureType.Celsius);
if (temperature)
    Console.WriteLine($"Outside temp is {temperature.Value}. Looks like a sunny day");            
else
    Console.WriteLine($"Outside temp is {temperature.Value}. It's dangerous to be outside with this heat");

// Prints Outside temp is 41. It's dangerous to be outside with this heat
Console.ReadLine();

Logical negation (!) and bitwise (~) operators

I couldn't find concrete use cases for these operators, but i'll explain the bitwise operator since the logical negation is very basic.

The bitwise operator works on numeric types by changing the zeros and ones that compose the number to their opposite value. Let's see an example:
If you have the decimal 78, in binary it would be 1001110.
When you apply the bitwise operation, all 1's are converted to 0's and viceversa; thus our binary number would be 0110001 which corresponds to the decimal 49.

Conclusion

This entry covered the basics of the operator overloading in C#, and how they can be used to change the behavior of some operations on our custom types. On the next post I'll be covering binary operators, which are a more interesting and useful aspect of the C# language.

Introduction to overloading operators in C#

Jefry Pozo — Thu, 04 Apr 2019 15:07:31 +0000

This is the first entry in a series of posts about how you can modify the behavior of some of the operators available in C# such as addition (+), subtraction (-), among others.

Overloadable operators

You can modify most unary and binary operators and other operators can be "modified" in other ways, and some of them can't be modified at all.

Unary operators

Unary operators are those that only apply to one operand.
You can overload these unary operators:

Addition (+)
Subtraction (-)
Logical negation (!)
Increment and decrement (++ and --)
Bitwise complement (~)
true and false

Binary operators

Binary operators are those that are applied to two operands.
You can overload these binary operators:

Addition (+)
Subtraction (-)
Product (*)
Division (/)
Remainder (%)
Logical AND (&)
Logical OR (|)
Logical XOR (^)
Left and right shift (<< and >>)

Comparison operators

Comparison operators are those that evualate an expression and return true or false based on whether the condition is met or not. You can overload these comparison operators:

Equality (==)
Inequality (!=)
Less than (<)
Greater than (>)
Less than or equal (<=)
Greater than or equal (>=)

Note that if you overload one of these operators, you also must overload the opposite operator. For example, if you overload the equality operator (==), you also need to overload the inequality operator (!=).

Non-explicitly overloadable operators

Some operators cannot be explicitly overloaded, but you can use an alternative method that modifies the behavior when using that operator. Operators that cannot be explicitly overloaded are:

Conditional logical operators (&& and ||), but under the hood they use the & and | operators which can be overloaded
Array indexing operator [], but you can define indexers on an object
Cast operator (T)x, but you can overload the implicit and explicit operators
Compound assignment operators (+=, -= and so on) but they are evaluated using the unary operators, which you can overload

Non-overloadable operators

These are operators that are used by the compiler and their behavior cannot be modified in any way. They are the following:

Assigment operator (=)
Member access operator (.)
Conditional (or ternary) operator (?:)
Null-coalescing operator (??)
Dereference operator (->), used in unsafe (unmanaged) contexts
Lambda operator (=>)
Invocation operator ()
as and is operators
checked and unchecked operators
default, delegate and new operators
sizeof and typeof operators

Conclusion

This was an introductory entry so you can know which operators can and cannot be overloaded in the C# language. Stay tuned for the next entry, which will cover unary operators.

DEV Community: Jefry Pozo

Ripple effect in Xamarin.Android

Creating a ripple effect in Xamarin.Android

Creating a RoutingEffect

Adding the PlatformEffect in the Android project

OnAttached logic

OnDetached

Adding background drawables

Handling user touch

Handling click event

Touch start

Touch finished

Touch move

Handling long click

Using the ripple effect

Repository

jpozo20 / xamarin-samples

Xamarin code for posts published at dev.to/jefrypozo

xamarin-samples

Conclusions

TabPal : My first Chrome extension

Current features

Next steps

Enhancing Chrome Extension developer experience with CRA (create-react-app)

Introduction

Table of Contents

Creating aliases for node

Creating browser extension project with CRA

Configuring the project to enhance the experience

Installing and configuring react-app-rewired

Configure VSCode and Webpack for alias support

Configuring VSCode for alias support

Configuring Webpack for alias support

Configure react-devtools

Add sourcemaps during development

Add eslintrc to change linting rules

Configure project for stagin/release

Conclusion

Creating an outlined entry in Xamarin.Forms

Creating custom renderer

Adding custom contol with the BorderlessEntry

Translating placeholder into and out of the entry

Adding text changed event for consumers

Repository

jpozo20 / xamarin-samples

Xamarin code for posts published at dev.to/jefrypozo

xamarin-samples

Conclusions

Open multiple images from Gallery with Xamarin.Forms on Android

Configuring permissions needed to load files from storage

Adding classes for the PhoneMediaPicker service

Implementing the IPhoneMediaPicker

Ensure permission and launch intent

Get Intent result in MainActivity

Reading ClipData and Uri from the Intent

Read the file from the storage and return the MediaFile

Loading the images from the storage on Android 10 (API Level 29) and up

Opting-out of ScopedStorage

Conclusions

References

Overloading binary operators in C#

Binary operators

Addition

Subtraction

Logical operators

Comparison operators

Conclusion

Overloading unary operators in C#

Basics of operator overloading

The addition (+) operator

The subtraction (-) operator

The increment (++) and decrement (--) operators

True and False operators

Logical negation (!) and bitwise (~) operators

Conclusion

Introduction to overloading operators in C#

Overloadable operators

Unary operators

Binary operators

Comparison operators