Jump to:

794 Posts in 408 Topics by 304 members

Widgets

SilverStripe Forums » Widgets » External widgets all failing?

Discuss SilverStripe Widgets.

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

Page: 1
Go to End
Author Topic: 908 Views
  • Erin
    Avatar
    Community Member
    26 Posts

    External widgets all failing? Link to this post

    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:

    Page with blog and external widgets, both

    • "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?

  • Erin
    Avatar
    Community Member
    26 Posts

    Re: External widgets all failing? Link to this post

    I also notice that the widgets in my blog aren't doubling up the way they're expected to, per http://doc.silverstripe.org/widgets#but_what_if_i_have_widgets_on_my_blog_currently, 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.

  • Erin
    Avatar
    Community Member
    26 Posts

    Re: External widgets all failing? Link to this post

    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?

  • Erin
    Avatar
    Community Member
    26 Posts

    Re: External widgets all failing? Link to this post

    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);
       }
    }

    908 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.