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.
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.
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
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
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.
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.
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.
IE handles parameters slightly differently. As a result we need to tweak things slightly to ensure we get our data no matter which browser the user chooses to use. The change is simple. We must duplicate our parameters currently placed in our 'embedd' tag and add them to the 'object' tag:
<param name="myparam1" value="99999">
| Prev: How do I create a web-based revlet that references assets such as videos? | Next: How do I Pass Variable Data from a Webpage to a Plugin? |
Comments (2)
BUT... How does one do this dynamically?
The "username" here is hard coded in the HTML page.
How can it be passed dynamically from an element on the page?
I want to do this with a javascript:
document.getElementById("plugin").revletparams.user = 'joe'
Is there a way?
Hi Joe,
the following lesson may help you:
http://lessons.runrev.com/spaces/lessons/buckets/784/lessons/15016-How-do-I-Pass-Variable-Data-from-a-Webpage-to-a-Plugin-
Thanks,
Hanson
Add your comment