Parent | Child | Previous | Next
 
Xbasic

{HTML}

Description

The {HTML} xdialog command displays an HTML window using Alpha Anywhere internal HTML control.

Example

This example shows two things:

  1. How to respond to click events on DIVs and IMGes in the HTML by setting a CSS 'behavior' attribute to 'clickable'

  2. How to define the event handler.

    • a) In the DIV set the 'a5:onclick' attribute to "!your_event_name"

    • b) In the Xdialog events string, define the event handler for 'your_event_name'. e.g.

      if a_dlg_button = "your_event_name" then
  a_dlg_button = ""
end if

Copy the following example into a new Alpha Anywhere Xbasic script and run it: 

html = <<%html%
<head>
<style>
.class1 { border: 1px solid green;  color:green;  height: .5in;}
.class2 { border: 1px solid red;  color:red; height: .5in;}
.clickable {behavior:clickable;}
</style>
</head>
<body>
<p>This dialog show how you can render HTML in an Xdialog using Alpha Anywhere's built-in HTML control.
The built-in control is much faster than loading the Internet Explorer ActiveX control. When you use the built-in HTML control you can
define and respond to click events in the HTML using standard Xdialog sntax.</p>
<br>
<br>

<div class="class1 clickable" a5:onclick="ui_msg_box('Hello','You clicked on me')">This is a DIV. If you view the HTML source for this DIV,
you will see that the 'a5:onclick' attribute defines what Xbasic to execute when the user clicks on the DIV.
<br>
Notice that in order to make this DIV respond to the click event it was necessary to add
a class to the DIV that set the 'behavior' CSS attribute to 'clickable'. If you don't do this, the DIV will not respond to the click event.
You will notice that in the HEAD section of the HTML we define a class called '.clickable' that sets the 'behavior' attribute. This 'class'
attribute of this div includes the 'clickable' class.
</div>
<br>
<br>
<div class="class2 clickable" a5:onclick="!event1">This is a DIV. It also has an 'a5:onclick' attribute. But the attribute is set to '!event1'.
This means that in the Xdialog code string we can write the event handler for 'event1'. In order to make the DIV respond to click events we had to add the 'clickable' class.

</div>
<br>
<br>
<button a5:onclick="!Event2">button</button>
<br>
<br>
<p>Here is an image control that displays an internal Alpha Anywhere image. Notice that you can click on the image.
In order to make the button 'clickable' it is necessary to set the class of the imge to 'clickable', just as was necessary
for DIV elements.
</p>
<img class="clickable" style="cursor:pointer;"  a5:onclick="!event3" src="a5res:images\$$generic.chevron.down.png" />
</body>
%html% 

dim dlg_title as c 
dim dlg_body as c 
dim dlg_event as c 
dlg_title = "HTML Layout - Click Events" 

dlg_body = <<%dlg%
{html=100,20html}; 
%dlg%

dlg_event = <<%code%
if a_dlg_button = "event1" then 
	a_dlg_button = "" 
	ui_msg_box("Hello","You clicked on the second DIV.") 
end if 
if a_dlg_button = "event2"  then 
    a_dlg_button = "" 
    ui_msg_box("Hello","You clicked on the button. Notice that we did not have to set the button to be clickable, like we did for a DIV. Buttons are automatically clickable.")
end if 
if a_dlg_button = "event3" then 
	a_dlg_button = "" 
	ui_msg_box("Hello","You clicked on the Image.") 
end if 
%code%

ui_dlg_box(dlg_title,dlg_body,dlg_event)