Create Vertical-Tabbed OS X Cocoa View - objective-c

I'm interested in having a application with a layout similar to the tabbed operation of iChat (see image below).
Does anyone know of any pre-built constructs that allow this sort of UI? I know there is NSTabView for tabs across the top of the application, but what about vertical orientation? For my purposes, the view associated with the tabs doesn't necessarily need to scroll. In fact it has nothing to do with chatting anyway, I simply like this layout.
Thanks.

The view on the left is an NSTableView with source list-style highlighting:
tableView.selectionHighlightStyle = NSTableViewSelectionHighlightStyleSourceList;
You can use a tabless NSTabView for the right part, but you could just as well change the content of the displayed views or swap the views entirely. That depends on how many “tabs” there’ll be and how the content displayed on the right side will be different.

Related

How to place items in a NSScrollView

When I try to place objects using the Interface Builder in Xcode into a NSScrollView, they appear fine until runtime in the application, where they do not appear at all for some reason. I want it to be so that I can place multiple buttons and labels in the view, and have the user be able to scroll down to see more.
Am I not meant to use NSScrollView for this purpose?
Is there another way to go about implementing it I am not aware of?
You need to check the where you added the UI objects.
You need to consider these :
Is your autolayout enabled?
Did you flipped the view?
Resizing mask is working good as per your requirement.
Am I not meant to use NSScrollView for this purpose?
No, you picked the correct control for the requirement. NSScrollView is indeed for same kind of use.

How to replace a view

Application requires more than one window (Lets call A,B,C). Each window has more than one view (table views, image views as well as web view). Lets say window A has three views (x, y,z) and window B has three views (d,e,f). Application needs to display images of different size on orientation change.
I have achieved the same using gesture event listener and looping through windows for views and replacing the view with new images. The problem I have is when we navigate from one window to other and the orientation changes, the loading of view after looping goes for a toss. Is there a better way to achieve the same ?
Is there a method in titanium like following code to replace a view ?
var self=Ti.UI.currentWindow
var newView=Ti.UI.createImageView({image:'abc.png'})
self.replace(self.children[1],newView )
Unfortunately there is now replace method.
You need to remove the whole view and add it again but this can cause a wrong layout if you have more than one view on a same level. The implementation then depends on the layout which was set (vertical, horizontal, composite etc).
For example in vertical layout removing an item and simply add a new one would remove your specified item but appends the new one at the end since you can't specify in which order it should be added.
If you have a composite layout you can specify absolute positions but adding a new view causes a higher zIndex for this view so that it will hide views that were previously added at the same/similar position.
Why not simply change the image link ?
var self = Ti.UI.currentWindow;
self.children[1].image = 'bcd.png';
Well you could always lock the orientation of your window. But this isnt exactly good practice (especially for iOS).
Generally orientation changes are handled pretty well if you define the width and height of your views to be percentages or Ti.UI.FILL, if you have a composite layout. Check that you are not giving the views absolute coordinates as this could cause layout problems. If you have a vertical or horizontal layout you usually don't have to worry about orientation change, unless you did not nest your views in a main container correctly.
Prasad,
If this is about just ensuring that the images look good on different orientations,you can make use of the different folders provided by Titanium in the android/images folder.You can just make different images for each of the orientations and device sizes.For IOS you can change just the images on orientation change as you are already doing.
https://wiki.appcelerator.org/display/guides/Using+density-specific+resources+on+Android
If you are concernced about the layout there are couple of things you can do:
1.Give all the height or width values in percentages.This way all elements will be re sized once the orientation changes automatically.
2.On each window open check if the orientation is vertical or horizontal by default and accordingly set the image attribute of the imageView.
Ti.UI.orientation
This property will give you the orientation of the window by default.Values of this property could be this
Ti.UI.PORTRAIT
Ti.UI.UPSIDE_PORTRAIT
Ti.UI.LANDSCAPE_LEFT
Ti.UI.LANDSCAPE_RIGHT
Use "if else" and accordingly set the images.

how can i implement dynamic navigation/group header positioning in a winrt app?

I know the title is a little confusing, but the best way to describe what I'm after is by running the Weather metro app on the Consumer Preview; as you scroll horizontally, you'll note that the section headings kind of move around and stay on top of the relevant content, and then fade out as you cross over into a new section. (The main background for the first section also kind of does this)
My question is, how would I go about replicating this behavior in a WinRT app of my own? Are there any existing controls I can leverage or would I have to essentially rewrite it all?
This looks just like a ScrollViewer - you would handle the ViewChanged event and depending on the scroll offset - change the opacity of overlaid static TextBlocks and completely hide the ones that scroll once you cross specific tresholds. I don't think there is anything like that that does it, but I can build it.

Drag handles on different containers in NSWindow

I have an NSTextView with an NSTableView in a window. I'd like to be able to have those handles that allow you to drag the separator and resize the two adjacent views. I'm new to the cocoa and generally UI design on mac, so am having trouble with finding something as basic as this. I say 'basic' since I see this on pretty much every mac app I've ever used.
Like Skim.app has left and right panes for notes and contents, and both can be resized with the pdf view in the middle expanding or contracting accordingly.
Apologies for not using the right UI lingo to describe the problem.
I think you're looking for NSSplitView.

Simple slideshow in a UIImageView

I got trouble to add slideshow to my application.
Currently, I have a UIView composed of a segmentedControl.
I made ​​two "views" that I hide or display depending on the selected button.
I'm looking to make a simple slideshow in one of my two views. I made a UIImageView because it is simple to display pictures.
So I'd like to display my pictures one by one and it is possible to move from one image to another by sliding your finger to the right or left (just as in the native app "Photos").
I tried to adapt example codes from the documentation, but without succes.
So I'ml looking for help.
Thanks,
jb crestot
SO, I've actually done this and it's fairly easy. The ingredient that you are missing is a UISCrollView. My implementation did exactly what you describe (allow the user to go back and forth between a set of images).
Basically, add a UIScrollView to your View in interface builder and you will be creating the UIImage views with code (a simple for loop) and setting their images the same way. I did this safely with no memories issues with about 15 images (PNG's). There could be a potential performance issue with this message if you are working with a large number of images (say 40?)
I hope this helps, let me know if you need a code sample to see how this works.
You may consider using a custom class, such as iCarousel, linked below. Each of these views could be your image, and then tapping on them could launch a fullscreen view for example.
Keep us posted!
http://cocoacontrols.com/platforms/ios/controls/icarousel
See apple's page control sample application.