Starting Multiple Applications from the Launch Fragment

You can modify the launch fragment to specify that multiple applications load when the file is executed. It allows you to specify a separate <div> element for each application so that each one is displayed in its own area on the screen.

The following provides an example of how you could create two WCC applications, launch them both from a single launch fragment, and have them interact by one application subscribing to the events of the other.

This somewhat simulates a portal environment, except that this example loads two applications within one container, rather than each application being launched within a separate portal. However, you can use this information to help you set up your portal environment.

Assumptions: We will create two applications: Accounts and AccountDetail. Accounts will display a Login dialog; it will then display the work views list when the user logs in. AccountDetail will subscribe to the single-click event of the WorkViews component in the Accounts application, causing the work item list to display in a separate area in the container when the user clicks on a work view in the work views list displayed by Accounts.

Procedure

  1. Create and save Accounts, which should contain two components: Login and WorkViews. The WorkViews component needs to subscribe to the LoginComplete event on the Login component.

    For information about how to create a custom application using components, see the TIBCO Workspace Components Developer Guide, or the How to Create a BPM Desktop Using Components tutorial.

  2. With Accounts open in General Interface Builder, create an event definition file for Accounts that AccountDetail can import so that it can subscribe to events published by components in Accounts.

    For information about creating an event definition file, see the “Creating the External Application Event Definition” section in the TIBCO Workspace Components Developer Guide.

  3. Create the AccountDetail application, which should contain one component: WorkItems.
  4. With AccountDetail open in General Interface Builder, display the Events Editor.

    Note that at this point, there are no events to which the WorkItems component can subscribe because it is the only component in the application.

  5. In the Events Editor, click the Import button.
  6. On the Import Files dialog, navigate to and select the event definition file that you created in step 2, then click Import.

    Event definition files are saved in the \defs folder under the application from which you created it, with the name WCCProjectName.app.pub.xml. For example:

    StudioHome\wcc\version\JSXAPPS\Accounts\defs\Accounts.app.pub.xml

    where:

    • StudioHome is the directory in which TIBCO Business Studio was installed.
    • version is the version number of Workspace that was installed with TIBCO Business Studio.

      The Events Editor should now include all of the events from Accounts.

  7. Subscribe to the List Item Select (single click) event on the WorkViews component.
  8. Save AccountDetail.

    At this point, you have created two separate applications, and they each have their own launch fragment that starts the individual application. You will now create a launch fragment that will start both applications and display each in its own region on the screen.

  9. Make a copy of the launch fragment created for Accounts and save it with whatever name you desire. (The launch fragment for the Accounts application is saved in the StudioHome\wcc\version\ directory, as file Accounts.html.)
  10. Modify the new launch fragment as follows:
    1. Change the value of window.wccAppCount to 2, which is the number of applications that will be loaded by this launch fragment.
    2. Uncomment the <div> that is located near the bottom of the file.
    3. In the <div> that you uncommented, replace the application name with the name of your second application (AccountDetail in this example). It should now appear as follows: 
      <div id="AccountDetail" ...
   <script type="text/javascript" src="JSX/js/JSX30.js"
        jsxappns="AccountDetail" jsxapppath="JSXAPPS/AccountDetail"
        wccapppath="JSXAPPS/AccountDetail" wccloadorder="2" >
   </script>
<div>

      Now you need to specify how much of the screen each of the applications will consume—currently, the Accounts application is set to use 100% of the screen.

    4. Copy the style attribute from the <div> element that pertains to the first application, then paste it into the <div> element that pertains to the second application, replacing the “. . .” placeholder.
    5. In the <div> element for the first application, change the height value in the style attribute to 30%. This causes the first application to consume 30% of the container.
    6. In the <div> element for the second application, change the top value in the style attribute to 30%, and the height value in the style attribute to 70%. This causes the second application to start at 30% from the top, and consume 70% of the container.

      The new launch fragment should now look as follows (with comments removed for brevity): 

      <html>
<head>
    <title>TIBCO(R) General Interface</title>
    <script type="text/javascript">
        window.wccAppCount = 2;
    </script>
</head>
<body BGCOLOR="#9898a5" SCROLL="no"
    style="position:absolute;width:100%;height:100%;left:0px;top:0px;padding:0px;margin:0px;border:0px;overflow:hidden;">
<div id="jsxmain" style="position:absolute;left:0px;top:0px;width:100%;height:100%;">
    <div id="Accounts" style="position:absolute;left:0px;top:0px;width:100%;height:30%;">
        <script type="text/javascript" src="JSX/js/JSX30.js"
            jsxappns="Accounts" jsxapppath="JSXAPPS/Accounts"
            wccapppath="JSXAPPS/Accounts" wccloadorder="1" >
        </script>
    </div>
    <div id="AccountDetail" style="position:absolute;left:0px;top:30%;width:100%;height:70%;">
        <script type="text/javascript" src="JSX/js/JSX30.js"
            jsxappns="AccountDetail" jsxapppath="JSXAPPS/AccountDetail"
            wccapppath="JSXAPPS/AccountDetail" wccloadorder="2" >
        </script>
    <div>
</div>
</body>
</html>
  11. Save the new launch fragment, then execute it.

    The Login dialog is displayed. When a valid user name and password are entered, the work queue list is displayed in the top 30% of the screen. When a work queue is selected, the work item list is displayed in the bottom 70% of the screen.