Widgets & Rich Internet Applications
by Dana Moore and Ray Budd

Listing One

<?xml version="1.0" encoding="UTF-8"?>
<widget>
  <window>
    <!-- image and text elements in the window -->
    <text>...</text>
  </window>
  <window>...</window>
  <action trigger="onload">
    <![CDATA[
      // JavaScript code
    ]]>     
  </action>
  <action>...</action>
  <preference>...</preference>
  <preference>...</preference>
  <about-box>
  </about-box>
</widget>

Listing Two

 1 <?xml version="1.0" encoding="UTF-8"?>
 2 <?konfabulator xml-strict="true"?>
 3 <widget debug="on">
 4   <window name="window" title="Clip Notes" height="300" width="300"
 5     visible="true" shadow="false" opacity="255">
 6     <image name="backgroundImg" src="Resources/background.png" opacity="255"/>
 7     <text name="titlebar" hOffset="100" vOffset="20" data="Clip Notes"
 8       font="ariel" size="18"/>
 9     <textarea name="dropBox" width="260" height="165" hOffset="20"
10       vOffset="50" bgColor="#000000" bgOpacity="50">
11       <tooltip>Drag an image or text into this area</tooltip>
12       <onKeyPress function="handleTypedNote"/>
13       <onDragDrop function="handleDrop"/>
14     </textarea>
15     <text name="headLabel" hOffset="25" width="220" vOffset="40"
16       data="Upload Note:" truncation="end" font="ariel" size="12"/>
17     <text name="statusLabel" hOffset="40" vOffset="240" font="ariel"
18       size="14" data="Status: Waiting" color="#0000FF"/>
19     <image name="uploadButtonImg" src="Resources/upload-button.png"
20       hOffset="200" vOffset="250">
21       <onMouseDown function="handleUploadPress"/>
22       <onMouseUp function="handleUploadRelease"/>
23     </image>
24   </window>
25   <action trigger="onload">
26     <![CDATA[
27       include("ClipNotes.js");
28       log("Loaded external script.");
29       updateFromPreferences();
30     ]]>
31   </action>
32   <action trigger="onPreferencesChanged">
34     updateFromPreferences();
35     ]]>
36   </action>
37  <preferenceGroup name="laf" order="1" title="Look And Feel"/>
38  <preference name="backgroundColorPref" title="Background Color:" group="laf"
39    type="color" defaultValue="#AAAAAA" description="Select window color."/> 
40  <preference name="textColorPref" title="Text Color:" group="laf"
41    type="color" defaultValue="#0000FF" description="Select the text color."/>
42  <preference name="textFontPref" title="Text Font:" group="laf"
43    type="font" defaultValue="Ariel" description="Select the font."/>
44 </widget>


Listing Three

 1 function updateFromPreferences() {
 2   statusLabel.font = preferences.textFontPref.value;
 3   statusLabel.color = preferences.textColorPref.value;
 4   dropBox.color = preferences.textColorPref.value;
 5   dropBox.font = preferences.textFontPref.value;
 6
 7   titlebar.color = preferences.textColorPref.value;
 8   titlebar.font = preferences.textFontPref.value;
 9
10   headLabel.color = preferences.textColorPref.value;
11   headLabel.font = preferences.textFontPref.value;
12
13   backgroundImg.colorize = preferences.backgroundColorPref.value;
14   uploadButtonImg.colorize = preferences.backgroundColorPref.value;
15 }

Listing Four

 1 var uploadFile = false;
 2
 3 function handleDrop() {
 4   var data = system.event.data[1];
 5
 6   // set the data in the text area to the dropped file,
 7   // or clipboard text.
 8   dropBox.data = data;
 9
10   if ((system.event.data[0] == "filenames")&&(validFile(data))) {
11     uploadFile = true;
12   } else {
13     uploadFile = false;
14   }
15 }
16
17 function handleTypedNote() {
18   // when the user types in text, change the upload
19   // type to a note
20   uploadFile = false;
21 }
22
24   return filename.toLowerCase().match(".*\.(jpg|png|bmp|gif|tif)");
25 }

Listing Five

 1 function handleUploadPress() {
 2   uploadButtonImg.src = "Resources/upload-button-down.png";
 3 }
 4
 5 function handleUploadRelease() {
 6   uploadButtonImg.src = "Resources/upload-button.png";
 7
 8   // build the URL and make the asynchronous request.
 9   var url = new URL();
10   url.location = "http://localhost/ClipNotes/clip-note-taker.php";
11   if (uploadFile) {
12     url.addPostFile("imageFile", dropBox.data);
13     statusLabel.data="Status: Uploading File... ";
14   } else {
15     url.postData = "theNote=" + dropBox.data;
16     statusLabel.data="Status: Uploading Note... ";
17   }
18   url.fetchAsync(uploadCallback);
19 }
20
21 function uploadCallback( url )
22 {
23   // update the status label to reflect the response.
24   if (url.response != 200) {
25     statusLabel.data="Status: Connection error response code: " +
26       url.response;
27     log("Response data: " + url.responseData);
28   }
29
30   if (url.responseData.match(".*success.*")) {
31     statusLabel.data="Status: Upload Successful";
32   } else {
33     statusLabel.data="Status: Upload Failed";
34   }
35 }



3


