All geek questions in one place

How to create a sample demo in gwt using angularjs using JSNI?

I created a sample demo application that has the following html page.

<!doctype html>
<!-- The DOCTYPE declaration above will set the     -->
<!-- browser rendering engine into                -->
<!-- "Standards Mode". Replacing this declaration   -->
<!-- with a "Quirks Mode" doctype is not supported. -->

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script>
function alert1(p1) {
    alert("P1 is "+p1);             
}
</script>
    <!--                                                               -->
    <!-- Consider inlining CSS to reduce the number of requested files -->
    <!--                                                               -->
    <link type="text/css" rel="stylesheet" href="Sample_JS.css">

    <!--                                           -->
    <!-- Any title is fine                         -->
    <!--                                           -->
    <title>Web Application Starter Project</title>

    <!--                                           -->
    <!-- This script loads your compiled module.   -->
    <!-- If you add any GWT meta tags, they must   -->
    <!-- be added before this line.                -->
    <!--                                           -->
    <script type="text/javascript" language="javascript" src="sample_js/sample_js.nocache.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

    <script type="text/javascript">

        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope, $window) {

            $scope.nameList = [];
            $scope.ShowAlert = function () {

                $scope.nameList.push($scope.nameFieldContainer);
                $window.alert("Hello  Angular : "+$scope.nameFieldContainer);
            }
        });
    </script>


  </head>

  <!--                                           -->
  <!-- The body can have arbitrary html, or      -->
  <!-- you can leave the body empty if you want  -->
  <!-- to create a completely dynamic UI.        -->
  <!--                                           -->
  <body>

    <!-- OPTIONAL: include this if you want history support -->
    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>

    <!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
    <noscript>
      <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
        Your web browser must have JavaScript enabled
        in order for this application to display correctly.
      </div>
    </noscript>



     <div ng-app="MyApp" ng-controller="MyController">

        <h1>Web Application Starter Project</h1>

        <table align="center">
            <tr>
                <td colspan="2" style="font-weight:bold;">Please enter your name:</td>        
            </tr>
            <tr>
                <td data-ng-model="nameFieldContainer" id="nameFieldContainer"></td>
                <td id="test" ></td>
                <td id="sendButtonContainer" ng-click="ShowAlert()"></td>
            </tr>
            <tr>
                <td> <input type ="text" data-ng-model="nameFieldContainer"> </td>
                <td colspan="2" style="color:red;" id="errorLabelContainer"></td>
            </tr>
            <tr>
                <td><input type = "button" name="click" ng-click="ShowAlert()"></td>
            </tr>

        </table>

        <table align="center">
            <tr ng-repeat = "name in nameList">
                <td colspan="2" style="font-weight:bold;">{{name}}</td>        
            </tr>

        </table>

    </div>

  </body>
</html>

My gwt controller class as below

package com.google.client;

import com.google.shared.FieldVerifier;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.KeyCodes;
import com.google.gwt.event.dom.client.KeyUpEvent;
import com.google.gwt.event.dom.client.KeyUpHandler;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.DialogBox;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class Sample_JS implements EntryPoint {
    /**
     * The message displayed to the user when the server cannot be reached or
     * returns an error.
     */
    private static final String SERVER_ERROR = "An error occurred while "
            + "attempting to contact the server. Please check your network "
            + "connection and try again.";

    /**
     * Create a remote service proxy to talk to the server-side Greeting service.
     */
    private final GreetingServiceAsync greetingService = GWT
            .create(GreetingService.class);

    /**
     * This is the entry point method.
     */
    public void onModuleLoad() {
        final Button sendButton = new Button("Add");


        final TextBox nameField = new TextBox();
        nameField.setText("GWT User");
        final Label errorLabel = new Label();

        // We can add style names to widgets
        sendButton.addStyleName("sendButton");

        // Add the nameField and sendButton to the RootPanel
        // Use RootPanel.get() to get the entire body element
        RootPanel.get("nameFieldContainer").add(nameField);
        RootPanel.get("sendButtonContainer").add(sendButton);
        RootPanel.get("errorLabelContainer").add(errorLabel);

        // Focus the cursor on the name field when the app loads
        nameField.setFocus(true);
        nameField.selectAll();

        // Add a handler to close the DialogBox
        closeButton.addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent event) {
                dialogBox.hide();
                sendButton.setEnabled(true);
                sendButton.setFocus(true);
            }
        });

        // Create a handler for the sendButton and nameField
        class MyHandler implements ClickHandler, KeyUpHandler {
            /**
             * Fired when the user clicks on the sendButton.
             */
            public void onClick(ClickEvent event) {
                //sendNameToServer();
                MyTestJS.hasPopupBlocker(nameField.getValue());
            }

            /**
             * Fired when the user types in the nameField.
             */
            public void onKeyUp(KeyUpEvent event) {
                if (event.getNativeKeyCode() == KeyCodes.KEY_ENTER) {
                    sendNameToServer();
                }
            }
        // Add a handler to send the name to the server
        MyHandler handler = new MyHandler();
        sendButton.addClickHandler(handler);
        nameField.addKeyUpHandler(handler);
    }
}

I am trying to call the anularjs function from the underlying js method using the gwt button component, but I cannot.

package com.google.client;

public class MyTestJS {

    public static native boolean hasPopupBlocker(String name)/*-{
        if (!name){
            name = "Please enter name";
        }else{
            name = "Hello  "+ name ;
        }
        return $wnd.ShowAlert();
    }-*/;
}

How can I call the angularJs ShowAlert () function from gwt (by clicking a button from java code or in another way)? please suggest. any help would be appreciable ...... thanks in advance.

+4
source share

No one has answered this question yet.

See related questions:

Source: https://habr.com/ru/post/1623018/

More articles:


All Articles