Implementing Twitter-Like Main Screen

[idanr84]

I'm making my way from iOS development to Mac OS(Lion now) and I need to develop an app that its main screen looks much like the Twitter Mac client's one is looking.

So, I got some pretty basic questions that I couldn't find decisive answers too. (Please address the attached picture for reference)

1. How would you design the black side bar ? I assume I need an NSSplitView, but is the left view suppose to be some special Control or a Regular NSView which I put NSButtons above ? Moreover, I didn't see a way to set NSView's background color. (black in this case)

2. In the right view, same issue, what controls should I use ? is the upper view an NSTableHeaderView, or just an NSView, below an NSToolBar and below NSTableView ?

3. How can I put some view in the same line where the Maximize/Minimize button are ? (In the above picture, "Timeline" and "Rampage4real". Gotta love rampage

4. App design wise, would all the views in this screen should talk to the same WindowController delegate ? should there different delegates maybe ?

I'd appreciate any help/tips. Links to sample code would be great as well. Looks kinda different than iOS development, so I'm looking to do things as appropriate for Mac so please share some wisdom.

[CHARLEBOIS]

good post, thanks for post

[stevenwei]

We just did this for Paprika Mac so I've got a few pointers. Be warned that doing a Mac app is much more challenging than its iOS counterpart, especially if you want to design a 'modern' UI. (It took us probably 2-3x as long as expected.)

1. How would you design the black side bar ? I assume I need an NSSplitView, but is the left view suppose to be some special Control or a Regular NSView which I put NSButtons above ? Moreover, I didn't see a way to set NSView's background color. (black in this case)

A split view is not really necessary, the side bar is always visible so you can just make a custom view and some buttons... put a placeholder NSView on the right side and have the buttons toggle what's visible in the placeholder.

You can use a NSBox and set its background color but I would recommend doing something interesting in Photoshop (making a gradient or textured background with an inner shadow, for example).

2. In the right view, same issue, what controls should I use ? is the upper view an NSTableHeaderView, or just an NSView, below an NSToolBar and below NSTableView ?

It's probably just a custom NSView for the top section and a NSTableView below it. A NSToolbar has a very distinct look and isn't terribly customizable. Depending on your requirements, if you can require Lion only you'll have an easier time using View based Table Views (similar to iOS). Otherwise you have to use the older Cell based Table Views which are a pain in the *** to work with.

3. How can I put some view in the same line where the Maximize/Minimize button are ? (In the above picture, "Timeline" and "Rampage4real". Gotta love rampage

Check out INAppStoreWindow: https://github.com/indragiek/INAppStoreWindow

It's not perfect but it is a good start.

4. App design wise, would all the views in this screen should talk to the same WindowController delegate ? should there different delegates maybe ?

Depends on the design of your app, but we found it very natural to put each "tab" section in its own view controller (kind of like how you would do it on iOS). You can use NSViewController but it isn't nearly as useful as its UIViewController counterpart.

I'd appreciate any help/tips. Links to sample code would be great as well. Looks kinda different than iOS development, so I'm looking to do things as appropriate for Mac so please share some wisdom.

Be aware that apps like Twitter/Reeder/Sparrow are doing a LOT of custom work to look the way they do, so if that's the effect you're going for, be prepared.