Python / Pylons… Setting the CSS Class on a webhelpers.html.tags Select List

Real quick one, once again just for my future searching concerns, just wanted to point out how to set the css class on a select list when using the webhelpers.html.tags.select helper. Won’t get into how I hate html helper classes, but in this case it’s for something so simple AND it makes it easier to hook into a precreated list. Anyways, it’s me being lazy and breaking my rules.

With that being said, took me a bit to find out how to set the css class on the created select list:

    ${h.select('selectGender', '', h.lookups.list(h.lookups.GENDER_LOOKUP), 'selectGender', class_='input' ) }

Its that “class_=” part. Really simple once you see it, but annoying if you don’t know it.

Just a quick break down on what the select method takes in:

h.select(name, selected option, list, id, extra stuff)

How to Debug Pylons with PyCharm

So I really hate Eclipse. Something fierce. And I have to admit it’s not really fair since I come from Visual Studios/C# which together can cost upwards of 2k to buy so it better be a great product. And Eclipse is free so you know, yah. But since IronPython may be dead, and it was annoying to set up anyway, I’ve been stuck with Eclipse… Until today. Turns out those Resharper guys (Resharper being the best thing ever since the last best thing ever.) made a Python IDE: PyCharm. At first I was all like “Whooa” then I was all like “Whoooooa” then I read there was no support for Pylons… then I was like “Wha?”.

Although it looks like PyCharm doesn’t directly support debugging with Pylons, I took my limited knowledge from Eclipse and just hopefully bashed it into PyCharm…. and I made a screen shot:


It’s really simple.

Script is the Paster script that is normally used to start the serve.

Script Parameters is just the normal serve command used WITHOUT the –reload.

Make sure you grab the right python interpreter that has Pylons “installed” and away you go. Just have that one set as the current debug config and run it.

Once it’s up and running, just go to the page and set a breakpoint. Yay.

Python / Pylons: Unit Testing a Controller And Unit Testing a Json Response

Nice thing about Python and Pylons is the complete lack of finds on the google. Basically anything you search on gets you the same 5 links… helpful or not.

This is a quick one though, and by quick I mean quick for you after it took me a f— load of time to get the f—ing thing right. Forgive me for swearing… even though I do it all the time… but in this case I really wanted emphasize how f—ing annoying it was to get this right.

So here’s the thing, you want to unit test a controller. Great. Now the nice thing is it’s actually pretty easy with what’s built into the TestController which is found in the __init__.py file in yourProject/tests. Imported simply by :

from yourProject.tests import *

Provided you didn’t move the tests folder.

Take the start of this method:

   def test_loginUser_bad_input(self):
          #Here is the call to the controller and the return response
          response = self.app.post(url(controller='security', action='loginUser', email='null', password='null' ))

Now here’s the interesting thing, response is actually a response object. Can you belee dat? At first I thought it was just whatever the controller method would return if called by a method and not during some web request. Turns out that self.app.post actually acts like a real request. Go f—ing figure. I like. So simple yet so capable. It’s like a long lost brother of mine. You know, the long lost brother that is simple yet capable… and is a method. I’m not sure any of that makes sense.

Now the second part of this debacle is how to work with a json response. For this example I am using jsonpickle but in reality the only thing to take from this is WHERE the stupid json actually is:

    jsonResponse = jsonpickle.decode(str(response.body))

Yeah so at first I thought it would be just jsonpickle.decode(response) but kept getting all sort of unhappiness. Now like I noted up top, the response is an actually object return that holds all sorts of information. (including header information.. yay?) So the next guess was what you see right above. Go figure what I was looking for was in the .body attribute.

See, told you it was simple. Painful for me, but in the end you win. And I bet you like that. Sadist f—.

Pylons: Dynamic Templates with Mako Using Controllers and jQuery

So a friend of mine (Yes I do have friends and occasionally the ARE real) asked me if there was a way to have a partial control/template have dynamic content using a controller. At first I was like ‘f— no’ but that passed quickly as I realized I was actually answering myself on whether Species should have yet another sequel. As for his question, I gave it some thought and the easiest way I could think it jquery and using it’s ajax method to call a controller and use the response (json for this example) to create the content. Could it be done? You bet your Rolex knock off that you bought in New York from some guy named Loey that looked legit for a guy selling things out of a dumpster.

Turns out the solution is fairly simple. Use jquery to call a controller’s action on the template’s load. Even can pass in whatever you need from the parent container.

Here is the parent page:

<!--This is the partial template page -->
<%namespace name="getInfo" file="getInfo.html" />

<html>
  <head>
   <script type="text/javascript" src="${h.url('/scripts/jquery-1.4.2.min.js')}"></script>
  </head>
  <body>
    This is just plain text that is pre method call.  Textbox will be fill post method call.
    <!--This is the method set up on the partial template -->
    ${getInfo.getInfo(1) }
  </body>
</html>

Here is the partial template file:

<%def name="getInfo(id)">
  <script type="text/javascript">
    //This is the method to be called to get whatever it is you need from the controller action
    function getInfo(id){
      jQuery.ajax({
        type:'POST',
        url: '${h.url(controller='getInfo', action='index')}',
        dataType:'json',
        data:{ id:id },
        success: function(result){
          onSuccess(result);
        },
        error:function (xhr, ajaxOptions, thrownError){
          alert(xhr.status);
        }
      });
    }

    function onSuccess(result){
      jQuery('#testLabel').val(result.returnValue);
    }
    <!-- This will force the getInfo method to be called when this page loads. -->
    getInfo(${id});
  </script>

  <!-- This is the content to be updated -->
  <input type="text" id="testLabel" name="testLabel" />
</%def>

And really that’s it. Very simple. Have the parent page call the partial template method and have the partial template method use whatever value being passed in to send it on to the right controller/action. Once the response is there, update the content.  In this case, result.returnValue that is just a simple string.  Or maybe a puppy.  Could be both.

A more complicated example could use javascript to construct html based on the return but not real important here.  That’s for smart people, read not me, to figure out.

As a bonus, I will actually post the code. NOVEL IDEA!111

What? Why did I choose purple for the color of Mako markup?  Don’t… just don’t.  You have no right to judge.

Quick Example of Inheritance in Templates with Mako: Using Next

So as I further my side journey into Python, or Pylons to be more exact, one of the decent things I’ve run into is that Mako templating system. What is that? It’s what runs along side of Pylons (Or at least one of many) for displaying the View side of the whole MVC thing. Now if you’re here, chances are you just searched on this so I wouldn’t go into a huge thing about Pylons or Mako. I’ll just get to the damn point.

This is just an example of a three layer template I use to help with pumping out pages with out repeating a lot of code. The nice thing about Mako is how simple it is to have multiple layers of templates to make up a single page. This is basically done with using the next keyword.

What is next?
Mako has a system that works something like an abstract class. A page template can define a certain area in a method like way and like an abstract method, there is no method body. Any page template that “inherits” the base has to fill in the body or create an abstract method itself to call the original method.

Now with that being said, there are two key words for doing this and the default keyword is self. Problem with self is that it looks at the top most template only. So if you have say 3 layers:

BasePage -> SecondLayer -> ThirdLayer

self will always look to the third layer:

BasePage -> ThirdLayer

While second layer is all like, “Yeah whateve”. Overall, this isn’t very helpful if you want a sort of chain like effect. Its basically like a base class not giving a flying… not caring about what any child classes do except the top most child class. What if you have a div that holds content on the base, and the second layer has its own content area to hold the third layer. This would be useless if you used self since that second layer would just be ignored. Sad day. This is where next comes in. Next, like an abstract method, basically just sets a place holder for the next template to “inherit” the said template. Now the danger of next is that just like an abstract method, the system will be all “Waaaaaah, you didn’t override the method. Waaaaaah.” if you forget to define the method in the next layer. The huge advantage is you can create a nice consistent design in which you can just bang out child templates since you know exactly what the baser (Yeah I wrote baser.) page will have.

On to the example. And this is an example of what a template structure could look like.

The base page:

  <html>
    <head>
       //next.title will allow all children to add on to the title
       <title>First Level - ${next.title()} </title>

        //next.styleSheetIncludes will allow all children to add any included css files if needed.
        <link rel="Stylesheet" href="${h.url('/css/base.css')}" />
        ${next.styleSheetIncludes()} 

        //next.javascriptIncludes will allow all children to add any included javascript files if needed.
        <script type="text/javascript" src="${h.url('/scripts/base.js')}"></script>
        ${next.javascriptIncludes()} 

        //next.styleSheet allow all children to add any page specific css that wasn't included in files.  Why
        //  have the style tags instead of just having the  ${next.styleSheet()}.  Well you could but then you would
        //  end up with more than one style tag when the page is built.
        <style type="text/css">
          ${next.styleSheet()}
        </style>

        //next.javascript allows all children to add any page specific javascript that wasn't included in files. This
        //  follow the same idea as the next.styleSheet above.  Why have a possible 3...4...5... script tag when
        //  the child templates can just add to this one?
        <script type="text/javascript">

          function firstLevel(){
          }

          ${next.javascript()} 

          //next.javascript allows all children to add any page jquery document.ready javascript that is specific to the
          //  given child.  Once again this is an example of add to instead of repeating a section
          jQuery(document).ready(
            function () {
              jQuery('button').button();

              ${next.documentReady()} 

            }
          );
        </script>
    </head>
    <body>
      <div class="header">
      </div>
        <div class="bodyContainer">
          //This will be where the child html will fall.
          ${next.body()}
        </div>
      </div>
   </body>
  </html>

The second layer:

  <%inherit file="base.html" />

  <%def name="title()">
    - Second Level
  </%def>

  <%def name="styleSheetIncludes()">
    <link rel="Stylesheet" href="${h.url('/css/secondLevel.css')}" />
    ${next.styleSheetIncludes}
  </%def>

  <%def name="styleSheet()">
    ${next.styleSheet()}
  </%def>

  <%def name="javascriptIncludes()">
    <script type="text/javascript" src="${h.url('/scripts/secondLevel.js')}"></script>

    ${next.javascriptIncludes()}
  </%def>

  <%def name="javascript()">
    function secondLevel(){
      //Method in second level
    }
    ${next.javascript()}
  </%def>

  <%def name="documentReady()">
    //nothing here on second level
    ${next.documentReady()}
  </%def>

  <%def name="body()">
    <div class="leftMenu">
      <a href="something.html">something</a>
      <a href="somethingElse.html">something else</a>
    </div>
    <div class="rightArea">
      ${next.body()}
    </div>
  </%def>

As you can see, all the abstract areas defined in the base are being used by this layer and then this layer is in turn adding its own abstract methods that share the same name as the base template’s method. The nice this is you can do this using the next keyword as the current template will only respond to the template immediately inheriting it. You don’t get any kind of method name clash.

And the final layer:

  <%inherit file="secondLevel.html" />

  <%def name="title()">
     - Third Level
  </%def>

  <%def name="styleSheetIncludes()">
    <link rel="Stylesheet" href="${h.url('/css/thirdLevel.css')}" />
  </%def>

  <%def name="styleSheet()">
    .thirdLevel
    {
    }
  </%def>

  <%def name="javascriptIncludes()">
    <script type="text/javascript" src="${h.url('/scripts/thirdLevel.js')}"></script>
  </%def>

  <%def name="javascript()">
    function thirdLevel(){
      //Method in second level
    }
  </%def>

  <%def name="documentReady()">
    //nothing here on third level
  </%def>

  <%def name="body()">
    <div> Hi from third level</div>
  </%def>

The third layer now closes off the chain by no longer adding any abstract methods of its own. Now if I knew there could be yet another layer, all I would have to do is use the same naming convention and add the needed next.methods.

And this is what the source should look like:

  <html>
    <head>
      <title>First Level - - Second Level - Third Level </title>

      <link rel="Stylesheet" href="${h.url('/css/base.css')}" />
      <link rel="Stylesheet" href="${h.url('/css/secondLevel.css')}" />
      <link rel="Stylesheet" href="${h.url('/css/thirdLevel.css')}" />

      <style type="text/css">

      .thirdLevel
      {
      }

      </style>

      <script type="text/javascript" src="${h.url('/scripts/base.js')}"></script>
      <script type="text/javascript" src="${h.url('/scripts/secondLevel.js')}"></script>
      <script type="text/javascript" src="${h.url('/scripts/thirdLevel.js')}"></script>

      <script type="text/javascript">

        function firstLevel(){
        }

        function secondLevel(){
          //Method in second level
        }

        function thirdLevel(){
          //Method in second level
        }

        jQuery(document).ready(
          function () {
            jQuery('button').button();
	      //nothing here on second level
              //nothing here on third level
          });
        </script>
    </head>
    <body>
      <div class="header">
      </div>
      <div class="bodyContainer">
        <div class="leftMenu">
          <a href="something.html">something</a>
          <a href="somethingElse.html">something else</a>
        </div>
        <div class="rightArea">
          <div> Hi from third level</div>
        </div>
      </div>
    </div>
   </body>
  </html>

As you can see, things like the ${next.documentReady()} really helped to keep the source code clean and avoid repeated code on the source side. Now go forth, all 2 of you… including me…, and use this knowledge to do something.

Pylons: ‘module’ object has no attribute ‘redirect_to’

Yeah I’m using python/pylons, don’t you worry about it.

So ran into this while looking over a pylons tutorial.  Turns out, that method was removed in Pylons 1.0 but the tutorial was a little bit old. So instead of:

  redirect_to(controller='hello', action='other_action', _code=303)

just use:

  from pylons import url
  from pylons.controllers.util import abort, redirect

  ...

  redirect(url(controller='hello', action='index', _code='303'))

Bad news is I didn’t get a chance to actually see the full behavior of the old redirect to, so I’m not sure the result:

  http://127.0.0.1:5000/?_code=303

Is the same. Still new to this thing called pylons. Just got annoyed trying to find an answer to this one so hopefully my title will speed up the search for future people.