There are two ways to customize the Display Builder's Object Palette: Use SL's J-Developer product to generate dynamic Java based objects or use Adobe Flex to create Flash objects. There are benefits to both approaches.
Creating Custom Java Objects with SL-GMS J-Developer
Use SL-GMS J-Developer to create a wide variety of primitive graphic objects or import object drawings from other programs like Microsoft® Visio.
SL-GMS J-Developer comes with SL-GMSDraw, a dynamic graphic editor that provides over fifty animated behaviors (color, size, rotation, fill, movement, etc.) that change based on real-time data input. Once objects are defined, SL-GMSDraw outputs Java code that can be compiled with J/Developer libraries. When objects generated with J/Developer are added to the Object Palette, their properties automatically appear in the Display Builder's Object Property list.
Objects generated with J/Developer are supported in all deployments, including Java application, Java applet and thin client AJAX/Flash.
Refer to the “Creating Custom Objects” tutorial for an example of how to create custom objects with SL-GMS J-Developer and add them to the Object Palette.
This tutorial will teach you how to create custom objects with SL-GMS J-Developer and add them to the Object Palette in RTView.
Learn to:
§ Use SL-GMSDraw to create customized dynamic graphic objects
§ Convert objects to Java classes
§ Add your custom objects to the Object Palette in RTView
Get Started
To get started you will need to install SL-GMS J-Developer in a separate directory from RTView. In order to proceed, you will need to register for a J-Developer license key.
Note: The key you received for RTView will not work for J-Developer.
Register for a License Key
Open the J-Developer registration dialog and follow the instructions in the dialog to receive your license key.
On Windows
1. Select:
Start-->Programs-->SL-GMS J-Developer-->Registration
On UNIX
1. In a GMS command prompt, type:
GmsRegister
Creating Customized Dynamic Graphic Objects
Start SL-GMSDraw
On Windows
1. Select:
Start-->Programs-->SL-GMS J-Developer-->GMSDraw_mfc
On UNIX
1. Open a UNIX terminal window.
2. In the terminal window, go to your J-Developer installation directory.
3. Initialize the terminal window:
type source gms_init
Note: Leave this initialized terminal window open, you will need to use it again later in this tutorial.
4. Start SL-GMSDraw:
type gmsdraw_xm
You are now ready to create a dynamic graphic object.
Create a Dynamic Graphic Object
At this point you have:
§ Registered for a license key
§ Started SL-GMSDraw
1. Select File>New
2. Click on the filled rectangle tool from the toolbar on the left of the window.
As you move the cursor over the drawing window, the position of the cursor is listed in the status bar in the bottom right corner.
3. Click at approximately 5, 10, and then click again at approximately 10, 5.
You should now have a blue rectangle.
4. Right-click and select Done to exit the rectangle mode.
5. If the rectangle is not selected, select it, then select Dynamics>Object Dynamic Properties.
The Object Dynamic Properties dialog displays, which allows you to enter dynamics for this object.
6. In this dialog type:
*
fpercent value
7. Click Apply, then Close.
You have now defined a dynamic that will cause the rectangle fill to move up and down according to the value of a variable called value.
8. If the rectangle is not selected, select it, then select Object>Move.
The dialog should already be set up to move the object to the point 0, 0.
9. Click Apply, then Close.
10. Select File>Change Directory and change your current directory to your RTView installation directory.
11. Change your current directory again to demos (located in your RTView installation directory) and then click Close.
12. Save your file in the demos directory and name it tutorial.m1.
13. To test the dynamics before you convert the graphic to a Java class, select Dynamics>Edit Data File.
In this window type:
value step 0. 100. 0. 10.
14. Click Save File, then Close.
You have now created a file called tutorial.dat that will simulate data changes to a variable called value, which will increment between 0 and 100.
15. If necessary, scroll the window so you can see the rectangle.
16. Select Dynamics>Preview Options and in the Preview Options dialog, click Start.
The rectangle should initially be unfilled and then the fill level will move up and down.
17. Click Stop to end the preview.
18. Exit SL-GMSDraw.
You are now ready to convert your object to a Java class.
Convert Object to Java Class
In order to add your object to the RTView Object Palette you must convert it to a Java class.
On Windows
1. Select Start-->Programs-->SL-GMS J-Developer-->GMS Command Prompt.
2. In the Command Prompt window, go to your RTView installation directory and type:
rtv_init
3. In the initialized Command Prompt window, go from your installation directory to the demos directory and confirm that your tutorial.m1 file is in this directory.
4. In the same initialized window, type:
make_rtvobject tutorial
You have now created a class file called tutorial.class. You are ready to add your object to the RTView Object Palette.
On UNIX
1. Open a UNIX terminal window.
2. In the terminal window, go to your RTView installation directory.
3. Initialize the terminal window.
csh bsh
type source rtv_init type . ./rtv_init.ksh
Note: You must initialize each new terminal window you open. See the “Setup” section for more details about setting up your environment.
4. In the initialized terminal window, go from your installation directory to the demos directory and confirm that your tutorial.m1 file is in this directory.
5. In the same initialized window, type:
make_rtvobject tutorial
You have now created a class file called tutorial.class. You are ready to add your object to the RTView Object Palette.
Add an Object to the RTView Object Palette
At this point you have:
§ Created an object in SL-GMSDraw
§ Converted your object to a Java class
Each tab in the Object Palette window is defined by an XML file. You will need to create this file and then modify the palette initialization file so that RTView will load your tab in the Object Palette. (A future version of RTView will provide an interface for modifying the Object Palette.)
1. In a text editor, such as Notepad or vi, create a new file and enter the following:
<?xml version="1.0"?>
<palette>
<object name="Tutorial" class="tutorial" value="25">
</object>
</palette>
Note: The object name is arbitrary, but the class must match the name of the class file you created (without the .class extension). The value will set the initial value of the fill percent to 25.
2. Save this text file in the demos directory as tutorial.rtp.
3. Copy the PALETTE.ini file from the lib directory into the demos directory.
4. In a text editor, edit the new copy of PALETTE.ini:
Add the following line to the bottom of the file:
Tutorial tutorial.rtp
5. Save and close PALETTE.ini.
You are now ready to use your new object in RTView.
Use Custom Object in RTView
To use your custom object in RTView, you need to start the XML data simulator and login to the Display Builder.
Start the XML Data Simulator
In this exercise you start the XML “Data Simulator” which is the XML source used in this tutorial.
On Windows
1. In an initialized Windows command window (see “Initializing a Command Prompt or Terminal Window”), go to the demos directory, and type:
start run_simdata
The XML data simulator is ready when dots appear across the screen.
On UNIX
1. In an initialized terminal window (see “Initializing a Command Prompt or Terminal Window”), go to the demos directory, and start the XML “Data Simulator” by typing:
run_simdata &
The XML data simulator runs as a background process and is ready when dots appear in the console.
Start the Display Builder
On Windows
1. Start the Display Builder in your original, initialized terminal window by typing:
start run_builder
2. Login to the Display Builder. By default, the Display Builder does not require a login. “Login” can be enabled at setup to support “Role-based Security”. The default user name and password are:
User Name: admin
Password: admin
Note: It is possible that your system administrator may have configured another user name and password. In this case, you may also need to select a role.
You are now ready to create a display.
On UNIX
1. Start the Display Builder in your original, initialized terminal window:
type run_builder &
2. Login to the Display Builder. By default, the Display Builder does not require a login. “Login” can be enabled at setup to support “Role-based Security”. The default user name and password are:
User Name: admin
Password: admin
Note: It is possible that your system administrator may have configured another user name and password. In this case, you may also need to select a role. See “Role-based Security” for more information.
You are now ready to create a display.
Create A Display
At this point you have:
§ Created an object in SL-GMSDraw
§ Converted your object to a Java class
§ Modified the PALETTE.ini file
§ Started the XML data simulator
§ Started the Display Builder
Add an XML Source to XML Source List
To animate your custom object, you will need to add an XML source, update.xml, to the XML Source List.
1. Select Tools>Options to open the Application Options dialog.
2. Select the “XML Tab” and click Add to open the Add XML Source dialog.
3. In the Add XML Source dialog:
XML Source Name - Enter update.xml
Note: The update.xml source is generated by the XML data simulator. See “Creating XML Sources” for technical details on creating and formatting your own XML source.
4. Click OK to close the Add XML Source dialog. The XML source appears in the list of available XML Data Sources.
5. Click OK to apply and close the Application Options dialog.
The XML source is now available for animating objects.
Attach Your Custom Object to Data
To attach your object to the XML data source, you will need to add it to a display and attach it to a Data Key called element1_load.
1. In the Object Palette, select the Tutorial tab and add your object to the display.
In the Object Properties dialog one of the available properties is value; this corresponds to the dynamic that you added to the object when you created your object in SL-GMSDraw.
2. In the Object Properties dialog:
value (category: Data) - Right-click in the Property Name field and select Attach to Data>XML
3. In the “Attach to XML Data” dialog:
XML Source - update.xml should already be selected.
Data Key - Select element1_load from the drop down menu.
4. Click OK to apply these values and close the Attach to XML Data dialog.
The rectangle is now animated with real-time data updates provided by the value of the element1_load Data Key.
Make Custom Palettes and Objects Available Throughout RTView
The palette and object that you created in this example will be available only when you start the Display Builder from the demos directory. In this exercise, you will replace the standard RTView files with your customized versions to make your customized palette and object available from other directories.
RTView looks for PALETTE.ini in the directory where you start the Display Builder. If it is not there, RTView searches under lib in your installation directory. Similarly, RTView looks for palette XML files (.rtp) and object classes (.class) in the directory where you start the Display Builder. If they are not there, RTView searches in the classpath. To add a .class file to the classpath, pack it into a .jar file and add it to the “RTV_USERPATH” environment variable.
Replace the standard PALETTE.ini with your custom version
1. Go to the lib directory, located in your RTView installation directory.
2. Rename PALETTE.ini to PALETTE.ini0. This will allow you to revert to the original PALETTE.ini if necessary.
3. Copy your customized version of PALETTE.ini into the lib directory.
Add your palette (.rtp) files and object class (.class) files to the classpath
1. In a GMS command window, go to the demos directory and type:
jar –cvf myclasses.jar *.rtp *.class
2. Add RTV_HOME\demos\myclasses.jar to the RTV_USERPATH environment variable.
Your customized palette and objects are now available throughout your version of RTView.
More Information About SL-GMSDraw
For more information on creating customized dynamic graphics with SL-GMSDraw, refer the J-Developer documentation in Start-->Programs-->SL-GMS J-Developer-->Documentation (PDF). On Unix, open jdoc\JDEV.pdf.
Creating Custom Fx Objects with Adobe® Flex®
Use Adobe Flex to create complex interactive objects like charts or spreadsheets.
Note: This option requires the Adobe Flex product and knowledge of Flex programming.
The output of Flex development is a Flash Format (.swf) file. Attach this .swf file to the Custom Fx object (located on the Fx Graphs tab of the Object Palette) in order to export the properties of your Flash object into the Display Builder's Object Property list.
Objects generated with Adobe Flex (by this exercise) are only supported in the thin client AJAX/Flash deployment.
Refer to the “Creating Custom Fx Objects” tutorial for an example of how to use Adobe Flex to create custom Fx objects in the Object Palette.
This tutorial will teach you how to add custom Fx objects to the Object Palette of the Display Builder.
Creating custom Fx objects requires the Adobe® Flex® product and knowledge about Flex programming. Please see custom/fxsimple/fxsimp.mxml for comments on writing a Flex application for use with scalar data. For tabular data, please see custom/fxsimple/fxgrid.mxml. For more information on Flex, go to http://www.adobe.com/products/flex.
Note: Adobe® Flex® v3.0 is required for this tutorial.
Learn to:
§ Convert a Flex source file (.mxml) to a Flash Format (.swf) file
§ Transfer properties from the Flash Format (.swf) file to the Custom Fx object
§ Attach data to the custom Fx object properties
§ View the custom Fx object in the thin client browser
Get Started
This tutorial uses the fxsimp.mxml source file to create a custom Fx object for use with scalar data. Once you have completed this exercise, you can use the fxgrid.mxml source file to create a custom Fx object for use with tabular data.
Convert Flex Source File (.mxml) to Flash Format (.swf) File
In order to create a custom Fx object, you must convert your .mxml source file to a .swf file. For the purpose of this exercise, fxsimp.swf is provided.
Note: In the future you can use the make_swf.bat script to convert your .mxml files. In order to use make_swf.bat, you must set the environment variable FLEX_HOME to your Adobe Flex installation directory. The directory you set as FLEX_HOME should contain the subdirectory bin, which contains the Flex compiler file (mxmlc.exe).
Create a Custom Fx Object in RTView
To create a custom Fx object in the Object Palette, you need to start the XML data simulator and open the Display Builder.
At this point you have:
§ Created a Flash object using Adobe Flex
§ Converted the .mxml file to a .swf file
Start the XML Data Simulator
In this exercise you start the XML “Data Simulator”, which is the XML source used in this tutorial.
1. In an initialized Windows command window (see “Initializing a Command Prompt or Terminal Window”), go to custom/fxsimple and type:
start run_simdata
The XML data simulator runs as a background process.
Start the Display Builder
On Windows
1. In an initialized Windows command window (see “Initializing a Command Prompt or Terminal Window”), go to custom/fxsimple, and type:
start run_builder
2. Login to the Display Builder. By default, the Display Builder does not require a login. “Login” can be enabled at setup to support “Role-based Security”. The default user name and password are:
User Name: admin
Password: admin
Note: It is possible that your system administrator may have configured another user name and password. In this case, you may also need to select a role. See “Role-based Security” for more information.
You are now ready to attach the Flash Format (.swf) file to the Custom Fx Object.
Attach the Flash Format (.swf) file to the Custom Fx Object
At this point you have:
§ Created a Flash object using Adobe Flex
§ Converted the .mxml file to a .swf file
§ Started the XML data simulator
§ Started the Display Builder
1. Select the Fx Graphs tab in the Object Palette.
2. Click on the Custom Fx Object and add it to the display.
3. In Object Properties list:
swfName - Enter fxsimp.swf and press Enter.
The properties of the fxsimp application (label, status, cpuUsage, freeDiskApace, highUsageAlertLimit, barNormalColor, barAlertColor, bgColor, and bgGradientFlag) will now appear in the Object Properties list. If the properties do not appear, double-check that the lib directory contains a copy the .swf file.
Add XML Data Source
To attach the object to data, you will need to add an XML data source (update.xml) to the XML Source List.
1. Select Tools>Options to open the Application Options dialog.
2. Select the “XML Tab” and click Add to open the Add XML Source dialog.
3. In the Add XML Source dialog:
XML Source Name - Enter update.xml
Note: The update.xml source is generated by the XML data simulator. See “Creating XML Sources” for technical details on creating and formatting your own XML source.
4. Click OK to close the Add XML Source dialog. The XML source appears in the list of available XML Data Sources.
5. Click OK to apply and close the Application Options dialog.
You are now ready to attach the custom Fx object to data.
Attach the Custom Fx Object to Data
You can attach several of the custom Fx object properties to Data Keys generated by the XML Data Source (update.xml).
At this point you have:
§ Created a Flash object using Adobe Flex
§ Converted the .mxml file to a .swf file
§ Started the XML data simulator
§ Started the Display Builder
§ Added an XML data source
1. In the Object Properties dialog:
status (category: Data) - Right-click in the Property Name field and select Attach to Data>XML.
2. In the “Attach to XML Data” dialog:
XML Source - update.xml should already be selected.
Data Key - Select element1_status from the drop down menu.
3. Click OK to apply these values and close the Attach to XML Data dialog.
4. In the Object Properties dialog:
status (category: Data) - Right-click in the Property Name field and select Copy.
cpuUsage (category: Miscellaneous)- Right-click in the Property Name field and select Paste.
cpuUsage (category: Miscellaneous)- Double-click in the Property Name field to open the Attach to XML Data dialog.
5. In the “Attach to XML Data” dialog:
Data Key - Select element1_load from the drop down menu.
6. Click OK.
7. In the Object Properties dialog:
freeDiskSpace (category: Miscellaneous)- Right-click in the Property Name field and select Paste.
freeDiskSpace (category: Miscellaneous)- Double-click in the Property Name field to open the Attach to XML Data dialog.
8. In the “Attach to XML Data” dialog:
Data Key - Select element1_data from the drop down menu.
9. Click OK.
View Custom Fx Objects in the Thin Client Browser
To view the custom Fx objects in the thin client browser you must first create a web archive (.war) file to deploy to your application server. Once you have deployed the .war file, you will need to start the RTView Display Server before you can view the object in a browser.
Create Web Archive (.war) File
You can use the make_war.bat script provided to build fxsimp.war.
Note: In order to use the make_war.bat script, the environment variable FLEX_HOME must be set to your Adobe Flex installation directory.
1. In an initialized Windows command window (see “Initializing a Command Prompt or Terminal Window”), go to the custom/fxsimple directory, and type:
make_war.bat
You have now created a file called fxsimp.war. Deploy this file to your application server and then start the Display Server. On UNIX, deploy fxsimp.war (built on Windows) to a UNIX application server then start the Display Server.
Start the Display Server
Note: The XML Data Simulator started earlier in this tutorial should still be running. If it is not, start it again now.
1. In an initialized terminal window (see “Initializing a Command Prompt or Terminal Window”), go to the custom/fxsimple directory, and type:
run_displayserver
2. Open a browser and navigate to http://server:port/fxsimp (where server and port are the appropriate values for your application servlet). For example, http://localhost:8080/fxsimp.