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

  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

  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. [engine setObject:self.detailData[@"title"] forKey:@"title"];
  7. [engine setObject:self.detailData[@"content"] forKey:@"content"];
  8. // MGTemplateEngine/Detail/detail.html
  9. // MGTemplateEngine/Detail/detail.css
  10. NSString *templatePath = [[NSBundle mainBundle] pathForResource:@"detail" ofType:@"html"];
  11. // Process the template and display the results.
  12. NSString *html = [engine processTemplateInFileAtPath:templatePath withVariables:nil];
  13. // 获得HTML
  14. self.htmlWebView = [[UIWebView alloc] initWithFrame:CGRectMake(8, 5, 304, 320)];
  15. self.htmlWebView.delegate = self;
  16. self.htmlWebView.userInteractionEnabled = NO;
  17. // 你就能加载到HTML里面的.css文件
  18. NSString *baseURL = [[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:@"Detail"];
  19. [self.htmlWebView loadHTMLString:html baseURL:[NSURL fileURLWithPath:baseURL]];
  20. [self.detailView addSubview:self.htmlWebView];

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

[objc] view plain copy

  1. // 我将UIWebView添加到了self.detailView
  2. self.listTableView.tableHeaderView = self.detailView;

[objc] view plain copy

  1. #pragma mark -
  2. #pragma mark -# UIWebViewDelegate
  3. - (void)webViewDidFinishLoad:(UIWebView *)webView {
  4. // 获取整个HMTL的高度,这很好理解,很简单的JS
  5. NSString *heightString = [self.htmlWebView stringByEvaluatingJavaScriptFromString:@"document.getElementById(\"container\").offsetHeight;"];
  6. // 重设view内容大小
  7. CGRect nFrame = self.detailView.frame;
  8. nFrame.size.height = [heightString doubleValue] + 35.0;
  9. self.detailView.frame = nFrame;
  10. // 重设webview内容大小
  11. CGRect nWebViewFrame = self.htmlWebView.frame;
  12. nWebViewFrame.size.height = [heightString doubleValue] + 15;
  13. self.htmlWebView.frame = nWebViewFrame;
  14. // 让UIWebView加载完后,才设置UITableView,最后才加载评论
  15. [self tableViewSetting];
  16. [self getCommentList];
  17. }

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

要更深入的了解,可以去 MGTemplateEngine 官方网站

时间: 2024-10-07 08:46:08

MGTemplateEngine 模版引擎简单使用(转)的相关文章

MGTemplateEngine 模版引擎简单使用以及MGTemplateEngine导入xcode6.1报错修改

MGTemplateEngine 模版引擎 一.  MGTemplateEngine比较象 PHP 中的 Smarty 模版引擎,是一个轻量级的引擎,简单好用.只要设置很多不同的HMTL模版,就能轻松的实现一个View多种内容格式的显示,对于不熟悉HTML或者减轻工作量而言,把这些工作让设计分担一下还是很好的,也比较容易实现设计想要的效果. 像网易.粉笔网都是用的该库. 首先,看看模版的代码 [html] view plaincopy <!DOCTYPE html> <html lang

MGTemplateEngine 模版发动机简单使用

https://github.com/nxtbgthng/MGTemplateEngine MGTemplateEngine 模版引擎 MGTemplateEngine比較象 PHP 中的 Smarty 模版引擎.是一个轻量级的引擎,简单好用.仅仅要设置非常多不同的HMTL模版.就能轻松的实现一个View多种内容格式的显示,对于不熟悉HTML或者减轻工作量而言,把这些工作让设计分担一下还是非常好的,也比較easy实现设计想要的效果. 首先,看看模版的代码 <!DOCTYPE html> <

如何在前端模版引擎开发中避免使用eval函数

前段时间,想着自己写一个简单的模版引擎,便于自己平时开发demo时使用.于是根据自己对模版引擎的理解,定义自己的模版格式,然后,根据自己定义的格式,编写处理函数,将模版标签中的字符串,解析成可执行的字符串,然后再用eval函数执行该可执行的字符串. 然后问题就出现了!eval等价于evil! 为什么呢?各大js权威书籍上都不提倡使用eval.下面我详细的解释一下为什么不提倡. 首先,大家需要知道,js并不是一门解释型语言.它和其他大家熟知的编程语言(c,java,c++)一样,是编译型语言.但是

前端数据模版引擎的总结

模板的工作原理可以简单地分成两个步骤:模板解析(翻译)和数据渲染.这两个步骤可分别部署在前端或后端来执行.如果放在后端执行,则是像Smarty,FreeMarker这样的后端模板引擎,而如果放在前端来执行,则是我们要探讨的前端模板. FreeMarker是一个模板引擎,一个基于模板生成文本输出的通用工具,使用纯Java编写,模板用servlet提供的数据动态地生成 HTML,模板语言是强大的直观的,编译器速度快,输出接近静态HTML页面的速度.这里不再对后端模版进行描述. 前端模版提高了前端开发

【转】T4模版引擎之基础入门

额,T4好陌生的名字,和NuGet一样很悲催,不为世人所熟知,却又在背后默默无闻的奉献着,直到现在我们项目组的人除了我之外,其它人还是对其豪无兴趣,基本上是连看一眼都懒得看,可怜的娃啊... T4(Text Template Transformation Toolkit)是微软官方在VisualStudio 2008中开始使用的代码生成引擎.在 Visual Studio 中,“T4 文本模板”是由一些文本块和控制逻辑组成的混合模板,它可以生成文本文件. 在 Visual C# 或 Visual

laravel 模版引擎使用

laravel 模版引擎以 @标签 开头,以 @end标签 结尾,常用有 foreach foreachelse if for while等 1)foreach 和 foreachelse 差不到,区别就是 foreachelse 还有一个@empty 分支,当循环的变量为空时执行 @foreach ($obj as $key=>$value) {{--循环体--}} @endforeach @foreachelse ($obj as $key=>$value) {{--循环体--}} @em

Java模版引擎velocity的使用

前言 关于velocity与SpringMVC的配置请参考前一篇文章,此处不再介绍.velocity作为Java模版引擎的主要目的是为了允许任何人使用简单而强大的模板语言来引用定义在Java代码中的对象.在velocity文件中可以给该页面指定模版布局,从而节省了大量的时间去写通用的模版布局.可以定义变量,与Java方法进行交互. 定义一个layout模版 在上一篇文章中提到了配置默认模版,当然也可以不使用默认模版即在要用到的页面的最上端写上 #set($layout='layout/yourl

js模版引擎开发实战以及对eval函数的改进

简介 前段时间,想着自己写一个简单的模版引擎,便于自己平时开发demo时使用,同时也算是之前学习的知识的一种总结吧! 首先我们先了解一下模版引擎的工作原理吧! 1. 模版引擎其实就是将指定标签的内容根据固定规则,解析为可执行语句字符串: 2. 执行可执行解析后的语句字符串,即生成我们想要的页面结构. 具体实现方法: 1. 最终效果 1 /* 解析前 2 <ul> 3 {{for(var i = 0; i < data.todos.length; ++i)}} 4 {{if(data.to

PHP模版引擎 – Twig

在网站开发过程中模版引擎是必不可少的,PHP中用的最多的当属Smarty了.目前公司系统也是用的Smarty,如果要新增一个页面只需把网站的头.尾和左侧公共部分通过Smarty的include方式引入进来,然后主体部分写内容即可,用起来也是相当方便.这也是一种比较通用的做法.但维护一段时间后发现有些凌乱了: 1. 公共部分内容越加越多了,不需要用的js.css在一些页面也被强制引进来了 2.新页面的css只能写在网页的body内,看起来总让人不爽. 3.左侧.头部.尾部若有特殊显示,操作起来不方