Register

Using Javascript controls in ViewletBuilder

Questions regarding the authoring of Viewlets, installation or possible bugs with our products. For urgent issues, please use our support form on our website: http://www.qarbon.com/help/helpme.php
User
Posts: 2
Joined: Wed Sep 05, 2012 9:08 am

Using Javascript controls in ViewletBuilder

Postby filiope » Wed Sep 05, 2012 9:17 am

In the FAQ http://www.qarbon.com/faqs/viewletbuild ... ew_publish there are details on adding javascript to control a Viewlet from links in the page (e.g., go to slide #).

My problem is that I don't use javascript much, so I don't know where exactly to put the code in the html file.

For example, I think I need to add: var flashObject = window.document.$VIEWLET_NAME$; to my Standard.qframe, but I don't know where this line goes. Also, where does alert(flashObject.viewletGetVariable("SLIDE_COUNT")); go?

My goal is to add links in my html file to start my Viewlet at specific slide numbers, so that the user can control the viewing of each step of a sequence. So I think I add pause zones at the end of each step, and add links in my html file to start the next step, for example:

<a href="javascript:flashObject.viewletGotoSlide(slideNum)">Start next part of sequence</a>

Alternatively, if there is a simpler way to do this, I'd appreciate the information!

Site Admin
User avatar
Posts: 223
Joined: Fri May 26, 2006 1:51 pm
Location: Rochester, NY

Re: javascript controls for Viewlet

Postby Andrew » Wed Sep 05, 2012 10:07 am

Hello,

You're on the right track. There are a few different ways to add the javascript.

Basically what you want to do is to add a javascript function like the following to your HTML file

Code: Select all
function gotoSlideNumber(number) {
       var flashObject = window.document.myViewletName;
       flashObject.viewletGotoSlide(number);
}


Then you can call this from a link in your Viewlet with something like this.

<a href="javascript:gotoSlideNumber(14)">Show Me Something</a>

Option #1: - Manually Editing the Html File

The Javascript should be placed within the <head> tag in the main html file surrounded by a <script> tag. Probably the best place is right before the closing </head> tag like this:

Code: Select all
<head>
.... code removed ....

<script type="text/javascript" language="JavaScript">
    function gotoSlideNumber(number) {
       var flashObject = window.document.myViewletName;
       flashObject.viewletGotoSlide(number);
}
</script>
</head>


Option #2: - Edit Html Frame in Project Properties

Now with the above approach you would have to edit the HTML file after the Viewlet is compiled. This can become tedious if you're making a lot of edits.

You can instead place the JavaScript function gotoSlideNumber within the HTML frame in Project Properties. This way the JavaScript will be added everytime you compile. Additionally, so that this HTML frame works with any viewlet you compile we'll used an ViewletBuilder variable $VIEWLET_NAME$ rather than the hard-coded "myViewletName" for the name.

The code should be placed in the file named: $VIEWLET_NAME$_viewlet_swf.html file in the HTML Frame as follows, again just above the closing </head> tag:

Code: Select all
    <script type="text/javascript" language="JavaScript">
    function gotoSlideNumber(number) {
       var flashObject = window.document.$VIEWLET_NAME$;
       flashObject.viewletGotoSlide(number);
    }
    </script>


Option #3:

If you're using ViewletBuilder 7.2.17 or higher (the current latest version available here) there is an even easier approach. In Project Properties there is now a "Javascript" section on the bottom left side. This allows you to enter global javascript that gets included into all HTML Frames.

Simply copy the following code into the JavaScript edit area.

Code: Select all
    function gotoSlideNumber(number) {
       var flashObject = window.document.$VIEWLET_NAME$;
       flashObject.viewletGotoSlide(number);
    }


Here is a Sample Viewlet which shows this in action.

http://www.viewletcentral.com/vc/viewlet/152321334/
Andrew Branch

User
Posts: 2
Joined: Wed Sep 05, 2012 9:08 am

Re: Using Javascript controls in ViewletBuilder

Postby filiope » Fri Sep 07, 2012 9:21 am

It wouldn't surprise me if you thought that this was the simplest, most obvious code in the world. But this was that key little bit of knowledge that I needed to make my whole project work.

Andrew, you just made me dance in my cubicle! Thank you!

Return to General Discussions

Who is online

Users browsing this forum: No registered users and 1 guest