Today saw the release of Squiz Matrix iOS beta 1. This is the first round of beta testing for all users that signed up.

• 
• 

The beta version includes the following features.

Features:

• Add multiple site configurations
• Asset Map Browsing
• Status Colors
• Importing of files in app
• Management of Imported Files
• Asset creation of selected assets
• Asset creation from imported files
• Viewing of selected asset screens
• Asset Details
• Viewing/changing Asset Status
• Viewing/changing Asset Attributes
• Viewing/changing Asset Metadata
• Viewing Asset Webpaths
• Preview Assets including all file types
• Asset Map sorting
• Deleting of assets
• Pull to refresh

Squiz Matrix 3.28.0 is required.

Note: Since this is a beta there will be issues, things not finished, and bugs. Make sure you contact us with any of these issues that you might find.

Interested in Helping Out?

You can still be a tester! Sign-up below.

I just did a guest blog over on the Squiz Advocate blog about the status of my Squiz Matrix iOS app. Head over there to read the full post:

Squiz Matrix for iOS: An Update, on the Squiz Advocate Blog website

Apple just approved our newest iOS app, Retemodo. Retemodo is a reverse odometer, which counts down from a distance that you set. It is a great, easy to use utility app. All you have to do is start up the app, swipe or touch the numbers to set your distance, then click start. Then you can either watch the beautifully animated digits flip, or you can just forget about it. It works in the background and will alert you when your distance has been reached.

• 
• 

Want to support us?

Have you ever felt limited by the three Annotation pin colors that Apple provides with MapKit? Have you ever thought it was a pain to have to create custom images in photoshop every time you wanted to change the color? ZSPinAnnotation solves these problems by building the pin image on the fly. All you have to do is specify a UIColor and you get back a UIImage.

• 

If you want to create a ZSPinAnnotation you simply do the following:

UIImage *img = [ZSPinAnnotation pinAnnotationWithColor:[UIColor blueColor]];

The full implementation in mapView:viewForAnnotation:

- (MKAnnotationView *)mapView:(MKMapView *)mV viewForAnnotation:(id <MKAnnotation>)annotation {

    if(![annotation isKindOfClass:[Annotation class]]) // Don't mess user location
        return nil;

    static NSString *defaultPinID = @"StandardIdentifier";
    MKAnnotationView *pinView = (MKAnnotationView *)[self.mapView dequeueReusableAnnotationViewWithIdentifier:defaultPinID];
    if (pinView == nil){
        pinView = [[[MKAnnotationView alloc] initWithAnnotation:annotation reuseIdentifier:defaultPinID] autorelease];
        //pinView.animatesDrop = YES;
    }

    // Build our annotation
    if ([annotation isKindOfClass:[Annotation class]]) {
        Annotation *a = (Annotation *)annotation;
        pinView.image = [ZSPinAnnotation pinAnnotationWithColor:a.color];// ZSPinAnnotation Being Used
        pinView.annotation = a;
        pinView.enabled = YES;
        pinView.calloutOffset = CGPointMake(-11,0);
    }

    pinView.canShowCallout = YES;

    return pinView;

}//end

As time gets closer to some of our iOS app releases we are looking for individuals who are interested in being Beta Testers! Those special people will have a chance to play with beta versions as well as have input on new features and UI.

If anyone is interested we would be very grateful. Just follow the button below to come on board.

When working on the iPad version of the Pacific Union College app I had a need for a UIImageView that could load a remote image while showing a default image during the loading time. Since I am doing everything I can to get away from the horrible Three20 Library, I figured that I would write my own UIImageView replacement.

ZSImageView allows remote image loading, using a default image and also rounding the edges of the view. It is pretty easy to add a ZSImageView to your project.

Download ZSImageView on github

• 

Create a ZSImageView and set the remote and default image:

ZSImageView *imageView = [[[ZSImageView alloc] initWithFrame:CGRectMake(0, 0, 200.0f, 200.0f)] autorelease];
imageView.imageUrl = @"http://www.desktopwallpaperhd.com/wallpapers/3/4501.jpg";
imageView.defaultImage = [UIImage imageNamed:@"no-image.png"];
imageView.contentMode = UIViewContentModeScaleAspectFill;
[self.view addSubview:imageView];

If you want to round two of the edges and give the view a cornerRadius of 10 it is pretty easy:

ZSImageView *imageView = [[[ZSImageView alloc] initWithFrame:CGRectMake(0, 0, 200.0f, 200.0f)] autorelease];
imageView.imageUrl = @"http://www.desktopwallpaperhd.com/wallpapers/3/4501.jpg";
imageView.defaultImage = [UIImage imageNamed:@"no-image.png"];
imageView.contentMode = UIViewContentModeScaleAspectFill;
imageView.corners = ZSRoundCornerTopLeft | ZSRoundCornerBottomLeft;
imageView.cornerRadius = 10;
[self.view addSubview:imageView];

ZSImageView requires the QuartzCore.framework. Once you have that added you need to copy ZSImageView.h and ZSImageView.m as well as JMImageCache.h and JMImageCache.m to your project. Then #import the ZSImageView.h header file where you need it and start using it.

Download ZSImageView on github

For a long time I have noticed a really annoying UI bug in iOS. When the battery percentage reaches into the teens, the fonts that are used for the two numbers seems to be different, and the characters even touch, such as when reaching 18%. Now, I am not a designer, but I did take design classes, including typography, and I know that what I am seeing is not right. You would think with Apple being known for their design that they would have noticed something like this.

• 

Just to be nice, I submited a bug report to Apple in case they are intersted in fixing this.

Has anyone else noticed this issue? I have seen it happen on all the iPhones in my house as well as my iPad.

During my free time I have been working hard to build in new features to the Squiz Matrix iOS app. A few quick things I have added are new designs, pull to refresh, asset types to create, screens and preview.

Works With Your Squiz Matrix Install

The great thing about the Squiz Matrix iOS app is that it gathers all of its data from your server. So all asset types that are shown for creation are the same assets that are installed on your system, screens are generated from your server and all asset map details are from your server. It should look familiar, but with a few great enhancements!

Preview Video

The following demo shows a couple of the new features in action as well as the new design.

Comments/ Suggestions

I welcome your feedback! This app needs to have community input, so please feel free to comment so that I can know what kind of features you are interested in.

The great thing about using a CMS like Squiz Matrix is its flexibility. So when we decided to build a Pacific Union College iOS app it was a snap to get Matrix working as the datasource.

I decided to use XML to provide the data (primarily from asset listings), but first I needed to do some proper setup and gather the tools that I would need.

The Parse File

In Squiz Matrix I needed to create a separate design file that would be applied to all of my assets that were acting as datasources, for this I used the following format:

<MySource_PRINT id_name="__global__" var="content_type" content_type="text/xml; charset=utf-8" />
<?xml version="1.0" encoding="UTF-8"?>
<body>
<MySource_area id_name="body" design_area="body" />
</body>

Example Asset Listing

For most of the tabs in the Pacific Union College app an asset listing is used.

• 

Setting up the asset listing that would serve as the datasource was pretty straight forward. For a simple listing such as the Current News, I used the following setup:

Page Contents

%asset_listing%

Page Format

<item>
<title><![CDATA[%asset_name%]]></title>
<sub><![CDATA[%asset_attribute_summary^striphtml^trim^maxwords:30%]]></sub>
<created>%asset_created_Y%%asset_created_m%%asset_created_d%</created>
<id>%asset_assetid%</id>
</item>

Parsing the XML in Objective-C

When I started looking for an XML parser I was overwhelmed by the number of articles and blog posts about which parser was the best. There were comparisons between NSXMLParser and libxml2, as well as many people talking about KissXML. All of these were fair solutions that would work well, but I wanted something very lightweight that was easy to use. After searching around a bit, I found XML Reader by Troy Brant. It was a very simple XML Parser that turned the parsed xml into an NSDictionary object which is exactly what I wanted.

Using the parser is very simple, all you have to do it provide it with an XML string and an NSError object:

NSError *parseError = nil;
NSDictionary *dict = [XMLReader dictionaryForXMLString:xmlStr error:&parseError];

Once the parser spit out the NSDictionary I simply needed to loop through it in order to get the data that I wanted.

NSError *parseError = nil;
NSDictionary *dict = [XMLReader dictionaryForXMLString:xmlStr error:&parseError];
NSDictionary *newDict = [[dict objectForKey:@"body"] objectForKey:@"item"];

// Check if we have one or more results
if ([newDict isKindOfClass:[NSArray class]]) {
	
	for (id theKey in newDict) {
		
		NSString *title = [util cleanString:[[theKey objectForKey:@"title"] objectForKey:@"text"]];
		NSString *sub = [util cleanString:[[theKey objectForKey:@"sub"] objectForKey:@"text"]];
		NSString *assetId = [util cleanString:[[theKey objectForKey:@"id"] objectForKey:@"text"]];
		
		NSLog(@"%@ - ID: %@", title, assetId);
		
	}//end for
	
} else {
	// Do somethign else if not an array
	
}//end

Things To Think About

Getting the data from a URL and then parsing it can take some time. Not a huge amount of time, maybe a second or two depending on how fast your server is and how large your file is. But you don't want your users having their UI locked up until the data loads. So, in this case it is a good idea to load the data in the background:

/**
 * The initial call to the datasource
 *
 * @version $Revision: 0.1
 */
- (void)initDataSource {
	[self performSelectorInBackground:@selector(callDataSourceWithId:) withObject:@""];
}//end

Caching on the device is another thing that needs to be considered if your datasource comes from some URL. If users don't have an internet connection they still want to browse the app. For the Pacific Union College app we cache all datasource XML files and use those files if the user is offline.

In April, Pacific Union College* released its first mobile app called "PUC Mobile". It it is built for iOS devices and has a number of useful features such as News, Photos, Events and a Cafe Menu. The app had been in the planning and development state for quite some time, so I wanted to detailed how that process went and how I worked to develop PUC Mobile.

• 

The Beginning

While PUC had a great website, we didn't have a mobile presence. With the use of smart phones skyrocketing, we knew that we needed to get into the game if we wanted to compete. Initially we came up with an exhaustive list of features and talked with a student about developing the app. After a few months of planning it fell through and the app was again placed on the "back burner" list of projects.

I knew that we needed to start the project and I didn't want to wait any longer, so I made time in my schedule to start the development in-house.

The Features

When development started, it was clear that many of the features on our wish list were not going to happen. I really wanted to have integration with student class schedules and checking of grades, but this wasn't possible with our current records data management solution, so these features were scrapped.

• 
• 

I do think that our initial features are great, here is what they are:

• News
  Read and share current and archived news stories.
• Photos
  View and download photos from events, activities, sports and PUC in Pictures.
• Events
  Stay up to date with everything happening at PUC. See what is happening today, next week, or even next year. You can even add events to your iPhone calendar so that you can be alerted when they are coming up.
• Maps
  Find on-campus locations, food in the valley, and exciting local places. See information about these locations, give them a call with one click, or map to that location from PUC or your current location.
• Campus Directory
  Search a listing of faculty and campus department numbers, which can easily be called, emailed or added as a contact on your phone.
• Cafe Menu
  Find out real-time what is currently being served at the PUC Dining Commons.
• Contact
  Submit questions and comments to PUC right from the app.
• Social Networking
  Quickly and easily share PUC news and events with your friends on Facebook, Twitter and e-mail.
• Retina Display Graphics
  All images and graphics have been optimized for the retina display.
• Offline Access
  Content is cached locally so that if you don't have an internet connection you can still view content that you have loaded before.

The Development

When I started the development on PUC Mobile, I knew that I would be sourcing the data from our Squiz Matrix CMS (future blog post coming about this). In doing this I needed to make sure that the UITableView would wait until the data was ready. To do that I decided to use the three20 framework which uses TTTableViewController which is a subclass of UITableViewController. Using it allows the app to gather the data in the background and only display it to the user once it is ready.

Another one of great features that three20 provides is TTImageView. It allows you to "lazy load" images within the tableView. This means that we can load images into our table cells starting with a default image, while in the background loading the image data from a url that is specified. Once the data is loaded the default image gets replaced with the loaded image. This makes tableView scrolling much quicker and smoother. Creating a TTImageView object is very easy:

TTImageView* imageView = [[[TTImageView alloc] initWithFrame:CGRectMake(30, 30, 0, 0)] autorelease];
imageView.defaultImage = [UIImage imageNamed:@"default.png"];
imageView.urlPath = @"http://www.puc.edu/myImage.png"; 
[self.view addSubview:imageView];

The Future

Right now the layout of the app is not optimized for the iPad. This will all change this summer when we launch our new 1.2 version with full universal support. We are also adding a number of new features, including Video and Audio that support AirPlay. AirPlay is an amazing new feature of iOS that allows you to stream audio and video content from your iOS device to AirPlay enabled hardware, namely an AppleTV. The new features that I am working on for 1.2 are:

• Video (with AirPlay)
• Audio (with AirPlay)
• Degrees
• Viewpoint (Alumni Magazine)

Here are what some of the layouts look like for the new features.

• 
• 
• 

I think that the iPad layout for our Viewpoint magazine is particularly awesome. Each issue is loaded as a PDF using the QuickLook framework. They can also be opened and saved in iBooks.

• 

Conclusion

It has been great experience developing PUC Mobile. I have really enjoyed working to build a useful and successful app while trying to compete with and exceed what other school are doing with their mobile apps.

More to come in the future.