Categories
iPhone Development

Three20: Change Background of Grouped Table View

After going through the first beta testing round for my EveryMarathon iPhone application, several of my friends mentioned that the race details screen was a little…boring. I had the standard UITableView with a grouped style, default background, default controls – pretty dull.

One of the easiest ways to brand an iPhone app is to change the background of a grouped table view to something a little more interesting – a pattern, or a 320×480 image. You end up losing the ability to use a regular UITableViewController – instead you have to use a UIViewController with a UITableView, and then set up the datasource and delegate yourself. Just set the background color of the UIView to your color or image, set the UITableView background color to clear, and then set the UITableView as a subView. For instance in loadView:

// Implement loadView to create a view hierarchy programmatically, without using a nib.
- (void)loadView {
[super loadView];
[self.view setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@"cloud.jpg"]]];
self.tableView = [[[UITableView alloc] initWithFrame:self.view.bounds style:UITableViewStyleGrouped] autorelease];
[self.tableView setBackgroundColor:[UIColor clearColor]];
[self.tableView setDelegate:self];
[self.tableView setDataSource:self];
[self.view addSubview:self.tableView];
}

With Three20, TTTableViewController isn’t a UITableViewController, so that helps – no major restructuring necessary. Instead all we need to do is override the tableView method on TTTableViewController. Here’s an example of what I did:
///////////////////////////////////////////////////////////////////////////////////////////////////
- (UITableView*)tableView {
if (nil == _tableView) {
_tableView = [[TTTableView alloc] initWithFrame:self.view.bounds style:_tableViewStyle];
_tableView.autoresizingMask = UIViewAutoresizingFlexibleWidth
| UIViewAutoresizingFlexibleHeight;

if (_tableViewStyle == UITableViewStyleGrouped) {
_tableView.backgroundColor = [UIColor clearColor];
[self.view setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@"cloud.jpg"]]];
}
[self.view addSubview:_tableView];
}
return _tableView;

There might be a slightly better way of doing this with Three20 – in my case, all of my table controllers inherit from my own subclass of TTTableViewController, so it was easy to provide global behavior for my grouped table views.

Categories
iPhone Development

Mobile User Interface Mockups for an Invasive Species App

For Earth Day, I took a look at the micro-volunteer site Sparked to find some interesting projects – one of the most interesting was ideas for a mobile app for invasive species education and detection. Here’s some iPhone application user interface mockups I did in Balsamiq:

Categories
Talks Uncategorized

Using Prezi to give a tech talk

On Thursday, I gave my first talk about Drupal! Fito Kahn organizes the Austin Drupal Newbies Meetup, and we had lunch with him at the Southwest Drupal Summit in Houston last month. I was feeling pretty inspired from watching the speakers at the Summit, so I thought I might try to give a talk myself on Displaying Recent Tweets with Drupal using the twitter_pull module.

I didn’t want to have a set of boring slides with bullet points out of PowerPoint, so I thought I’d look at a few other options – most of the speakers at the Drupal Summit had great presentations and were well prepared! Browsing through the top presentations at SlideShare is a great way to see what’s effective without having to give up your Saturday to a conference.

I was pretty excited about 280 Slides, from what I read online. Unfortunately, when I loaded it, it looked exactly like PowerPoint! Scratch that. My next thought was to use Apple’s Keynote, but then after some searching on Hacker News, I saw a few references to Prezi.

Prezi is a completely different type of tool – not slide based, instead it relies on spatial organization and relative size for your presentation. This makes organizing your presentation much easier than trying to lay it out on slides. I’m always interested in information design, and Prezi totally changes the way your presentation is organized. You can drill down into different segments of your presentation and then pop back up – everything is in context.

It’s kind of hard to explain why Prezi is so great – I made my tech talk “I’ve got Twitter in my Drupal” presentation in Prezi. I certainly don’t have everything down with Prezi just yet – there’s a lot of tweaking you can do to make your presentations pop, but I’m very satisfied with what I could accomplish in a few hours.

Categories
Drupal Planet

Displaying Recent Tweets in Drupal 6 with twitter_pull

I’m writing this blog post for the Austin Drupal Newbies February Meetup to go along with my presentation about Drupal and Twitter.

Drupal sites can display the most recent tweets for a Twitter @username with the twitter_pull module for Drupal 6 and 7. The twitter_pull module is one of many Twitter-related modules for Drupal – a quick search on drupal.org revealed 151 matches for Twitter modules.

Twitter_pull solves one problem, and one problem only – retrieving recent tweets and displaying them in Drupal.

The module was written for developers to use with PHP – it isn’t configurable from the Admin menu like most other modules, at least in the most recent Drupal 6 release. This means you will have to do a few extra steps to get the twitter_pull module running on a stock Drupal 6 installation.

I’m going to give directions on how to show your recent tweets in a block in the right hand sidebar of a stock, out of the box Drupal 6.20 installation on a UNIX host that you have shell access to – for instance, a VPS or a shared host like PHPWebhosting. You can also install the twitter_pull module using drush or anything else you’re already comfortable with.

Downloading and Installing the Twitter Pull Module

The first step is to login and change directories on your host to your Drupal directory.

cd drupal
Next, create your sites/all/modules directory if it doesn’t already exist. Change your working directory to the modules directory.
 cd sites/all
 mkdir modules
 cd modules
Once you are in the modules directory, use the wget command to download the Drupal 6 version of Twitter_pull into your modules.
wget http://ftp.drupal.org/files/projects/twitter_pull-6.x-1.2.tar.gz
Now, uncompress the twitter_pull module
tar fxzv twitter_pull-6.x-1.2.tar.gz
We can log out of the Unix shell now. With Drupal 7, it’s much easier to install modules through the administration interface.

Enabling the Twitter Pull and PHP Filter Modules

The next step is to go to our Drupal Administration modules page. Login as the administrator to your Drupal site, and go to Site Building->Modules. We need to enable two modules.

http://www.yourserver.com/admin/build/modules

The two modules we need to enable are “PHP Filter” and “Twitter Pull”. Twitter Pull is the module we just downloaded, so it makes sense that we need to enable it.

Why do we need to enable “PHP Filter”? The reason is that the Twitter Pull module requires a small amount of PHP code to make it work. We are going to put that PHP code into a Drupal block. A fresh, clean, new Drupal 6 installation doesn’t let you use PHP code in a block – you will need to enable the “PHP Filter” module that comes with Drupal 6 for this to work.

After checking the boxes next to “PHP Filter” and “Twitter Pull”, click the “Save Configuration” button at the bottom of the modules page.

Creating the Recent Tweets Block

Now, we need to configure a Drupal block to display our recent Tweets. Start at the Blocks Administration page:

http://www.yourserver.com/admin/build/block

Now, add a block from that page


http://www.yourserver.com/admin/build/block/add
Set the block description to Recent Tweets, and the block title to Recent Tweets as well. Next, inside the block body, we will have to use some PHP code. Don’t worry if you aren’t familiar with PHP, this is a great way to get your feet wet. We only have to change one thing to customize this for your site! Copy and paste the following into your block body.
<?php if (function_exists('twitter_pull_render')) { print twitter_pull_render('@jefflinwood', '', 10); } ?>
What we are doing in the above PHP code is first, checking to see if the Twitter Pull module is enabled. If it is, we are making a call to the twitter_pull_render PHP method from the Twitter Pull module with three arguments: the Twitter search, the title to use, and the number of Tweets to show. In our case, we are using @jefflinwood as the Twitter search term, no title, as the title is provided by the block, and we are going to show up to 10 recent Tweets.

Now, change @jefflinwood to your Twitter username – @racetothealtar, for instance.

To make Drupal execute the PHP code in your block, you need to set the Input Format on the block to be PHP Code. If you didn’t enable the PHP Filter module earlier, you will not see this option here.

The defaults for the rest of the block should be okay. Save the block. Your block is now configured and ready to display.

Displaying the Block

Under disabled, change the drop-down for Recent Tweets from <none> to Right Sidebar. Now click the Save Blocks button – you should see the Recent Tweets in your right sidebar! Go to your front page, and they should be there as well.

Categories
Drupal Planet

Drupal 7 Theming Tip: Any Link on an Image Field with Drupal 7

[Dec. 8,2012 – Thanks to Blair Wadman for  noticing that WordPress ate my – – and turned them into en-dashes, thus confusing anyone reading this!]

I’m moving Clutter Puppy – Daily Clutter Tips from static HTML to Drupal 7, but there are quite a few problems I’m running into with theming for Drupal 7, mostly because the documentation is pretty unorganized for Drupal 7 theming. I’m pretty familiar with theming nodes and fields for Drupal 6 with CCK – now that CCK has moved into core for Drupal 7, the API has changed.

In my case, I’m trying to do something simple – on my node, I have two fields that I’d like to use together – “field_url”, which is a text field, and “field_pictures”, which holds an unlimited number of Drupal 7 Image fields. I’d like each image to link to the URL in field_url – that’s not the node URL, it’s just an arbitrary URL that gets entered at content creation.

One thing that really frustrates me about Drupal is how easy this would be with other web application frameworks. Most of them, you’d simply add a foreach loop to your template, and write out the a href and img tags with tip.url and tip.imageUrl. Done!

With Drupal, things get more complicated and the documentation gets horrible as soon as you want to change the default rendering for a Drupal node. With Drupal 7 to do this simple task, you’ll need to modify node.tpl.php, and create a field- -field_pictures.tpl.php template.

In node.tpl.php, put:

<?php print render($content['field_pictures']); ?>

where you want the pictures – this by itself isn’t too bad, but because every field wants to render itself, you’ll need to replace the default field rendering template for field_pictures. Inside of field- -field_pictures.tpl.php, put:

<ul>

<?php foreach ($items as $delta => $item) : ?>

<li><a target="_blank" 

href="<?php print $element['#object']->field_url['und'][0]['value']; 

?>"><?php print render($item); ?></a></li>

<?php endforeach; ?>

</ul>

for a nice unordered list that you can plug into a jQuery plugin, for instance.

The key here was to use the un-Googleable $element[‘#object’] to represent the parent node, and then to retrieve the field_url’s value from the node.

If there’s a better way to do this, I’d love to hear it – the D7 theming guide seems to be missing a discussion of the new D7 fields and how to theme them.

Categories
iPhone Development

Three20 for iPhone: Add JSON support to a new project

Working on a new iPhone app, everything was going smoothly with Three20, following their guide to add Three20 to your application with a Python script. Everything was working smoothly until I wanted to parse some JSON. The ttmodule.py script added the frameworks for the other Three20 modules (considered core) to my XCode project, but didn’t include the JSON+SBJSON module (considered external or optional) in the linker flags. This was a little confusing, as the JSON library was listed as a direct dependency.

I had to add the following lines to my linker flags (from the info window for your target, go to “Build”, then look under the “Linking” header, and then “Other Linker Flags”. You’ll see some Three20 linker flags there, for the SBJSON library, add two lines:

-force_load
../../three20/Build/Products/$(CONFIGURATION)$(EFFECTIVE_PLATFORM_NAME)/libextThree20JSON+SBJSON.a

Where ../../three20 matches the location of your other Three20 libraries (this will depend on where you put the Three20 source code).

How it looks in XCode:

I hope this helps other iPhone developers who are using Three20! Mostly I put these tips together for my future reference.

Categories
Drupal Planet

Clash between JSON out of Drupal with Youtube Embedded Field and MongoDB Key Names

(Quick background) As part of a much larger project, I’m pulling content out of Drupal as JSON-formatted nodes into MongoDB. The plan is to use Drupal as the content creation platform, and MongoDB as the database store for the content delivery platform, with JSON as the data format.

Importing JSON content from Drupal into MongoDB is actually very easy – I’ve got Drupal 6 already configured to serve JSON through the REST Service (for more, read my post Using Drupal’s Views as a JSON Web Service with the REST Server)

I installed MongoDB on Mac OS X, installed the mongo ruby gem, and then wrote a quick ruby script to pull JSON off my server and dump it into mongo. This worked great – it throws errors when it hits nodes that aren’t published, but that’s fine. What didn’t work was pulling in anything that used the Embedded Media Framework CCK field for Youtube – one of the JSON tags that gets embedded uses the string “http://www.w3.org/2005/Atom” as a key, and the periods aren’t legal in a key name in MongoDB.

Luckily, this was just the one key name in my JSON output, so I added a quick gsub call to replace www.w3.org with www-w3-org, and all was well. I don’t plan to use the Youtube Atom feed anyway, but if I do, I’ll just have to remember to use my key, not the Drupal 6 CCK key.

Categories
iPhone Development Uncategorized

Quick Tip: Adding icons to Three20 Tab Bar

I’m using the Three20 Additions to UITabBarController for the Green Ninja Active City Guide iPhone app (based on TTNavigatorDemo). This is great, except all the examples I found for tab bar images use the controller to set the tab bar item. With Three20, that didn’t work, so I had to add some code to my TabBarController to get icons.

In the code below, the first part of the method sets up the tab bar for three URLs/controllers, and the second part of the method adds the images.

Has anyone else used a different approach to get icons on a Three20 application tab bar?

- (void)viewDidLoad {

[super viewDidLoad];

[self setTabURLs:[NSArray arrayWithObjects:

@"http://www.greenninja.com/city-guide/austin",

@"http://www.greenninja.com/activities/austin",

@"tt://map",

nil]];

NSArray *tabs =  [self viewControllers];

UIViewController *home = [tabs objectAtIndex:0];

home.tabBarItem.image = [UIImage imageNamed:@"house.png"];

UIViewController *activities = [tabs objectAtIndex:1];

activities.tabBarItem.image = [UIImage imageNamed:@"star.png"];

UIViewController *map = [tabs objectAtIndex:2];

map.tabBarItem.image = [UIImage imageNamed:@"world.png"];

}
Categories
Blueprint CSS Drupal Planet

Using Boks with the Blueprint CSS framework to create Drupal Themes, Part 1

We’re going to create a Drupal 6 theme with the Blueprint CSS grid framework using the Boks visual layout designer. Making a good looking theme in Drupal can be frustrating, especially if you aren’t a graphic or web designer, and you don’t have an HTML/CSS template to work from.

CSS Grid Basics

One shortcut I’ve found for creating great looking web pages is the Blueprint CSS grid framework, which is an open source toolkit that had its version 1.0 release on September 29, 2010. There are several other grid toolkits, such as 960.gs that are similar – each of these helps solve some of the most frustrating CSS layout issues. Blueprint also resets each browser’s CSS back to a common standard, and then builds from there.

The Drupal content management system works extremely well with grid-oriented layout solutions. Many Drupal sites have a similar layout – a header, a footer, a content area, and one or more sidebars on either the left or right sides with the same height as the content area. For those of you who have been doing web development without a CSS framework, just getting that basic layout to work properly (without fixing the height of the content area) can be difficult.

Coming from a software developer background, a basic, fixed grid layout makes a lot of sense, both programmatically and visually.  Generally speaking, a grid CSS framework will provide a content area of about 950 pixels wide, which is a common content area on most web sites (for users with 1024×768 monitors).

Laying out the page visually with Boks

If you start with a wireframe (see my post on DIY Wireframing), you can have a pretty good idea of which elements on your web site are going to go where. From a paper wireframe, we can layout our HTML template in Boks, a visual Blueprint CSS designer. Boks is an Adobe AIR application that runs on Macs, Windows, and Linux as a desktop application.

The Boks interface is confusing, but at its heart, it’s a simple tool.

Choose the width (the default, 950, is fine) and the number of columns in your grid (the default, 24, gives you flexibility)

Set the page title, uncompress the CSS (Drupal will do this itself), and turn off the grid on our page

Click OK and hide the Settings dialog box, revealing the main Boks window:

Using Boks the first time can be very confusing. It is not at all clear what you are supposed to do here from the user interface – what you should do is start to add your visual elements. For this example, we are going to create a header, a content area, and a footer with two equal width blocks.

Start from the top, with the header. Click and drag with your mouse across all 24 columns:

All you need to do now is add a CSS id, in our case “header”, in the id field for the div. You can add other CSS styles or change the markup to another HTML element here, but you don’t have to. We can also add some sample HTML content for our header – put in “<h1>Example Blueprint Theme</h1>”

This really doesn’t look like our web page – Boks abstracts the web page into a series of rows and columns. You define the number of columns you want in your web page – we stuck with the default of 24 columns. Each of these columns is 30 pixels wide with a 10 pixel gutter. Our layout elements can span as many of these columns as we want.

To add a content area, we can drag across all of the columns underneath the header, naming the div “contentArea”. We can also use the dummy text feature of Boks with the “+Lorem Ipsum” button.

Keep the dummy text defaults and add 1 paragraph of Lorem Ipsum text.

Last, we need to add a footer, the same way we added contentArea. Don’t add content to the footer, because we are going to add two equal width areas to the footer.

Within each layout element, we can also create additional layout elements that span all or any part of the parent container’s columns.  We’re going to add two footer elements, leftFooter and rightFooter. Instead of clicking and dragging below the footer element, we are going to click and drag within the footer element. We’re only going to select half of the columns for each div. Call this div “leftFooter”, and use “Left Footer Area” as the HTML content.

Do something similar with the rightFooter – choose the other 12 columns within the footer element:

Our web site’s basic layout is done! This is just the first phase, with just layout, and no emphasis on visual styles yet. We can use the Live Preview feature built into Boks to see how our content area looks  – Choose Live Preview from the Window Menu and see how your page flows:

The last steps are to save our project as a .bok file with File->Save. This lets us re-open the project later in Boks. It doesn’t give us the actual HTML we’ll use in our projects, though. For that, we need to Export from Boks. The Export button is in the upper left corner, and it will save our web page in the directory of our choice. Use Firefox, Chrome, Safari or the browser of your choice to open the page up – it will be named output.html.

Here’s the HTML Boks generated for us. With the next part of this series, we’ll explore the CSS classes added to the HTML, and talk about some of the advantages (and disadvantages) of Blueprint CSS.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta content="Boks - 0.5.7" name="generator"/>
<title>Example Blueprint Theme</title>
<!-- Framework CSS -->
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection"/>
<link rel="stylesheet" href="css/print.css" type="text/css" media="print"/>
<!--[if lt IE 8]><link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, projection"/><![endif]-->
</head>
<body>
<div>
<div id="header"><h1>Example Blueprint Theme</h1></div>
<div id="contentArea"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin volutpat congue sapien, sed ornare velit suscipit eget. Vivamus eu lacus augue. Cras metus erat, posuere at venenatis vel, pulvinar molestie odio. Sed ac nibh sed enim suscipit feugiat. Pellentesque placerat porta tincidunt. Phasellus et nisl neque, sed gravida lacus. Phasellus posuere hendrerit ultrices. Fusce lacinia felis at elit ullamcorper lobortis. Pellentesque ac malesuada turpis. Nulla facilisi. Nullam bibendum ante eget lacus malesuada placerat. Donec sed neque sem. Aliquam erat volutpat. Duis vitae neque enim. Vivamus diam quam, posuere laoreet luctus sit amet, posuere at augue. Nam id ipsum enim. Donec diam justo, interdum ut pulvinar nec, lobortis non odio. Nam velit elit, tincidunt ac consectetur quis, ultricies vel magna.</p></div>
<div id="footer">
<div id="leftFooter">Left Footer Area</div>
<div id="rightFooter">Right Footer Area</div>
</div>
</div>
</body>
</html>
Categories
Uncategorized

Quick Tip: Displaying only one CCK image in your teaser

For my Drupal 6 web site,  Green Ninja Active City Guides, I have several CCK content types that all have multiple images. Each of these uses the same field, (field_pictures), and I use jQuery Gallery Formatter to create a scrollable picture gallery on my Race, Park, and Trail content types.

I’m getting larger amounts of photos on some of my nodes now, for instance, the Cactus Rose 50 Mile and 100 Mile Race page, and that’s starting to slow performance. The jQuery Gallery Formatter really slows down my pages, so I switched my teaser views to just display the images with the node. That works great for nodes with one or two images, but looks horrible on pages like San Antonio Trail Running – where users have to scroll through all thirty of the Cactus Rose photos to get to the next race.

Ideally, CCK Imagefield would have a display option like “first image” or similar. The problem, as discussed on drupal.org here: http://drupal.org/node/430604 is that the CCK formatters don’t take configuration parameters, so to add this, the formatter would have to double the number of formatters in the drop down box. ImageCache already adds formatters for each image size you support, as do several other modules.

As that solution isn’t available to me, I went ahead and created my own solution by modifying my node-race.tpl.php.

First, I changed my Display Settings on Race to exclude my Pictures field from $content so the entire list doesn’t get displayed. Check the first “Exclude” checkbox for your field, but not the second – that will exclude the images from your full node display as well.

Next, I made a slight modification to my node-race.tpl.php file. Decide where on your display you would like the thumbnail to go and add this code:

<?php if ($teaser): ?>

      <?php print $field_pictures[0]['view']; ?>

<?php endif; ?>

replacing field_pictures with field_NAMEOFYOURCCKFIELD.

That’s all you need to do! Clear your cache if you’re running into difficulties seeing the change.