December 04 2009 
Passing Data from a Webpage to your Plugin
Get your webpage and your plugin to talk to each other
This lesson will show you how to pass data from a webpage into a plugin. This is a hugely useful feature as it allows you to pass specific pieces of information from your webpage which can then be used by your plugin. Next time I'll show you how to do this in the other direction. You can read more lessons like this one here.
A simple example would be the username of the currently logged in user. This would allow you to serve up data related to that user of the website.
Create a basic stack with a display field
The first thing we will do is create a very basic stack that has a field into which we can put the values passed in to the plugin:
1) Create a new stack
2) Drag on a field
3) Name your stack
4) Save your new stack
Add the script
The next thing we need to do is add the script to our stack that will take the data and place it into our text field. First things first, we need to learn how data is passed to the plugin in the first place.
How is data passed to a plugin:
When you save a stack as a plugin, an HTML file is generated that has a special block of code called an embed tag. This is the standard way that plugin content is loaded by a browser and rev is no different. The embed tag can have any number of additional pieces of data included called 'parameters', setting a new parameter with your data will make that available to your Revolution scripts.
How to access vars from a Revolution script:
Revolution contains a property called 'revletParams' which is an array of all the parameter and their values which were passed to the stack in the embed tag.
So, lets write our script. We want to loop though each item in the array and put the value of that item into the text field we created on our stack:
on preOpenStack
local tParams
# Get the parameters of the revlet and put them into a variable called tParams
put the revletParams of me into tParams
# Repeat for each key in the array of parameters
repeat for each line tKey in the keys of tParams
# Put the 'key = value' into a new line of our field
put tKey & "=" && tParams[tKey] & return after field 1
end repeat
end preOpenStack
Save your stack as a revlet and see the result
You can see that our new plugin is already being passed a number of pieces of data. So lets see if we can add some of our own.
Edit the HTML file generated by Revolution
Open up the HTML file in an editor and somewhere near the top you should see the embed tag within a larger object tag. You will notice that all of the items listed in our text box in the screenshot in the previous step match the parameters passed in the embed tag:
type="application/x-revolution"
src="pluginDataTest.revlet"
width=401 height=193
stack="pluginDataTest"
username="Ben"
requestedName=""
instanceID=""
To add your own parameter simply add it to this list. For this example I am going to pretend that we want to pass a username to the plugin. Add the following line to the embed tag:
username="ben"
Save the HTML file and open it with your browser. You should see the parameter added to the list in the field on our stack.
The result
You can see that the parameter we added is now available from within your plugin. To access this item directly instead of looping through each item in the revletParams array use the following line of code:
answer the revletParams["username"] of this stack
Replace "username" with the specific parameter you want to access.
 |
|
