BY Shubham Khare19 May 2022 Edit
PopupWindow

WebAtoms - PopupWindow

This article will cover the popup window in WebAtoms. Today we will learn about implementing a popup window.

What is a Popup window?

Pop up window is a user interface window displayed in the foreground of a screen. The appearance of the popup window can be controlled programmatically with the help of events.

Why PopupWindow control?

WebAtoms provides a simple way of implementing a popup window with features for creating a custom window. With the help of PopupWindow control, we can add forms, lists, editors, etc., to the window.

PopupWindow is a class component that extends from AtomControl. To apply this control, we have to extend the component class from PopupWindow. Html or JSX inside the render() method will be displayed inside the popup with all the styles and click events.

What are the properties of PopupWindow control?

  • title - It is a property that allows the user to set the title at the top of the window.

  • showWindow() or showModal() - It's a static function that displays the window that allows the user to display the window when called. It also has parameters that are useful for passing data between screens.

  • close() - It is a function that closes the window when called.

  • titleRenderer - It is a property that allows the user to customize the header with Html or JSX tags instead of a plain title.

image

Implementing PopupWindow

For implementing the PopupWindow control, we will first create a class with the name PopupWindowDemo which will be the extension of PopupWindow.

Code snippet for PopupWindowDemo

image

Adding style

image


For this example, we will create a simple screen (PopupWindowScreen) with a button when it's clicked, will call the method showWindow(), and the popup will appear on the screen.

Code snippet for PopupWindowScreen

image

Both showModal() and showWindow() can be used to display the window.

Adding style

image


Advantages of PopupWindow control?

  • This control renders the existing view inside the window by only using extend keyword with PopupWindow.

  • The window can be customized in multiple ways with the help of provided render properties, giving more control over the user interface.

  • PopupWindow is also draggable, which is beneficial while working with multiple windows on the screen.

  • We can open or close the window programmatically, which helps display or close the window during the click, hover, or any event.

  • We can also create alert or confirmation dialog windows using PopupWindow.

BY Shubham Khare
1 Like
LikeCommentSave
LikeCommentSaveShare
1
Categories
General
YantraJS
Developer Guides
Tutorials
Web Atoms Updates

POPULAR POSTS
17 Mar 2021
LATEST ACTIVITY
Shubham Khare
liked this post.
Simmi Kava
liked this post.
Show more
ARCHIVES
2022
2021
2020
2019
TAGS
javascript (54)
developer (25)
javascriptdeveloper (16)
Xamarin.Forms (16)
webatoms (12)
typescript (11)
xamarin (11)
coding (10)
Html (10)
arrays (9)
android (8)
web-atoms (8)
csharp (7)
dotnet (7)
javascript-developer (6)
update (6)
dotnet-standard (5)
function (5)
iOS (5)
css (4)
methods (4)




Web Atoms: JSX (TSX + TypeScript) for Xamarin.Forms, Hot Reload Your App in Production Environment

PlaygroundSamples Repository