Xamarin Forms – Platform Specifics (iOS) : Blur Effect

As a Xamarin mobile developer ever wonder, why we need write some much of code in PCL and iOS projects to do simple Native feature, some of which are usually one-liners code natively.

Xamarin has now introduced a nice nifty feature that helps us to write code in Xamarin Forms in the form of Platform Specifics.

In short, Platform Specifics helps us to consume the features or functionalities that are only available on iOS, without needing to implement custom renderers or effects in the required platform project.

One of the best example to understand this features is Blur effect. Platform specifics are baked into the Xamarin and it is ready to use.

Below are the steps to test this feature

Create a Xamarin Forms projectScreen Shot 2018-04-12 at 22.28.54

Namespaces: It is important to understand Xaml namespaces to get to know about Xamarin specifics. Below is the required namespace on each page.

xmlns:ios=clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core 

Blur Effect

Below the way we can define Blur effect on a boxview, this effect can be implemented on any visual elements in Xamarin Forms.

<BoxView x:Name=boxView ios:VisualElement.BlurEffect=Dark HeightRequest=50 WidthRequest=50 />

Blur effect have enumeration options to be set to it.

  1. Dark – applies a Dark blur effect
  2. Light – applies the light blur effect
  3. ExtraLight – applies an extra light blur effect
  4. None – applies no blur effect

Below is sample code for various blur effects we can  notice

<StackLayout>
    <Image Source=Aus.png HeightRequest=50 WidthRequest=50 />
    <BoxView x:Name=boxView ios:VisualElement.BlurEffect=Dark HeightRequest=50 WidthRequest=50 />
</StackLayout>
<StackLayout>
    <Image Source=Aus.png HeightRequest=50 WidthRequest=50 />
    <BoxView x:Name=boxView1 ios:VisualElement.BlurEffect=Light HeightRequest=50 WidthRequest=50 />
</StackLayout>
<StackLayout>
    <Image Source=Aus.png HeightRequest=50 WidthRequest=50 />
    <BoxView x:Name=boxView2 ios:VisualElement.BlurEffect=ExtraLight HeightRequest=50 WidthRequest=50 />
</StackLayout>

Below is the sample output on iOS

Screen Shot 2018-04-12 at 22.50.55

Here is the sample available in Github

https://github.com/divikiran/PlatformSpecficBlurEffect.git

 

 

 

 

Xamarin Forms – App Center: Show BuildID on iOS App

Introduction

App center helps us to connect support git repositories (i.e GitHub, Bitbucket or VSTS)  and build the app for us either on every code commit or manually. It also sends notifications to users that are registered to it. It will also help us to run tests on the actual device and runs any unit tests in the project.

iOS and Android

App Center can be set up to build individual platforms projects.

Scenario:

Required to show BuildID on iOS APP during the development phase, as shown below. This was required to keep track of bug reports or any other reason.

Screen Shot 2018-01-03 at 19.57.00

Show App Center Build ID in iOS app

Info.plist

Below is the BuildID that is read when traditional approach as below

Screen Shot 2018-01-03 at 20.18.13

Traditional Approach:

This can be achieved by implementation natively on each platform and used via interfaces in PCL or .Net standard projects, as shown below.

Screen Shot 2018-01-03 at 20.21.56

Native Implementation:

Screen Shot 2018-01-03 at 20.25.39

The above code will return the App Version and App build number that are set in the info.plist.

Get BuildID from App Center

This can be achieved using post clone and pre-build – Build scripts, which can be set in the App center’s build configurations as shown below

Screen Shot 2018-01-03 at 20.34.21

Screen Shot 2018-01-03 at 20.36.42

Post Clone

Below is the post clone code to load App Center’s CLI, which is required to be named as appcenter-post-clone.sh.

#!/usr/bin/env bash
npm install -g appcenter-cli

Pre-Build

Below is the pre-build code that set’s the info.plist’s Build number with App Centers BuildID

plutil -replace CFBundleVersion -string $APPCENTER_BUILD_ID $APPCENTER_SOURCE_DIRECTORY/path to ios project/Info.plist

APPCENTER_BUILD_ID is the App Center variable that contain’s BuildID, below is the BuildID that is set to  CFBundleVersion

The most recent Build number as shown below is replaced and set to CFBundleVersion.

Screen Shot 2018-01-03 at 21.20.35

After downloading from App center, iOS should show the latest build number as shown in below screenshot.

build id

I hope you like the post.

 

Xamarin Forms: Mircosoft.EntityFrameworkCore.Sqlite issue with Physical devices

Introduction

Building Xamarin Forms apps using .Net Standard 2.0 is still pretty much new to industry, we are just started to learn how differently we have to configure Xamarin setting to get it working when compared to PCL based projects.

I was building a Xamarin Forms based App using Microsoft’s Entityframeworks SQlite to store app’s data. Entity framework using sqlite is an obvious choice when it comes to building App using .Net Standard 2.0

Simulator

Works well on pretty much on all simulators without any issue, all read/write operations works well.

Issue  – Physical Device

App crashes on physical device, when tried to read or write data from the SQlite database

Error

System.TypeInitializationException: The type initializer for ‘Microsoft.EntityFrameworkCore.EntityFrameworkQueryableExtensions’ threw an exception. —> System.InvalidOperationException: Sequence contains
no matching element

Resolution

Change linker behavior to “Don’t Link”

Xamarin forms using .Net Standard 2.0

Introduction

All Xamarin developers, please welcome Net standard 2.0. This is the kind of class library we were waiting for all these years. The .Net standard 2.0 specification is now complete and it is included with Net core 2.0, Net framework 4.6.1 and up to latest versions. It can be used using Visual Studio versions 15.3 and up. Net Standard 2.0 obviously supports C# and also F# and Visual Basic.

More APIs

Net Standard 2.0 is for sharing code via various platforms. It is included with all the common APIs that all .Net implementations, it unified all .net frameworks to avoid any fragmentations in future. There are more than 32000 APIs in .Net Standard 2.0 most of them that are already available in .Net Framework APIs. Microsoft has made it easy to port existing code to .Net Standard 2.0. It is now easy to extend any .Net Standard to .Net core 2.0 or any versions that come in future.

NuGet Support

Most NuGet packages currently work well with .Net framework, but not all projects are compatible to move to .Net Standard 2.0, therefore a compatibility mode is added to support them.  Even after compatibility mode, only upt0 70% of packages are supported.

Frameworks and Libraries

Below is the table,list all the support frameworks and libraries. Click here for more details

.NET Standard
1.0 1.1 1.2 1.3 1.4 1.5 1.6 2.0
.NET Core 1.0 1.0 1.0 1.0 1.0 1.0 1.0 2.0
.NET Framework 4.5 4.5 4.5.1 4.6 4.6.1 4.6.1 4.6.2 4.6.1 vNext 4.6.1
Mono 4.6 4.6 4.6 4.6 4.6 4.6 4.6 5.4
Xamarin.iOS 10.0 10.0 10.0 10.0 10.0 10.0 10.0 10.14
Xamarin.Mac 3.0 3.0 3.0 3.0 3.0 3.0 3.0 3.8
Xamarin.Android 7.0 7.0 7.0 7.0 7.0 7.0 7.0 8.0
Universal Windows Platform 10.0 10.0 10.0 10.0 10.0 10.0.16299 10.0.16299 10.0.16299
Windows 8.0 8.0 8.1
Windows Phone 8.1 8.1 8.1
Windows Phone Silverlight 8.0

Sample to convert PCL or Shared to .Net Standard 2.0

  1. Create a default PCL or Shared based Xamarin Forms applications and name it appropreately and wait for solution to loadScreen Shot 2017-12-09 at 09.18.05
  2. Add .Net Standard class library by selecting .Net Standard 2.0Screen Shot 2017-12-09 at 09.24.38Screen Shot 2017-12-09 at 09.25.41Now project should look something like belowScreen Shot 2017-12-09 at 09.26.38.png
  3. Now remove PCL or Shared based project (VERY Important only after moving all the required project files to Netstandard20Test library) and compileScreen Shot 2017-12-09 at 09.28.38.png
  4. now rename the NetStandard20Test to NetStandardTest (Same as deleted library), make sure to rename DefaultNameSpace and Assembly to NetStandarTestScreen Shot 2017-12-09 at 09.30.07Screen Shot 2017-12-09 at 09.30.14Screen Shot 2017-12-09 at 09.30.24Screen Shot 2017-12-09 at 09.30.44Screen Shot 2017-12-09 at 09.34.23.png
  5. Now build the project and see if build is successfully.
  6. Your build should fail with errors as shown below, it is because of the deleted project, now we have to reference back the newly created .Net Standard 2.0 to both Android and iOSScreen Shot 2017-12-09 at 09.35.53.png
  7. Now edit references on each platform project to add newly created project as shown below onceScreen Shot 2017-12-09 at 09.37.58Screen Shot 2017-12-09 at 09.38.05
  8. references are applied correctly, you should get below errorsScreen Shot 2017-12-09 at 09.52.14
  9. Now add Xamarin.Forms NuGet package for all projectsScreen Shot 2017-12-09 at 09.54.04.png
  10. Now build the project and you should see any errorsScreen Shot 2017-12-09 at 10.58.06
  11. Microsoft has also released a compatibility NuGet package that makes sure’s all the existing packages are compatible to .Net Standard 2.0
  12. Add NuGet package, Mirosoft.NETCore.Portable.Compatibility to .Net Standard 2.0 project.Screen Shot 2017-12-09 at 11.03.01

Hope this blog is useful to you.

 

Azure Logic App – Evaluating IF condition with the help of JSON expression by passing null

Introduction

Yes, you read the title right, this blog is about evaluating IF condition. You might be wondering what about IF, even novice developer with no experience knows about it.

Allow me to explain a specific scenario that helps us understand it’s behavior in Logic Apps, it might blow your mind.

Some of us come from years of development experience, and at times we like to skill up ourselves to various other technologies, which leaves us with a mindset based on our past development experience and programming habits, which we gained over the years. When clients requirements are approached based on these backgrounds, we expect the code to work with the certain flow and these are where rules are broken while using IF condition in Azure Logic Apps.

Understanding JSON expression

JSON expression evaluates string to JSON object using syntax as shown below

json({"Person":{"Name": "Simpson"}})  evaluates to var name = Person.Name as Simpson

But, the same json(null), throws an error (important), avoid where possible.

Understanding IF condition

IF don’t need any special introduction, we know how it works. As we know, it has two code blocks that are evaluated based on the condition and falls to one of the blocks. As applies to Logic Apps and below is the syntax for it.

@if("condition","true","false")

To understand IF better, let’s also look into @equals(), it is a simple expression that returns true or false based on the given input and provided comparing value.

Example 1

Below is just an example, please ignore simple equality condition.
@if(equals(1,1),"true1","false1")
Result: true1

Example 2

@if(equals(1,2),"true1","false1")
Result: false1

Now, let us take our person JSON and understand it.
@if(equals(1,1),"Merge",json({"Person":{"Name": "Homer"}}) ['Name'])
Result: Merge

and similarly when the comparison is not equal

@if(equals(1,2),"Merge",json({"Person":{"Name": "Homer"}}) ['Name'])
Result: Homer

Now, recall that IF falls to one of the code blocks and returns. But in case of Azure Logic Apps, it evaluates both the code blocks and returns one code block result, that it falls into.

Here is the proof

For Example, if I do something like below, it should result as “Merge”, but it actually throws an error. According to current Logic Apps, this is the current behavior.

@if(equals(1,1),"Merge",json(null) ['Name'])
Result: error

And similarly when not equal

@if(equals(1,2),"Merge",json(null) ['Name'])
Result: error

The above examples imply that Logic App evaluates both the code blocks and returns one.

Actual error thrown is as below from real logic app

InvalidTemplate. Unable to process template language expressions in action ‘Compose’ inputs at line ‘1’ and column ‘1525’: ‘The template language function ‘json’ expects its parameter to be a string or an XML. The provided value is of type ‘Null’. Please see https://aka.ms/logicexpressions#json for usage details.’.

React – code on-demand using Code Splitting

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. Code Splitting helps apps to perform well where performance is key.

Code Splitting is the concept in React that helps to load the content only when it is actually required. Instead of loading the whole app even before a user can use it, we can write code effectively that it loads only when required.

A function can import the whole module using an import statement function and returns a promise as shown below.

import('./CodeSplitting/student')

### student.js
const Name = 'Divikiran Ravela';
export { Name };

Since import returns promise data will load when it is ready as shown below.

import('./CodeSplitting/student')
.then(({ Name }) => {
// Use moduleA
console.log("I am "+Name);
})

For example, if you wanted to load data when user clicks on button we can achieve as below

handleClick = (props) => {
import('./CodeSplitting/student')
.then(({ Name }) => {
// Use Student
console.log("I am " + Name);
})
.catch(err => {
// Handle failure
});
};

Here is full code if you are interested
Screen Shot 2017-09-28 at 11.18.31.png

Screen Shot 2017-09-28 at 11.16.08.png

Output:

Screen Shot 2017-09-28 at 11.18.56.png