Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Widgets /

Discuss SilverStripe Widgets.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

External widgets all failing?


Reply


4 Posts   1005 Views

Avatar
Erin

Community Member, 26 Posts

5 December 2010 at 10:21am

I've added external widgets to the page model of my site, but it seems to be failing quite spectacularly - even going so far as to break blog widgets that are published alongside the external ones.

The code is straight forward enough, so I'm wondering if I did something wrong in the configuration, perhaps? Any notes would be well appreciated.

To illustrate, here is a page with a combination of blog and external widgets:

[URL=http://www.thebluebirddiner.com/s/?flush=1]Page with blog and external widgets, both[/URL]

  • "IE 6 Detection" - returns "IE 0 Detected"
  • "Blog: Tag Cloud" - works well enough
  • "Google Maps" - isn't being passed $MapsWidgetAPIKey, although I've placed it in _config.php, both for the widget and the site
  • "Login Box" - simply doesn't appear
  • "Blog: RSS Feed" - returns no content
  • "Blog: Browse by date" - returns no content

Here's how I've tried to add widgets to my page:

Page.php:

class Page extends SiteTree {
   public static $db = array(
   );
   public static $has_one = array(
      'Sidebar' => 'WidgetArea',
   );
function getCMSFields(){
$fields = parent::getCMSFields();
    $fields->addFieldToTab('Root.Content.Widgets', new WidgetAreaEditor('Sidebar'));
return $fields;
}
}

Page.ss:

<div id="content-wrapper">
   <% include SideBar %>
   <div id="content-container">
      $Content
      <div id="FormContainer">
         $Form
      </div>
      $PageComments
   </div>
</div>

SideBar.ss:

<div id="Sidebar" class="typography">
   <div style="border:2px solid white;">
      <div style="border:2px solid #537895;">      
$Sidebar
</div>
   </div>
</div>

Does this behavior look familiar to anyone?

Avatar
Erin

Community Member, 26 Posts

6 December 2010 at 9:53am

Edited: 06/12/2010 9:54am

I also notice that the widgets in my blog aren't doubling up the way they're expected to, per [url]http://doc.silverstripe.org/widgets#but_what_if_i_have_widgets_on_my_blog_currently[/url], and the code example for BlogHolder doesn't reflect what I have.

In fact, it looks like a lot of changes have been made to the Blog module since this Widgets documentation was written. Has anyone recently implemented the blog module and external widgets, then run into the sort of problems I'm seeing? I'll be happy to provide more details if anyone thinks they can help.

Avatar
Erin

Community Member, 26 Posts

7 December 2010 at 2:17pm

I'm surprised I'm the only one who's appeared to have this problem. My setup's not unique. Is Silverstripe really this temperamental?

Avatar
Erin

Community Member, 26 Posts

10 December 2010 at 11:10am

Well, I was able to get the IE6 Detection widget to work by moving the functions from class Widget to class Widget_Controller. Now I'm having a bit of trouble with the Google Maps widget.

Out of the box, it simply didn't work.
I tried to rewrite it using code that works on a standalone page, but it's failing too.

I'm missing something important about how to work with forms and parameters in Silverstripe. Can anyone help me out?

Here's my code:

class MapWidget extends Widget {   
   static $db = array(
      "MapName" => "Varchar",
      "MapLat" => "Varchar",
      "MapLng" => "Varchar",
      "MapText" => "HTMLVarchar",
      "MapZoom" => "Int",
      "MapDirections" => "Boolean"
      );
   
   static $defaults = array(
      "MapName" => "Map Name",
      "MapLat" => 41.6639,
      "MapLng" => -91.5304,
      "MapText" => "Map description or text.",
      "MapZoom" => "16",
      "MapDirections" => true
   );
   
   static $title = "Map";
   static $cmsTitle = "Google Map";
   static $description = "Inserts a Google Map on your page";
   
   function getCMSFields() {
      return new FieldSet(
         new TextField("MapName", "Map Name "),
         new TextField("MapLat", "Latitude Coords "),
         new TextField("MapLng", "Longitude Coords "),
         new TextField("MapText", "Marker Text "),
       new TextField("MapZoom", "Zoom Level "),
         new DropdownField("MapDirections", "Enable directions", array("1" => "Yes", "0"=>"No"))
      );
   }
}
class MapWidget_Controller extends Widget_Controller {
   function output(){
   $id = $this->createMapID();
   Requirements::javascript("http://maps.google.com/maps?file=api&amp;v=2&amp;key=THISISMYGOOGLEMAPSAPICODE");
   Requirements::javascript("widgets_maps/scripts/prototype.js");
   Requirements::javascript("widgets_maps/scripts/MapWidget.js");
   Requirements::css("widgets_maps/css/MapWidget.css");
   
      //$output = new DataObjectSet();   
      $mapDiv = "<div class='map-container' id='map-container-".$id."'></div>";
      $directionsForm = "";
      $directionsDiv = "";
      if($this->MapDirections)
      {
         $directionsForm = "<div class='map-directions-form-container'>"
         ."<form class='directions-form' "
         ."onsubmit='setDirections(this.from.value, this.locale.value); return false;'>"
         ."<label for='fromAddress'>"
         ."<span>From:</span></label>"
         ."<input type='text' size='60' "
         ."id='fromAddress' name='from' "
         ."value='Iowa City, IA' />"
         ."<label for='mapDestination'>"
         ."<span>To:</span></label>"
         ."<p id='mapDestination'>"
         .$this->MapName.
         ."</p>"
         ."<label for='locale'>"
         ."<span>Language:</span></label>"
         ."<select id='locale' name='locale'/>"
."<option value='en' selected>English</option>"
         ."<option value='fr'>French</option>"
         ."<option value='de'>German</option>"
         ."<option value='ja'>Japanese</option>"
         ."<option value='es'>Spanish</option>"
."</select>"
."<input name='submit' type='submit' value='Get Directions!' />"
         ."</form></div>";
         $directionsDiv = "<div class='map-directions-container' id='map-directions-container-".$id."'></div>";
      }

      $mapContainer = "<div class='map-widget-container' id='map-widget-container-".$id."'>".$mapDiv.$directionsForm.$directionsDiv."</div>";
      $outputStr = $mapContainer.'<script language="javascript">'
         .'var map; var gdir; var geocoder = null; var addressMarker;'
       .'function initialize() {'
         .'   if (GBrowserIsCompatible()) {'
         .'      map = new GMap2(document.getElementById("map-container-'.$id.'"));'
         .'      map.setMapType(G_NORMAL_MAP);'
         .'      gdir = new GDirections(map, document.getElementById("directions"));'
         .'      GEvent.addListener(gdir, "addoverlay", onGDirectionsLoad);'
         .'      GEvent.addListener(gdir, "error", handleErrors);'
         .'      setDirections("Iowa City, IA", "en_US");'
         .'      heirarchicalControl = new GHierarchicalMapTypeControl();'
         .'      heirarchicalPos = new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(0,0));'
         .'      zoomControls = new GLargeMapControl3D() ;'
         .'      zoomPos = new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(0, 10));'
         .'      map.addControl(heirarchicalControl,heirarchicalPos);'
         .'      map.addControl(zoomControls,zoomPos);'
         .'    }'
         .'}'
       .'function setDirections(fromAddress, locale) {'
         .'   gdir.load("from: " + fromAddress + " to: 228 North Dodge Street, Iowa City, IA",'
         .'      { "locale": locale });'
         .'}'
         .'function handleErrors(){'
         .' if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS)'
         .'    alert("No corresponding geographic location could be found for one of the specified addresses. This may be due to the fact that the address is relatively new, or it may be incorrect.\nError code: " + gdir.getStatus().code);'
         .' else if (gdir.getStatus().code == G_GEO_SERVER_ERROR)'
         .'    alert("A geocoding or directions request could not be successfully processed, yet the exact reason for the failure is not known.\n Error code: " + gdir.getStatus().code);'
         .' else if (gdir.getStatus().code == G_GEO_MISSING_QUERY)'
         .'    alert("The HTTP q parameter was either missing or had no value. For geocoder requests, this means that an empty address was specified as input. For directions requests, this means that no query was specified in the input.\n Error code: " + gdir.getStatus().code);'
         .' else if (gdir.getStatus().code == G_GEO_BAD_KEY)'
         .'    alert("The given key is either invalid or does not match the domain for which it was given. \n Error code: " + gdir.getStatus().code);'
         .' else if (gdir.getStatus().code == G_GEO_BAD_REQUEST)'
         .'    alert("A directions request could not be successfully parsed.\n Error code: " + gdir.getStatus().code);'
         .' else alert("An unknown error occurred.");'
         .'}'
         .'function onGDirectionsLoad(){ '
         .' var poly = gdir.getPolyline();'
         .' if (poly.getVertexCount() > 100) {'
         .'   // alert("The pictured route has been simplified due to the high number of directional changes.");'
         .'    return;'
         .' }'
         .' var baseUrl = "http://maps.google.com/staticmap?";'

         .' var params = [];'
         .' var markersArray = [];'
         .' markersArray.push(poly.getVertex(0).toUrlValue(5) + ",greena");'
         .' markersArray.push(poly.getVertex(poly.getVertexCount()-1).toUrlValue(5) + ",greenb");'
         .' params.push("markers=" + markersArray.join("|"));'

         .' var polyParams = "rgba:0x0000FF80,weight:5|";'
         .' var polyLatLngs = [];'
         .' for (var j = 0; j < poly.getVertexCount(); j++) {'
         .'    polyLatLngs.push(poly.getVertex(j).lat().toFixed(5) + "," + poly.getVertex(j).lng().toFixed(5));'
         .' }'
         .' params.push("path=" + polyParams + polyLatLngs.join("|"));'
         .' params.push("size=300x300");'
         .' params.push("key=THISISMYGOOGLEMAPSAPICODE");'

         .' baseUrl += params.join("&");'

         .' var extraParams = [];'
         .' extraParams.push("center=" + map.getCenter().lat().toFixed(6) + "," + map.getCenter().lng().toFixed(6));'
         .' extraParams.push("zoom=" + map.getZoom());'
         .' addImg(baseUrl + "&" + extraParams.join("&"), "staticMapOverviewIMG");'

         .' var extraParams = [];'
         .' extraParams.push("center=" + poly.getVertex(0).toUrlValue(5));'
         .' extraParams.push("zoom=" + 15);'
         .' addImg(baseUrl + "&" + extraParams.join("&"), "staticMapStartIMG");'

         .' var extraParams = [];'
         .' extraParams.push("center=" + poly.getVertex(poly.getVertexCount()-1).toUrlValue(5));'
         .' extraParams.push("zoom=" + 15);'
         .' addImg(baseUrl + "&" + extraParams.join("&"), "staticMapEndIMG");'
         .'}'

         .'function addImg(url, id) {'
         .'    var img = document.createElement("img");'
         .'    img.src = url;'
         .'    document.getElementById(id).innerHTML = "";'
         .'    document.getElementById(id).appendChild(img);'
         .'}'
      return $outputStr;
   }
   
   function createMapID(){
      return preg_replace('/[^a-z\-]/', '', $this->MapName);
   }
}