Skip to content

Instantly share code, notes, and snippets.

@GordonSmith
Last active August 8, 2018 08:36
Show Gist options
  • Save GordonSmith/eeefbff178662b1acd01 to your computer and use it in GitHub Desktop.
Save GordonSmith/eeefbff178662b1acd01 to your computer and use it in GitHub Desktop.
Tutorial 1: Hello World
license: Apache-2.0

Tutorial 1: The mandatory "Hello World" example.

Demonstrates how to import and instanciate a simple TextBox "Widget".

1 - Import the required visualization:

import { TextBox } from "@hpcc-js/common";

2 - Instantiate and render the visualisation:

var widget = new TextBox()  //  Create new instance of TextBox
    .target("placeholder")  //  Nominate target on web page 
    .text("Hello\nWorld!")  //  Set a "published property"
    .render()               //  Render
;

Note: To discover all the available "published properties" for the TextBox Widget see: Dermatology-TextBox and enable the "Properties" view.

body {
padding:0px;
margin:0px;
overflow:hidden;
}
#placeholder {
width:100%;
height:100vh;
}
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="./index.css">
<!-- GetLibs: An in-browser module loader for quick demos -->
<script src="https://unpkg.com/getlibs"></script>
</head>
<body>
<div id="placeholder">
<!-- Placeholder for Visualization -->
</div>
<script>
// Load Example JavaScript (via GetLibs)---
System.import('./index.js');
</script>
</body>
</html>
import { TextBox } from "@hpcc-js/common";
var widget = new TextBox() // Create new instance of TextBox
.target("placeholder") // Nominate target on web page
.text("Hello\nWorld!") // Set a "published property"
.render() // Render
;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment