﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"    "http://www.w3.org/TR/html4/loose.dtd"><html>    <head>        <!-- -*- xhtml -*- -->        <title>Platform Plugin Quick Start</title>        <meta name="AUDIENCE" content="NBUSER">        <meta name="TYPE" content="ARTICLE">        <meta name="EXPIRES" content="N">        <meta name="developer" content="toni.epple@dukescript.com">        <meta name="indexed" content="y">        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <meta name="description"              content="A guide describing how to write plugins for NetBeans IDE with HTML4J API (DukeScript).">        <link rel="stylesheet" type="text/css" href="https://netbeans.org/netbeans.css">    </head>    <!--      Copyright (c) 2009, 2010, 2011, 2012, 2013, 2014 Oracle and/or its affiliates. All rights reserved. -->    <!--     Use is subject to license terms.-->    <body>        <h1><a name="top"></a>NetBeans Platform Plugins with DukeScript</h1>        <p>Welcome to a new era for NetBeans plugin development!        <p>This tutorial shows you how you can use the <a href="http://bits.netbeans.org/html+java/1.2.3/index.html">html4java API</a>            (aka DukeScript) to create NetBeans Plugins. This API allows you to             define your view using HTML 5, and code the view logic in Java.            After completing this tutorial, you'll be able to create Plugins            for the NetBeans IDE, or for your NetBeans Platform Application with this new             Technology.        <p class="tips">After you finish this tutorial, you can move on to the            <a href="https://dukescript.com/documentation.html">DukeScript Library</a>.            This page provides comprehensive documentation of the DukeScript APIs and many             helpful tutorials.        <p><b class="notes">Note:</b> This document uses NetBeans IDE 8.1 and NetBeans Platform 8.1.</p>        <p><b>Contents</b></p>        <p><img src="../images/articles/81/netbeans-stamp.png" class="stamp" width="114" height="114" alt="Content on this page applies to NetBeans IDE 8.0" title="Content on this page applies to NetBeans IDE 8.0"/></p>        <ul class="toc">            <li><a href="#install-plugin">Install the DukeScript Plugin</a></li>            <li><a href="#create-project">Create a Project</a>                <ul>                    <li><a href="#code-logic">Code the View Logic</a></li>                    <li><a href="#code-view">Create the View</a></li>                </ul>            </li>        </ul>        <p><b>To follow this tutorial, you need the software and resources listed in the following                table.</b></p>        <table>            <tbody>                <tr>                    <th class="tblheader" scope="col">Software or Resource</th>                    <th class="tblheader" scope="col">Version Required</th>                </tr>                <tr>                    <td class="tbltd1"><a href="https://netbeans.org/downloads/index.html">NetBeans IDE</a></td>                    <td class="tbltd1">version 8.1 or above</td>                </tr>                <tr>                    <td class="tbltd1"><a href="http://java.sun.com/javase/downloads/index.jsp">Java Developer Kit (JDK)</a></td>                    <td class="tbltd1">version 7 or above</td>                </tr>            </tbody>        </table>        <p class="tips">For troubleshooting purposes, the complete project is available for download on Github: <a href="https://github.com/dukescript/github-nb-plugin">Tutorial source code</a>.</p>        <p>The Window you create in this tutorial will            look as follows:</p>        <img width="70%" src="../images/tutorials/dukescript/81/repos-plugin.png" style="border:1px solid black"             alt="DukeScript Plugin running in NetBeans">        <p><p>When the user enters a Github username in the input field, the window            displays a list of projects of this user.</p>        <h2 class="tutorial">The Github REST API</h2>        <div class="indent">We'll use the <a href="https://developer.github.com/v3/">Github REST API</a> to provide the data for our tutorial.            The following command lists all repositories for a github account (actually the Jersey JAX-RS developers account):            <br><br>            <pre class="examplecode">$ curl https://api.github.com/users/jersey/repos</pre>            <br><br>            The ouput of this query has the following format:            <br><br>            <pre class="examplecode">[  {    "id": 6109440,    "name": "hol-sse-websocket",    "full_name": "jersey/hol-sse-websocket",    "owner": {      "login": "jersey",      "id": 399710,      "avatar_url": "https://avatars.githubusercontent.com/u/399710?v=3",      "gravatar_id": "",      "url": "https://api.github.com/users/jersey",      "html_url": "https://github.com/jersey",      "followers_url": "https://api.github.com/users/jersey/followers",      "following_url": "https://api.github.com/users/jersey/following{/other_user}",      "gists_url": "https://api.github.com/users/jersey/gists{/gist_id}",      "starred_url": "https://api.github.com/users/jersey/starred{/owner}{/repo}",      "subscriptions_url": "https://api.github.com/users/jersey/subscriptions",      "organizations_url": "https://api.github.com/users/jersey/orgs",      "repos_url": "https://api.github.com/users/jersey/repos",      "events_url": "https://api.github.com/users/jersey/events{/privacy}",      "received_events_url": "https://api.github.com/users/jersey/received_events",      "type": "Organization",      "site_admin": false    },    "private": false,    "html_url": "https://github.com/jersey/hol-sse-websocket",    "description": "Hands-on-lab on using server-sent events and web socket with Jersey and Tyrus.",    "fork": false,    "url": "https://api.github.com/repos/jersey/hol-sse-websocket",    "forks_url": "https://api.github.com/repos/jersey/hol-sse-websocket/forks",    "keys_url": "https://api.github.com/repos/jersey/hol-sse-websocket/keys{/key_id}",    "collaborators_url": "https://api.github.com/repos/jersey/hol-sse-websocket/collaborators{/collaborator}",    "teams_url": "https://api.github.com/repos/jersey/hol-sse-websocket/teams",    "hooks_url": "https://api.github.com/repos/jersey/hol-sse-websocket/hooks",    "issue_events_url": "https://api.github.com/repos/jersey/hol-sse-websocket/issues/events{/number}",    "events_url": "https://api.github.com/repos/jersey/hol-sse-websocket/events",    "assignees_url": "https://api.github.com/repos/jersey/hol-sse-websocket/assignees{/user}",    "branches_url": "https://api.github.com/repos/jersey/hol-sse-websocket/branches{/branch}",    "tags_url": "https://api.github.com/repos/jersey/hol-sse-websocket/tags",    "blobs_url": "https://api.github.com/repos/jersey/hol-sse-websocket/git/blobs{/sha}",    "git_tags_url": "https://api.github.com/repos/jersey/hol-sse-websocket/git/tags{/sha}",    "git_refs_url": "https://api.github.com/repos/jersey/hol-sse-websocket/git/refs{/sha}",    "trees_url": "https://api.github.com/repos/jersey/hol-sse-websocket/git/trees{/sha}",    "statuses_url": "https://api.github.com/repos/jersey/hol-sse-websocket/statuses/{sha}",    "languages_url": "https://api.github.com/repos/jersey/hol-sse-websocket/languages",    "stargazers_url": "https://api.github.com/repos/jersey/hol-sse-websocket/stargazers",    "contributors_url": "https://api.github.com/repos/jersey/hol-sse-websocket/contributors",    "subscribers_url": "https://api.github.com/repos/jersey/hol-sse-websocket/subscribers",    "subscription_url": "https://api.github.com/repos/jersey/hol-sse-websocket/subscription",    "commits_url": "https://api.github.com/repos/jersey/hol-sse-websocket/commits{/sha}",    "git_commits_url": "https://api.github.com/repos/jersey/hol-sse-websocket/git/commits{/sha}",    "comments_url": "https://api.github.com/repos/jersey/hol-sse-websocket/comments{/number}",    "issue_comment_url": "https://api.github.com/repos/jersey/hol-sse-websocket/issues/comments/{number}",    "contents_url": "https://api.github.com/repos/jersey/hol-sse-websocket/contents/{+path}",    "compare_url": "https://api.github.com/repos/jersey/hol-sse-websocket/compare/{base}...{head}",    "merges_url": "https://api.github.com/repos/jersey/hol-sse-websocket/merges",    "archive_url": "https://api.github.com/repos/jersey/hol-sse-websocket/{archive_format}{/ref}",    "downloads_url": "https://api.github.com/repos/jersey/hol-sse-websocket/downloads",    "issues_url": "https://api.github.com/repos/jersey/hol-sse-websocket/issues{/number}",    "pulls_url": "https://api.github.com/repos/jersey/hol-sse-websocket/pulls{/number}",    "milestones_url": "https://api.github.com/repos/jersey/hol-sse-websocket/milestones{/number}",    "notifications_url": "https://api.github.com/repos/jersey/hol-sse-websocket/notifications{?since,all,participating}",    "labels_url": "https://api.github.com/repos/jersey/hol-sse-websocket/labels{/name}",    "releases_url": "https://api.github.com/repos/jersey/hol-sse-websocket/releases{/id}",    "created_at": "2012-10-07T04:44:32Z",    "updated_at": "2014-06-29T22:29:42Z",    "pushed_at": "2013-05-29T16:56:03Z",    "git_url": "git://github.com/jersey/hol-sse-websocket.git",    "ssh_url": "git@github.com:jersey/hol-sse-websocket.git",    "clone_url": "https://github.com/jersey/hol-sse-websocket.git",    "svn_url": "https://github.com/jersey/hol-sse-websocket",    "homepage": null,    "size": 7750,    "stargazers_count": 11,    "watchers_count": 11,    "language": "Java",    "has_issues": true,    "has_downloads": true,    "has_wiki": true,    "has_pages": false,    "forks_count": 5,    "mirror_url": null,    "open_issues_count": 1,    "forks": 5,    "open_issues": 1,    "watchers": 11,    "default_branch": "master"  },  {     "etc." : "etc."  }]</pre></div>        <!-- ===================================================================================== -->        <br>        <h2 class="tutorial"><a name="install-plugin"></a>Installing the Plugin</h2>        <p>Before we start coding we'll install a Plugin that helps us develop applications with DukeScript.        </p>        <div class="indent">            <ol>                <li>Go to Tools/Plugins, refresh the catalog, select available plugins tab and install <strong>DukeScript Project Wizard</strong>.                    <br><br>                    <img width="70%" style="border:1px solid black" src="../images/tutorials/dukescript/81/install.png" alt="Install DukeScript Project wizard">                    <br><br>                    This will require a restart of the IDE.                 </li>            </ol>            <p>                After that, you'll have a handy wizard that helps you create a                 new project. We'll use it to create our demo project in the next section.                <br>                Under the hood this wizard uses Maven to create a project from an Archetype.                Alternatively you can also use the Maven Archetypes directly from the command line:            </p>            <pre class="examplecode">mvn archetype:generate -DarchetypeGroupId=com.dukescript.archetype-DarchetypeArtifactId=knockout4j-archetype -DarchetypeVersion=0.11</pre>            <p>The archetype can generate subprojects for each of the supported platforms. Currently                we support iOS, Desktop (via JavaFX), Android, NetBeans plugin, and Browser (via bck2brwsr).                The JavaFX-based project will always be generated, as this is integrated with the NetBeans visual debugger and the other                debugging functions. The other subprojects are only generated on demand using these properties:                <br>                Run in Browser:<br>                <tt>-Dwebpath=client-web</tt>                <br>                Create NetBeans Module:<br>                <tt>-Dnetbeanspath=client-netbeans</tt>                <br>                Create iOS project:<br>                <tt>-Diospath=client-ios </tt>                <br>                Create Android project:<br>                <tt>-Dandroidpath=client-android</tt></p>            <h2 class="tutorial"><a name="create-project"></a>Create the Project(s)</h2>            <ol>                <li>Now create new project (<strong>File | New Project...</strong>). In the New Project Wizard switch to category <strong>DukeScript</strong>. Choose the template <strong>DukeScript Application</strong>:                    <br><br>                    <img width="70%" style="border:1px solid black" src="../images/tutorials/dukescript/81/dukescript1.jpg" alt="Install DukeScript Project wizard">                                       <br><br>                    Click Next.</li>                <li>In Step 2 you need to specify the location where to create your project and the Maven coordinates.<br><br>                    <br><br>                    <img width="70%" style="border:1px solid black" src="../images/tutorials/dukescript/81/dukescript2.png" alt="Step 2 of New Project wizard">                                       <br><br>                    Click Next.                </li>                <li>The next wizard steps ask to what platforms you would like to deploy.                     The options are Android, iOS, Browser and NetBeans Plugin. In addition to that a Desktop                     Client will automatically created for you. This is the one that is used for testing and debugging. Select "Run as NetBeans Plugin" in this step:<br><br>                    <img width="70%" style="border:1px solid black" src="../images/tutorials/dukescript/81/wizard_4.png" alt="Step 3 of New Project wizard">                    <br><br>                </li>                <li>In Step 4 you can choose between the available project templates.                     Let's go for the simplest one <strong>Knockout 4 Java Maven Archetype</strong>.                     In this step you can also choose to install some sample code.                     But for this tutorial we'll start from scratch:                    <br><br>                    <img width="70%" style="border:1px solid black" src="../images/tutorials/dukescript/81/wizard_5.png" alt="Step 2 of New Project wizard">                                       <br><br>                    Click Finish.                </li>            </ol>        </div>        <div class="indent">            <p>                The Maven archetype will create a parent project, that contains several subprojects.                There's always the "General Client Code". This is the project that contains the actual source                Java code. Use this to develop, test and debug your project.                 There's also a separate project for JavaScript Libraries. The code in here makes calls to                 JavaScript and back, which is sometimes necessary to achieve what you want.</p>            <br><br>            <img width="40%" style="border:1px solid black" src="../images/tutorials/dukescript/81/subprojects.png" alt="The generated projects">                               <br><br>            <p>A "project" is a NetBeans IDE compilation/deployment unit. It contains a Maven POM file,                which on disk is named "pom.xml".                 This is a configuration file that contains all information required for compiling and running the project.                The project contains all of your sources. The project opens in the IDE. You can view its logical                structure in the Projects window (Ctrl+1) and its file structure in the Files window (Ctrl+2).</p>            <p>For each target platform you selected in the                wizard, there will also be a project. These projects can be used to deploy and test the project on the                 individual platforms. In NetBeans each of the projects context menu has a submenu "custom" with                entries that apply only to the deployment platform. For example the iOS project has                an entry that allows you to run in an iPad simulator or deploy to a real iOS device, while the Android                project has entries for running on an attached Android device.                       </p>            <p>In our tutorial, we have created a subproject that creates a NetBeans plugin.                If you run it, it will start your plugin inside the core NetBeans Platform.                It will also create an <tt>nbm file</tt>, that you can use to install the plugin in                 the IDE.            </p>            <p>After the projects were created, NetBeans will immediately start an initial                build and downloads all required dependencies.</p>        </div>        <!-- ===================================================================================== -->        <br>        <h2 class="tutorial"><a name="coding-module"></a>Coding the Module</h2>        <p>In order to create our Github Tool, you need to complete the following steps:</p>        <ul>            <li><a href="#code-logic">Code the View Logic</a></li>            <li><a href="#code-view">Create the View</a></li>        </ul>        <div class="indent">            <h3 class="tutorial"><a name="code-logic"></a>Code the View Logic</h3>            <p>DukeScript allows developers a clean separation of view and view logic.                The view is defined in HTML, the logic is written in Java. With                this approach you can write and test the logic independent of the view.                We'll start by coding the logic of our application. The view will be added later.            </p>            <p>                In this section, you'll use the <a href="http://bits.netbeans.org/html4j/1.0/net/java/html/json/Model.html">@Model</a> annotation to create                 the view logic of our application. You'll learn how to connect a model                to the Github REST API.</p>            <p class="notes"><b>Note:</b> In this section we will create a Java class with annotations.                 At compile-time, another Java class is generated from these annotations.                This saves us a from writing a lot of setters, getters and other boilerplate code.                If you're interested in having a look at the generated code, you                can find it in your project in Folder "Generated Sources (annotations)."            <div class="indent">                <ol>                    <li>In project "github General Client Code" -> "Source Packages" open the class <tt>DataModel.java</tt> in the editor:                        <br><br>                        <pre class="examplecode">package com.dukescript.github;import net.java.html.json.Model;@Model(className = "Data", targetId="", properties = {})final class DataModel {    private static Data ui;    /**     * Called when the page is ready.     */    static void onPageLoad() throws Exception {        ui = new Data();        ui.applyBindings();    }}</pre>                        <p>                            We will use this class to define our view logic.                            The <tt>Model</tt> annotation defines the name of the model                             that will be generated, and it's properties. Currently there are no properties.                        </p>                        <p>                            In your project open <tt>Generated Sources (annotations)</tt>.                            You will find the class <tt>Data.java</tt> that has been generated                             from the Annotation.                        </p>                    </li>                    <li>Change the value of attribute <tt>className</tt> to "ViewModel". If you save the file,                        NetBeans will show some errors. It will underline all uses                         of class <tt>Data</tt>. This is because the gerneated class is now named "ViewModel".                        Replace these occurrences with "ViewModel"                         to fix these problems.                        <pre class="examplecode">package com.dukescript.github;import net.java.html.json.Model;@Model(className = "<strong>ViewModel</strong>", targetId="", properties = {})final class DataModel {    private static <strong>ViewModel</strong> ui;    /**     * Called when the page is ready.     */    static void onPageLoad() throws Exception {        ui = new <strong>ViewModel</strong>();        ui.applyBindings();    }}</pre>                    <li>Now we'll add a property of type String for the Github username:                        <pre class="examplecode">import net.java.html.json.Model;import net.java.html.json.Property;@Model(className = "ViewModel", targetId="", properties = {    <strong>@Property(name = "user", type=String.class)</strong>})final class DataModel {    private static ViewModel ui;    /**     * Called when the page is ready.     */    static void onPageLoad() throws Exception {        ui = new ViewModel();        ui.applyBindings();    }}                        </pre>                                              When you save the file, it will automatically add a setter and a getter to the generated class.                        You can test it right away in method <tt>onPageLoad</tt> :                        <pre class="examplecode">    static void onPageLoad() throws Exception {        ui = new ViewModel();        <strong>ui.setUser("dukescript");</strong>        ui.applyBindings();    }                        </pre>                        <br><br>                    <li><p>Next we'll Model the information we want to get from Github:                        <pre class="examplecode">@Model(className = "RepositoryInfo", properties = {        @Property(name = "id", type = int.class),        @Property(name = "name", type = String.class),        @Property(name = "owner", type = Owner.class),        @Property(name = "private", type = boolean.class)})    static class RepositoryModel {    }    @Model(className = "Owner", properties = {        @Property(name = "login", type = String.class)    })    static final class OwnerModel {    }</pre>                              <p>The names of these properties were not chosen at random. If you have a look at the                            JSON message from github, you'll see that the structure and properties of our Model                             match some attribute names and the structure of the JSON message.                        </p>                        <p>DukeScript can automatically parse JSON messages and map them to                            our Model class. That's what we'll utilize next.</p>                        <br><br>                    </li>                    <li><p>Add a new property to ViewModel:</p>                        <br>                        <pre class="examplecode">import java.util.List;import net.java.html.json.Model;import net.java.html.json.OnReceive;import net.java.html.json.Property;@Model(className = "ViewModel", targetId = "", properties = {    @Property(name = "user", type = String.class),    <strong>@Property(name = "repositories", type = RepositoryInfo.class, array = true)</strong>})final class DataModel {    //... rest of the code                        </pre>                        <br>                        <p>Please note that the new property has the attribute <tt>array</tt> set to true.                            This means there can be multiple instances of RepositoryInfo.</p>                    </li>                    <li><p>Now we'll add a method to connect to the REST API:</p>                        <pre class="examplecode">    <strong>@OnReceive(url = "https://api.github.com/users/{name}/repos")</strong>    public static void connect(ViewModel vm, List&lt;RepositoryInfo&gt; repos) {        vm.getRepositories().clear();        vm.getRepositories().addAll(repos);    }                        </pre>                        <p>The method <tt>connect</tt> is annotated with the annotation <a href="http://bits.netbeans.org/html4j/1.0/net/java/html/json/OnReceive.html">@OnReceive</a>                            It will generate a new method of the same name in our ViewModel. The generated method has a                             parameter for the parts of the url enclosed in curly braces ({name}).                             When you call the method with a parameter, this will replace the <tt>{name}</tt> to build the URL                            dynamically.                        </p>                        <p>The generated method does a lot of magic for us. It will call the URL to retrieve the answer.                        The answer is in the JSON format you've seen above. In our connect method, we've declared that we want to                         receive a <tt>List&lt;RepositoryInfo&gt; repos</tt>.                        Therefore the generated method will automatically parse the JSON message and map it to a list of RepositoryInfo Objects.</p>                        <p>That's probably the easiest way to parse a JSON message.</p>                    </li>                    <li><p>Now we'll declare a function that calls our generated method:</p>                        <pre class="examplecode"><strong>@Function</strong>public static void loadRepos(ViewModel vm){    vm.connect(vm.getUser());}</pre>                        <p>The annotation <a href="">@Function</a> makes this method callable from the view. For example from a button click. We'll use it in the next section.</p>                    </li>                </ol>            </div>            <p>In this section we have created the view logic of our application. We used the <tt>@Model</tt>                annotation to generate several model classes, and we've used <tt>@OnReceive</tt> to                 connect to the Github REST API and read the repositories of a user. In the next section we'll create a view for our plugin.            </p>        </div>        <div class="indent">            <h3 class="tutorial"><a name="code-view"></a>Create the View</h3>            <p>So far we created the view logic. Now we're ready to create the view. In DukeScript                the view is defined as HTML. Inside of the HTML we use some special <tt>data-bind</tt> attributes.                With these attributes we establish a two-way binding between the view and the viewmodel.</p>            <ol>                <li><p>Open file <tt>index.html</tt> in the editor ( Web Pages | pages | index.html ). This is the (empty) view                         definition:</p>                    <pre class="examplecode">&lt;!DOCTYPE html&gt;&lt;html&gt;    &lt;head&gt;        &lt;title&gt;Github Repositories&lt;/title&gt;        &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;    &lt;/head&gt;    &lt;body&gt;        &lt;/body&gt;&lt;/html&gt;                    </pre>                </li>                <li>                    <p>Add a text input field, a button and a list:</p>                    <pre class="examplecode">&lt;!DOCTYPE html&gt;&lt;html&gt;    &lt;head&gt;        &lt;title&gt;Github Repositories&lt;/title&gt;        &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;    &lt;/head&gt;    &lt;body&gt;        <strong>&lt;input type="text" &gt;        &lt;button &gt;Load&lt;/button&gt;        &lt;ol &gt;            &lt;li&gt;&lt;span &gt;&lt;/span&gt;&lt;/li&gt;        &lt;/ol&gt;</strong>       &lt;/body&gt;&lt;/html&gt;</pre>                </li>                <li><p>To make this dynamic you need to bind the elements to the model using <tt>data-bind</tt> attributes:                    </p>                    <pre class="examplecode">&lt;!DOCTYPE html&gt;&lt;html&gt;    &lt;head&gt;        &lt;title&gt;Github Repositories&lt;/title&gt;        &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;    &lt;/head&gt;    &lt;body&gt;        &lt;input type="text" <strong>data-bind="textInput: user"</strong>&gt;        &lt;button <strong>data-bind="click: loadRepos"</strong>&gt;Load&lt;/button&gt;        &lt;ol <strong>data-bind="foreach: repositories"</strong>&gt;            &lt;li&gt;&lt;span <strong>data-bind="text: name</strong>"&gt;&lt;/span&gt;&lt;/li&gt;        &lt;/ol&gt;          &lt;/body&gt;&lt;/html&gt;</pre>                                       <p>The first binding <tt>textInput</tt> binds the value of the input to the property <tt>user</tt> of our model.                        Whenever the user types something in this textfield, the property <tt>user</tt> will be updated and vice versa.                        The <tt>click</tt>-binding on the button binds the click event to the function <tt>loadRepos</tt>.                        When the user clicks the button the method <tt>loadRepos</tt> will be called.                        The <tt>foreach</tt>-binding is bound to the property <tt>repositories</tt> of our model.                        For each entry in the array, it will copy the content of the enclosing element. That means, for each entry                         it will create a list item. For this list item the <tt>RepositoryInfo</tt> will be the binding context.</p>                    <p>That's the reason why here we can bind directly to the properties of <tt>RepositoryInfo</tt>.                        The <tt>text</tt>-binding simply binds the text of the span to the name property of the <tt>RepositoryInfo</tt>.</p>                    <p class="tips">For more information on the binding syntax, check out the                          <a href="https://dukescript.com/knockout4j.html">documentation</a>.                        There's a comprehensive list of all available bindings.</p>                </li>                <li><p>Now run your application. When it runs enter a valid username in the input field. The ui will display                         a list of their repositories:</p>                    <br><br>                    <img width="50%" src="../images/tutorials/dukescript/81/repos.png" style="border:1px solid black"                         alt="The View">                    <br><br>                </li>                <li><p>As a final step you should now run the application as a NetBeans Plugin. Switch to the project "github Client for NetBeans" and choose <tt>run</tt>.</p>                    <br><br>                    <img width="50%" src="../images/tutorials/dukescript/81/repos-plugin.png" style="border:1px solid black"                         alt="The View">                    <br><br>                </li>            </ol>            <p>In this section you've learned how to define a view in HTML and how to bind it to the view model.                The view is still very basic, but you can use CSS (and even JavaScript) to make it look nicer.                                The HTML-renderer we use is based on Webkit and it's pretty capable. We'll cover this in another tutorial.            </p>        </div>        <p>You've reached the end of this tutorial. We hope you like this modern way for separating the        view from the view model. By the way, you can also create applications for Android, iOS, and the Browser        with this technology.</p>        <br>                <br style="clear:both;" />        <!-- ======================================================================================== -->        <h2><a name="nextsteps"></a>See Also</h2>        <p>This concludes the NetBeans Platform Plugins with DukeScript. This document has described            how to create a plugin that displays github repositories for any github user.            For more information about creating and developing applications with DukeScript, see the following resources:        <ul>            <li><a href="https://dukescript.com">The DukeScript Website</a></li>            <li><a href="https://dukescript.com/blog.html">The DukeScript Blog</a></li>            <li><a href="http://bits.netbeans.org/html+java/1.2.3/index.html">NetBeans html4JavaAPI Javadoc</a></li>              </ul>        <!-- ======================================================================================== -->    </body></html>