Problem Statement
Many times you will have a situation where two different web applications or web-pages are built on common data and they may have a need to interact with each other. Also, you may have further dependency where you may be launching an application (child application) from a given application (parent application). In such cases, one of the common need is to ensure that the single instance of the child window opens when the user is clicking on the launch specific link / button.
Also, occasionally, you may have a need to show a confirmation message when one or more child window is open. Or, business may ask you to close the child window when the user closes the parent window.
This article uses two dummy projects (created using ExtJS) as examples to demonstrate how you will be able to control one application from the other application, bring them into front and close the child window when the parent window is closed.
Prerequisite
It is being assumed that you are familiar with ExtJS and you have created a project using Sencha Architect. The code in this article will talk about specific views, which allows you to click on button to access parent / child windows.
How to do?
Main Application
This application allows user to click on “Launch child window” button which launches the second / child application. Following is the code for the view:
Ext.define('TwoApps.view.HtmlEditorSample', {
extend: 'Ext.container.Container',
requires: [
'Ext.panel.Panel',
'Ext.button.Button',
'Ext.form.field.HtmlEditor'
],
height: 282,
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'panel',
title: 'A dummy application',
items: [
{
xtype: 'button',
handler: function(button, e) {
if ( ( window.childWindow === null ) || !Ext.isDefined(window.childWindow) || window.childWindow.closed ) {
window.name = "ParentWindow";
window.childWindow = window.open("http://localhost/blogs/App2/MyApp2/", "_blank", "height=600,width=600");
} else {
window.childWindow.focus();
}
},
text: 'Launch child window'
}
]
},
{
xtype: 'htmleditor',
height: 280,
margin: '10 0 0 0',
width: 840,
fieldLabel: ''
}
]
});
me.callParent(arguments);
}
});
The button handler has following statements, which you would like to notice
- A name for the main window
- Creation of new instance when
- A check for the existence of the childWindow
- Verification of whether the child window is open or not
- While you do intend to open a single instance, it is possible that child window might have been manually closed by the user. Hence in such case you shall create a new instance.
- Bring the already open child window into focus
Child / Other Application
In the child application the view being demonstrated primarily consist of a button, “Back to parent”, which takes the user back to the parent window. Following is the code for the view:
Ext.define('MyApp2.view.MyPanel', {
extend: 'Ext.panel.Panel',
requires: [
'Ext.container.Container',
'Ext.button.Button'
],
height: 321,
html: 'This is a child window',
width: 726,
title: 'Child Window',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'container',
items: [
{
xtype: 'button',
handler: function(button, e) {
var goBack = window.open('', 'ParentWindow');
goBack.focus();
},
text: 'Back to parent'
}
]
}
]
});
me.callParent(arguments);
}
});
The button handler has following statements, which you would like to notice:
- Open the parent window by the name
- Focus on the parent window to bring it in the front
Closing Child Window
There are situations when you would like to close a child window when the parent window is being closed. Also, you may need to be aware of the fact that the parent window may get closed due to many reasons. Some of the reasons are listed below:
- Navigating to another page directly in the browser or via a link.
- Closing the current browser window or tab page.
- Reloading the current page.
- Manipulating the URL of the currently loaded page through the location object from JavaScript.
- Invoking the window.navigate method.
- Invoking the window.open or the document.open method to open a document in the same window
Whenever there is an attempt to close or move away from the current page, there are two events that get fired in following order
- beforeupload
- unload
The window object’s beforeunload event can be used for handling any specific need of resolving anything between the parent and child window. This event occurs before the browser unloads the document. You would like to note that the onbeforeunload event is not cancelable, because of security reasons. Inside the handler of this event, optionally you may like to do one of the following:
- Display a confirmation dialog by returning a string value, where the user can confirm whether he wants to stay or leave the current page
- To execute certain logic before closing the window
- Combination of 1 & 2
Following code shows a sample example for handling this specific situation where an open child window is being closed whenever the parent window gets closed:
window.onbeforeunload = function() {
if ( ( window.childWindow !== null ) && Ext.isDefined(window.childWindow) && !window.childWindow.closed ) {
//
// Note that the onbeforeunload event cannot be ignored and hence you must execute whatever
// logic is ultimately required to be executed.
//
window.childWindow.close();
}
};
Limitations
The solution listed in this article does have certain limitation. For example
- If you can launch parent window from different tabs / windows then you will have to handle things differently to ensure one-to-one binding
- The single instance logic will work within the same browser
- The onunload event is supported in IE, Firefox, and Safari, but not supported properly in Chrome or Opera.
Summary
As part of this article you came to know about the ways to work with multiple pages / windows where one window may be dependent on the other window. Also, you came to know about closing the child window before closing the parent window. I hope this article helps you to manage two or more applications with dependencies similar to the one mentioned in this article.
At Walking Tree we practice and recommend Sencha Products like ExtJS and Sencha Touch to build amazing web / touch apps. In case you are looking for training or professional assistance, contact us by visiting our website.
Reference
- http://javascript.info/tutorial/browser-window-properties-and-methods
- http://javascript.info/tutorial/focus
- http://www.w3schools.com/tags/ref_eventattributes.asp
Alok is co-founder of Walking Tree, a company which acts as a product engineering team of the customers across the globe and delivers end-to-end products / solutions to ensure "Great Experience". Walking Tree provides Design, Development, QA, Maintenance and Support, Consulting, Training and Skill Augmentation services around Ext JS, Sencha Touch, Angular JS, Xamarin, Native Android, Native iOS, MongoDB, Cassandra, Hadoop, Pentaho, etc. | Twitter
wtcindia.wordpress.com 
Leave a comment