DEV Community: Lorenzo Pichilli

InAppWebView: The Real Power of WebViews in Flutter

Lorenzo Pichilli — Wed, 08 Jul 2020 13:00:26 +0000

What is flutter_inappwebview? It's a Flutter plugin that allows you to incorporate WebView widgets into your Flutter app, to use headless WebViews, or to use In-App browsers.

So, what's the difference between webview_flutter (Official flutter plugin) or flutter_webview_plugin?
Compared to all other WebView plugins, it is feature-rich: a lot of events, methods, and options to control WebViews. Furthermore, they do not have good documentation about their API or, at least, it is not complete. Instead, every feature of flutter_inappwebview is almost all documented (just check the API Reference on pub.dev).

In this article, I'm going to present the main classes and some examples of the InAppWebView widget that people were asking about on the official flutter_inappwebview repository (issue section) and on StackOverflow.

Main Classes Overview

This is a list of the main classes that the plugin offers:

InAppWebView: Flutter Widget for adding an inline native WebView integrated into the flutter widget tree.
ContextMenu: This class represents the WebView context menu.
HeadlessInAppWebView: Class that represents a WebView in headless mode. It can be used to run a WebView in background without attaching an InAppWebView to the widget tree.
InAppBrowser: In-App Browser using native WebView.
ChromeSafariBrowser: In-App Browser using Chrome Custom Tabs on Android / SFSafariViewController on iOS.
InAppLocalhostServer: This class allows you to create a simple server on http://localhost:[port]/. The default port value is 8080.
CookieManager: This class implements a singleton object (shared instance) that manages the cookies used by WebView instances.
HttpAuthCredentialDatabase: This class implements a singleton object (shared instance) which manages the shared HTTP auth credentials cache.
WebStorageManager: This class implements a singleton object (shared instance) which manages the web storage used by WebView instances.

In this article, I'm going to show in particular the InAppWebView widget, that is the most used/requested one.

InAppWebView Widget

Adding the InAppWebView widget into your app is very simple. It's just a widget like any other Flutter widget: InAppWebView(initialUrl: 'https://github.com/flutter').

NOTE: To use it on iOS, you need to opt-in for the embedded views preview by adding a boolean property to the app's Info.plist file, with the key io.flutter.embedded_views_preview and the value YES.

This widget has a set of initial attributes that you can use to initialize the WebView:

initialUrl: Initial URL that will be loaded.
initialOptions: Initial WebView options that will be used.
gestureRecognizers: specifies which gestures should be consumed by the WebView;
initialData: Initial InAppWebViewInitialData that will be loaded, such as an HTML string.
initialFile: Initial asset file that will be loaded (check the “Load a file inside assets folder” Section).
initialHeaders: Initial headers that will be used.
contextMenu: Context menu which contains custom menu items.

The list of all available WebView options is quite long, for example, you can enable/disable JavaScript using the javascriptEnabled option or enable/disable cache using the cacheEnabled option. The full list of all options is available here.

Use InAppWebViewController to control your WebView

Instead, to control the WebView, you have the InAppWebViewController class. This controller is returned by the onWebViewCreated callback when the WebView is ready to be used.
Through it, you can control your WebView or access its properties, such as the current URL using getUrl method. Other methods, for example, are loadUrl to load a new URL, postUrl to load a given URL with custom data using POST method, evaluateJavascript to evaluate JavaScript code into the WebView, and to get the result of the evaluation, takeScreenshot to take the screenshot (in PNG format) of the WebView’s visible viewport, getCertificate to get the SSL certificate for the main top-level page or null if there is no certificate. The full list of all methods you can use is quite long and available here.

InAppWebView Events

The InAppWebView widget offers a variety of events! Here’s a few of them:

onLoadStart: event fired when the WebView starts to load an URL;
onLoadStop: event fired when the WebView finishes loading an URL;
onLoadHttpError: event fired when the WebView main page receives an HTTP error;
onConsoleMessage: event fired when the WebView receives a JavaScript console message (such as console.log, console.error, etc.);
shouldOverrideUrlLoading: gives the host application a chance to take control when a URL is about to be loaded in the current WebView;
onDownloadStart: event fired when WebView recognizes a downloadable file;
onReceivedHttpAuthRequest: event fired when the WebView received an HTTP authentication request. The default behavior is to cancel the request;
onReceivedServerTrustAuthRequest: event fired when the WebView need to perform server trust authentication (certificate validation);
onPrint: event fired when window.print() is called from JavaScript side;
onCreateWindow: event fired when the InAppWebView requests the host application to create a new window, for example when trying to open a link with target="_blank" or when window.open() is called by JavaScript side;

and many many more! I recommend checking the API Reference to get more details. As for the WebView options and methods, the full list of all WebView events is quite long and available here.

InAppWebView Simple Example

Here is a simple example that shows an InAppWebView widget, its current URL, and 3 buttons: one to go back, one to go forward, and another one to reload the current page.

This is the full code example:

JavaScript Handlers (Channels)

You can communicate with the JavaScript side and vice-versa. To add a JavaScript handler, you can use _webViewController.addJavaScriptHandler method, where you define the handlerName and a callback to be invoked when it is called by the JavaScript side. The callback can return data to be sent on the JavaScript side.

Instead, on the JavaScript side, to execute the callback handler and send data to Flutter, you need to use window.flutter_inappwebview.callHandler(handlerName <String>, ...args) method, where handlerName is a string that represents the handler name that your calling and args are optional arguments that you can send to the Flutter side.

In order to call window.flutter_inappwebview.callHandler(handlerName <String>, ...args) properly, you need to wait and listen to the JavaScript event flutterInAppWebViewPlatformReady. This event will be dispatched as soon as the platform (Android or iOS) is ready to handle the callHandler method.

Here is an example:

WebRTC in InAppWebView

At this moment, WebRTC is supported only on Android, because, unfortunately, on iOS WKWebView doesn’t implement all the WebRTC API (you can follow this issue: #200).

I’m going to show an example using https://appr.tc/ to test WebRTC feature. It’s a video chat demo app based on WebRTC (https://github.com/webrtc/apprtc).

To request permissions about the camera and microphone, you can use the permission_handler plugin. Also, you need to set the WebView option mediaPlaybackRequiresUserGesture to false in order to autoplay HTML5 audio and video.

Furthermore, on Android, you need to implement the androidOnPermissionRequest event (it’s an Android-specific event), that is an event fired when the WebView is requesting permission to access a specific resource (that is the Android native WebChromeClient.onPermissionRequest event). In this case, this event is used to grant permissions for the WebRTC API. Also, you need to add these permissions in the AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.VIDEO_CAPTURE" />
<uses-permission android:name="android.permission.AUDIO_CAPTURE" />

Here is the full code example:

How to enable download files in InAppWebView

InAppWebView can recognize downloadable files in both Android and iOS platforms. To be able to recognize downloadable files, you need to set the useOnDownloadStart: true option, and then you can listen to the onDownloadStart event.

On Android you need to add write permission inside your AndroidManifest.xml file:

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

Then, you need to ask permission using the permission_handler plugin. Instead, to effectively download your file, you can use the flutter_downloader plugin.
Here is a complete example using http://ovh.net/files/ (in particular, the http://ovh.net/files/1Mio.dat as URL) to test the download:

As you can see, I’m using also the path_provider plugin to get the folder where I want to save the file.

Allow Self-signed SSL Certificates

To allow self-signed SSL certificates, you can use the onReceivedServerTrustAuthRequest event and simply return to proceed with the request:

onReceivedServerTrustAuthRequest: (controller, challenge) async {
  return ServerTrustAuthResponse(action: ServerTrustAuthResponseAction.PROCEED);
},

How to manage popup windows opened with target=”_blank” or “window.open”

To manage popup windows when a user clicks on a link with target="_blank" or through JavaScript code using window.open, you can use the onCreateWindow event. On Android, to be able to allow this event, you need to set the supportMultipleWindows option to true. Also, in order to be able to allow the usage of JavaScript, you need to set the javaScriptCanOpenWindowsAutomatically to true.

If you want to manage these requests, you should return true from this event, otherwise, the default implementation of this event does nothing and hence returns false.

The CreateWindowRequest represents the navigation request which contains a windowId that can be used to create, for example, a new InAppWebView instance. This windowId is used by the native code to map the request and the WebView to be used to manage that request.

Also, CreateWindowRequest contains the url of the request (on Android, if the popup is opened using JavaScript with window.open, it will be null), but if you need to maintain the Window JavaScript object reference (created using window.open method), for example, to call window.close method, then you should create the new WebView with the windowId, without using the url.

Here is a simple example that shows an AlertDialog when the user clicks on the link:

Manage platform URLs such as whatsapp:, fb:, tel:, mailto:, etc.

Generally, a WebView knows nothing on how to manage whatsapp:, tel: or fb: protocol/scheme. To capture the requests made with these custom protocols/schemes, you can use the shouldOverrideUrlLoading event (you need to enable it with useShouldOverrideUrlLoading: true option).

This way you can cancel the request made for the WebView and, instead, open the App, for example, using the url_launcher plugin:

initialOptions: InAppWebViewGroupOptions(
  crossPlatform: InAppWebViewOptions(
      debuggingEnabled: true,
      useShouldOverrideUrlLoading: true
  ),
),
shouldOverrideUrlLoading: (controller, request) async {
  var url = request.url;
  var uri = Uri.parse(url);

  if (!["http", "https", "file",
    "chrome", "data", "javascript",
    "about"].contains(uri.scheme)) {
    if (await canLaunch(url)) {
      // Launch the App
      await launch(
        url,
      );
      // and cancel the request
      return ShouldOverrideUrlLoadingAction.CANCEL;
    }
  }

  return ShouldOverrideUrlLoadingAction.ALLOW;
},

Manage WebView Cookies

To manage WebView cookies, you can use the CookieManager class, which implements a singleton object (shared instance). On Android, it is implemented using the CookieManager class. On iOS, it is implemented using the WKHTTPCookieStore class.

Here is an example of how to set a cookie:

CookieManager _cookieManager = CookieManager.instance();

final expiresDate =
    DateTime.now().add(Duration(days: 3)).millisecondsSinceEpoch;
_cookieManager.setCookie(
  url: "https://flutter.dev/",
  name: "session",
  value: "54th5hfdcfg34",
  domain: ".flutter.dev",
  expiresDate: expiresDate,
  isSecure: true,
);

Custom context menus

You can customize WebView’s context menu adding custom menu items, and/or hiding the default system menu items. For each custom menu item, you can declare a callback action to be invoked when the user clicks on it. As an example, I will add a custom menu item named Special and I will define a callback action that shows a JavaScript window.alert to the user with the text selected.

Here is the full code example:

Conclusion

In this article, I made a little introduction to the flutter_inappwebview plugin, in particular, about the InAppWebView widget. The plugin is in continuous development (at the time of this writing, the latest release is 4.0.0+4) and I recommend you check out the API Reference to find out all the features. For any new feature request/bug fix, you can use the issue section of the repository.

The next article will be on how to implement a Full-Featured Browser using this plugin.

That’s all for today! I hope it has opened new use cases for your Flutter apps.

Jackson-js: Examples for client (Angular) and server (Node.js) side (Part 2)

Lorenzo Pichilli — Wed, 13 May 2020 16:03:08 +0000

This is the second part of a two-part series. You should read the first part “Jackson-js: Powerful JavaScript decorators to serialize/deserialize objects into JSON and vice versa (Part 1)”.

In this article, I will give a simple example using the jackson-js library with Angular 9 for the client side and two examples for the server side: one using Node.js + Express + SQLite3 (with Sequelize 5) and another one using Node.js + LoopBack 4.

Full code examples can be found in this repository.

Client side: Angular 9

For the client side, we will create a very basic Angular 9 application consisting of 2 models (Writer and Book), 2 services to communicate with the server side, and a home component that will call these 2 services.

Models

Writer model:

Book model:

Services

Services that will be used to get/push data from/to the server side.
Writer Service:

Book Service:

Home Component

A very basic component that will be used to call each method of each service and to print the responses data to the browser console.

Server side: Node.js + Express + SQLite3 (with Sequelize 5)

For this case, we will implement a simple Node.js Express application using an in-memory SQLite 3 database (with Sequelize 5), consisting of 2 entities (Writer and Book). This Express application will offer endpoints used by the client side to get/add data from/to the database. Also, it will have 2 Jackson Views has an example: ProfileViews.public and ProfileViews.registered.

Models

Because each class model extends the Sequelize.Model class, we need to ignore its enumerable properties using the @JsonIgnoreProperties decorator, otherwise, serialization won't work properly.

Writer model:

As we can see, the writer model has a static creator method named buildFromJson decorated with the @JsonCreator decorator. This method will be used during deserialization in order to create an instance of the Writer class model using Sequelize 5 API.

Also, I defined a getter method for the books property using @JsonGetter in order to get the associated data (one-to-many relationship with Book) through the Sequelize get() method. Without this, during serialization, the books property will be empty. Another way is to call the Sequelize get() or toJSON() method for each model that needs to be serialized before serialization. This is needed because Sequelize wraps all it’s return values in a virtual object that contains metadata, so we unwrap them.

Book model:

Same as Writer, we have a static creator method used to build the Book instance and a getter method for the writer property. Also, in the @JsonIgnoreProperties decorator, I added the writerId property (that is automatically added by Sequelize) in order to exclude it from the generated JSON content.

Server side: Node.js + LoopBack 4

Instead, for this case, we will implement a simple LoopBack 4 application using a file data source as the database. This application will offer endpoints used by the client side to get/add data from/to the database. Also here, it will have 2 Jackson Views has an example: ProfileViews.public and ProfileViews.registered.

Models

LoopBack 4 Entity class doesn't wrap our entities, so we don't need to use @JsonIgnoreProperties decorator like on Sequelize.

Writer model:

Book model:

LoopBack Custom “object-mapper” Interceptor

LoopBack gives us the ability to create custom interceptors. In this case, I created a global interceptor called object-mapper that will be used by the controllers to read and write JSON content using the jackson-js library.

Jackson Context Groups

For both server side examples, I defined 2 context groups: writerContextApi and bookContextApi. They are used to enable/disable specific decorators based on which API endpoint the client is calling.

writerContextApi: it is used when the client is calling /writers/* endpoints to enable the @JsonManagedReference decorator and disable the @JsonIgnoreProperties decorator on the Writer.books property and to enable the @JsonBackReference decorator on the Book.writer property;
bookContextApi: it is used when the client is calling /books/* endpoints to enable the @JsonIgnoreProperties decorator on the Writer.books property.

RESTful API Endpoints available

Both servers run at http://localhost:8000 and, for each one, I created a function named initDB that will initialize the database with fake data at server startup.

Endpoints are:

/writers/public: get (“GET”) all writers (with books) using ProfileViews.public Jackson view;
/writers: get (“GET”) all writers (with books) or add (“POST”) a new writer;
/books/public: get (“GET”) all books (each one with its writer) using ProfileViews.public Jackson view;
/books: get (“GET”) all books (each one with its writer) or add (“POST”) a new book.

The parsed response of the client side after calling “/writers/public” endpoint of the Node.js + LoopBack 4 server.

The parsed response of the client side after calling “/books” endpoint of the Node.js + Express + SQLite3 (with Sequelize 5) server.

Jackson-js: Powerful JavaScript decorators to serialize/deserialize objects into JSON and vice versa (Part 1)

Lorenzo Pichilli — Wed, 13 May 2020 16:02:49 +0000

JSON logo

After many hours of development, I finally released the first version of the jackson-js library. As the name implies, jackson-js decorators are heavily inspired by the Java annotations of the famous Java FasterXML/jackson library.

You can install it using npm install —-save jackson-js and it can be used on both client (browser) and server (Node.js) side.

Why this library? What’s the difference between using this library instead of `JSON.parse` and `JSON.stringify`?

For simple cases, you don't need this library of course, you can just use JSON.parse and JSON.stringify to serialize/deserialize JSON.

With jackson-js, you can easily manipulate your JavaScript objects/values serialization/deserialization using decorators such as @JsonProperty(), @JsonFormat(), @JsonIgnore(), and more. However, this library uses JSON.parse and JSON.stringify under the hood.

Furthermore:

it not only deserialize JSON text into a JavaScript object, it also converts it into an instance of the class specified in the context option (similar packages are: class-transformer and TypedJSON); instead, with JSON.parse you will get just a simple plain (literal) JavaScript object (just Object type);
it supports more advanced Object concepts such as polymorphism and Object identity;
it supports cyclic object serialization/deserialization;
it supports serialization/deserialization of other native JavaScript types: Map, Set, BigInt, Typed Arrays (such as Int8Array);

This library can be useful in more complex cases, for example when you want to:

manipulate JSON in depth;
restore a JavaScript type (a similar package is class-transformer);
preserve type information (using polymorphic type handling decorators: @JsonTypeInfo, @JsonSubTypes, and @JsonTypeName. A similar package is TypedJSON);
hide some properties for certain HTTP endpoints or some other external service;
have different JSON response for some external application or manage different JSON data coming from other application (for example you need to communicate with a Spring Boot application that uses different JSON Schema for the same model or with other applications made with Python, PHP, etc...);
manage cyclic references;
manage other JavaScript native types such as Maps and Sets;
etc.

Most of the use cases of the Java FasterXML/jackson annotations are similar or equal.

In this article, I will present a basic example for each decorator.

ObjectMapper, JsonParser and JsonStringifier classes

The main classes that jackson-js offers to serialize and deserialize JavaScript objects are: ObjectMapper, JsonStringifier and JsonParser.

ObjectMapper

ObjectMapper provides functionality for both reading and writing JSON and applies jackson-js decorators. It will use instances of JsonParser and JsonStringifier for implementing actual reading/writing of JSON. It has two methods:

stringify(obj: T, context?: JsonStringifierContext): string: a method for serializing a JavaScript object or a value to a JSON string with decorators applied;
parse(text: string, context?: JsonParserContext): T: a method for deserializing a JSON string into a JavaScript object/value (of type T, based on the context given) with decorators applied.

JsonParser

JsonParser provides functionality for writing JSON and applies jackson-js decorators. The main methods are:

parse(text: string, context?: JsonParserContext): T : a method for deserializing a JSON string into a JavaScript object/value (of type T, based on the context given) with decorators applied;
transform(value: any, context?: JsonParserContext): any : a method for applying jackson-js decorators to a JavaScript object/value parsed. It returns a JavaScript object/value with decorators applied.

JsonStringifier

JsonStringifier provides functionality for reading JSON and applies jackson-js decorators. The main methods are:

stringify(obj: T, context?: JsonStringifierContext): string: a method for serializing a JavaScript object or a value to a JSON string with decorators applied;
transform(value: any, context?: JsonStringifierContext): any: a method for applying jackson-js decorators to a JavaScript object/value. It returns a JavaScript object/value with decorators applied and ready to be JSON serialized.

Decorators

Before we go on, I need to say that the most important decorators are:

@JsonProperty(): each class property (or its getter/setter) must be decorated with this decorator, otherwise deserialization and serialization will not work properly! That's because, for example, given a JavaScript class, there isn't any way or API (such as Reflection API for Java) to get for sure all the class properties; also because, sometimes, compilers such as TypeScript and Babel, can strip class properties after compilation from the class properties declaration;
@JsonClassType(): this decorator, instead, is used to define the type of a class property or method parameter. This information is used during serialization and, more important, during deserialization to know about the type of a property/parameter. This is necessary because JavaScript isn't a strongly-typed programming language, so, for example, during deserialization, without the usage of this decorator, there isn't any way to know the specific type of a class property, such as a Date or a custom Class type.

Later, they will be explained in more detail.

@JsonAlias

The @JsonAlias decorator defines one or more alternative names for a property during deserialization.

API: JsonAlias - decorator options JsonAliasOptions.

@JsonAnyGetter

The @JsonAnyGetter decorator allows the flexibility of using a Map or an Object Literal field as standard properties.

API: JsonAnyGetter - decorator options JsonAnyGetterOptions.

@JsonAnySetter

@JsonAnySetter allows us to define a logical "any setter" mutator using a non-static two-argument method to be used as a "fallback" handler for all otherwise unrecognized properties found from JSON content.

API: JsonAnySetter - decorator options JsonAnySetterOptions.

@JsonAppend

@JsonAppend can be used to add "virtual" properties to be written after regular properties.

API: JsonAppend - decorator options: JsonAppendOptions.

@JsonManagedReference and @JsonBackReference

The @JsonManagedReference and @JsonBackReference decorators can handle parent/child relationships and work around loops.

API: JsonManagedReference - decorator options JsonManagedReferenceOptions, JsonBackReference - decorator options JsonBackReferenceOptions.

@JsonClassType

As said before, the @JsonClassType is used to define the type of a class property or method parameter. A type is defined as an Array of JavaScript classes, such as [Number] for properties of type number or [Array, [Number]] for properties of type Array<number> or [Map, [String, Object]] for properties of type Map<string, any>.
Why an Array of JavaScript classes? Because in this way you can map complex types such as Map<string, any> using [Map, [String, Object]] or Array<Set<any>> using [Array, [Set, [Object]]].

API: JsonClassType - decorator options JsonClassTypeOptions.

@JsonCreator

We can use the @JsonCreator decorator to define constructors and factory methods as one to use for instantiating new instances of the associated class.
It’s very helpful when we need to deserialize some JSON that doesn’t exactly match the target entity we need to get, also with the help of the @JsonProperty decorator.

API: JsonCreator - decorator options JsonCreatorOptions.

@JsonSerialize and @JsonDeserialize

@JsonSerialize and @JsonDeserialize are used to indicates the use of a custom serializer/deserializer.

API: JsonSerialize - decorator options JsonSerializeOptions, JsonDeserialize - decorator options JsonDeserializeOptions.

@JsonFilter

@JsonFilter can be used to indicate which logical filter is to be used for filtering out properties of type (class) decorated.

API: JsonFilter - decorator options JsonFilterOptions.

@JsonFormat

@JsonFormat is a general-purpose decorator used for configuring details of how values of properties are to be serialized.

API: JsonFormat - decorator options JsonFormatOptions.

@JsonGetter and @JsonSetter

@JsonGetter and @JsonSetter are alternatives to more general @JsonProperty decorator to mark a method as a getter/setter method for a logical property.

API: JsonGetter - decorator options: JsonGetterOptions, JsonSetter - decorator options JsonSetterOptions.

@JsonIdentityInfo

@JsonIdentityInfo indicates that Object Identity should be used when serializing/deserializing values - for instance, to deal with infinite recursion type of problems.

API: JsonIdentityInfo - decorator options JsonIdentityInfoOptions.

@JsonIdentityReference

@JsonIdentityReference can be used for customizing details of a reference to Objects for which "Object Identity" is enabled (see @JsonIdentityInfo). The main use case is that of enforcing the use of Object Id even for the first time an Object is referenced, instead of the first instance being serialized as full Class.

API: JsonIdentityReference - decorator options JsonIdentityReferenceOptions.

@JsonIgnore, @JsonIgnoreProperties, and @JsonIgnoreType

@JsonIgnore is used to mark a property to be ignored at the field level during serialization and deserialization.

API: JsonIgnore - decorator options JsonIgnoreOptions.

@JsonIgnoreProperties can be used as a class-level decorator that marks a property or a list of properties that will be ignored during serialization and deserialization.

API: JsonIgnoreProperties - decorator options JsonIgnorePropertiesOptions.

@JsonIgnoreType indicates that all properties of decorated type are to be ignored during serialization and deserialization.

API: JsonIgnoreType - decorator options JsonIgnoreTypeOptions.

@JsonInclude

@JsonInclude can be used to exclude properties with empty/null/default values.

API: JsonInclude - decorator options JsonIncludeOptions.

@JsonInject

@JsonInject decorator is used to indicate that value of decorated property will be injected during deserialization.

API: JsonInject - decorator options JsonInjectOptions.

@JsonNaming

@JsonNaming decorator is used to choose the naming strategies (SNAKE_CASE, UPPER_CAMEL_CASE, LOWER_CAMEL_CASE, LOWER_CASE, KEBAB_CASE, and LOWER_DOT_CASE) for properties in serialization, overriding the default.

API: JsonNaming - decorator options JsonNamingOptions.

@JsonProperty

@JsonProperty can be used to define a non-static method as a "setter" or "getter" for a logical property or non-static object field to be used (serialized, deserialized) as a logical property.

API: JsonProperty - decorator options JsonPropertyOptions.

@JsonPropertyOrder

@JsonPropertyOrder can be used to specify the order of properties on serialization.

API: JsonPropertyOrder - decorator options JsonPropertyOrderOptions.

@JsonRawValue

@JsonRawValue decorator indicates that the decorated method or field should be serialized by including literal String value of the property as is, without quoting of characters. This can be useful for injecting values already serialized in JSON or passing javascript function definitions from server to a javascript client.

API: JsonRawValue - decorator options JsonRawValueOptions.

@JsonRootName

@JsonRootName decorator is used - if wrapping is enabled - to specify the name of the root wrapper to be used.

API: JsonRootName - decorator options JsonRootNameOptions.

Polymorphic Type Handling Decorators: @JsonTypeInfo, @JsonSubTypes, and @JsonTypeName

@JsonTypeInfo: indicates details of what type information to include in serialization; API: JsonTypeInfo - decorator options JsonTypeInfoOptions;
@JsonSubTypes: indicates sub-types of the annotated type; API: JsonSubTypes - decorator options JsonSubTypesOptions;
@JsonTypeName: defines a logical type name to use for annotated class; API: JsonTypeName - decorator options JsonTypeNameOptions.

@JsonTypeId

@JsonTypeId decorator is used to indicate that the annotated property should be serialized as the type id when including polymorphic type information, rather than as a regular property. That polymorphic metadata is used during deserialization to recreate objects of the same subtypes as they were before serialization, rather than of the declared supertypes.

API: JsonTypeId - decorator options JsonTypeIdOptions.

@JsonTypeIdResolver

@JsonTypeIdResolver decorator can be used to plug a custom type identifier handler to be used for converting between JavaScript types and type id included in JSON content.

API: JsonTypeIdResolver - decorator options JsonTypeIdResolverOptions.

@JsonUnwrapped

@JsonUnwrapped defines values that should be unwrapped/flattened when serialized/deserialized.

API: JsonUnwrapped - decorator options JsonUnwrappedOptions.

@JsonValue

@JsonValue decorator indicates that the value of decorated accessor (either field or "getter" method) is to be used as the single value to serialize for the instance, instead of the usual method of collecting properties of value.

API: JsonValue - decorator options JsonValueOptions.

@JsonView

@JsonView decorator is used for indicating view(s) that the property that is defined by method or field decorated is part of. If multiple View class identifiers are included, the property will be part of all of them. It is also possible to use this decorator on classes to indicate the default view(s) for properties of the type, unless overridden by per-property decorator.

API: JsonView - decorator options JsonViewOptions.

Conclusion

In the next part ("Jackson-js: Examples for client (Angular) and server (Node.js) side (Part 2)"), I will give a simple example using jackson-js with Angular 9 for the client side and two examples for the server side: one using Node.js + Express + SQLite3 (with Sequelize 5) and another one using Node.js + LoopBack 4.

DEV Community: Lorenzo Pichilli

InAppWebView: The Real Power of WebViews in Flutter

Main Classes Overview

InAppWebView Widget

Use InAppWebViewController to control your WebView

InAppWebView Events

InAppWebView Simple Example

JavaScript Handlers (Channels)

WebRTC in InAppWebView

How to enable download files in InAppWebView

Allow Self-signed SSL Certificates

How to manage popup windows opened with target=”_blank” or “window.open”

Manage platform URLs such as whatsapp:, fb:, tel:, mailto:, etc.

Manage WebView Cookies

Custom context menus

Conclusion

Jackson-js: Examples for client (Angular) and server (Node.js) side (Part 2)

Client side: Angular 9

Models

Services

Home Component

Server side: Node.js + Express + SQLite3 (with Sequelize 5)

Models

Server side: Node.js + LoopBack 4

Models

LoopBack Custom “object-mapper” Interceptor

Jackson Context Groups

RESTful API Endpoints available

Jackson-js: Powerful JavaScript decorators to serialize/deserialize objects into JSON and vice versa (Part 1)

Why this library? What’s the difference between using this library instead of JSON.parse and JSON.stringify?

ObjectMapper, JsonParser and JsonStringifier classes

ObjectMapper

JsonParser

JsonStringifier

Decorators

@JsonAlias

@JsonAnyGetter

@JsonAnySetter

@JsonAppend

@JsonManagedReference and @JsonBackReference

@JsonClassType

@JsonCreator

@JsonSerialize and @JsonDeserialize

@JsonFilter

@JsonFormat

@JsonGetter and @JsonSetter

@JsonIdentityInfo

@JsonIdentityReference

@JsonIgnore, @JsonIgnoreProperties, and @JsonIgnoreType

@JsonInclude

@JsonInject

@JsonNaming

@JsonProperty

@JsonPropertyOrder

@JsonRawValue

@JsonRootName

Polymorphic Type Handling Decorators: @JsonTypeInfo, @JsonSubTypes, and @JsonTypeName

@JsonTypeId

@JsonTypeIdResolver

@JsonUnwrapped

@JsonValue

@JsonView

Conclusion

Why this library? What’s the difference between using this library instead of `JSON.parse` and `JSON.stringify`?