December 18 2009 
Passing Data from your Plugin to a Webpage
How do I communicate with the browser from a plugin?
This lesson looks at how you can use the "do ... In Browser" command to call Javascript functions in your webpage from a plugin.
Background / Context
A rev plugin allows you to do so much more in your website but in the most part will not replace a website altogether. Modern rich sites are a healthy fusion between tradition languages (HTML, CSS and Javascript) and rich multimedia content which is provided by plugin architectures like rev. If this is the future, it is vital that any plugin architecture enables to the user to communicate / pass data from the browser to the plugin and from the plugin to browser.
In this lesson we'll look at how we can call Javascript functions located in your webpage from a plugin. There are all sorts of uses for this including passing data or using Javascript to hide a section of the current page.
Create our plugin stack
Lets start with something basic. We will create a plugin that asks the webpage to create a popup box with some text.
1) Create a new stack
2) Add a button
3) Paste to following script onto the button
do "alert('This is a message from my plugin');" in browser
'alert' is the Javascript equivalent to the 'answer' command. We pass the full line of Javascript to the do command and request it to be performed in the browser using the 'in browser' syntax.
Build your stack for the web and test the result
When you click the button the browser responds by executing our Javascript code and it creates a popup with our message
Let's make our example a little more complicated
This time we will pass two numbers to a Javascript function in our webpage that will add them together before displaying the result.
1) Add two text boxes
2) Add a new button
3) Add this script to our button
put field "number1" into tFirst
put field "number2" into tSecond
do "addNumbers(" & tFirst & "," & tSecond & ");" in browser
First we start by getting the numbers entered into the fields by the user. Then we build the function call by inserting those numbers as parameters to the function 'addNumbers'. We will implement this function in our webpage in the next step of this lesson.
Create our javascript function
First we need to build our stack for the web. This will create our plugin (revlet) and the basic HTML file to load it. You will notice that if you test your application in the browser it doesn't do anything. That is because we haven't added the 'addNumbers()' function that we called from within our plugin. So lets go ahead and do that.
1) Open 'test.html' in the folder created by the standalone builder
Note: We want to look at and edit the source of the HTML file so open it in a program that will let you do this:
Windows: wordpad / notepad
Mac: textEdit (you will need to check the 'ignore rich text commands' in the open dialog to stop it rendering the HTML)
2) Add the following code in between the <head> and </head>
<script type="text/javascript">
function addNumbers(number1, number2){
alert(number1+number2);
}
</script>
3) Save the file and open it in your browser.
4) Put two numbers into the box and see if your function adds the numbers together.
Does it work?
As you can see from the screenshot above, my browser function correctly added together the two numbers I entered into my text boxes.
Summary
These examples are fairly trivial but they show the basic principles behind plugin to browser communication. The Javascript functions can be as complicated as you choose to make them and the data passed by the plugin can of course be considerably more.
For information on how to pass data to the plugin please go here.
 |
|
