Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

primedime

macrumors member
Original poster
Mar 21, 2011
66
0
Ft. Lauderdale, FL
I currently have made an app and I want to add a UIToolbar to control a UIWebView.

Currently I am having these issues:

1) The buttons are not interacting with the webview even though i connected everything in interface builder

2) my stopLoading and refresh buttons are not showing up bordered as I made them in interface builder.

3) my webview is sliding underneath my toolbar instead of opening up below it.


Here is my code:

Code:
//  WebViewController.h
//  TheSalesHuddle



#import <UIKit/UIKit.h>

@interface WebViewController : UIViewController <UIWebViewDelegate>
{
	UIWebView *myWebView;
	UIActivityIndicatorView *spinnerView;
	UIToolbar *toolbar;
}

@property (nonatomic, retain) IBOutlet UIWebView *myWebView;
@property (nonatomic, retain) IBOutlet UIActivityIndicatorView *spinnerView;
@property (nonatomic, retain) IBOutlet UIToolbar *toolbar;

@end

Code:
//  WebViewController.m
//  TheSalesHuddle
//
//  Created by Roy Jossfolk Jr on 2/24/11.
//  Copyright 2011 __MyCompanyName__. All rights reserved.
//

#import "WebViewController.h"

@implementation WebViewController

@synthesize myWebView;
@synthesize spinnerView;
@synthesize toolbar;


- (void)loadWebPageWithString:(NSString *)urlString
{
	NSURL *url = [NSURL URLWithString:urlString];
	NSURLRequest *request = [NSURLRequest requestWithURL:url];
	[myWebView loadRequest:request];
}


//Tab Bar Image and title
- (id)initWithNibName:(NSString *)nibName bundle:(NSBundle *)bundle
{
	if ((self = [super initWithNibName:nibName bundle:bundle]))
	{
		UIImage *tabImage = [UIImage imageNamed:@"blogIcon.png"];
		UITabBarItem *tabBarItem = [[UITabBarItem alloc]
									initWithTitle:@"BLOG"
									image:tabImage
									tag:0];
		self.tabBarItem = tabBarItem;
		[tabBarItem release];
	}
	return self;
}


- (void)viewWillDisappear:(BOOL)animated
{
	[myWebView stopLoading];
}


// Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
- (void)viewDidLoad
{
    [super viewDidLoad];
	
	[self.myWebView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://thesaleshuddle.com"]]];
	
	toolbar = [UIToolbar new];
	toolbar.barStyle = UIBarStyleBlack;
	[toolbar sizeToFit];
	toolbar.frame = CGRectMake(0, 0, 320, 44);
	
	// add buttons
	UIBarButtonItem *item1 = [[UIBarButtonItem alloc]
							  initWithBarButtonSystemItem:UIBarButtonSystemItemStop 
							  target:self action:@selector(action)];
	UIBarButtonItem *item2 = [[UIBarButtonItem alloc]
							  initWithBarButtonSystemItem:UIBarButtonSystemItemRefresh
							  target:self action:@selector(action:)];
	UIBarButtonItem *item3 = [[UIBarButtonItem alloc] 
							  initWithTitle:@"Back" style:UIBarButtonItemStyleBordered 
							  target:self action:@selector(action)];
	UIBarButtonItem *item4 = [[UIBarButtonItem alloc] 
							  initWithTitle:@"Forward" style:UIBarButtonItemStyleBordered 
							  target:self action:@selector(action)];
	
	
	//Use this to put space in between your toolbox buttons
	UIBarButtonItem *flexItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace
																			  target:nil
																			  action:nil];
	//Add buttons to the array
	NSArray *items = [NSArray arrayWithObjects: item1, item2, flexItem, item3, item4, nil];
	
	//release buttons
	[item1 release];
	[item2 release];
	[item3 release];
	[item4 release];
	[flexItem release];
	
	//add array of buttons to toolbar
	[toolbar setItems:items animated:NO];
	
	[self.view addSubview:toolbar];
}

- (void)didReceiveMemoryWarning {
    // Releases the view if it doesn't have a superview.
    [super didReceiveMemoryWarning];
    
    // Release any cached data, images, etc. that aren't in use.
}

- (void)viewDidUnload {
    [super viewDidUnload];
    // Release any retained subviews of the main view.
    // e.g. self.myOutlet = nil;

}

// release
- (void)dealloc {
	
	[myWebView release];
	[spinnerView release];
    [super dealloc];
}

#pragma mark -
#pragma mark UIWebViewDelegate methods

- (void)webViewDidStartLoad:(UIWebView *)myWebView
{
	[spinnerView startAnimating];
}

- (void)webViewDidFinishLoad:(UIWebView *)myWebView
{
	[spinnerView stopAnimating];
}

@end
 
1) The buttons are not interacting with the webview even though i connected everything in interface builder

2) my stopLoading and refresh buttons are not showing up bordered as I made them in interface builder.
It looks like you are also setting the toolbar buttons via your code, therefore overriding what you've done in IB. Pick one approach or the other but not both.
 
When I originally tried it, I just created it in IB and then connected everything but nothing showed up. I started researching it online and slowly have added all the extra code and it actually made my toolbar show up. i am really having a difficult time with this and not even sure how to explain myself.

If i just set up a toolbar in IB what should I be doing next?
 
If i just set up a toolbar in IB what should I be doing next?
Verifying that your toolbar is showing up in your interface (i.e. in your actually running app). If it does, then the next step is to add your toolbar buttons (UIBarButtonItems) to it. If it doesn't, time for some troubleshooting... :D
 
Ok, I hid all of my code that referenced to the buttons and toolbar and nothing shows up even though I have it all set up in IB..... sorry for the newbie questions but this is the last part of my app and i am super frustrated, I added this last second the control my webview and now I am stuck.... this webview is not the root view controller, I have 3 other views besides this one wrapped in a navigation bar and tab bar.
 
How did you add your toolbar to your view in IB? Perhaps a screenshot of it would help. Also, the view hierarchy, from your ???.xib window, would probably help as well.
 
Here are some screen shots... not sure what you mean by view hierarchy to be honest. I know that I have the TheSalesHuddleAppDelegate.h/.m files controlling my tab bar and navigation bar. does that help?
 

Attachments

  • Screen shot 2011-03-21 at 4.49.29 PM.png
    Screen shot 2011-03-21 at 4.49.29 PM.png
    205 KB · Views: 1,004
  • Screen shot 2011-03-21 at 4.49.00 PM.png
    Screen shot 2011-03-21 at 4.49.00 PM.png
    139.6 KB · Views: 149
  • Screen shot 2011-03-21 at 4.48.44 PM.png
    Screen shot 2011-03-21 at 4.48.44 PM.png
    122.7 KB · Views: 129
  • Screen shot 2011-03-21 at 4.48.27 PM.png
    Screen shot 2011-03-21 at 4.48.27 PM.png
    123.7 KB · Views: 122
  • Screen shot 2011-03-21 at 4.46.45 PM.png
    Screen shot 2011-03-21 at 4.46.45 PM.png
    232.3 KB · Views: 123
I ment that it doesn't show up if I don't manually put in all the code for it. You told me to either do it in IB or do it in code. I think I did both by accident but not sure what to do now. When I press on those buttons it crashes my application so something is wrong. Also I want the stop button and refresh button to be bordered like I have in my IB picture i loaded.... I am really sorry if I am confusing you but i am very new and this is my first app and have been working on it for about a month....
 
Comment out all the code that adds the toolbar. Make sure the toolbar is still added via IB. Run your app. What do you see where the toolbar should be? A gap? Does the web view extend to the top? What? A screenshot of your IB-only-toolbar view will help.
 
If I comment out all the code for the toolbar and still leave it in IB, i get the webview extended all the way up the page, leaving no space for the toolbar. I attached the screenshots. Thanks a lot for the help, I really appreciate it.
 

Attachments

  • Screen shot 2011-03-21 at 5.29.56 PM.png
    Screen shot 2011-03-21 at 5.29.56 PM.png
    74.9 KB · Views: 113
  • Screen shot 2011-03-21 at 5.29.37 PM.png
    Screen shot 2011-03-21 at 5.29.37 PM.png
    85 KB · Views: 108
  • Screen shot 2011-03-21 at 5.28.56 PM.png
    Screen shot 2011-03-21 at 5.28.56 PM.png
    239.9 KB · Views: 111
  • Screen shot 2011-03-21 at 5.28.38 PM.png
    Screen shot 2011-03-21 at 5.28.38 PM.png
    137.3 KB · Views: 114
  • Screen shot 2011-03-21 at 5.28.25 PM.png
    Screen shot 2011-03-21 at 5.28.25 PM.png
    230.5 KB · Views: 107
Wow! Okay, let me ask you this: which method do you prefer, using IB or adding the toolbar via code? Then we can start to troubleshoot your approach based on your preferred method. If you say "I don't care, as long as it works", then I am probably going to help you find a way via code since I can see that much easier than whatever IB setup you might have.
 
That is tough to say because I would much rather not have to write code but the rest of my navigation and tab bar have already been done manually.... I started with a Window-Based application because that is how I learned it from a book (Complete Idiot's Guide to iPhone & iPad development).... I guess knowing the code can not hurt! Hit me with what you got! I am ready to learn....
 
Alright. Do you feel comfortable adding the toolbar itself to the view, via code? Don't worry about the buttons for now. We'll get to those later (and deal with styling the stop and refresh buttons at that point as well). What do you think that code would look like?
 
Code:
toolbar = [UIToolbar new];
	toolbar.barStyle = UIBarStyleBlack;
	[toolbar sizeToFit];
	toolbar.frame = CGRectMake(0, 0, 320, 44);

[self.view addSubview:toolbar];

I think that would be the code to manually code the toolbar, from what i know. Now one thing I haven't done is made it so the toolbar and webview are spaced correctly. I think I need to set the frame in the webview like i did for the toolbar but I don't know why because in IB I set the webview to be under the toolbar.... my application is not reacting to anything I am doing in IB for some reason...
 
Code:
toolbar = [UIToolbar new];
	toolbar.barStyle = UIBarStyleBlack;
	[toolbar sizeToFit];
	toolbar.frame = CGRectMake(0, 0, 320, 44);

[self.view addSubview:toolbar];

I think that would be the code to manually code the toolbar, from what i know.
Looks good... mostly. Just one thing that concerns me: Why call sizeToFit when the next line resets the frame?

Now one thing I haven't done is made it so the toolbar and webview are spaced correctly. I think I need to set the frame in the webview like i did for the toolbar but I don't know why because in IB I set the webview to be under the toolbar.... my application is not reacting to anything I am doing in IB for some reason...
I think it is reacting, just not in the way you are expecting. Regardless, since we are coding the toolbar via code, I would just suggest setting it as a Simulated User Interface Element (Top Bar: Black Navigation Bar) and then setting the framing for the webview to take this simulated element into account (i.e. the top of the webview butts against the bottom of the fake toolbar). If you run into issues with this, let me know what they are. I can try to explain in better detail.

Hey, can I see the View Size Inspector settings you have for your UIWebView in IB?

Alright, back to the toolbar, let's try adding your Stop button to the toolbar. What do you think the code for that would look like?
 
Code:
UIBarButtonItem *item1 = [[UIBarButtonItem alloc]
							  initWithBarButtonSystemItem:UIBarButtonSystemItemStop 						       target:self.myWebView  action:@selector(_stopLoading)];

That is what I believe is how to set my stop button.


ok, I added the Simulated User Interface (top bar: black navigation bar) but it still hides some of the uiwebview. here is a screen shot of my View Size Inspector for my UIWebView
 

Attachments

  • Screen shot 2011-03-21 at 6.52.38 PM.png
    Screen shot 2011-03-21 at 6.52.38 PM.png
    81.6 KB · Views: 94
is it possible I am having trouble customizing this view because of the way i wrapped all my views with navigation bars and tab bars in my AppDelegate.h/.m files? I feel like I have lost control over this view and the edits I make do nothing.... i don't know, just reaching here! Do you think I could send you my source folder? maybe you can see easily what I did wrong if you see it in xcode??
 
Code:
UIBarButtonItem *item1 = [[UIBarButtonItem alloc]
							  initWithBarButtonSystemItem:UIBarButtonSystemItemStop 						       target:self.myWebView  action:@selector(_stopLoading)];

That is what I believe is how to set my stop button.
Okay. Three things:
1) Since initWithBarButtonSystemItem:target:action: doesn't take a style parameter like initWithTitle:style:target:action: does, how do you think you might be able to set item1's style?
2) Explain your target setting.
3) Do you have a _stopLoading method? If so, where?

ok, I added the Simulated User Interface (top bar: black navigation bar) but it still hides some of the uiwebview. here is a screen shot of my View Size Inspector for my UIWebView
Then there must be some other code (or setting?) that I can't see that is adjusting the frame of the webView. Sorry, if I'm not really helping with this...

Hmm, I'm starting to wonder if figuring out the cause of this could be the solution to some of the problems you're having.
 
Here is my source folder:

Source Folder

1) I tried initWithTitle:style:target:action: previously but all it did was create a button with the word 'Cancel' in it....

Code:
UIBarButtonItem *item1 = [[UIBarButtonItem alloc] 
							  initWithTitle:@"Stop" style:UIBarButtonItemStyleBordered 
							  target:self.myWebView action:@selector(_stopLoading)];

I just tried this code right here like you suggest and I get a bordered button that says 'Stop' in it.....

2) i put self.myWebView because someone else told me this:

UIWebView already has those 4 methods built into it. You are however, sending the messages to "self", which is the CONTROLLER, not the VIEW. The controller does not recognize those methods.

Replace "self" with self.myWebView or whatever you called the webView (I can't see it right now) as the "target" of those buttons.


3) No I do not have a stopLoading method because I am not sure where to put it or how to write it out. Every time I tell people that they kind of get disrespectful and just tell me I don't know what I am doing... so, i keep researching what my possibilities are but I can not find anything!


You are helping a bunch and I appreciate you patience with me. I am new to this and kind of just anxious to get my first app in the store. It is not anything super special about my app I just simply want to help promote my company. Maybe if you look through my source files and open it in xcode you can understand what I did a little bit better!
 
Last edited:
IMO, you should make the toolbar in IB. By making the webview in IB and the toolbar in code you're placing the toolbar on top of the webview. That's why it covers the top of the webview as shown in the earliest screenshots in this thread. self.view and the webview are set up in IB to fill the screen. So the webview's frame is at 0, 0. There's no room for the toolbar. You then create the toolbar and also place it at 0,0, so it covers the top of the webview. If you really want to do it that way then you have to adjust the top of the webview's frame in code when you add the toolbar.

I would make the toolbar in IB also. Lay it out so the toolbar and the webview don't overlap.

I think you mentioned crashes when you did this. Those can be figured out if the appearance is correct.
 
PhoneyDeveloper:

when i just create the toolbar in IB, nothing shows up but a blank toolbar with no buttons.... I feel like crap right now, I feel like the dumbest person on the planet.....
 
Yes, I did. I am checking out my AppDelegate.h/.m files right now to see if I did something to the webviewcontroller that I shouldn't have....

Here is the full code of my TheSalesHuddleAppDelegate.h/.m file:

Code:
//  TheSalesHuddleAppDelegate.h
//  TheSalesHuddle

#import <UIKit/UIKit.h>

@class DisplaySplashSceenViewController;
@class Twitter_FeedViewController;

@interface TheSalesHuddleAppDelegate : NSObject <UIApplicationDelegate> 
{
    UIWindow *window;
	UINavigationController *navigationController;
	UITabBarController *tabBarController;
	Twitter_FeedViewController *viewController;
}

@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet UINavigationController *navigationController;
@property (nonatomic, retain) IBOutlet Twitter_FeedViewController *viewController;

@end


Code:
//  TheSalesHuddleAppDelegate.m
//  TheSalesHuddle

#import "TheSalesHuddleAppDelegate.h"
#import "WebViewController.h"
#import "AboutViewController.h"
#import "HuddlesViewController.h"
#import "Twitter_FeedViewController.h"
#import "TheSalesHuddleViewController.h"
#import "TweetViewController.h"

@implementation TheSalesHuddleAppDelegate

@synthesize window;
@synthesize navigationController;
@synthesize viewController;

- (void)applicationDidFinishLaunching:(UIApplication *)application
{
	// Initialize the view controllers
	WebViewController *webViewController = [[WebViewController alloc] init];
	AboutViewController *aboutViewController = [[AboutViewController alloc] init];
	HuddlesViewController *huddlesViewController = [[HuddlesViewController alloc] init];
	Twitter_FeedViewController *twitter_FeedViewController = [[Twitter_FeedViewController alloc] init];
	TweetViewController *tweetViewController = [[TweetViewController alloc] init];
	
	// Wrap the about view controller in a nav controller
	UINavigationController *aboutNavController = [[UINavigationController alloc]
									initWithRootViewController:aboutViewController];
	/*
	UINavigationController *webNavController = [[UINavigationController alloc]
									 initWithRootViewController:webViewController];
	 */
	UINavigationController *twitter_FeedNavController = [[UINavigationController alloc]
									initWithRootViewController:twitter_FeedViewController];
	UINavigationController *huddlesNavController = [[UINavigationController alloc]
									initWithRootViewController:huddlesViewController];
	UINavigationController *tweetNavController = [[UINavigationController alloc]
									initWithRootViewController:tweetViewController];

	// Create an array of controllers the tab bar will use
	NSArray *viewControllers = [NSArray arrayWithObjects:
								webViewController,
								twitter_FeedViewController,
								huddlesNavController,
								aboutNavController,
								nil];
	
	// Init the tab bar controller
	tabBarController = [[UITabBarController alloc] init];
	tabBarController.viewControllers = viewControllers;
	
	// Start on the blog tab
	tabBarController.selectedIndex = 0;
	
	// Init the model
	/*
	// Init the model
	TwitterUser *user = [[TwitterUser alloc] init];
	twitterViewController.twitterUser = user;
	[user release];
	*/
	// Memory management
	
	[webViewController release];
	/*
	[webNavController release];	
	 */
	[aboutViewController release];
	[aboutNavController release];
	[huddlesViewController release];
	[twitter_FeedViewController release];
	[twitter_FeedNavController release];
	[tweetNavController release];
	
	// Add the tab bar view to the window
	[window addSubview:tabBarController.view];
	

	[window addSubview:navigationController.view];
	
	// Display the window

	
    [window makeKeyAndVisible];
	
}

- (void)dealloc
{

    [window release];
	[viewController release];
	[navigationController release];
	[tabBarController release];
	
    [super dealloc];
}

@end
 
Well, if you want to stick with the code you've got then I think you need to adjust the frame of the webview when you add the toolbar.
 
Last edited:
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.