Pink Ribbon Watermelon wanted to create a fun, easy way for people to donate to the organization while displaying great watermelon recipes and carving tips. Much of this information was already on their web site, so we wanted to do something extra that could make the app more intruiging for people spending a dollar on the app (even though the money is going to a good cause). After a few discussions our team suggested adding some type of game that would be fun to play, would highlight the organization’s benefits and use the watermelon theme. Because the organization also did not have the budget to build out something like this, we decided to donate the time to design and develop the game.

Eventually we came up with the idea of a farmer protecting his watermelon patch from birds and jackalopes while avoiding friendlies (butterflies and farm kids). Each stage completed displays some facts about nutrition, breast cancer and the organization. It was a lot of fun to build with many hours discussing the arc of watermelon seeds, collision properties of birds and vermin nuances.

Check out the app. It is $0.99 and the money goes to a good cause.

Credits & Tech

• The overall design was done by Norm Orstad
• Game development by Mark Wagner
• RubyMotion iOS development by Steve Tuckner
• Game artwork by Joe Dressel
• iOS Development using RubyMotion
• Game development using Impact
• We started with home grown sound effects, but ended up licensing the music and sound effects from various sources, although Mark Wagner does a mean watermelon spitting farmer

You can read the C.H. Robinson press release here

Kelly Heikkila, @k2heikkila

Founder at :coderow

Last night, the Javascript usergroup here in Minneapolis, Minnesota JavascriptMN had it’s monthly meetup. This months meeting was set to be a javascript game hackathon, with the winner taking home a new Nexus 7. This is a write up of the game that I made for the hackathon, which was ultimately voted to be the best game of the night.

Concept

Since I am not a graphic guru, I wanted to stay with something very simple graphically. My graphics skills are little better then stick figures. That’s IT!! Remember the doodles you used to draw in your note book during class in high school or middle school. What if they could come to life and run around on your sheet of paper fighting against other doodle drawings. I had determined my game concept and it sounded completely reasonable to accomplish in the 2-3 hours available.

Assets

Since my game concept centered around the doodles in a notebook, the first thing I needed was the paper background. Early asset creation was allowed so I set to work. I google’d an image of a piece of paper, and quickly realized that I would need to create my own if I wanted the lines on the paper to line up with my collision blocks. Next, I needed a stick figure. I found a set of photoshop brushes: Stick figure war This gave me more then I could have hoped for, it gave me the basic texture for drawing terrain also. With this in hand, I set out to create the sprite sheets for the player and the floor. It also stared me thinking about having fire in my game, possibly on the floors.

This is what I had managed to accomplish before leaving to go to the meeting. As soon as I arrived I set to work on creating some sound effects. I needed a background track, a shooting noise, and a death noise. I have learned from previous game development that sounds are a must have, and in a competition like this sounds especially funny ones will make people laugh, and laughs bring votes.

The Code

Using the impactjs game engine takes care of a lot of the heavy lifting and allowed me to focus on my game. I set to work creating my game entities: Player, Fire, and a monster to shoot that I hadn’t yet determined:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149

ig.module(
    'game.entities.player'
)
    .requires(
    'impact.entity'
)
    .defines(function(){

        EntityPlayer = ig.Entity.extend({

            size: {x: 32, y:32},
            offset: {x: 4, y: -4},

            maxVel: {x: 100, y: 200},
            friction: {x: 600, y: 0},

            type: ig.Entity.TYPE.A, // Player friendly group
            checkAgainst: ig.Entity.TYPE.NONE,
            collides: ig.Entity.COLLIDES.PASSIVE,
            shootSFX: new ig.Sound( 'media/pew.*' ),
            dieSFX: new ig.Sound( 'media/die.*' ),
            animSheet: new ig.AnimationSheet( 'media/stickman_sprite.png', 32, 32 ),

            flip: false,
            accelGround: 400,
            accelAir: 200,
            jump: 200,
            health: 10,
            flip: false,
            startPosition:{x:0, y:0}  ,

            init: function( x, y, settings ) {
                this.parent( x, y, settings );

                // Add the animations
                this.addAnim( 'idle', 1, [0] );
                this.addAnim( 'run', 0.07, [0,1,2] );
                this.addAnim( 'jump', 1, [3] );
                this.addAnim( 'fall', 0.4, [4] );
                this.startPosition.x = this.pos.x;
                this.startPosition.y = this.pos.y;
            },

            kill: function(){
                this.dieSFX.play();
                this.parent();
                ig.game.spawnEntity( EntityPlayer, this.startPosition.x, this.startPosition.y );
            },

            update: function() {

                // move left or right
                var accel = this.standing ? this.accelGround : this.accelAir;
                if( ig.input.state('left') ) {
                    this.accel.x = -accel;
                    this.flip = true;
                }
                else if( ig.input.state('right') ) {
                    this.accel.x = accel;
                    this.flip = false;
                }
                else {
                    this.accel.x = 0;
                }


                // jump
                if( this.standing && ig.input.pressed('jump') ) {
                    this.vel.y = -this.jump;
                }

                // shoot
                if( ig.input.pressed('shoot') ) {
                    this.shootSFX.play();
                    if(this.flip){
                        ig.game.spawnEntity( EntityBullet, this.pos.x, this.pos.y + 15, {flip:this.flip} );
                    }else
                    {
                        ig.game.spawnEntity( EntityBullet, this.pos.x + 20, this.pos.y + 15, {flip:this.flip} );
                    }

                }

                // set the current animation, based on the player's speed
                if( this.vel.y < 0 ) {
                    this.currentAnim = this.anims.jump;
                }
                else if( this.vel.y > 0 ) {
                    this.currentAnim = this.anims.fall;
                }
                else if( this.vel.x != 0 ) {
                    this.currentAnim = this.anims.run;
                }
                else {
                    this.currentAnim = this.anims.idle;
                }

                this.currentAnim.flip.x = this.flip;


                // move!
                this.parent();
            }
        });


        EntityBullet = ig.Entity.extend({
            size: {x: 4, y: 4},
            offset: {x: 2, y: 2},
            maxVel: {x: 200, y: 200},

            bounciness: 0.6,
            gravityFactor:.1,
            type: ig.Entity.TYPE.NONE,
            checkAgainst: ig.Entity.TYPE.B, // Check Against B - our evil enemy group
            collides: ig.Entity.COLLIDES.PASSIVE,

            animSheet: new ig.AnimationSheet( 'media/bullet1.png', 8, 8 ),

            bounceCounter: 0,


            init: function( x, y, settings ) {
                this.parent( x, y, settings );

                this.vel.x = (settings.flip ? -this.maxVel.x : this.maxVel.x);
                this.vel.y = -20;
                this.addAnim( 'idle', 0.2, [0] );
            },

            handleMovementTrace: function( res ) {
                this.parent( res );
                if( res.collision.x || res.collision.y ) {

                    // only bounce 3 times
                    this.bounceCounter++;
                    if( this.bounceCounter > 3 ) {
                        this.kill();
                    }
                }
            },

            check: function( other ) {
                other.receiveDamage( 10, this );
                this.kill();
            }
        });

    });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

/**
 * Author: Mark Wagner
 * Date: 1/31/13
 * Time: 6:28 PM
 */

ig.module(
    'game.entities.fire'
)
.requires(
    'impact.entity'
)
    .defines(function () {

        EntityFire = ig.Entity.extend({
            size:{x:20, y:20},

            maxVel:{x:100, y:100},
            friction:{x:150, y:100},

            type:ig.Entity.TYPE.B, // Evil enemy group
            checkAgainst:ig.Entity.TYPE.A, // Check against friendly
            collides:ig.Entity.COLLIDES.PASSIVE,

            health:10,


            speed:0,
            flip:false,

            animSheet:new ig.AnimationSheet('media/fire2.png', 21, 21),


            init:function (x, y, settings) {
                this.parent(x, y, settings);
                this.addAnim('idle', 0.1, [0, 1, 2,3]);
                this.addAnim('crawl', 0.08, [0, 1, 2,3]);
            },


            update:function () {
                // near an edge? return!
                if (!ig.game.collisionMap.getTile(
                    this.pos.x + (this.flip ? +4 : this.size.x - 4),
                    this.pos.y + this.size.y + 1
                )
                    ) {
                    this.flip = !this.flip;
                }

                var xdir = this.flip ? -1 : 1;
                this.vel.x = this.speed * xdir;

                this.parent();
            },


            handleMovementTrace:function (res) {
                this.parent(res);

                // collision with a wall? return!
                if (res.collision.x) {
                    this.flip = !this.flip;
                }
            },

            check:function (other) {
                other.receiveDamage(10, this);
            }
        });

    });

But I still needed a bad guy to shoot, and I didn’t feel like I had the time to set about drawing up a doodle robot like I had originally planned. Well we are internet people and no one likes a troll. That’s when I had the thought to use the trollface for my bad guy. I found a internet memes face photoshop brush set and created my trollface sprite.

The entity would be simple… just like the fire but moving, copy and paste fire, rename, make move, and Done.

Now I had some basic entities and assets so I started up the impactjs level editor: weltmeister. And started putting the assets and the entities together.

Setup some key binding and away we go:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

   init: function() {
      // Initialize your game here; bind keys etc.
        ig.music.add('media/background.*');
        ig.music.volume = 1.0;
        ig.music.play();


        ig.input.bind( ig.KEY.LEFT_ARROW, 'left' );
        ig.input.bind( ig.KEY.RIGHT_ARROW, 'right' );
        ig.input.bind( ig.KEY.X, 'jump' );
        ig.input.bind( ig.KEY.C, 'shoot' );


        this.loadLevel(LevelOne);
  },

And Here it is

Doodle Game

Mark Wagner, @theSociableme

Developer at :coderow

Today in the office we were trying to best each other with our oldest site or piece of technology still publicy available. Here’s what we came up with:

Turtle’s Social Centre (1999)

Auteur: Kelly Heikkila (me)
Cutting Edge Tech: Dreamweaver, JavaScript, Pearl and lots ‘o tables

I’m happy to say that this site is still in use and generating traffic for a great historic banquet center in Shakopee. Bonus points for revenue generation and longevity.

Hamlin True Fitness (2008)

Auteur: Benjamin Gramlich
Cutting Edge Tech: HTML, CSS and JavaScipt with MooTools

The classic friend-of-a-friend website built for multiple hundreds of dollars. Since I’m older than 40, I don’t consider 2008 “Way Back”, but we’ll give Benjamin a break since he’s only 4 in dog years.

OraLinux (1999)

Auteur: Mark Wagner
Cutting Edge Tech: Lovingly hand-crafted HTML. There may be some actual CSS involved, as well. Hard to tell.

It’s Oracle on Linux, duh. Mark also gets bonus points for answering the age old question “What makes an effective personal home page?”. Now you know.

Virtual Modem Driver (1996)

Auteur: Steve Tuckner
Cutting Edge Tech: Written in C (he thinks – the 90’s are fuzzy for Steve)

Yes. This is a patent for Mr. Tuckner. He’s a big deal in the virtual fax world beyond being a big deal in the Ruby, iOS, RubyMotion and educational language circles.

IATSE Local 13 (2005)

Auteur: Norm Orstad
Cutting Edge Tech: Originally written in Rails, but the source exported to static HTML and hosted in-office.

Who knew you could embed style tags in form posts? Awesome. Bonus points as this site is also still in active use.

Kelly Heikkila, @k2heikkila

Founder at :coderow

The Starting App

The app that I am using to demonstrate a static library is very simple. There is a class for the view controller and a “computation” class that will be in the library. There is also an application delegate class to get this started.

To create this app, go to XCode and create an empty sample application called TheQuestion.

From there, right click on the yellow TheQuestion folder and select New File…. Create an Objective-C class from the iOS | Cocoa Touch menu. Have UIViewController be the superclass and have the class name be QuestionViewController. Do New File again and this time create a class called TheAnswer with a superclass of NSObject.

You can then copy and paste the following code snippets in.

AppDelegate.m

1

#import "QuestionViewController.h"

1
2
3

QuestionViewController *questionViewController = [[QuestionViewController alloc] init];
self.window.rootViewController = questionViewController;
self.window.rootViewController.wantsFullScreenLayout = true;

QuestionViewController.h

1
2
3
4
5
6
7
8

#import <UIKit/UIKit.h>

@interface QuestionViewController : UIViewController {
    UILabel *answerLabel;
}

@property (nonatomic, strong) UILabel *answerLabel;
@end

QuestionViewController.m

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

#import "QuestionViewController.h"
#import "TheAnswer.h"

@implementation QuestionViewController

@synthesize answerLabel;

- (void)loadView
{
    [super loadView];

    UILabel *questionLabel = [[UILabel alloc] initWithFrame: CGRectMake(10.0, 50.0, 300.0, 200.0)];
    questionLabel.numberOfLines = 0;
    questionLabel.lineBreakMode = UILineBreakModeWordWrap;
    questionLabel.textAlignment = UITextAlignmentCenter;
    questionLabel.text = @"What is the answer to life, the universe and everything?";
    questionLabel.font = [UIFont systemFontOfSize: 16.0];

    answerLabel = [[UILabel alloc] initWithFrame: CGRectMake(10.0, 250.0, 300.0, 200.0)];
    answerLabel.textAlignment = UITextAlignmentCenter;
    answerLabel.font = [UIFont boldSystemFontOfSize: 24.0];

    [self.view addSubview: questionLabel];
    [self.view addSubview: answerLabel];
}
- (void)viewDidLoad
{
    [super viewDidLoad];
  // Do any additional setup after loading the view.

    TheAnswer *theAnswer = [[TheAnswer alloc] init];
    answerLabel.text = [NSString stringWithFormat: @"%d", [theAnswer ofLifeTheUniverseAndEverything]];
}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    return (interfaceOrientation == UIInterfaceOrientationPortrait);
}

@end

TheAnswer.h

1
2
3
4
5
6
7

#import <Foundation/Foundation.h>

@interface TheAnswer : NSObject

- (NSInteger)ofLifeTheUniverseAndEverything;

@end

TheAnswer.m

1
2
3
4
5
6
7
8
9
10

#import "TheAnswer.h"

@implementation TheAnswer

- (NSInteger)ofLifeTheUniverseAndEverything
{
    return 42;
}

@end

The result should then be:

Creating the Static Library

Now that we have a working app, we want to split the TheAnswer class into its own library so we can share its goodness with others. The first step is to create a new project that is a Cocoa Touch Static library. Select New | Project… from the XCode menu and then select Cocoa Touch Static Library and call it the TheAnswerLibrary for the project name.

After creating the library, you should delete the two generated files called TheAnswerLibrary.h and TheAnswerLibrary.m.

Then add in TheAnswer.h and TheAnswer.m by:

• control-clicking on the yellow TheAnswerLibrary folder
• selecting Add files to “TheAnswerLibrary”…
• browsing over to the TheQuestion project
• select both TheAnswer.h and TheAnswer.m

You library is now complete. Do a build and it should build successfully.

Creating the App that uses the new library

The next step is to create a new project that will use the library. Create an empty project like you did in the first step and call it TheQuestionApp. Replace the AppDelegate.m with the AppDelegate.m from the TheQuestion project. Add the QuestionViewController .h and .m files to the TheQuestionApp folder like we did for the TheAnswer .h and .m files for the static library.

If you try to build it at this point, you will get a TheAnswer.h not found error. You can add TheAnswer.h from the TheQuestion project and it will then compile but will fail to link.

Getting the library file

If you go back to the TheAnswerLibrary project and display the Products, you will see the built library: libTheAnswerLibrary.a.

You want to add this file to the TheQuestionApp project. To add it, control-click on the libTheAnswerLibrary.a and select Show In Finder. You can then just drag this into the TheQuestionApp project files. Alternatively, you could copy the file and paste it into the TheQuestionApp’s folder and then add it using the Add Files option. The former method is nice because it just references the built library so that when you rebuild the library the changes are reflected the next time you do a build in the TheQuestionApp.

Now that have it in the TheQuestionApp, try to run it in the simulator. You should get the following error:

This happens because the library that you built only contains symbols for ARM. The simulator builds are i386 builds. If you go back to the TheAnswerLibrary project and selected the scheme TheAnswerLibrary > iPhone 5.1 Simulator and did a build, then it would build an i386 build. I tried to use that library to run in the simulator but got a strange error which said:

ld: warning: ignoring file /Users/username/Projects/Blogging/combined_library/TheQuestionApp/TheQuestionApp/libTheAnswerLibrary.a, file was built for archive which is not the architecture being linked (i386): /Users/username/Projects/Blogging/combined_library/TheQuestionApp/TheQuestionApp/libTheAnswerLibrary.a

In order to get it to run on the simulator and on device, you need to combine those libraries into one that contains all the symbols and architectures that you need.

Generating a combined library

Go back to the TheAnswerLibrary project and select the blue project icon. We want to add a new target. On the bottom of the project settings, you can add a new target:

You want to add an Aggregate Target:

Once the target is added, then you will add a custom script to run for that target. There is a button on the lower right of the project settings:

After clicking on that, you want to add a run script.

In the script editor section paste in the following script:

1
2
3
4
5
6
7

XCODEBUILD_PATH=/Applications/Xcode.app/Contents/Developer/usr/bin
XCODEBUILD=$XCODEBUILD_PATH/xcodebuild

$XCODEBUILD -project TheAnswerLibrary.xcodeproj -target "TheAnswerLibrary" -sdk "iphonesimulator" -configuration "Release" clean build
$XCODEBUILD -project TheAnswerLibrary.xcodeproj -target "TheAnswerLibrary" -sdk "iphoneos" -configuration "Release" clean build

lipo -create -output "build/libTheAnswerLibrary-Combined.a" "build/Release-iphoneos/libTheAnswerLibrary.a" "build/Release-iphonesimulator/libTheAnswerLibrary.a"

This builds both versions of the library and then combines them into one that has all the architectures you need. To try this out and see if it is working first before putting it into XCode, create a build.sh file in the root of your project and run it.

If you select the scheme Combined and then do a build, you will find in your projects folder a build folder that contains the combined library.

Adding ARM6 support

If you want your library to run on older iPhones, then you need to add in ARM6 support. To enable this, you want to go to the Build Settings and change the Architectures to include armv6, armv7 and i386. Here is the Architecture line of the build settings:

When you select the column underneath blue TheAnswerLibrary you should see

remove the only entry and add in armv6, armv7 and i386.

Now if you build the combined target, your library will have all the architectures you need.

Steve Tuckner, @boberetezeke

Sr. Developer at :coderow

Being in the technology world is is hard to deny the shift toward mobile. Knowing this, I felt the desire to learn a mobile technology. I chose the Android platform due to my past experience working with linux operating systems. My most recent development experience has been focused around Ruby and Javascript. Over the years I have come to realize, that I have an easier time learning new a new technology when I conceptually understand how the pieces fit together. Recently, I have started working my way through the “Android in Action” Book as a way to learn Android development. Most of the code snippets are taken from my version of the sample applications built while going through the book. This post covers some of the basic concepts that I have learned and how they fit together to build an Android application. The concepts I will cover here:

• Intent
• Intent Filters
• Activity
• View
• Application
• Android Manifest file

The goal is to understand some of these basic building blocks and how they interconnect.

Intent - A declaration of need

Conceptually, Intents are a call to action in an Android application. An Intent describes what you want to do or what you need handled. For Example:

• Start an Activity
• Look up a contact
• Display a web page
• Ringing Phone
• Incoming text message

Intents are typically associated with a verb, such as VIEW, PICK, or EDIT. When an Intent is dispatched, the system evaluates Activities, Services, and Broadcast Receivers and sends the Intent to the most appropriate receiver. This is know as an Implicit Intent. The opposite, an Explicit Intent defines exactly what class should handle the intent.

Intent Filter - A declaration of capability

An Intent Filter defines the relationship between and Intent and the application. It is an announcement of offered functionality. And what will respond to that offer.

1
2
3
4
5
6
7
8
9
10

  <activity
      android:name=".ReviewCriteriaActivity"
      android:label="@string/app_name" >
      <!-- This intent filter is announcing that this activity will
            be launched in response the intent dispatch for MAIN -->
      <intent-filter>
          <action android:name="android.intent.action.MAIN" />
          <category android:name="android.intent.category.LAUNCHER" />
      </intent-filter>
  </activity>

The xml above shows the ReviewCriteriaActivity Activity defining an Intent-filter that will determine which activity to launch when the application receives android.intent.action.MAIN intent.

More information on Intents and Intent Filters

Activity - A window

An Activity is what your end user interacts with. The Activity takes care of implementing a window for you. Thinking about an Activity in relation to that window this is helpful in understanding the scope of an activity. In your Activity you will typically:

• Load your User interface (View) into the Window
• Create references to your UI elements (buttons, images, labels, etc)
• Bind your event handlers

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

public class ReviewCriteriaActivity extends Activity {
  // define variables used within this activity
  private EditText location;
  private Spinner  cuisine;
  private Button   getReviews;

  /** Called when the activity is first created. */
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // Load View into Window
    setContentView(R.layout.review_criteria);

    // Bind UI to Variables
    location   = (EditText) findViewById(R.id.locationField);
    cuisine    = (Spinner)  findViewById(R.id.cuisineList);
    getReviews = (Button)   findViewById(R.id.getReviewsButton);

    // Setup a Click Handler
    getReviews.setOnClickListener(new OnClickListener(){
        public void onClick(View v){
            // Validation Code Omitted //
            RestaurantFinderApplication application = (RestaurantFinderApplication) getApplication();
            //set variables you need to move from one activity to the next
            application.setReviewCriteriaCuisine(cuisine.getSelectedItem().toString());
            application.setReviewCriteriaLocation(location.getText().toString());
            // Intent to Start a New Activity
            Intent intent = new Intent("com.coderow.RestaurantFinder.LIST_VIEW");
            startActivity(intent);
        }

    });
  }
}

When moving data from one activity to the next you can use putExtra instance method on the intent. In this example we are moving the values to the application so that they can be gotten to by any of the three activities defined in the app.

1
2

  intent.putExtra("cuisine", cuisine.getSelectedItem().toString());
  intent.putExtra("location", location.getText().toString());

Every Activity overrides the onCreate() method to initialize the the activity. As you can see this Activity references the Intent that we have already covered. And the corresponding Intent filter is defined in the Android manifest file that will be covered below. The View is also referenced and we will cover that next.

More information on the Activity and the Activity Lifecycle

View - the User Interface

Views define your UI layout, they are contained within the Activity. View’s respresent the elements your user can interact with. They can be defined in XML or progammatically. Layouts defined in XML tend to be easier to read, understand and maintain.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" >

    <TextView android:id="@+id/locationLabel"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="Location (City, ST):"
              android:textAppearance="?android:attr/textAppearanceMedium" />

    <EditText android:layout_width="fill_parent"
              android:layout_height="wrap_content"
              android:id="@+id/locationField" />

    <TextView android:id="@+id/cuisineLabel"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="Cuisine:"
              android:textAppearance="?android:attr/textAppearanceMedium" />

    <Spinner android:id="@+id/cuisineList"
             android:layout_width="match_parent"
             android:layout_height="wrap_content" />

    <Button android:id="@+id/getReviewsButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Get Reviews" />

  </LinearLayout>

Here we have defined the UI elements that we bind variables to and attach event handlers on in the Activity.

More information on the View

Application - Global Space

The Application is the globally accessible space that is used to persist data between Activities. This is where you maintain your application state.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

public class RestaurantFinderApplication extends Application {

  private Review currentReview;
  private String reviewCriteriaCuisine;
  private String reviewCriteriaLocation;

  public RestaurantFinderApplication() { super(); }

  @Override
  public void onCreate() { super.onCreate(); }

  @Override
  public void onTerminate() { super.onTerminate(); }

  // getters
  public Review getCurrentReview() { return this.currentReview; }
  public String getReviewCriteriaCuisine() { return this.reviewCriteriaCuisine; }
  public String getReviewCriteriaLocation() { return this.reviewCriteriaLocation; }
  // setters
  public void setCurrentReview(Review currentReview) { this.currentReview = currentReview; }
  public void setReviewCriteriaCuisine(String reviewCriteriaCuisine) {
    this.reviewCriteriaCuisine = reviewCriteriaCuisine;
  }
  public void setReviewCriteriaLocation(String reviewCriteriaLocation) {
    this.reviewCriteriaLocation = reviewCriteriaLocation;
  }
}

In the Activity we set these values so that they can be retrieved by the next activity that is launched.

To Learn More about the Application Class and Application Lifecycle

Android Manifest file - Application definition

Every application must have an AndroidManifest.xml file.

• It names the Java package which serves as your applications unique identifier.
• Describes the applications components. (Activities, Services, etc)
• Defines the minimum level of the Android API
• Defines the permissions
• and more..

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.coderow.RestaurantFinder"
    android:versionCode="1"
    android:versionName="1.0" >

  <application android:icon="@drawable/restaurant_icon"
  android:label="@string/app_short_name" android:name="RestaurantFinderApplication"
  android:allowClearUserData="true" android:theme="@android:style/Theme.Black">

    <uses-sdk android:minSdkVersion="8" />

        <activity
            android:name=".ReviewCriteriaActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android:name=".ReviewListActivity"
            android:label="@string/app_name_list_activity" >
            <intent-filter>
                <action android:name="com.coderow.RestaurantFinder.LIST_VIEW" />
            </intent-filter>
        </activity>
                <activity
            android:name=".ReviewDetailActivity"
            android:label="@string/app_name_detail_activity" >
            <intent-filter>
                <action android:name="com.coderow.RestaurantFinder.DETAIL_VIEW" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Conclusion

This concludes this brief overview into some of the building blocks used in Android application development. I hope this has been helpful and I look forward to questions and feedback.

Attribution

Portions of this page are reproduced from work created and shared by the Android Open Source Project and used according to terms described in the Creative Commons 2.5 Attribution License.

Mark Wagner, @theSociableme

Developer at :coderow

When the team here at :coderow decided to launch a blog, the first discussions at a development shop always begin with what technology to begin with. Static generators came up more than once. These type of site builders allow the team to worry about writing something of value instead of worrying about how the CMS works. No code runs on your server, just static HTML and CSS.

Some basic goals of our blog:

• Easily share code with the community
• Be able to write freely
• Keep it simple

We chose Octopress, because it answered all these and more.

Sharing built in

As a company we use open source as often as we can. This blog is our way of giving back snippets of code that we find useful. We hope that it becomes a resource the community uses and finds helpful.

Octopress gave the team an easy way to create a code block creation via Markdown and Solarized syntax highlighting .

Example code block

``` [language] [title] [url] [link text]
code snippet
```

creates

1

code snippet

Theming

Octopress provides a nice list of themes. We chose to customize the classic theme provided to match the design of our current site. The key to customizing themes is to use the ‘custom’ directory to edit everything.

source/
  _includes/    # Main layout partials
    custom/     # <- Customize head, header, navigation, footer, and sidebar here
    asides/     # Theme sidebar partials
    post/       # post metadata, sharing & comment partials
  _layouts/     # layouts for pages, posts & category archives

The default theme is a responsive web design which was important to us, as our main :coderow site is also responsive. This mobile first approach allows any web-enabled devices to see and view our content. The fluid design makes sure that the site will work on almost any future devices. While responsive isn’t ideal for every situation, blogs and marketing sites work well using this approach.

Sass and Compass

As a regular user of Sass I was able to jump in and port my design from the website to the blog with ease. This was also my first time dealing with compass which provides preset vendor prefixes and the webs reusable patterns.

Other components

Octopress also provides great 3rd party support. We chose to use Twitter and Disqus. These components are great because all we needed to provide was our username and they just work.

Future

That’s our quick story about using Octopress here at :coderow. In the future we hope to add more components that share more about what we’re up to, what we’re learning and the events we are attending.

Norm Orstad, @norm0

Sr. Designer at :coderow

RubyMotion was released into the wild on May 3, 2012. Since then it has been a wild ride of contributors that have already setup over 100 repositories on GitHub since its release. Why all the excitement? Well for me, the excitement of being able to program in Ruby on a platform with an awesome complete toolkit for writing apps is too good to resist.

When I started programming on iOS almost a year ago, I was coming from doing Ruby on Rails applications. Objective-C seemed very verbose to me. Just declaring an instance variable required:

• putting a declaration in the interface
• putting a property declaration in the interface
• putting a synthesize declarition in the implementation
• putting a release in the dealloc

Now we have ARC so this pain is quite a bit reduced, but this just shows how much more scaffolding was required when going from Ruby to Objective-C.

In the next version of the compiler, we will be getting NSObject literals to further reduce the pain of developing in Objective-C. You will no longer need to do:

1
2
3
4
5
6

NSArray *array = [NSArray arrayWithObjects: [NSNumber numberWithInt: 1],
[NSNumber numberWithInt: 2], nil];

but instead you can just go

NSArray *array = @[ @1, @2];

So with these coming what is RubyMotion offering above and beyond this?

As I see it, there are at least 4 things that RubyMotion offers to ease iOS developement:

• method_missing
• simple clean anonymous blocks
• mixins
• effective ways to write DSLs
• less code

Method missing

Method missing is an extremely powerful way to dynamically add functionality without having to resort to eval or define_method (both of which are for the time being disallowed). Objective-C has a form of method_missing called forwardInvocation: that allows you to handle or forward the method. Even though it is possible, it is much more cumbersome to use to muck with the arguments and forward on a modified call than it would be in Ruby. One use for this would be to use method missing to map onto the CoreData Predicate functionality in a way that is much more “activerecord like” and much less wordy.

Simple clean anonymous blocks

Compare iterating through a collection in objective C:

1
2
3
4

[messageList enumerateObjectsUsingBlock:^(id obj, NSUInteger idx, BOOL *stop) {
  MyMessage *message = obj;
  [message callMethodOnMessage];
}];

To:

1
2
3

messageList.each do |message|
  message.callMethodOnMessage
end

Also, they can be used in place of delegation with a little sugar behind it. I wrote a simple wrapper for ActionSheet that allows the use of block to handle the response so that everything is in one place.

1
2
3
4
5
6
7
8
9
10
11

RBActionSheet.new(self, view, :other_button_titles => ["option a", "option b"]) do |button_index|
  case button_index
    when 0
      NSLog("option a pressed")
    when 1
      NSLog("option b pressed")
    when 2
      NSLog("2 pressed")
      # cancelled
  end
end

Mixins

More than once, I have been dying for mixins in Objective-C where I have defined a do-everything BaseViewController so that delegates are available for all the functionality required by my different view controllers. Being able to mixin what I need for a set of required functionality would be great.

In a project that I recently worked on, there were some view controllers that required one set of background images (for portrait and landscape) and others that required a different background. With mixins, this functionality could be mixed in to the view controllers that needed them.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

module DarkBackground
  def loadView
    super

    self.view.addSubview(darkBackgroundImageView)
  end
end

module LightBackground
  def loadView
    super

    self.view.addSubview(lightBackgroundImageView)
  end
end

....

class MyDark1ViewController < UIViewController
  include DarkBackground
end

class MyDark2ViewController < UIViewController
  include DarkBackground
end

class MyLight1ViewController < UIViewController
  include LightBackground
end

Effective ways to write DSL’s

When laying out UI’s by hand (not using Interface Builder), a DSL would be great for doing these things. The Ruby Motion community has started a DSL called teacup to do this. Below is an example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

Teacup::Stylesheet.new(:IPhone) do

  style :field,
    left: 10,
    top: 10,
    height: 50,
    width:  200

  style :search, extends: :field,
    left: 10,
    top: 70,
    placeholder: 'Find something...'

end

# Controller

class SomeController < UIViewController

  # don't think of this as "viewDidLoad", think of it as a nib file, that you
  # are declaring in your UIViewController.
  layout do
    subview(UITextField, :field)
    subview(UITextField, :search)
  end

end

Of course, these DSL’s could be written for any Domain where the developer is living, leading to clearer, simpler code.

Less Code

We know that Ruby has less scaffolding than statically compiled languages like Objective-C, C, C++, and Java. There is no need for .h files. Also, ruby in general is much more concise than Objective-C (as seen in the enumeration code above. All this leads to less lines of code to maintain and less visual clutter to get in the way of understanding the code.

Conclusion

I am very excited to see what is coming and helping to participate in what the Ruby Motion ecosystem will become. I will likely be using Ruby Motion in a production app this summer and am looking forward to using it in my day job.

Thanks to Jonathon Penn @jonathonpenn and Colin Thomas-Arnold for feedback on this blog post.

Steve Tuckner, @boberetezeke

Sr. Developer at :coderow