Archive for October, 2012

Adobe Acrobat (PDF) files not displaying correctly on iPad?

October 30th, 2012

I have been working on an adobe acrobat export routine on the web that uses ComponentOne’s Active Reports tool to generate the files and I ran into a bit of a snag when trying to display the files on the iPad. I have posted the code below:

HttpResponseMessage message = null;
var pdfExport = new PdfExport();
var m_stream = new System.IO.MemoryStream();

var rpt = new YourActiveReport();
rpt.Run();

pdfExport.Export(rpt.Document, m_stream);
m_stream.Position = 0;
message = Request.CreateResponse(HttpStatusCode.OK);
message.Content = new StreamContent(m_stream);

message.Content.Headers.Add("Content-Disposition", "attachment; filename=yourreportname.pdf");
//this is the magic line
message.Content.Headers.ContentType = new MediaTypeHeaderValue("application/pdf");
return message;

I put a comment on the line that looks like this:
message.Content.Headers.ContentType = new MediaTypeHeaderValue(“application/pdf”);
I didn’t have that line in before and it will work just fine on standard machines like your desktop in your browser but since the ipad either doesn’t allow plugins inside safari or doesn’t know how to handle attachments the pdf was coming back as garbage, basically displaying the raw postscript in the browser, that wasn’t cool. All you have to do is add that line in and all is well, I hope this helps someone.

Validate Subcollections in Backbone models

October 26th, 2012

Backbone.js is an awesome library for Javascript development, and at some point in your application, probably close to the finishing point, you will want to validate your models and Backbone has provided a great function through that, find out more about that here: http://backbonejs.org/#Model-validate. As I was adding validation to my models I had the need to validate my subcollections that were in my models and I just didn’t see a good way to do that besides sending up my subcollections via the posts or the save() method in backbone, which I don’t want to be doing until my main model is ready to be sent up.

I know its wrong or bad coding to be adding unvalidated models to your collections but in my situation it was necessary so I came up with a little method of validating those models, check out the snippet below:

validate: function (attrs) {
           if (attrs.Products.length == 0) {
                return "Please choose at least one product";
            } else {
                var error;
                var that = this;
                attrs.Products.each(function (prod) {
                    error = prod.validate(prod.attributes);
                });
                if (error)
                    return error;
            }
}

As you can see in the validate function of the main model it simply iterates over each ‘Product’ in the Products collection and calls validate on those products and if an error is thrown down in the product model it will bubble up to my main model and thus show the user the error. Its a simple solution that I kind of expected backbone to be able to handle for me but everybody out there just says to validate your model before it goes into the collection but there are situations where that just isn’t possible. I hope this helps someone out, have a great day!!

How to add a fixed header to your Twitter Bootstrap Table

October 23rd, 2012

The table styling in bootstrap is very nice, the biggest benefit being that it is responsive and works on all devices, all you have to do to make the columns disappear is to put a class of “hidden-phone” on the columns you want to hide.  I have using it to death in my application I have been working on and I have noticed on large sets of data, especially data that has to scroll down, you lose the headers after it overflows past your div.  For me this was unacceptable because your user will lose the context of the data and will not understand what the columns hold.  I did some searching and came across this jQuery plugin that will basically take the table header you have and make a copy of it and lay it on top of your bootstrap header, here is a link to the plugin:https://gist.github.com/2948136.  I have the basic layout of your html that will make use of this below:

<div class="fixed-table">
    <div class="table-content"> 
        <table id="tableId" class="table table-fixed-header">
            <thead class="header">
            <tr>
                <th>Your Header</th>
            </tr>
            </thead>
            <tr>
                    <td>Your Data</td>
                </tr>
        </table>
    </div>
</div>

You will need the css as it does some nice styling for you but I don’t think its necessary, it would be nice down the road if this just becomes a class you can tack on to your html and it will do this work for you. Here is simply how you create the fixed header: $(‘.table-fixed-header’).fixedHeader();

Twitter Modal on the phone? No problem!!

October 19th, 2012

I have been using Bootstrap sometime now, we love it so much at our company that we have decided to use for our web app.  Recently I used it to format the tables in our app and due the responsive nature of bootstrap it just naturally works, here is a link to their base component so you can see it in action: http://twitter.github.com/bootstrap/base-css.html#tables.  You can hide and show the columns by simply tagging you elements or divs with a class of ‘hidden-phone’  or ‘visible-phone’ respectively.  That was a big win for us due to the responsive nature of  bootstrap, now for my main issue.

In the mobile version of the site I wanted to pop up a bootstrap modal window and allow the user to fill out some fields, here is the link to the modal examples http://twitter.github.com/bootstrap/javascript.html#modals.    This works exactly as expected minus one little gotcha, the body of the modal, if greater than 400px I believe, will go past the bottom of the screen on a phone, particularly the iPhone, thus leaving the user stranded with a screen they can’t close.  In comes the  Modal Responsive Fix which was written by Nifty Lettuce, which I have no affiliation with but I am so thankful for this JQuery plugin cause it really saved my bacon with this.  Here is the link to his fix: http://niftylettuce.github.com/twitter-bootstrap-jquery-plugins/, I will let you look over there for how to get it and set it up with your app.

How to make a collapsible HTML table using jQuery

October 15th, 2012

I didn’t realize it, but when you are using an HTML table apparently anything inside your <Table> tags have to be either in a <tr> or <td>, it just simply ignores things like divs, so this didn’t allow me to just use the accordion collapsing goodness that Twitter’s bootstrap provides for me, so I had to come up with a way to get that work with tables, so here is the method that works.  First you start off with a simple table like so:

<table id="collapsibleTable">
            <thead>
            <tr>
                <th>Your Heading</th>
            </tr>
            </thead>
            <tr>
            <td>
               <label>Label to Show</label>
               <input id="yourId"></input>
               </td>
            </tr>
        </table>

Notice the label in the <td> item, this is a holder for the information when you aren’t clicked on the row of the table, below I have posted in the Javascript that does the magic using Jquery:

refreshTable: function (element) {
                $('#collapsibleTable').find('label').show();
                $('#collapsibleTable').find('div').hide();
                $('#collapsibleTable').find('input').hide();
                $('#collapsibleTable').find('select').hide();

                $(element).find('input').show();
                $(element).find('div').show();
                $(element).find('select').show();
                $(element).find('label').hide();
            }

As you can see, I use the find() method in JQuery to locate any inputs or labels or divs or even selects in the table and either hide or show them, depending on where you are in the table.  This is a bit of a hack, but it does work, it doesn’t provide the nice transition that bootstrap’s accordion does, but its is a nice way to keep your tables clean, I hope this helps someone, thanks.

How to add music to your iPhone/iPod in the newest version of iTunes (10.7.0.21)

October 10th, 2012

It seems like each time I update iTunes I have some kind of issue adding my music to my phone so I thought I would share my experience with you and explain how its done, or at least the way I found to work with the latest version of iTunes.

1)  First drag your music to the Music section in the library:

2) When you have that done, simply click the “AutoFill” button in the bottom right hand corner and your music will be put on your phone for your listening pleasure. I hope this helps someone.

Beware of outdated code!!!

October 8th, 2012

I have been working with Twitter Bootstrap with a project at work and I recently ran into a bit of a problem and I was beating my head into a wall about it and I wanted to share my findings.  If you are ever dealing with an open-source library like Bootstrap, make sure you are working with the latest examples and the latest build of the tool.  I was following an example I found online and down in the <a> tag they had this: parent=’#accordion2′ and that was fine for the older version of Bootstrap but the new version needs this: data-parent=’#accordion2′.  I beat my head against the wall for about an hour trying to figure that one out before I realized I was dealing with an older example.  I hope this helps someone, thanks.