I don't care if you're creating AJAX based applications based in ASP.Net, Yahoo UI, ExtJS, JQuery or Tibco GI, if you're not riding the page bus you could be missing out on some fundamental benefits of a "Publish and Subscribe" event model. Get it here.
Testing
Imagine if you could simulate user click events without having to deal with functional automated test utilities that can inspect and manipulate the Document Object Model (DOM)? By hooking all of your user initiated events (keyboard or mouse) to Page Bus message handlers you can write test scripts that inject messages on to the bus and manipulate the AJAX application in the same way a user would. This technique can facilitate automated functional/regression testing.
Run Time Tutorials
Imagine if you could animate your AJAX application to behave as it might according to user interactions as part of a tutorial or training script. This method would give the user a hands on orientation without actually having any 'hands-on'. You can see something similar to this in TIBCO's sample application called Xignite.
Decoupling/Team Development
I have seen the Page Bus provide a clear delineation between the message publishers and their code and message subscribers and their code. This means you can delegate portions of the application to built by developers and have then interact in terms of messages and their contents. There is typically more meaningful documentation that arises from this interaction as well.
Modularity and Standard JavaScript API's
One way to provide a concise and standard API between modules of code is to provide a series of messages that some modules can publish in order to interact with other modules. TIBCO highlights this in their AJAX Portlet framework.
There are probably more reasons to use TIBCO's page bus. If you have any let me know.
The PageBusSample GI Application
- appCanvas.xml - The only GUI component in the application. It contains 4 panes.
- Top Left - A list control depicting the RSS data
- Top Right - A text box and a button. These are the user interface elements that initiate the message.
- Bottom Left - A block that serves as a runtime log only.
- Bottom Right - A matrix containing the RSS data that was downloaded
- RSStoCDF.xsl - An XSLT file that is used to transform RSS data into a Common Data Format (CDF) document. We will bind the list controls to this CDF document in order to display the data.
- LogHandler.js - This is a complete rip off of the Xignite application. I was interested in how they did the runtime logging pane at the bottom.
- pagebus.js - The TIBCO page bus JavaScript file
- pagebussample.js - This is the JavaScript file that contains all of the business logic.
What Happens?
- When the application loads (onLoad Script property of the Project Settings) the com.adamzastawski.samples.pagebussample.onLoad() function is called. This function subscribes to the message that will soon be published on the bus.
- When the user clicks the button in the top right pane, the application publishes a message to the bus that contains the text value of the textbox.
The handler that was registered onLoad is fired and the data is put into the cache.
- All the while the code is logging to the bottom left pane.
That's it. I hope this helps you decide if the page bus is something you think you can use in your AJAX application. You can download the sample GI project below.
PageBusSample.zip (10.25 kb)
Be the first to rate this post
- Currently 0/5 Stars.
- 1
- 2
- 3
- 4
- 5
Recently I got into a 'Usability' debate about what sort of menus where better; 'Office Like' menus or basic drop-down fly-out menus with tool tips. I was thinking about it and I started to wonder if it was even possible in my favorite AJAX web UI development environment (General Interface).
The answer is yes, of course, and there are a number of ways in which it could be accomplished. I chose to try it by re-writing the XSL that is used to render the Menu GUI component. You will have to realize that GI is alien technology reverse engineered by time traveling browser ninjas and the XSL method is the one that I felt was the most elegant. It is not the easiest way I can think of.
I have to admit that this example is incomplete for two reasons:
- I don't have any real business case for implementing this at this time. I am perfectly happy with the default menus for now.
- I am feeling very lazy tonight.
In the image below you will see an example of some of the menus in Office that I am talking about. They have a large graphical icon and two types of text, a bolded title and a non-bolded description.
Here is an example of the menus that I made by altering the default XSL for the menu component in GI.
- Copy the default XSL file from the GI runtime folder..(/JSX/xsl/jsxmenu.xsl) to the XSL folder under your current project.
- Alter the XSL file to show the menus the way you want them to.
- Then create an XML document using the GI 'Common Data Format' or CDF
<data jsxid="jsxroot">
<record jsxid="1" jsxtext="New" jsxtip="Tool Tip Here" jsxkeycode="ctrl+e" jsximg="images/paint_24.png" jsxexecute="alert('New Clicked');"/>
<record jsxid="2" jsxtext="Open" jsxtip="Tool Tip Here also" jsximg="images/flag_24.png" jsxexecute="alert('Open Clicked');">
<record jsxid="21" jsxtext="Open Sub 1" jsxtip="SubTip Here" jsxexecute="alert('Open Sub Clicked');"/>
</record>
<record jsxid="3" jsxtext="Save" jsxtip="Another Tool Tip here and this one is really lot of text." jsximg="images/foldr_24.png" jsxkeycode="ctrl+q" jsxexecute="alert('Save Clicked');"/>
</data>
Pay special attention to the 'jsximg', 'jsxexecute', 'jsxkeycode', and 'jsxtip' attributes. I chose to use the tool tip data as the description text. I could have used a custom attribute but I got lazy again.
- Apply the contents of this XML file to the 'XML String' property of the menu. You can also apply the path to this document in the 'XML URL' property but I am finding that the HOT KEYs (see jsxkeycode attribute) are not working when I do that. I have brought this up in the forum.
- I then copied some random icons into my local project and made sure the 'jsximg' attribute in the XML document was correct.
You can download the project and see what all was done to the XSL. Enjoy....
Be the first to rate this post
- Currently 0/5 Stars.
- 1
- 2
- 3
- 4
- 5
With Tibco's General Interface (GI) you can capture the fact that user has pressed the [Enter] key while the focus is within any textbox. By placing the javascript below in the Execute event for the textbox you can change the focus of the form when the user presses Enter.
jsx3.sleep(function() { ProjectNamespace.getJSXByName("[TextBoxNameHere]").focus(); });
replace 'ProjectNamespace' with the namespace in your project settings.
replace '[TextBoxNameHere]' with the name of the textbox that should receive focus next.
Currently rated 5.0 by 1 people
- Currently 5/5 Stars.
- 1
- 2
- 3
- 4
- 5
I realize that what I post regarding General Interface is not going to be rocket science any time soon. Despite that, I figure I had better start posting the things that other developers that are new to GI might find useful.
I was recently developing a sample application as a 'proof of concept' in General Interface and it occurred to my that it would be nice if the form would automatically move focus when all the allowed characters had been entered. This is useful when the user is entering a social security number of telephone number. The cursor automatically jumps to the next textbox saving the user from having to click 'Tab' or clicking over. Here's how I accomplished this.
It all revolves around a convenient feature built into the GI framework called the 'Inc. Change' event on all textboxes. This event only fires when a letter has been added or deleted from the value of the text box.
The following JavaScript is called when capturing the Inc. Change event.
Create a form like the one below.
Set the maximum characters on the textboxes and set the validation type as well. I've set mine in the sample to 'Number' so that I can make use of another convenient GI feature called 'doValidate()'. You may notice in the JavaScript above that if the user has entered values that cause 'doValidate()' to return false, the background is set to red and the auto-focus behavior does not fire.
Here is the javascript that calls the function above.
autoFocusNext(this, 'tbPhone1');
Happy coding in GI!
AutoFocusNextSample.zip (4.63 kb)
Be the first to rate this post
- Currently 0/5 Stars.
- 1
- 2
- 3
- 4
- 5