1. 程式人生 > >MGTemplateEngine 模版發動機簡單使用

MGTemplateEngine 模版發動機簡單使用

avi 說明 styles pop variable element temp rac meta

https://github.com/nxtbgthng/MGTemplateEngine


技術分享


MGTemplateEngine 模版引擎



MGTemplateEngine比較象 PHP 中的 Smarty 模版引擎。是一個輕量級的引擎,簡單好用。僅僅要設置非常多不同的HMTL模版。就能輕松的實現一個View多種內容格式的顯示,對於不熟悉HTML或者減輕工作量而言,把這些工作讓設計分擔一下還是非常好的,也比較easy實現設計想要的效果。




首先,看看模版的代碼

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./detail.css" rel="stylesheet">
</head>
<body>
<div id=‘container‘ name="container">
<div class="title">{{ title }}</div>
<div class="date">{{ date }}</div>
<div class="content">{{ content }}</div>
</div>
</body>
</html>


Objective-C代碼 - 以下的創建代碼MGTemplateEngine都是從官方的樣例中參考下來的,已經有非常具體的說明

// Set up template engine with your chosen matcher.
MGTemplateEngine *engine = [MGTemplateEngine templateEngine];
//[engine setDelegate:self];
[engine setMatcher:[ICUTemplateMatcher matcherWithTemplateEngine:engine]];

// 這裏就是設置。或者裏邊塞變量的地方。

事實上也能夠設置一個數組,這樣模板的靈活也會更強。這裏我就不演示了官方有樣例
[engine setObject:self.detailData[@"title"] forKey:@"title"];
[engine setObject:self.detailData[@"content"] forKey:@"content"];

// MGTemplateEngine/Detail/detail.html
// MGTemplateEngine/Detail/detail.css
NSString *templatePath = [[NSBundle mainBundle] pathForResource:@"detail" ofType:@"html"];

// Process the template and display the results.
NSString *html = [engine processTemplateInFileAtPath:templatePath withVariables:nil];


// 獲得HTML
self.htmlWebView = [[UIWebView alloc] initWithFrame:CGRectMake(8, 5, 304, 320)];
self.htmlWebView.delegate = self;
self.htmlWebView.userInteractionEnabled = NO;

// 你就能載入到HTML裏面的.css文件
NSString *baseURL = [[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:@"Detail"];
[self.htmlWebView loadHTMLString:html baseURL:[NSURL fileURLWithPath:baseURL]];
[self.detailView addSubview:self.htmlWebView];


由於我的UIWebView是在插入到UITableView,所以在UIWebView載入完後,就得又一次計算高度。由於我想讓用戶感覺不到這事實上是一個HTML。

// 我將UIWebView加入到了self.detailView
self.listTableView.tableHeaderView = self.detailView;


#pragma mark -
#pragma mark -# UIWebViewDelegate

- (void)webViewDidFinishLoad:(UIWebView *)webView {

// 獲取整個HMTL的高度,這非常好理解。非常easy的JS
NSString *heightString = [self.htmlWebView stringByEvaluatingJavaScriptFromString:@"document.getElementById(\"container\").offsetHeight;"];

// 重設view內容大小
CGRect nFrame = self.detailView.frame;
nFrame.size.height = [heightString doubleValue] + 35.0;
self.detailView.frame = nFrame;

// 重設webview內容大小
CGRect nWebViewFrame = self.htmlWebView.frame;
nWebViewFrame.size.height = [heightString doubleValue] + 15;
self.htmlWebView.frame = nWebViewFrame;

// 讓UIWebView載入完後,才設置UITableView,最後才載入評論
[self tableViewSetting];
[self getCommentList];
}


以上的都是 MGTemplateEngine 非常主要的使用。將來也會大派用場的。對於內容頁的顯示,沒有比HTML來的更方便直接,通過切換模版和簡單的參數設置,多個不同類型的欄目也能夠使用同一個具體頁,非常大程度上減輕工作理和易於維護。

MGTemplateEngine 模版發動機簡單使用