Electos Application Integration
Part IIReal World Examples
Agenda• Techniques• Examples
Wednesday,June 2, 2010 Vincent Oorsprong - Electos Application Integration 2
Techniques• Integration means mixing two applications• Two major techniques:– iFrame– Webservice based
Wednesday,June 2, 2010 Vincent Oorsprong - Electos Application Integration 3
ASP application• Classic WebApp ASP based application
requires the use of an iFrame in the design– Two ways:• Electos template with a fixed URL to the ASP page• Electos template that uses the value of a document
structure item as the URL to the ASP page
Wednesday,June 2, 2010 Vincent Oorsprong - Electos Application Integration 4
iFrame• Easy to use, implement• Looks can be poor– Scrollbars– Inside window– Design (colors, font etc)
Wednesday,June 2, 2010 Vincent Oorsprong - Electos Application Integration 5
iFrame fixed – How to create• In Design copy an existing (e.g. normal.asp) to
a new name (e.g. orderentryfixed.asp)– Add to the design code like:
• <iframe src="http://localhost/order_entry_15_1" width="99%" height="500px" />
• In Control Panel | ASP Templates register the new ASP template
• Create a new page using the template
Wednesday,June 2, 2010 Vincent Oorsprong - Electos Application Integration 6
iFrame – variable – How to create• In Design copy an existing (e.g. normal.asp) to
a new name (e.g. orderentrydynamic.asp) • In Control Panel | ASP Templates register the
new ASP template• In Control Panel | Document Structure Items
create a new document structure item
Wednesday,June 2, 2010 Vincent Oorsprong - Electos Application Integration 7
iFrame – variable – How to create• Add items of your choice like:– Title: For page title– iFrameSrc: URL used for the iFrame Src attribute– iWidth: For the width of the iFrame– iHeight: For the height of the iFrame– Text: Optional if you want to accompany iFrame
with website text• Remember, you can always add items laterWednesday,June 2, 2010 Vincent Oorsprong - Electos Application
Integration 8
iFrame – variable – How to create• Create a new page– Use the new document structure item– If not selected, select the ASP file to be used– Enter the title, text, iFrame values
• Test!
Wednesday,June 2, 2010 Vincent Oorsprong - Electos Application Integration 9
iFrame - Design• Ideal would be if the application uses the
same design as the Electos web application• Create a CSS and pass the name of the CSS
with the iFrame Src link as URL parameter• Read the CSS information in the web
application and let a designer style the embedded application based on the CSS
Wednesday,June 2, 2010 Vincent Oorsprong - Electos Application Integration 10
iFrame – EDUC 2010• Let’s take a look at EDUC 2010 website• Site: www.educ2010.com• Studio: www.educ2010.com
Wednesday,June 2, 2010 Vincent Oorsprong - Electos Application Integration 11
Webservices• Include javascript files from Electos pages• Javascript uses AJAX VdfCall technique to call
webservice functions in 2nd application• Limitation: embedded application needs to be
in the same domain
Wednesday,June 2, 2010 Vincent Oorsprong - Electos Application Integration 12
Webservices – How to• Create a document structure item– Name and location of the Javascript file• Can be in AppHTML or a subdirectory of this• Can be in AppHTML (subdirectoy) of embedded
application
– Function name to start
Wednesday,June 2, 2010 Vincent Oorsprong - Electos Application Integration 13
Webservices• Let’s take a look at the football pool website
Wednesday,June 2, 2010 Vincent Oorsprong - Electos Application Integration 14
Electos Integration• The code and websites shown last week and
today are made by Data Access Europe employees. If you are interested in an Electos web application with a connection to a different web application you can contact Data Access consultants via [email protected]
Wednesday,June 2, 2010 Vincent Oorsprong - Electos Application Integration 15