Mashup Designer for JavaFX
 
Mashups
It’s been called the essence of Web 2.0. It’s the ability to combine pieces of different web sites to create something new, something meaningful.  Something for you and the people who have your tastes. Your social network. Not some mass market portal built by corporate programmers who think that they know you and your personal tastes.
 
Referred to as a composite web site by some and Mashup site by others, we call it amalgamating web data through the process of transcoding. Whatever. It’s about giving you the data that you want on your mobile phone or desktop browser. It’s Web 2.0. It’s about you.
 
JavaFX
It's the next generation of Java desktop technologies and provides an easy-to-use scripting language to harness the power of JFC/Swing and Java2D. And applications built with JavaFX can make desktop Web 2.0 come to life. They can provide you with easy access to important information. Any piece of web data, it’s there at a glance. No need to launch your browser. No need to scroll a web page to find that chunk of important data. No clicking. It’s always there. No need to refresh. It constantly updates itself. It’s your JavaFX application powered by <alt> Mashup technologies and infused with Java networking technology.
 
 
 
Screen Cast and PDF Version
 
A screen cast of the Mashup Designer for JavaFX Applications is available here:
http://altmobile.com/Screencasts/1173873451589.html
 
If you are viewing an HTML version of this document, some images may have been corrupted during the conversion process. For best viewing, a PDF version is available here:
 
http://altmobile.com/pdf/Mashup%20Designer%20for%20JavaFX%20Clients.pdf
 
 
JavaFX Application Designer Features
 
The Mashup Designer for JavaFX Applications extends the reach of our Mashup development tools to include JavaFX applications as deployment clients.
 
To understand the underlying technology of our Mashup tools—and in fact to build a Mashup application—you will use our StableDOM technology. The StableDOM product documentation is located at http://altmobile.com/pdf/StableDOM.pdf. The XML Transcoding product documentation is located at http://altmobile.com/pdf/XML%20Transcoding.pdf. Review the DOM Browser product document to understand how to create enterprise Mashups that integrate SQL data, Web Services data, and HTML content. It is located at http://altmobile.com/pdf/DOM%20Browser.pdf. And finally, our Mashup monitoring and metadata implementation is documented here:  http://altmobile.com/pdf/Mashup%20Tools.pdf.
 
Leveraging the StableDOM and code generation technologies, our Mashup Designer for JavaFX Applications provides the following major capabilities:
 
1
 
  1. 1.An Opera browser-based design tool.
  2. 2.Fill-in-the-blank form to define your Mashup content properties.
  3. 3.Fill-in-the-blank form to define your Application properties.
  4. 4.Fill-in-the-blank form to define your client network properties.
  5. 5.Testing a prototype of your application accessing live data.
  6. 6.Generation of your application files.
 
The following is a screen shot of the Mashup Designer for JavaFX Applications when first launched:
 
 
Defining Content Style Properties
    
The Mashup Designer for JavaFX Applications allows you to define the following content properties:
 
  1. 1.Text-To-Speech. Enable this option if you want the Mashup server to generate a .wav file of the Mashup content. The JavaFX client will then use Java's native audio capabilities to play this file.
    1
     


Our Mashup Designers for Adobe Apollo applications, Apple Dashboard Widgets, Opera Widgets, and Vista Gadgets allow you to set the following additional content properties and as the JavaFX application configuration strategy is unveiled, we plan to provide comparable features:
  1. 1.Background color.
  2. 2.Foreground color.
  3. 3.Background image color.
  4. 4.Font family.
  5. 5.Font size.
 
The following screen shot shows the content properties section of the Mashup Designer:
 
 
 
1
 
Defining Application Properties
    
The Mashup Designer for JavaFX Applications allows you to define the following Application properties:
 
  1. 1.Script name.
  2. 2.HREF link policy. This preference controls HTML link behavior:
    1. a.open links in the default native web browser, such as Opera
    2. b.open links in Mashup HTML component.
    3. c.disable links.
  3. 3.Chrome/JFrame decoration. In addition to determining the presence of JFrame decorations and a resize control, this preference is used in calculating the runtime height of the deployed Mashup JFrame. The Mac menubar is also used in height and location determination.
  4. 4.Application width. This value is based on the width of the App Prototype.
  5. 5.Application height. This value is based on the height of the App Prototype. Values which affect this value are the Chrome/JFrame decoration and Mac menubar.
  6. 6.Application initial location. This value is based on the location of the App Prototype in relation to the browser canvas. Values which affect this value are the Chrome/JFrame decoration and Mac menubar.
 
 
 
1
 
 
 
Defining Network Properties
 
The Mashup Designer for JavaFX Applications allows you to define the following AJAX properties:
 
  1. 1.Mashup server URL. This field is auto-populated with the value of the JavaFX Object Server URL. This is a special Object Server as is discussed later. This specified URL is used in the JavaFX Script source code generation to support network calls to the Mashup server.
  2. 2.Application content refresh specified in minutes. This field is auto-populated with the value of one minute. It is important to specify a realistic value as not to overwhelm the Mashup server’s resources and consequently the servers from which it fetches its data. This number is used in the JavaFX Script source code generation to support a java.util.TimerTask used by network calls to the Mashup server.
  3. 3.In AJAX-based widgets/gadgets systems such as Opera Widgets, Vista Gadgets, Adobe Apollo applications, and Apple Dashboard Widgets, our Mashup Designers display the AJAX JavaScript source code used to access the Mashup Server, update the content area of the widget/gadget, and set a JavaScript timer. This allows you to quickly change any of XMLHttpRequest (XHR) properties such as setting any custom headers. As the JavaFX application configuration strategy is unveiled, we plan to provide comparable features.
    1
     

 

 
Testing Your Mashup Application
 
As a JavaFX application can be constrained to provide a fixed size canvas, it is important to correctly size your application to contain all your data. Rather than delaying testing the fit of your content until deployment, the Mashup Designer for JavaFX Applications provides a resizable Application Prototype which displays the Mashup content.
 
To fetch the Mashup content and place it into the Application Prototype, select the "Fetch Content" link as highlighted in this screen shot:
 
1
 

 
You can then resize the Application Prototype to ensure your content fits. The width and height data – expressed in pixels—is placed in the title bar of the Application Prototype for easy reference. The Application Prototype is highlighted in this screen shot:
 
And a resized Application Prototype is displayed in this screen shot:
 
1
 
 
Generating Your Mashup Application Files
 
The Mashup Designer for JavaFX Applications generates a unique directory containing:
 
  1. 1.The JavaFX Script file defining your Mashup application.
 
Users of our Mashup Designers for Opera Widgets, Vista Gadgets, Apple Dashboard Widgets, and Adobe Apollo applications will note that this directory should also contain all the necessary configuration files appropriate for deployment. As the JavaFX application deployment strategy is unveiled, we plan to provide comparable capabilities.
 
This service is accessed through the "Generate JavaFX Script" link as highlighted in this screen shot:

 

 
The browser will display the location of your JavaFX application as seen here:
 
1
 
        
 
 
Here is a screen shot of the JavaFX Script for the Mashup Application file:
    
Developers of traditional JFC/Swing applications should notice that the generated script does not ensure that the JavaFXClient is created in the AWTEvent thread. When the interaction between JavaFX scripts and the JavaFX runtime is defined, our code generation technology will adapt accordingly.
 
A screen shot of a sample Mashup Application is seen here:
 
 
 
On all operating systems, the generated JavaFX Mashup client supports these user configurable features:
 
1
 
  1. 1.Always on Top. This enables the Mashup window to float above all other windows.
  2. 2.Resizable. This enables the user to resize the Mashup window at runtime.
  3. 3.Close. Though the strategy for relaunching a JavaFX client has not been defined, we enable the user to close the Mashup client window and thereby terminate access to the Mashup server and the text-to-speech announcement of the Mashup result.
 
On the Macintosh, the generated JavaFX Mashup client supports these additional user configurable features:
 
  1. 4.Opacity. The user may change the Mashup window transparency percentage minimizing any distraction that floating/top-level windows cause.
 
 
 
Java API  for the JavaFXClient
 
The class com.altmobile.platform.ui.mashupClient.JavaFXClient implements the following method signatures for creating a javax.swing.JFrame containing an HTML component to display the Mashup content with support for announcing the Mashup content via a Text-to-Speech service:
 
  1. 1.static JavaFXClient createClient (String urlString,
                            int minuteInterval,
                            int width,
                            int height)
  2. 2.static JavaFXClient createClient (String urlString,
                            int minuteInterval,
                            int width,
                            int height,
                            String scriptName,
                            boolean noChrome,
                            boolean useTTS,
                            String linkPolicy)
  3. 3.static JavaFXClient createClient (JFrame aJFrame,
                            String urlString,
                            int minuteInterval,
                            int width,
                            int height,
                            int locX,
                            int locY,
                            String scriptName,
                            boolean noChrome,
                            boolean useTTS,
                            String linkPolicy)
 

Internally, the HTML component is contained by a javax.swing.JPanel. The JavaFXClient implements the following method signatures for rendering content in the HTML component:
  1. 4.JPanel renderContent (JPanel containerJPanel, String url)
  2. 5.void renderContent (String url)
  3. 6.JPanel renderHTMLContent (JPanel containerJPanel, String html)
  4. 7.void renderHTMLContent (String html)
 

The class JavaFXClient implements the following method signatures for playing the .wav file of the Mashup results that was generated by the Mashup server:
1
 
  1. 8.void playWav (String url)
 

The class JavaFXClient implements the following method signatures for releasing the HTML component's resources:
 
  1. 9.void releaseResources()
 
 
 
Launching the Mashup Designer for JavaFX Applications
    
As mentioned earlier, the Mashup Designer for JavaFX Applications extends the reach of our Mashup development tools to include JavaFX applications as deployment clients. To launch the Designer, you should have already created a Mashup and generated the Dynamic XSL.
 
The StableDOM HTML transcoding product documentation is located at http://altmobile.com/pdf/StableDOM.pdf. The XML Transcoding product documentation is located at http://altmobile.com/pdf/XML%20Transcoding.pdf. Review the DOM Browser product document to understand how to create enterprise Mashups that integrate SQL data, Web Services data, and HTML content. It is located at http://altmobile.com/pdf/DOM%20Browser.pdf. And finally, our Mashup monitoring and metadata implementation is documented here:  http://altmobile.com/pdf/Mashup%20Tools.pdf.
 
Once a Dynamic XSL has been created, you should launch an JavaFX Object Server by selecting the menu item "JavaFX Object Server…" from the popup menu as seen in the following screen shot:
 
    

Much like a normal Object Server provides a micro web server enabling remote access to the XML or XSL content of the text editor—transcoding as needed from remote sites—the JavaFX Object Server also allows you to launch a micro web server. This is seen in this screen shot:
1
 
 
 
 
In the above screen shot, you see how to launch an Object Server on a specific port. Unix users will be alerted about using restricted ports.
 
Review the DOM Browser product document to understand how to use the Object Server functionality: http://altmobile.com/pdf/DOM%20Browser.pdf.
 
 
In addition to all the features, HTTP debugging/monitoring, and manageability of a standard Object Server, the JavaFX Object Server provides the following additional capabilities:
 
  1. 1.Generates the Mashup Designer for JavaFX Applications web page customized to support Application development.
  2. 2.Launches Opera 9—which should be your default web browser—to view the Mashup Designer web page using the Opera command line API.
  3. 3.Implements the previously described "Fetch Content" service which is accessible through the Mashup Designer for JavaFX Applications. The Fetch Content service returns the first child element of the BODY element generated by the Dynamic XSL. As such, it is important that your deployment Mashup server performs a similar element stripping or your JavaScript client does this. This is also a concern for any global CSS rules that your Mashup defines.
 
To reinforce this concept, let’s visualize a hypothetical XHTML document that was generated by a Dynamic XSL Mashup:
 
 
1
 
 
 
Since we want to dynamically update just the application’s content area and not the entire canvas, the JavaFX Object Server will just return the highlighted elements. Also note that the table element defines its border explicitly rather than defining a global CSS rule. This is highlighted in this screen shot:
 
 
Of course, an inline CSS rule would also work.
 
  1. 4.Implements the previously described "Generate JavaFX Script" service which is accessible through the Mashup Designer for JavaFX Applications.
 
 
 
The Mashup Development Process for JavaFX Applications
 
To create Mashup Applications, you should follow these steps:
  1. 1.If you are a web developer who prefers to use WYSIWYG HTML editors such as found in popular blog tools, then
    1. a.Define your Mashup content by launching the StableDOM Browser from the "Mashup" menu as seen here:

              
    This will launch the StableDOM browser enabling you to navigate to the remote URL     just as you would with a traditional desktop web browser. Here is a screen shot of the     StableDOM Browser:
 
1
 



The StableDOM Browser differs from the HTML Transformation Browser-- which is described later in the enterprise XML developer section-- in that the HTML Transformation Browser and its engine extract remote HTML content and transform that content to the target document language. So for example, if the remote content is an HTML table and the target document is a WML document, then the HTML Transformation Browser and its engine will dynamically create a WML table. The StableDOM Browser and its engine will not perform any node or content adaptation and will only extract the remote HTML content. Both browsers use a similar user interface, though.
    1. b.Generate the semantic metadata for the remote HTML element by selecting the menu item "Display Transcoding Metadata for xxx" (where xxx will be the element name) from the popup menu as seen here:


              
      1
       

    A window will be displayed containing the metadata as seen here:



You may tweak the XPath statement defined in the RDF metadata to best locate the HTML element.
    1. c.Launch the Mashup Monitor from the "Mashups" menu as seen here:

              
    2. d.Drag and drop the RDF metadata onto the Mashup Monitor as seen here:

      1
       

    3. e.Construct your target HTML document in the WYSIWYG Mashup Designer by launching it from the Mashup menu as seen here:
 
 
 
    1. f.You will be prompted to specify a port to run a special object server that is used to communicate with the WYSIWYG Mashup Designer. The WYSIWYG Mashup Designer will be launched in your default browser, as seen here:
 
The <alt> WYSIWYG Mashup Designer is based on TinyMCE, the industry leading HTML blog editor. We have created several TinyMCE plug-ins supporting the creation of Mashup content for blogs, web sites, and application systems. For information on TinyMCE, visit http://tinymce.moxiecode.com/.
1
 
 
    1. g.Create your static content as you normally would. When you want to add dynamic content, select the "Mash" button to select previously defined Mashup content, as seen here