chulongx01: Loading HTML data using UIWebView in iPhone Development

Thứ Sáu, 11 tháng 4, 2014

Loading HTML data using UIWebView in iPhone Development

Suppose if we want to populate the large amount of static data in iOS application then we generally use text view object to represent that data. Text view object is feasible for some situations. But if we want the different font sizes and different font colors to different paragraphs then text view is not at all feasible. In that situations we can use UIWebview to load the HTML data. Before loading we need to construct the proper HTML data with required fonts and colors. Create a new project in Xcode using single window application template and name it as WebviewToHtmlText. Before proceeding further we need to add a navigation controller to the AppDelegate and make ViewController as its root view. We can do this either by adding UINavigationController and its root view in AppDelegate.m file or by using nib file of ViewController class. I am not digging into the details of the navigation code because it is quite common in all applications. Now open ViewController.xib file, add a text view outlet and connect it with the associated outlet in .h file. Save the HTML text you want to populate in web view as a .txt file and add that to the project bundle, name it as web_text.txt. Now open viewDidLoad of .m file and add the following code.

    self.title 
   = 
   @ 
   "Text view"; 
   
 self.textString 
   = 
   [ 
   [ 
   NSString alloc 
   ] initWithContentsOfFile 
   : 
   [ 
   [ 
   NSBundle mainBundle 
   ] pathForResource 
   : 
   @ 
   "web_text" ofType 
   : 
   @ 
   "txt" 
   ] encoding 
   :NSUTF8StringEncoding error 
   : 
   nil 
   ]; 
   
 UIBarButtonItem 
   *barButton 
   = 
   [ 
   [UIBarButtonItem alloc 
   ]initWithTitle 
   : 
   @ 
   "Web view" style 
   :UIBarButtonItemStyleBordered target 
   :self action 
   : 
   @selector 
   (loadWebView 
   : 
   ) 
   ]; 
   
 self.navigationItem.rightBarButtonItem 
   = barButton; 
   
 aTextView.text 
   = self.textString; 
  

Here we have converted the content of web_text.txt into NSString using initWithContentsOfFile method. Now compile and run the code, web_text.txt file loaded into text view as follows.

Don’t hit Web view bar button because we have not implemented the corresponding action method. Our requirement is to populate the HTML content of web_text.txt into web view using UIWebView outlet in some other controller. Add the new controller named WebViewController by right clicking on project file and select new file option.

Open WebViewController.xib file, add UIWebView outlet and connect it with the corresponding object in WebViewController class. WebViewController.h file will look like this.

@interface WebViewController 
: UIViewController<UIWebViewDelegate> 
@property (nonatomic, strong) IBOutlet UIWebView *aWebView;
 @property (nonatomic, strong) NSString *webText;

@end

Add the following line of code in initWithNibName method of WebViewController.m file.

    webText 
   = 
   [ 
   [ 
   NSString alloc 
   ]init 
   ]; 
  

Now it is require to load web view with HTML text from web_text.txt file. This can be done by adding the following code.

 
   [self.aWebView loadHTMLString 
   :webText baseURL 
   : 
   nil 
   ]; 
  

Now we need to connect WebViewController with ViewController class. For that add the following code at the end of ViewController.m file.

 
   - 
   ( 
   void 
   )loadWebView 
   : 
   ( 
   id 
   )sender 
   
 
   { 
   
     WebViewController 
   *webController 
   = 
   [ 
   [WebViewController alloc 
   ]initWithNibName 
   : 
   @ 
   "WebViewController" bundle 
   : 
   nil 
   ]; 
   
     webController.webText 
   = self.textString; 
   
     webController.title 
   = 
   @ 
   "Web view"; 
   
     
   [self.navigationController pushViewController 
   :webController animated 
   : 
   YES 
   ]; 
   
 
   } 
  

Build and run the code, observe that the same text you will see in text view will populate in web view with different colour and fonts after tapping web view button.