Wednesday, January 9, 2013

WebSDK: Olark Web Widget - Part 3 - Exposing Methods

Welcome to Part 3 of this tutorial on converting the Olark notification widget into a Web control for use with Real Studio! If you haven't read Part 1 & Part 2, I suggest you do so because we'll be building on the project from last time.


Methods

Last time, we hooked up four events so that when they fire on the browser, the corresponding events fire in the Real Studio application. If you look at the API page (http://www.olark.com/documentation) there are a bunch of methods that can be called (ten as of this writing, with six more in beta). Today we're going to create server side methods so developers can can Show, Hide, Expand or Collapse the widget themselves.

Allowing users to call methods in JavaScript is as easy as calling the ExecuteJavascript method. Before we implement each of the methods, lets write a hidden method that will do the heavy lifting for us:

Add a method to your control:

Private Sub CallOlarkMethod(Name as String)
  ExecuteJavascript("olark('" + Name + "');")
End Sub

Now we can add each of the methods:

Public Sub Expand()
  CallOlarkMethod("api.box.expand")
End Sub

Public Sub Collapse()
  CallOlarkMethod("api.box.shrink")
End Sub

Public Sub Show()
  CallOlarkMethod("api.box.show")
End Sub

Public Sub Hide()
  CallOlarkMethod("api.box.hide")
End Sub

Two notes about the code above:

1. You'll notice that I used Collapse instead of Shrink. Collapse is more consistent with the rest of the Realbasic API, and in the events, I would have had to name one "Shrunk" which really doesn't translate very well to other languages :)

2. Show. This is a tricky one. Technically I've overridden the already existing method for showing a control. The issue is that with a traditional non-visual control, Show means nothing anyway. We're simply going to use that to our advantage here.

Go back to WebPage1 and add 4 buttons, one each for Expand, Collapse, Show and Hide, and have them call the new methods. When you run the project, you'll see that you can now make the widget appear, disappear, expand and collapse from code!

Next time we're going to talk about setting some properties to control the initial appearance of the widget.

No comments: