Creating your own windows with JScript

When working with JScript you might want to open a new window. There are a few different ways that this can be done and today I’ll share how to create a new window that is visible in the taskbar and how to open a modal window. Modal means that you cannot access any other Smart Office functionality such as the QuickNote widget or data in a form as the modal window is the only currently active window placed above all other windows. A modal window is a graphical control element subordinate to an application’s main window which creates a mode where the main window can’t be used. The modal window is a child window that requires users to interact with it before it can return to operating the parent application, thus preventing the workflow on the application main window. This is great for some cases but can also be frustrating.

Background

Some of the concepts when working with windows in Smart Office is IInstanceHost – which represents the contract to an application host window. Then if a window is visible in the TaskBar it has to have a Runner – a handle to a task running on the Canvas. A Task is an item that can be launched on the Canvas. A task can only be launched if there is a registered application that supports the task. The scheme part of the task URI is used to locate an application that can launch a specific task, form example mforms://mms001. All these interfaces and classes can be found in the Smart Office SDK API and some of them in the API Documentation under Help in the Mashup Designer. When writing JScripts you should be familiar with the Smart Office core programming concepts.

There are new overloads of LaunchTask that can open a window in different ways. If the code does not work on your version of Smart Office it is possible that the method used does not exist in your version.

Opening a new window

Below is an example from Norpe on how to create a non modal and a modal window with JScript. Enjoy.

If you don’t want to have modality to the new window you can create a window that shows up in the task bar using an overload of the LaunchTask method. The script below shows examples of how to launch a modal window and a non-modal window.

DialogWindow

import System;
import System.Windows;
import System.Windows.Controls;
import MForms;
import Mango.UI.Core;
import Mango.Services;
import Mango.UI.Services;

package MForms.JScript {
   class NewWindowTest {
      var controller, content, debug, host;
      var buttonOpen, buttomOpenModal, buttonClose;
        
      public function Init(element: Object, args: Object, controller : Object, debug : Object) {         
         this.controller = controller;
         this.debug = debug;
         var content : Object = controller.RenderEngine.Content;

         var stackPanel = new StackPanel();
         stackPanel.VerticalAlignment = VerticalAlignment.Center;
         stackPanel.HorizontalAlignment = HorizontalAlignment.Center;

         buttonOpen = new Button();
         buttonOpen.Content = "Open New Window";
         buttonOpen.Width = "160";
         stackPanel.Children.Add(buttonOpen);
         
         buttomOpenModal = new Button();
         buttomOpenModal.Content = "Open New Modal Window";
         buttomOpenModal.Width = "160";
         buttomOpenModal.Margin = new Thickness(0,8,0,0);
         stackPanel.Children.Add(buttomOpenModal);
         
         Grid.SetRowSpan(stackPanel, 100);         
         Grid.SetColumnSpan(stackPanel, 100);
         content.Children.Add(stackPanel);

         buttonOpen.add_Click(OnClickOpen);
         buttomOpenModal.add_Click(OnClickOpenModal);
         controller.add_Requested(OnRequested);                  
      }
      
      public function OnClickOpen(sender: Object, e: RoutedEventArgs) {         
         try {
            var title = "New Window Test";
            var task = new Task(new Uri("notused://")); // The uri is not important (but must be valid) when shortcut are not allowed
            task.AllowAsShortcut = false;
            task.VisibleName = title;
            task.ToolTipInfo = title;
            task.UseVisibleShortName = false;
            
            var runner = DashboardTaskService.Current.LaunchTask(task, HostType.Default);
            host = runner.Host;
            
            host.HostContent = CreateWindowContent("Window Content");  
            
            host.HostTitle = title;
            host.Width = 640;
            host.Height = 480;
            runner.Status = RunnerStatus.Running;
            host.Show();
         } catch(ex) {
            Log(ex);         
         }
      }
      
      public function OnClickOpenModal(sender: Object, e: RoutedEventArgs) {         
         try {
            var content = CreateWindowContent("Modal Window Content");  
            content.Width = 640;
            content.Height = 480;
            
            var title = "New Modal Window Test";
            host = new HostWindow(true);
            host.HostContent = content;
            host.HostTitle = title;
            DashboardService.Current.ShowDialog(host); // Use DashboardService to get modal "shake".
         } catch(ex) {
            Log(ex);         
         }
      }
      
      public function CreateWindowContent(text : String)
      {
         var grid = new Grid();
         var textBlock = new TextBlock();
         textBlock.Text = text;
         textBlock.VerticalAlignment = VerticalAlignment.Center;
         textBlock.HorizontalAlignment = HorizontalAlignment.Center;
         textBlock.FontSize = 48;
         grid.Children.Add(textBlock);
         
         buttonClose = new Button();
         buttonClose.Content = "Close";
         buttonClose.Width = "120";
         buttonClose.VerticalAlignment = VerticalAlignment.Bottom;
         buttonClose.HorizontalAlignment = HorizontalAlignment.Right;
         buttonClose.Margin = new Thickness(0,0,8,8);
         buttonClose.add_Click(OnClickClose);
         grid.Children.Add(buttonClose);
         
         return grid;
      }
      
      public function OnClickClose(sender: Object, e: RoutedEventArgs) {         
         if(host != null) {
            host.Close();
            host = null;
         }
      }
      
      public function OnRequested(sender: Object, e: RequestEventArgs) {
         buttonOpen.remove_Click(OnClickOpen);
         buttomOpenModal.remove_Click(OnClickOpenModal);
         controller.remove_Requested(OnRequested);
         if(buttonClose != null) {
            buttonClose.remove_Click(OnClickClose);
         }
      }
      
      function Log(text : String)
      {
         debug.WriteLine(text);
      }
   }
}

6 thoughts on “Creating your own windows with JScript

  1. Martin

    Hi! I have have added a couple of columns to the Window. var gvc = new GridViewColumn();
    How do I get the ISO look & feel? In XAML i looks to be this command:
    But how can i Write this in a JScript – or is there another way to inherate the ISO style?
    //Martin

    Reply
  2. Martin Stephens

    Hi,

    I have used this script as a base for a concept. I place a button in the header of MMS240 – a line chosen from the list of equipment and when the button is pressed a new (modal) window is opened which shows some data which will come from a web service (text lines).

    Everything seems to work fine, except when a line is chosen from further down in the list the window doesn’t appear. I suspect it’s being shown but just isn’t visible.

    It only seems to work on the equipment lines from the top of the list.

    Also when the screen does appear, if I press the button on the same selected line, the window moves around (down one line at a time) then eventually moves back to the top.

    Is it possible to control the position of where the new window will open in the desktop?

    Regards,

    Martin

    Reply
    1. karinpb Post author

      Where and witch panel is used? For the Grid you can set colum and row to row and column that does not exist and the use Margin and set top and left.

      Reply
  3. Kathiravan

    Thank you for the post. I have placed a button on OIS300 program . so when I click the button it open the window but I have to populate the windows with the CRS990MI results. can anyone please help me with how to populate the CRS990MI result values with header?. Thank you in advance.

    Kathiravan

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s