Server-Side iWidget - Demo

An iWidget is most commonly and most often thought of as widget implemented in Javascript/Dojo. An iWidget can also be HTML packaged directly inside of an XML iWidget content tag , which of course is static unless accompanied with Javascript to give it some dynamic properties. But another option for providing dynamic content in an iWidget is to use server side dynamic HTML generation capabilities, and while this can be done with any server-side language, some language environments are particularly well-suited for that, such as PHP and Groovy templates (or JSP/J2EE).

A Demo using PHP has been created to show how PHP could be used to construct server-side Dynamic HTML to provide the UI that appears in an iWidget. The Demo includes PHP examples of an Event-Sending UI Widget (Calendar) and an Event-Receiving Widget(Bar Chart). The demo also has a mix of PHP services/feeds that provide data to the PHP UI Widgets and/or to standard Mashup UI Widgets like the Table and Chart Widgets. javascript:submitEditForm('save','checkpoint'); What follows is a description of the demo and instructions on how to set it up and run it.

REQUIREMENTS

1. Lotus Mashup Maker
2. MySQL Database

SETUP

• Checkout Code
  The code was placed in 2 separate SVN Branches:
  Check Out the 2 Required Application Projects - CalendarIFrame and CRMFeeds
  
  • The Calendar UI Widget: CalendarIFrame (PHP Calendar UI Widget - Event Sender)
    
    • https://www.projectzero.org/svn/zero/branches/PHPMashupCalendarWidget/CalendarIFrame
      
  • The Backend PHP Services: CRMFeeds
    
    • https://www.projectzero.org/svn/zero/branches/PHPMashupServices/CRMFeeds
      

• Lotus MashupMaker
  Install Lotus Mashup Maker
  When complete, copy the proxy-config.xml file
  
  • cd CalendarIFrame/config
  • copy proxy-config.xml to: MashupMakerRoot/mm/config
    

• Database Setup
  

1. Create the Databases (Either use your admin User / Password - Or create an administrator "ibm" with password "demo" )
   
   • mysqladmin -uibm -pdemo create sugarcrm
   • mysqladmin -uibm -pdemo create sales
     
2. Load the Databases
   
   • cd CRMFeeds/public/sql
   • mysql -uibm -pdemo sugarcrm <sugarcrm.backup
   • mysql -uibm -pdemo sales <sales.backup

RUN the Zero Applications

• Start the applications
  
  • cd CalendarIFrame
    zero start (starts on port: 8085)
  • cd CRMFeeds
    zero start (starts on port: 8087)

UPLOAD/INSTALL the Calendar iWidget

• Upload CalendarIFrame Widget into MashupHub

• Mashup Hub:
  

1. Click Open The Catalog to launch Mashup Hub
   
2. Click Upload Widget
3. Select widget type source iWidget URL and click Next
4. Enter Widget URL: http://localhost:8085/iwidgets/calendariframe/calendariframe.xml and hit Enter
5. Enter a Description e.g. Calendar Widget
6. Under What's Next ... click Add To Lotus Mashups
7. On Screen Add To Lotus Mashups, select category Favorites from the drop-down and click Finish

Create a Mashup using the Calendar Widget

1. Go Back to Lotus MashupMaker
2. Create a New Page
   
3. Click on the Favorites Menu and locate the Calendar Widget you uploaded
4. Drag it onto the Page and size the container if/as needed.
5. Click on Tools Menu and locate the Table Viewer widget
6. Drag it onto Page and size as needed
7. Click on Tools Menu and locate the Javascript Adapter widget
8. Drag it onto Page
9. Click the Option Menu (rightmost Icon) on the Javascript Adaptor tab
10. Click Edit Settings You need to Copy/Paste the code from your CRMFeeds Application in file:
    
    • CRMFeeds/public/js/jsadapter.js
      And Paste it into the Edit Settings (overwrite what's there) and Click Save

• Wiring Your Mashup iWidgets:
  
• Wiring Menu:
  

1. Click the Click to Wire Widgets icon (left) on the Javascript Adaptor tab
2. Click Receive
3. Click Content as any Data
4. Click Calendar Widget
5. Click SendEvent As Text
6. Click Send
7. Click Content as any Data
8. Click Table Viewer
9. Select Table Using URL (ATOM)
10. Click Done

Run the Mashup

At this point, your Calendar iWidget is ready to run. Click on any part of the Calendar

• Month
• End of Week (Red arrows)
• Date
• Day of Week
• Previous/Next Calendar Months

• Finished Mashup:
  

The sample data is "time-sensitive" and is limited to 2 months - the current month and one month previous. All other months will return no data (empty table).

You may wish to "Save This Page" if you intend to return (See Save Icon on Right side of Mashup Maker Edit Menu).

-- tjwolf - 13 Mar 2009