javascript - using <script> in html page using sightly - Stack Overflow

admin管理员组

文章数量:1332896

I am trying to add google maps to a ponent that is using sightly. The ponent will let users select an asset and then grab the lat/long from the assets properties and then show the location with a marker in google map.

my googlemap.html page contains the following at the moment.

<div  data-sly-use.ev="Google"
        class="${ev.cssClass || ''}"
        title="${ev.title || ''}"
        data-emptytext="Evernote Asset"
        id="${ev.googleClass || ''}"
        >       

</div>

    <style>
             #map-canvas {
            width: 500px;
            height: 400px;
             }
    </style>

    <script src=""></script>

    <script>
      function initialize() {
        var mapCanvas = document.getElementById('map-canvas');
        var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
        var mapOptions = {
          center: myLatlng,
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(mapCanvas, mapOptions)
        var marker = new google.maps.Marker({
          position: myLatlng,
          map: map,
          title: 'Hello World!'
        });
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>

My Google.java is like this

public class Google extends WCMUse {
  public void activate () {
    //grab the lat/long properties for the asset
  }

  public String googleClass() {
    if (lat != null && long != null) 
      return "map-canvas";
    else 
      return "";
  }
  public String getLat() {return lat;}
  public String getLng() {return lng:]
}

Question As you can see I have hardcoded the lat/long. How can I get the lat/long from my java class using the getters instead of hardcoding?

I tried the following but it doesn't work.

<div  data-sly-use.ev="GoogleMap"
        class="${ev.cssClass || ''}"
        title="${ev.title || ''}"
        data-emptytext="Evernote Asset"
        id="${ev.googleClass || ''}"
        >       



    <style>
             #map-canvas {
            width: 500px;
            height: 400px;
             }
    </style>

    <script src=""></script>

    <script>
      function initialize() {
        var mapCanvas = document.getElementById('map-canvas');
        var myLatlng = new google.maps.LatLng("${ev.lat || ''}","${ev.lng || ''}");
        var mapOptions = {
          center: myLatlng,
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(mapCanvas, mapOptions)
        var marker = new google.maps.Marker({
          position: myLatlng,
          map: map,
          title: 'Hello World!'
        });
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </div>

I am trying to add google maps to a ponent that is using sightly. The ponent will let users select an asset and then grab the lat/long from the assets properties and then show the location with a marker in google map.

my googlemap.html page contains the following at the moment.

<div  data-sly-use.ev="Google"
        class="${ev.cssClass || ''}"
        title="${ev.title || ''}"
        data-emptytext="Evernote Asset"
        id="${ev.googleClass || ''}"
        >       

</div>

    <style>
             #map-canvas {
            width: 500px;
            height: 400px;
             }
    </style>

    <script src="https://maps.googleapis./maps/api/js"></script>

    <script>
      function initialize() {
        var mapCanvas = document.getElementById('map-canvas');
        var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
        var mapOptions = {
          center: myLatlng,
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(mapCanvas, mapOptions)
        var marker = new google.maps.Marker({
          position: myLatlng,
          map: map,
          title: 'Hello World!'
        });
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>

My Google.java is like this

public class Google extends WCMUse {
  public void activate () {
    //grab the lat/long properties for the asset
  }

  public String googleClass() {
    if (lat != null && long != null) 
      return "map-canvas";
    else 
      return "";
  }
  public String getLat() {return lat;}
  public String getLng() {return lng:]
}

Question As you can see I have hardcoded the lat/long. How can I get the lat/long from my java class using the getters instead of hardcoding?

I tried the following but it doesn't work.

<div  data-sly-use.ev="GoogleMap"
        class="${ev.cssClass || ''}"
        title="${ev.title || ''}"
        data-emptytext="Evernote Asset"
        id="${ev.googleClass || ''}"
        >       



    <style>
             #map-canvas {
            width: 500px;
            height: 400px;
             }
    </style>

    <script src="https://maps.googleapis./maps/api/js"></script>

    <script>
      function initialize() {
        var mapCanvas = document.getElementById('map-canvas');
        var myLatlng = new google.maps.LatLng("${ev.lat || ''}","${ev.lng || ''}");
        var mapOptions = {
          center: myLatlng,
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(mapCanvas, mapOptions)
        var marker = new google.maps.Marker({
          position: myLatlng,
          map: map,
          title: 'Hello World!'
        });
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </div>

• javascript
• google-maps
• aem
• sightly

Share Improve this question Follow asked Jun 29, 2015 at 4:48 AnthonyAnthony 36k4949 gold badges181181 silver badges287287 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

Sightly has XSS protection out the box. So in order to evaluate the expressions, the context should be used.

${ev.lat @ context="scriptString"}

Your Javascript runs client side in the browser so will not normally interact with your Java code running server side. You might want to expose your Java method as a RESTful API endpoint and perform an AJAX call in the Javascript code.

SEE: http://docs.jquery./Tutorials (ajax tutorial)

Other ways are creating object on server side and expose that object from session or from some static functions and then you can use JSP servlet syntax to access that object.

<LI>Curent time: <%= new java.util.Date() %> 
<LI>Host name: <%= request.getRemoteHost() %> 
<LI>ID sesion: <%= session.getId() %> 
</UL> 
<% deleteconfig deletecfg = new deleteconfig(); %>
<%= delectecfg.initiate(); =%>
</BODY> 
</HTML> 

JSP scripting elements are:

Expressions: <% = expression%> The expression is evaluated and printed out the document.

Scriptlet <% code%> The code is inserted into the servlet service method.

Statements: <%! code%> The code is inserted into the servlet class, outside of any method.

For JSP scripting elements is possible and another syntactic form, based on XML markup:

<jsp:expression> Java expression </ jsp: expression>
<jsp:scriptlet> Java code </ jsp: scriptlet>
<jsp:declaration> Statement Java </ jsp: declaration>

I would prefer the first approach using restFul API. That will be more cleaner approach

本文标签： javascriptusing ltscriptgt in html page using sightlyStack Overflow