github/shiny
1
1
Fork 0
mirror of https://github.com/rstudio/shiny.git synced 2026-01-31 01:38:34 -05:00
Code Issues Packages Projects Releases Wiki Activity

Continued work on building inputs/outputs

Browse Source
This commit is contained in:
Joe Cheng
2012-09-13 11:06:49 -07:00
parent a91422e18f
commit a3ac0619f3
3 changed files with 94 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
_includes/tutorial/building-inputs.md
View File

@@ -196,7 +196,7 @@ Shiny.inputBindings.register(incrementBinding);</code></pre>
Both the behavioral JavaScript code and the Shiny binding code should generally be run when the page loads. (It's important that they run before Shiny initialization, which occurs after all the document ready event handlers are executed.)
The easiest way to do this is to put both chunks of JavaScript into a file; in this case, we'll use the path `./www/js/increment.js`, which we can then access as `http://localhost:8100/js/increment.js`.
The cleanest way to do this is to put both chunks of JavaScript into a file. In this case, we'll use the path `./www/js/increment.js`, which we can then access as `http://localhost:8100/js/increment.js`.
If you're using an `index.html` style user interface, you'll just need to add this line to your `<head>` (make sure it comes after the script tag that loads `shiny.js`):
@@ -214,4 +214,4 @@ On the other hand, if you're using `ui.R`, then you can define this function bef
)
}</code></pre>
Then in your `shinyUI` page definition you can call `incrementButton` wherever you want an increment button rendered. Notice the line that begins with `singleton` will ensure that the `increment.js` file will be included just one time, in the `<head>`, no matter how many buttons you insert into the page or where you place them.
Then in your `shinyUI` page definition you can call `incrementButton` wherever you want an increment button rendered. Notice the line that begins with `singleton` will ensure that the `increment.js` file will be included just one time, in the `<head>`, no matter how many buttons you insert into the page or where you place them.

84
_includes/tutorial/building-outputs.md Normal file
View File

@@ -0,0 +1,84 @@
## Building Outputs
Similar to <a href="#building-inputs">custom inputs</a>, if you have some knowledge of HTML/CSS/JavaScript you can also build reusable, custom *output* components.
Output values are received from the server and are directed to an *output binding*, which then
### Write an Output Binding
Each custom output component needs an *output binding*, an object you create that tells Shiny how to identify instances of your component and how to interact with them. (Note that each *instance* of the output component doesn't need its own output binding object; rather, all instances of a particular type of output component share a single output binding object.)
An output binding object needs to have the following methods:
<dl>
<dt>
<code>find(scope)</code>
</dt>
<dd>
<p>
Given an HTML document or element (<code>scope</code>), find any descendant elements that are an instance of your component and return them as an array (or array-like object). The other output binding methods all take an <code>el</code> argument; that value will always be an element that was returned from <code>find</code>.
</p>
<p>
A very common implementation is to use jQuery's <code>find</code> method to identify elements with a specific class, for example:
</p>
<pre>exampleOutputBinding.find = function(scope) {
return $(scope).find(".exampleComponentClass");
};</pre>
</dd>
<dt>
<code>getId(el)</code>
</dt>
<dd>
Return the Shiny output ID for the element <code>el</code>, or <code>null</code> if the element doesn't have an ID and should therefore be ignored. The default implementation in <code>Shiny.InputBinding</code> reads the <code>data-output-id</code> attribute and falls back to the element's <code>id</code> if not present.
</dd>
<dt>
<code>renderValue(el, data)</code>
</dt>
<dd>
Called when a new value that matches this element's ID is received from the server. The function should render the data on the element. The type/shape of the `data` argument depends on the server logic that generated it; whatever value is returned from the R code is converted to JSON using the RJSONIO package.
</dd>
<dt>
<code>renderError(el, err)</code>
</dt>
<dd>
Called when the server attempts to update the output value for this element, and an error occurs. The function should render the error on the element. <code>err</code> is an object with a <code>message</code> String property.
</dd>
<dt>
<code>clearError(el)</code>
</dt>
<dd>
If the element <code>el</code> is currently displaying an error, clear it.
</dd>
<dt>
<code>showProgress(el, show)</code>
</dt>
<dd>
</dd>
</dl>
### Register Output Binding
Once you've created an output binding object, you need to tell Shiny to use it:
<pre><code class="javascript">Shiny.outputBindings.register(exampleOutputBinding, "yourname.exampleOutputBinding");</code></pre>
The second argument is a name the user can use to change the priority of the binding. On the off chance that the user has multiple bindings that all want to claim the same HTML element as their own, this call can be used to control the priority of the bindings:
<pre><code class="javascript">Shiny.outputBindings.setPriority("yourname.exampleOutputBinding", 10);</code></pre>
Higher numbers indicate a higher priority; the default priority is 0. All of Shiny's built-in input component bindings default to a priority of 0.
If two bindings have the same priority value, then the more recently registered binding has the higher priority.
### Example

8
tutorial/index.html
View File

@@ -265,6 +265,14 @@ hljs.initHighlightingOnLoad();
</div>
<!-- Building Outputs -->
<div class="tab-pane" id="building-outputs">
{% capture building_outputs %}{% include tutorial/building-outputs.md %}{% endcapture %}
{{ building_outputs | markdownify }}
</div>
<ul class="pager">
<li><a href="#" id="previous">&larr; Previous</a></li>
<li><a href="#" id="next">Next &rarr;</a></li>