Decoding the iOS 6 SDK Available Now!
Rockable Press is proud to present our latest release: Decoding the iOS 6 SDK. Written by five seasoned iOS experts and packed with almost 500 pages of essential iOS 6 development fundamentals, this great new eBook will quickly get you up to speed with the iOS 6 SDK and all the fundamental changes that occurred to Xcode and the iOS device landscape in 2012. Get your copy now!
Who This Book is For
Decoding the iOS 6 SDK is written for intermediate iOS developers who want to quickly get up to speed with the iOS 6 SDK and all the fundamental changes that occurred to Xcode and the iOS device landscape in 2012.
Beginning iOS developers who understand the fundamentals of the SDK and Xcode will also benefit from reading this work.
The book follows a non-linear format that allows the reader to decide how much time to spend on any given topic. This is accomplished by dividing each chapter into a “Theoretical Overview” section and a “Tutorial Project” section.
While it’s certainly possible to read the entire book from cover-to-cover (we think you’ll enjoy doing so!), it’s also possible to simply read the “Theoretical Overview” of each chapter to get a high-level understanding of the iOS 6 SDK changes, and then go back and focus in on the most relevant or interesting tutorial projects on a more selective basis.
Regardless of how you approach the book, expect to learn about the most essential aspects of developing with the iOS 6 SDK, Xcode, and all the iOS devices released from Cupertino in 2012.
Hear From an Author…
Hello, I’m Mark Hammonds, and I’m one of the authors of Decoding the iOS 6 SDK.
As I’m sure you know, many exciting new enhancements and changes were introduced with the release of iOS 6. These changes are all the more relevant as over 60% of iOS devices upgraded to iOS 6 within just the first month of release.
In addition to a new major iOS release, developers also saw the introduction of three new iOS devices, two of which, the iPhone 5 and the iPad mini, had completely new form-factors. The iOS development workflow received many new changes as well.
Xcode received 9 new releases in 2012, and the LLVM Compiler received updates that will fundamentally alter the way many of us write Objective-C code. For those who already work full-time in the industry, keeping pace with these changes can feel like a second job!
The purpose of this book is to provide one convenient resource for sharpening your iOS skills and keeping pace with all the latest advances from Cupertino.
The content is organized in such a fashion that you can quickly jump to the sections that matter the most to you, and that means you can spend less time simply reading about the iOS 6 SDK and more time actually building the next great iOS 6 app!
What the Book Covers
CHAPTER 1: IOS 6 SDK ESSENTIALS by Mark Hammonds
Start off by learning about all the most important changes to the iOS ecosystem and the iOS 6 SDK. The tutorial project from this chapter covers enhancements to Xcode, the LLVM Compiler, autorotation changes in iOS 6, writing backwards compatible code, and deploying to the iPhone 5, the iPad 3, and the iPad mini.
CHAPTER 2: UITABLEVIEW CHANGES & ENHANCEMENTS by Aron Bury
Table views are one of the most widely used components in iOS development. iOS 6 introduces several important changes to table views, including a paradigm shift for generating table view cells, the ability to provide header and footer content, and a new “pull-to-refresh” control from Apple.
CHAPTER 3: DATA ISOLATION CONTROLS by Mark Hammonds
iOS 6 introduces several important privacy enhancements that provide more control over the level of access apps are granted to user data. This chapter demonstrates how to interact with the address book, calendars, reminders, location data, and user media using the new API calls.
CHAPTER 4: APPLE MAPS AND MAP KIT by Aaron Crabtree
In combination with the release of Apple Maps, Map Kit also received a significant number of API improvements and changes. This chapter will get you up-to-speed while teaching you how to build a simple app for tracking cycling routes.
CHAPTER 5: REMINDERS AND EVENT KIT by Aaron Crabtree
Event Kit will now allow developers to access user Reminders and set proximity or time- based alarms. Learn how to take advantage of these features and build a Dinner Reservations app.
CHAPTER 6: UIKIT THEMING CONTROLS by Aron Bury
Customizing an app’s interface is a great way to stand out in the App Store. This chapter will demonstrate the many new theming capabilities provided by UIKit in iOS 6!
CHAPTER 7: AUTO LAYOUT FUNDAMENTALS by Akiel Khan
Developing applications that will look great across the 3.5” iPhone, the 4” iPhone, the iPad, and the iPad mini can be a challenge. Fortunately, Apple’s new Auto Layout system makes this much easier to accomplish, and this chapter will introduce you to the fundamentals.
CHAPTER 8: ADVANCED AUTO LAYOUT TECHNIQUES by Akiel Khan
Picking up where chapter 7 left off, this chapter will dive into more advanced Auto Layout concepts, including the the new Visual Format Language (VFL) for managing layout constraints.
CHAPTER 9: COLLECTION VIEW FUNDAMENTALS by Bart Jacobs
With the rise of the iPad, many iOS developers have begun using advanced, grid-based layouts in their applications. The UICollectionView class makes doing so easier and more robust than ever, and collection views are sure to become a favorite tool among iOS developers.
CHAPTER 10: ADVANCED COLLECTION VIEW TECHNIQUES by Bart Jacobs
This chapter demonstrates the versatility and genius of collection views by showcasing several of the more advanced aspects of their architecture. The tutorial project in this chapter will teach you how to build a music playlist application that pulls content from the local device music library.
CHAPTER 11: SOCIAL FRAMEWORK FUNDAMENTALS by Bart Jacobs
The introduction of the Social Framework makes it easier than ever before to share application content on Twitter, Facebook, or Sina Weibo. This chapter will get you up to speed with the basics and teach you how to build a simple photo sharing app.
CHAPTER 12: ADVANCED SOCIAL FRAMEWORK TECHNIQUES by Bart Jacobs
This chapter expands on the principles introduced in Chapter 11 and demonstrates how to build a basic Twitter client using a combination of the Accounts Framework and the Social Framework.
CHAPTER 13: STATE PRESERVATION AND RESTORATION by Akiel Khan
This chapter will show you how to get the most out of the new state preservation and restoration capabilities of the SDK, making it easier than ever to convey a sense of continuity and efficiency within your apps!
CHAPTER 14: PASS KIT FUNDAMENTALS by Aaron Crabtree
One of the most promising new additions to iOS 6 is the Passbook application. This chapter will teach you how to build a demo snowboarding ticket that interacts with Passbook and the Pass Kit framework.
Still Undecided?
If you’re undecided, you can download the sample pages of the book to get a feel for the layout and style!
Buy Now!
If you’ve heard enough and would like to pick up your own copy, you can buy Decoding the iOS 6 SDK by visiting the Rockable Press lander page.
]]>
Rockable Press is proud to present our latest release: Decoding the iOS 6 SDK. Written by five seasoned iOS experts and packed with almost 500 pages of essential iOS 6 development fundamentals,...
http://feedproxy.google.com/~r/nettuts/~3/wZvDrOfbKbc/
https://my3.my.umbc.edu/api/v0/pixel/news/27164/guest@my.umbc.edu/419f6a6cb26b1b23f3a5a9cbd780d344/api/pixel
css
development
html
javascript
mysql
news
php
sql
wed
Web Developer - Build Group
https://my3.my.umbc.edu/groups/retired-583
https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xsmall.png?1363101197
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/original.jpg?1363101197
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xxlarge.png?1363101197
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xlarge.png?1363101197
https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/large.png?1363101197
https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/medium.png?1363101197
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/small.png?1363101197
https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xsmall.png?1363101197
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xxsmall.png?1363101197
Web Developer - Build Group
0
0
true
Wed, 03 Apr 2013 11:54:16 -0400
Wed, 03 Apr 2013 11:54:16 -0400
Building Large, Maintainable, and Testable Knockout.js Applications
Knockout.js is a popular open source (MIT) MVVM JavaScript framework, created by Steve Sandersen. Its website provides great information and demos on how to build simple applications, but it unfortunately doesn’t do so for larger applications. Let’s fill in some of those gaps!
AMD and Require.js
AMD is a JavaScript module format, and one of the most popular (if not the most) frameworks is http://requirejs.org by https://twitter.com/jrburke. It consists of two global functions called require() and define(), although require.js also incorporates a starting JavaScript file, such as main.js.
<script src="js/require-jquery.min.js" data-main="js/main"></script>
There are primarily two flavors of require.js: a vanilla require.js file and one that includes jQuery (require-jquery). Naturally, the latter is used predominately in jQuery-enabled websites. After adding one of these files to your page, you can then add the following code to your main.js file:
require( [ "https://twitter.com/jrburkeapp" ], function( App ) {
App.init();
})
The require() function is typically used in the main.js file, but you can use it to directly include a module anywhere. It accepts two arguments: a list of dependencies and a callback function.
The callback function executes when all dependencies finish loading, and the arguments passed to the callback function are the objects required in the aforementioned array.
It’s important to note that the dependencies load asynchronously. Not all libraries are AMD compliant, but require.js provides a mechanism to shim those types of libraries so that they can be loaded.
This code requires a module called app, which could look like the following:
define( [ "jquery", "ko" ], function( $, ko ) {
var App = function(){};
App.prototype.init = function() {
// INIT ALL TEH THINGS
};
return new App();
});
The define() function’s purpose is to define a module. It accepts three arguments: the name of the module (which is typically not included), a list of dependencies and a callback function. The define() function allows you to separate an application into many modules, each having a specific function. This promotes decoupling and separation of concerns because each module has its own set of specific responsibilities.
Using Knockout.js and Require.js Together
Knockout is AMD ready, and it defines itself as an anonymous module. You don’t need to shim it; just include it in your paths. Most AMD-ready Knockout plugins list it as “knockout” rather than “ko”, but you can use either value:
require.config({
paths: {
ko: "vendor/knockout-min",
postal: "vendor/postal",
underscore: "vendor/underscore-min",
amplify: "vendor/amplify"
},
shim: {
underscore: {
exports: "_"
},
amplify: {
exports: "amplify"
}
},
baseUrl: "/js"
});
This code goes at the top of main.js. The paths option defines a map of common modules that load with a key name as opposed to using the entire file name.
The shim option uses a key defined in paths and can have two special keys called exports and deps. The exports key defines what the shimmed module returns, and deps defines other modules that the shimmed module might depend on. For example, jQuery Validate‘s shim might look like the following:
shim: {
// ...
"jquery-validate": {
deps: [ "jquery" ]
}
}
Single- vs Multi-Page Apps
It’s common to include all the necessary JavaScript in a single page application. So, you may define the configuration and the initial require of a single-page application in main.js like so:
require.config({
paths: {
ko: "vendor/knockout-min",
postal: "vendor/postal",
underscore: "vendor/underscore-min",
amplify: "vendor/amplify"
},
shim: {
ko: {
exports: "ko"
},
underscore: {
exports: "_"
},
amplify: {
exports: "amplify"
}
},
baseUrl: "/js"
});
require( [ "https://twitter.com/jrburkeapp" ], function( App ) {
App.init();
})
You might also need separate pages that not only have page-specific modules, but share a common set of modules. James Burke has two repositories that implement this type of behavior.
The rest of this article assumes you’re building a multi-page application. I’ll rename main.js to common.js and include the necessary require.config in the above example in the file. This is purely for semantics.
Now I’ll require common.js in my files, like this:
<script src="js/require-jquery.js"></script>
<script>
require( [ "./js/common" ], function () {
//js/common sets the baseUrl to be js/ so
//can just ask for 'app/main1' here instead
//of 'js/app/main1'
require( [ "pages/index" ] );
});
</script>
</body>
</html>
The require.config function will execute, requiring the main file for the specific page. The pages/index main file might look like the following:
require( [ "app", "postal", "ko", "viewModels/indexViewModel" ], function( app, postal, ko, IndexViewModel ) {
window.app = app;
window.postal = postal;
ko.applyBindings( new IndexViewModel() );
});
This page/index module is now responsible for loading all the neccessary code for the index.html page. You can add other main files to the pages directory that are also responsible for loading their dependent modules. This allows you to break multi-page apps into smaller pieces, while avoiding unnecessary script inclusions (e.g. including the JavaScript for index.html in the about.html page).
Sample Application
Let’s write a sample application using this approach. It’ll display a searchable list of beer brands and let us choose your favorites by clicking on their names. Here is the app’s folder structure:
Let’s first look at index.html‘s HTML markup:
<section id="main">
<section id="container">
<form class="search" data-bind="submit: doSearch">
<input type="text" name="search" placeholder="Search" data-bind="value: search, valueUpdate: 'afterkeydown'" />
<ul data-bind="foreach: beerListFiltered">
<li data-bind="text: name, click: $parent.addToFavorites"></li>
</ul>
</form>
<aside id="favorites">
<h3>Favorites</h3>
<ul data-bind="foreach: favorites">
<li data-bind="text: name, click: $parent.removeFromFavorites"></li>
</ul>
</aside>
</section>
</section>
<!-- import("templates/list.html") -->
<script src="js/require-jquery.js"></script>
<script>
require( [ "./js/common" ], function (common) {
//js/common sets the baseUrl to be js/ so
//can just ask for 'app/main1' here instead
//of 'js/app/main1'
require( [ "pages/index" ] );
});
</script>
Pages
The structure of our application uses multiple “pages” or “mains” in a pages directory. These separate pages are responsible for initializing each page in the application.
The ViewModels are responsible for setting up the Knockout bindings.
ViewModels
The ViewModels folder is where the main Knockout.js application logic lives. For example, the IndexViewModel looks like the following:
// https://github.com/jcreamer898/NetTutsKnockout/blob/master/lib/js/viewModels/indexViewModel.js
define( [
"ko",
"underscore",
"postal",
"models/beer",
"models/baseViewModel",
"shared/bus" ], function ( ko, _, postal, Beer, BaseViewModel, bus ) {
var IndexViewModel = function() {
this.beers = [];
this.search = "";
BaseViewModel.apply( this, arguments );
};
_.extend(IndexViewModel.prototype, BaseViewModel.prototype, {
initialize: function() { // ... },
filterBeers: function() { /* ... */ },
parse: function( beers ) { /* ... */ },
setupSubscriptions: function() { /* ... */ },
addToFavorites: function() { /* ... */ },
removeFromFavorites: function() { /* ... */ }
});
return IndexViewModel;
});
The IndexViewModel defines a few basic dependencies at the top of the file, and it inherits BaseViewModel to initialize its members as knockout.js observable objects (we’ll discuss that shortly).
Next, rather than defining all of the various ViewModel functions as instance members, underscore.js’s extend() function extends the prototype of the IndexViewModel data type.
Inheritance and a BaseModel
Inheritance is a form of code reuse, allowing you to reuse functionality between similar types of objects instead of rewriting that functionality. So, it’s useful to define a base model that other models or can inherit from. In our case, our base model is BaseViewModel:
var BaseViewModel = function( options ) {
this._setup( options );
this.initialize.call( this, options );
};
_.extend( BaseViewModel.prototype, {
initialize: function() {},
_setup: function( options ) {
var prop;
options = options || {};
for( prop in this ) {
if ( this.hasOwnProperty( prop ) ) {
if ( options[ prop ] ) {
this[ prop ] = _.isArray( options[ prop ] ) ?
ko.observableArray( options[ prop ] ) :
ko.observable( options[ prop ] );
}
else {
this[ prop ] = _.isArray( this[ prop ] ) ?
ko.observableArray( this[ prop ] ) :
ko.observable( this[ prop ] );
}
}
}
}
});
return BaseViewModel;
The BaseViewModel type defines two methods on its prototype. The first is initialize(), which should be overridden in the subtypes. The second is _setup(), which sets up the object for data binding.
The _setup method loops over the properties of the object. If the property is an array, it sets the property as an observableArray. Anything other than an array is made observable. It also checks for any of the properties’ initial values, using them as default values if necessary. This is one small abstraction that eliminates having to constantly repeat the observable and observableArray functions.
The “this” Problem
People who use Knockout tend to prefer instance members over prototype members because of the issues with maintaining the proper value of this. The this keyword is a complicated feature of JavaScript, but it’s not so bad once fully grokked.
From the MDN:
“In general, the object bound to this in the current scope is determined by how the current function was called, it can’t be set by assignment during execution, and it can be different each time the function is called.”
So, the scope changes depending on HOW a function is called. This is clearly evidenced in jQuery:
var $el = $( "#mySuperButton" );
$el.on( "click", function() {
// in here, this refers to the button
});
This code sets up a simple click event handler on an element. The callback is an anonymous function, and it doesn’t do anything until someone clicks on the element. When that happens, the scope of this inside of the function refers to the actual DOM element. Keeping that in mind, consider the following example:
var someCallbacks = {
someVariable: "yay I was clicked",
mySuperButtonClicked: function() {
console.log( this.someVariable );
}
};
var $el = $( "#mySuperButton" );
$el.on( "click", someCallbacks.mySuperButtonClicked );
There’s an issue here. The this.someVariable used inside mySuperButtonClicked() returns undefined because this in the callback refers to the DOM element rather than the someCallbacks object.
There are two ways to avoid this problem. The first uses an anonymous function as the event handler, which in turn calls someCallbacks.mySuperButtonClicked():
$el.on( "click", function() {
someCallbacks.mySuperButtonClicked.apply();
});
The second solution uses either the Function.bind() or _.bind() methods (Function.bind() is not available in older browsers). For example:
$el.on( "click", _.bind( someCallbacks.mySuperButtonClicked, someCallbacks ) );
Either solution you choose will achieve the same end-result: mySuperButtonClicked() executes within the context of someCallbacks.
“this” in Bindings and Unit Tests
In terms of Knockout, the this problem can show itself when working with bindings–particularly when dealing with $root and $parent. Ryan Niemeyer wrote a delegated events plugin that mostly eliminates this issue. It gives you several options for specifying functions, but you can use the data-click attribute, and the plugin walks up your scope chain and calls the function with the correct this.
<form class="search">
<input type="text" name="search" placeholder="Search" data-bind="value: search" />
<ul data-bind="foreach: beerListFiltered">
<li data-bind="text: name, click: $parent.addToFavorites"></li>
</ul>
</form>
In this example, $parent.addToFavorites binds to the view model via a click binding. Since the <li /> element resides inside a foreach binding, the this inside $parent.addToFavorites refers to an instance of a the beer that was clicked on.
To get around this, the _.bindAll method ensures that this maintains its value. Therefore, adding the following to the initialize() method fixes the problem:
_.extend(IndexViewModel.prototype, BaseViewModel.prototype, {
initialize: function() {
this.setupSubscriptions();
this.beerListFiltered = ko.computed( this.filterBeers, this );
_.bindAll( this, "addToFavorites" );
},
});
The _.bindAll() method essentially creates an instance member called addToFavorites() on the IndexViewModel object. This new member contains the prototype version of addToFavorites() that is bound to the IndexViewModel object.
The this problem is why some functions, such as ko.computed(), accepts an optional second argument. See line five for an example. The this passed as the second argument ensures that this correctly refers to the current IndexViewModel object inside of filterBeers.
How would we test this code? Let’s first look at the addToFavorites() function:
addToFavorites: function( beer ) {
if( !_.any( this.favorites(), function( b ) { return b.id() === beer.id(); } ) ) {
this.favorites.push( beer );
}
}
If we use the mocha testing framework and expect.js for assertions, our unit test would look like the following:
it( "should add new beers to favorites", function() {
expect( this.viewModel.favorites().length ).to.be( 0 );
this.viewModel.addToFavorites( new Beer({
name: "abita amber",
id: 3
}));
// can't add beer with a duplicate id
this.viewModel.addToFavorites( new Beer({
name: "abita amber",
id: 3
}));
expect( this.viewModel.favorites().length ).to.be( 1 );
});
To see the full unit testing setup, check out the repository.
Let’s now test filterBeers(). First, let’s look at its code:
filterBeers: function() {
var filter = this.search().toLowerCase();
if ( !filter ) {
return this.beers();
}
else {
return ko.utils.arrayFilter( this.beers(), function( item ) {
return ~item.name().toLowerCase().indexOf( filter );
});
}
},
This function uses the search() method, which is databound to the value of a text <input /> element in the DOM. Then it uses the ko.utils.arrayFilter utility to search through and find matches from the list of beers. The beerListFiltered is bound to the <ul /> element in the markup, so the list of beers can be filtered by simply typing in the text box.
The filterBeers function, being such a small unit of code, can be properly unit tested:
beforeEach(function() {
this.viewModel = new IndexViewModel();
this.viewModel.beers.push(new Beer({
name: "budweiser",
id: 1
}));
this.viewModel.beers.push(new Beer({
name: "amberbock",
id: 2
}));
});
it( "should filter a list of beers", function() {
expect( _.isFunction( this.viewModel.beerListFiltered ) ).to.be.ok();
this.viewModel.search( "bud" );
expect( this.viewModel.filterBeers().length ).to.be( 1 );
this.viewModel.search( "" );
expect( this.viewModel.filterBeers().length ).to.be( 2 );
});
First, this test makes sure that the beerListFiltered is in fact a function. Then a query is made by passing the value of “bud” to this.viewModel.search(). This should cause the list of beers to change, filtering out every beer that does not match “bud”. Then, search is set to an empty string to ensure that beerListFiltered returns the full list.
Conclusion
Knockout.js offers many great features. When building large applications, it helps to adopt many of the principles discussed in this article to help your app’s code remain manageable, testable, and maintainable. Check out the full sample application, which includes a few extra topics such as messaging. It uses postal.js as a message bus to carry messages throughout the application. Using messaging in a JavaScript application can help decouple parts of the application by removing hard references to each other. Be sure and take a look!
]]>
Knockout.js is a popular open source (MIT) MVVM JavaScript framework, created by Steve Sandersen. Its website provides great information and demos on how to build simple applications, but it...
http://feedproxy.google.com/~r/nettuts/~3/IfYJEM4gW1U/
https://my3.my.umbc.edu/api/v0/pixel/news/27155/guest@my.umbc.edu/9ffa5a86dbb4d9208250a75d7824af02/api/pixel
css
databinding
development
html
javascript
javascript-and-ajax
knockout
mysql
php
sql
tutorials
wed
Web Developer - Build Group
https://my3.my.umbc.edu/groups/retired-583
https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xsmall.png?1363101197
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/original.jpg?1363101197
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xxlarge.png?1363101197
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xlarge.png?1363101197
https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/large.png?1363101197
https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/medium.png?1363101197
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/small.png?1363101197
https://assets3-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xsmall.png?1363101197
https://assets4-my.umbc.edu/system/shared/avatars/groups/000/000/583/fc60f5d7abc2e080599bb6dc465db54d/xxsmall.png?1363101197
Web Developer - Build Group
0
0
true
Wed, 03 Apr 2013 11:06:11 -0400
Wed, 03 Apr 2013 11:06:11 -0400
