zoukankan      html  css  js  c++  java

  • MGTemplateEngine 模版引擎简单使用（转）

    原文：http://blog.csdn.net/crazy_srufboy/article/details/21748995

    要实现的效果

      首先上图中间的 标题至内容 都是使用UIWebView显示，评论是UITableView可以往下拖加载更多评论，也可以增加评论同删除评论。

    动机

           评细页中使用 UIWebView 会使显示内容更加的灵活和简单，当然你也许可以网上找UITextView的扩展同样也行，但我感觉HTML更符合我的需求。在多年的PHP开发中我们知道，其实详细页都是大同小异，主要是显示的内容风格不同。但在iOS平台上，做这些拼拼接接的活很累也不易于维护，还要不断计算各种类型页面对象的位置，实在吃力不讨好。使用UIWebView将是一个不错的选择。

    MGTemplateEngine 模版引擎

         MGTemplateEngine比较象 PHP 中的 Smarty 模版引擎，是一个轻量级的引擎，简单好用。只要设置很多不同的HMTL模版，就能轻松的实现一个View多种内容格式的显示，对于不熟悉HTML或者减轻工作量而言，把这些工作让设计分担一下还是很好的，也比较容易实现设计想要的效果。

        首先，看看模版的代码

    [html] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. <!DOCTYPE html>  
    2. <html lang="en">  
    3.   <head>  
    4.     <meta charset="utf-8">  
    5.     <title></title>  
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    7.     <link href="./detail.css" rel="stylesheet">  
    8.   </head>  
    9.   <body>  
    10.   <div id='container' name="container">  
    11.     <div class="title">{{ title }}</div>  
    12.     <div class="date">{{ date }}</div>  
    13.     <div class="content">{{ content }}</div>  
    14.   </div>  
    15.   </body>  
    16. </html>  

     Objective-C代码 - 下面的创建代码MGTemplateEngine都是从官方的例子中参考下来的，已经有很详细的说明

    [objc] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. // Set up template engine with your chosen matcher.  
    2. MGTemplateEngine *engine = [MGTemplateEngine templateEngine];  
    3. //[engine setDelegate:self];  
    4. [engine setMatcher:[ICUTemplateMatcher matcherWithTemplateEngine:engine]];  
    5.   
    6. // 这里就是设置，或者里边塞变量的地方。其实也可以设置一个数组，这样模板的灵活也会更强。这里我就不演示了官方有例子  
    7. [engine setObject:self.detailData[@"title"] forKey:@"title"];  
    8. [engine setObject:self.detailData[@"content"] forKey:@"content"];  
    9.   
    10. // MGTemplateEngine/Detail/detail.html  
    11. // MGTemplateEngine/Detail/detail.css  
    12. NSString *templatePath = [[NSBundle mainBundle] pathForResource:@"detail" ofType:@"html"];  
    13.   
    14. // Process the template and display the results.  
    15. NSString *html = [engine processTemplateInFileAtPath:templatePath withVariables:nil];  
    16.   
    17.   
    18. // 获得HTML  
    19. self.htmlWebView = [[UIWebView alloc] initWithFrame:CGRectMake(8, 5, 304, 320)];  
    20. self.htmlWebView.delegate = self;  
    21. self.htmlWebView.userInteractionEnabled = NO;  
    22.   
    23. // 你就能加载到HTML里面的.css文件  
    24. NSString *baseURL = [[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:@"Detail"];  
    25. [self.htmlWebView loadHTMLString:html baseURL:[NSURL fileURLWithPath:baseURL]];  
    26. [self.detailView addSubview:self.htmlWebView];  

        因为我的UIWebView是在插入到UITableView，所以在UIWebView加载完后，就得重新计算高度。因为我想让用户感觉不到这其实是一个HTML。 

    [objc] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. // 我将UIWebView添加到了self.detailView  
    2. self.listTableView.tableHeaderView = self.detailView;  
    [objc] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. #pragma mark -  
    2. #pragma mark -# UIWebViewDelegate  
    3.   
    4. - (void)webViewDidFinishLoad:(UIWebView *)webView {  
    5.   
    6.     // 获取整个HMTL的高度，这很好理解，很简单的JS  
    7.     NSString *heightString = [self.htmlWebView stringByEvaluatingJavaScriptFromString:@"document.getElementById("container").offsetHeight;"];  
    8.       
    9.     // 重设view内容大小  
    10.     CGRect nFrame = self.detailView.frame;  
    11.     nFrame.size.height = [heightString doubleValue] + 35.0;  
    12.     self.detailView.frame = nFrame;  
    13.   
    14.     // 重设webview内容大小  
    15.     CGRect nWebViewFrame = self.htmlWebView.frame;  
    16.     nWebViewFrame.size.height = [heightString doubleValue] + 15;  
    17.     self.htmlWebView.frame = nWebViewFrame;  
    18.   
    19.     // 让UIWebView加载完后，才设置UITableView,最后才加载评论  
    20.     [self tableViewSetting];  
    21.     [self getCommentList];  
    22. }  

     以上的都是 MGTemplateEngine 很基本的使用，将来也会大派用场的。对于内容页的显示，没有比HTML来的更方便直接，通过切换模版和简单的参数设置，多个不同类型的栏目也可以使用同一个详细页，很大程度上减轻工作理和易于维护。

        要更深入的了解，可以去 MGTemplateEngine 官方网站
  • 相关阅读:
    20190127-将一个文件拆分为多个新文件
    20190125-找到列表第二大的数以及自己写一个冒泡排序
    20190121-n个人围成一圈，凡报到3的人退出圈子，最后留下的是原来第几号的那位
    20190120-自定义实现split方法
    20190118-自定义实现replace方法
    20190118-利用Python实现Pig Latin游戏
    20190116-将特定数字插入一个已经排序好的序列并且不改变其排序规则
    20190112-自定义实现字符串的操作方法，如strip,upper,title,ljust,center,zfill,find,rfind等
    20190110-用笨办法找到二维矩阵的鞍点
    我想转行—程序员转行自媒体
  • 原文地址：https://www.cnblogs.com/qiyer/p/5264488.html
Copyright © 2011-2022 走看看