自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

用jQM、HTML5和iOS SDK構(gòu)建MusicBrainz應(yīng)用程序

譯文
作者：布加迪 編譯
移動(dòng)開發(fā) iOS
MusicBrainz是自由音樂數(shù)據(jù)庫，原初創(chuàng)始目的系針對CDDB中的限制，但如今已不再將目標(biāo)局限于CD后設(shè)資料儲存庫，而擴(kuò)大為一種結(jié)構(gòu)化的“音樂維基百科”。本教程將用到j(luò)Query Mobile(簡稱“jQM”)、HTML5、PugPig框架和iOS SDK（開發(fā)工具包），用MusicBrainz應(yīng)用編程接口（API）來構(gòu)建一個(gè)應(yīng)用程序。

【51CTO獨(dú)家譯文】隨著iPad和各種Android平板電腦紛紛推出，雜志式樣的應(yīng)用程序變得極其流行起來。其中最有名的幾款應(yīng)用程序包括面向iOS的FlipBoard、面向Android的Zinio以及面向iOS和Android的Pulse。人們對能夠提供雜志排版功能的工具的需求同樣很大。一些大受歡迎的工具包括FlipBoard(通過RSS/Twitter導(dǎo)入)、OnSwipe和PugPig。PugPig是一款開源HTML5排版平臺，讓我們可以為iPad、iPhone和安卓平臺制作漂亮的報(bào)紙、雜志和圖書。本教程將使用面向Xcode 4.2的PugPig框架插件，制作HTML5雜志。

雜志的設(shè)計(jì)將基于jQuery Mobile，不過另一個(gè)同樣出色的選擇是使用Magazine Grid，這是個(gè)超現(xiàn)代的CSS框架。我們在本教程中選用了jQuery Mobile，因?yàn)樗鼮橐苿?dòng)Web應(yīng)用程序提供了豐富的窗口組件和出色的頁面轉(zhuǎn)場工作流程。

Magazine的內(nèi)容將來源于MusicBrainz(開放音樂維基百科)。我們會(huì)使用jQuery用戶界面，為流行歌手構(gòu)建離線的HTML頁面。我們從SongKick.com隨機(jī)挑選了20位流行歌手。

MusicBrainz API的介紹

MusicBrainz網(wǎng)站提供了門類齊全的音樂數(shù)據(jù)，包括歌手信息和發(fā)行的最新專輯等內(nèi)容，還有每張專輯上所有歌曲音軌的完整的詳細(xì)資料。它旨在成為一個(gè)開放的音樂維基百科，考慮到Last.fm、GrooveShark、Pandora和Echonest等音樂服務(wù)網(wǎng)站使用來自MusicBrainz的數(shù)據(jù)，它必須做好這項(xiàng)工作。MusicBrainz通過以下兩個(gè)途徑將這些數(shù)據(jù)提供給社區(qū)：

•MusicBrainz數(shù)據(jù)庫

•MusicBrainz Web服務(wù)

我們將使用下列Web服務(wù)，從MusicBrainz提供豐富的歌手信息：

•歌手信息

•歌手專輯

•歌手關(guān)系

歌手信息

MusicBrainz里面的歌手信息包括歌手的姓名、出生和死亡日期、國籍、性別、別名和歌手類型(單人還是樂隊(duì))。為了本文中應(yīng)用程序的需要，我們以Lady Gaga作為示例的歌手。Lady Gaga的MusicBrainz頁面是http://musicbrainz.org/artist/650e7db6-b795-4eb5-a702-5ea2fc46c848，其中650e7db6-b795-4eb5-a702-5ea2fc46c848是獨(dú)一無二的歌手編號(像Last.fm這些其他的第三方音樂網(wǎng)站也要引用該編號)。

[[55085]]

如下面的屏幕截圖所示，我們關(guān)注的信息基本上都在右邊這一欄(歌手信息、標(biāo)簽和外部鏈接)以及下個(gè)一章節(jié)描述的第二個(gè)選項(xiàng)卡“Release”(專輯)。

Lady Gaga的MusicBrainz歌手信息截屏

點(diǎn)擊查看大圖

歌手專輯

歌手的發(fā)行專輯囊括了該歌手發(fā)行的所有專輯，無論是熱門單曲還是樂隊(duì)合唱曲目。它還包括發(fā)行日期、唱片公司、甚至還有條形碼。就跟以前一樣，專輯的編號也是獨(dú)一無二的。這個(gè)專輯編號可以用來從專輯獲取進(jìn)一步的信息，包括音軌列表(歌曲)。

Lady Gaga的MusicBrainz歌手專輯截屏

點(diǎn)擊查看大圖

歌手關(guān)系

歌手關(guān)系定義了一名歌手與其他歌手之間的關(guān)系。

同樣，可以通過API調(diào)用來獲取與專輯和音軌有關(guān)的類似專輯和音軌。

我們感興趣的是Artist Relation(歌手關(guān)系)這個(gè)屬性，尤其是與“Url”這個(gè)子屬性之間的關(guān)系，它列出了維基百科、IMDB、推特、MySpace和Youtube等不同社交網(wǎng)站和音樂網(wǎng)站上的歌手Url。

粗粗瀏覽了MusicBrainz Web服務(wù)API后，我們可以進(jìn)一步構(gòu)建我們的Magazine App了。

【51CTO譯稿，非經(jīng)授權(quán)謝絕轉(zhuǎn)載，合作媒體轉(zhuǎn)載請注明原文出處、作者及51CTO譯者！】#p#

第一步：使用Xcode構(gòu)建PugPig應(yīng)用程序

你從PugPig網(wǎng)站下載了Pugpig Xcode模板后，雙擊程序包，即可將模板安裝在Xcode里面。打開Xcode，選擇PugPig模板，即可開始創(chuàng)建一個(gè)新的項(xiàng)目，如下圖所示：

打開Xcode 選擇PugPig模板

點(diǎn)擊查看大圖

將它命名為“MusicBrainz – Magazine”，完成這個(gè)過程。在你的項(xiàng)目目錄中，創(chuàng)建一個(gè)名為“Data”的文件夾，并把它添加到你的項(xiàng)目中，PugPig要在這個(gè)文件夾里面尋找要呈現(xiàn)的HTML文件。你的項(xiàng)目現(xiàn)在看起來應(yīng)該這樣：

新建項(xiàng)目

點(diǎn)擊查看大圖

現(xiàn)在，我們?yōu)檫@個(gè)數(shù)據(jù)文件夾添加index.html，那樣我們的雜志應(yīng)用程序就有了一個(gè)起始點(diǎn)。我們在此使用了jQuery Mobile的默認(rèn)設(shè)計(jì)，顯示可以搜索的Popular Artists(流行歌手)列表。在index.html文件中，添加下列代碼，一并添加jQuery Mobile框架和jQuery JavaScript庫。

  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <meta name="viewport" content="width=device-width, initial-scale=1">  
  6.         <title>MusicBrainz - Magazine</title>  
  7.         <link rel="stylesheet" href="jquery.mobile-1.0/jquery.mobile-1.0.css"     />  
  8.         <script src="jquery-1.7.js"></script>  
  9.         <script src="jquery.mobile-1.0/jquery.mobile-1.0.js"></script>  
  10.     </head>  
  11.     <body>   
  12.    
  13.         <div data-role="page" class="type-interior">  
  14.    
  15.             <div data-role="header" data-theme="b">  
  16.                 <h1>Popular Artists</h1>  
  17.                 <a href="#" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>  
  18.             </div><!-- /header --> 
  19.    
  20.             <script type="text/javascript">  
  21.                 var admob_vars = {  
  22.                     pubid: 'a14e4b353ccfa57', // publisher id  
  23.                     bgcolor: '356FA8', // background color (hex)  
  24.                     text: 'FFFFFF', // font-color (hex)  
  25.                     test: false // test mode, set to false to receive live ads  
  26.                 };  
  27.                 </script>  
  28.             <script type="text/javascript" src="http://mmv.admob.com/static/iphone/iadmob.js"></script>  
  29.    
  30.             <div data-role="content">  
  31.                 <div class="content-primary">  
  32.                     <ul data-role="listview" data-filter="true">  
  33.                         <li><a href="650e7db6-b795-4eb5-a702-5ea2fc46c848.html">Lady Gaga</a></li>  
  34.                         <li><a href="cc197bad-dc9c-440d-a5b5-d52ba2e14234.html">Coldplay</a></li>  
  35.                         <li><a href="73e5e69d-3554-40d8-8516-00cb38737a1c.html">Rihanna</a></li>  
  36.                         <li><a href="122d63fc-8671-43e4-9752-34e846d62a9c.html">Katy Perry</a></li>  
  37.                         <li><a href="f82bcf78-5b69-4622-a5ef-73800768d9ac.html">Jay-Z</a></li>  
  38.                         <li><a href="d5be5333-4171-427e-8e12-732087c6b78e.html">Black Eyed Peas</a></li>  
  39.                         <li><a href="20244d07-534f-4eff-b4d4-930878889970.html">Taylor Swift</a></li>  
  40.                         <li><a href="eeb1195b-f213-4ce1-b28c-8565211f8e43.html">Guns N' Roses</a></li>  
  41.                         <li><a href="e21857d5-3256-4547-afb3-4b6ded592596.html">Gorillaz</a></li>  
  42.                         <li><a href="72c536dc-7137-4477-a521-567eeb840fa8.html">Bob Dylan</a></li>  
  43.                         <li><a href="65f4f0c5-ef9e-490c-aee3-909e7ae6b2ab.html">Metallica</a></li>  
  44.                         <li><a href="45a663b5-b1cb-4a91-bff6-2bef7bbfdd76.html">Britney Spears</a></li>  
  45.                         <li><a href="f5dfa020-ad69-41cd-b3d4-fd7af0414e94.html">Wiz Khalifa</a></li>  
  46.                         <li><a href="ada7a83c-e3e1-40f1-93f9-3e73dbc9298a.html">Arctic Monkeys</a></li>  
  47.                         <li><a href="e0140a67-e4d1-4f13-8a01-364355bee46e.html">Justin Bieber</a></li>  
  48.                         <li><a href="3d2b98e5-556f-4451-a3ff-c50ea18d57cb.html">Aerosmith</a></li>  
  49.                         <li><a href="0103c1cc-4a09-4a5d-a344-56ad99a77193.html">Avril Lavigne</a></li>  
  50.                         <li><a href="d8354b38-e942-4c89-ba93-29323432abc3.html">30 Seconds to Mars</a></li>  
  51.                         <li><a href="d262ea27-3ffe-40f7-b922-85c42d625e67.html">PitBull</a></li>  
  52.                         <li><a href="35f866dc-c061-48ba-8157-cf2e0eac4857.html">Enrique Iglesias</a></li>  
  53.                     </ul>  
  54.                 </div><!--/content-primary --> 
  55.             </div><!-- /content --> 
  56.    
  57.             <div data-role="footer" class="footer-docs" data-theme="b">  
  58.                 <h2>Data from MusicBrainz.org</h2>  
  59.             </div>  
  60.        </div><!-- /page --> 
  61.     </body>  
  62. </html> 

現(xiàn)在運(yùn)行Xcode項(xiàng)目，即可得到下列結(jié)果：

運(yùn)行Xcode項(xiàng)目 即可得到本結(jié)果

點(diǎn)擊查看大圖

快速連按兩下應(yīng)用程序。它應(yīng)該會(huì)在靠近頁面腳注的某個(gè)地方，顯示一個(gè)小窗口，讓你可以瀏覽其他頁面(Data文件夾中的.html文件)，就像雜志那樣!

雜志樣式

點(diǎn)擊查看大圖

【51CTO譯稿，非經(jīng)授權(quán)謝絕轉(zhuǎn)載，合作媒體轉(zhuǎn)載請注明原文出處、作者及51CTO譯者！】#p#

第二步：使用PHP和MusicBrainz Web服務(wù)創(chuàng)建HTML頁面

到目前為止，我們見到了如何為我們的Magazine App創(chuàng)建index.html頁面，現(xiàn)在可以看一下如何構(gòu)建歌手詳細(xì)資料頁面，并將它們作為.html文件保存在數(shù)據(jù)文件夾中。

我們會(huì)使用PHP及其XML解析庫SimpleXml來解析MusicBrainz Web服務(wù)調(diào)用。在此之前，我們將使用jQuery Mobile頁面布局和CSS來構(gòu)建一個(gè)簡單的歌手詳細(xì)資料頁面模板。我們還把占位符放在模板中，之后占位符將換成從MusicBrainz Web服務(wù)獲取的實(shí)際結(jié)果，于是我們使用這個(gè)帶有歌手?jǐn)?shù)據(jù)的頁面模板，創(chuàng)建了最終的歌手詳細(xì)資料頁面，并將它保存在磁盤上。下面是歌手模板：

  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"      />  
  6.             <meta name="viewport" content="width=device-width, initial-scale=1">  
  7.                 <title>{ARTIST_NAME}</title>  
  8.                 <link rel="stylesheet" href="jquery.mobile-1.0/jquery.mobile-1.0.css"     />  
  9.                 <script src="jquery-1.7.js"></script>  
  10.                 <script src="jquery.mobile-1.0/jquery.mobile-1.0.js"></script>  
  11.     </head>  
  12.     <body>   
  13.    
  14.     <div data-role="page" class="type-interior">  
  15.             <div data-role="header" data-theme="b">  
  16.                 <a href="index.html" data-icon="back" data-iconpos="back" class="ui-btn-left jqm-home">Back</a>  
  17.                 <h1>{ARTIST_NAME}</h1>  
  18.                 <a href="#" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>  
  19.    
  20.             </div><!-- /header --> 
  21.    
  22.             <div data-role="content">  
  23.                 <div class="content-primary">  
  24.                 <script type="text/javascript">  
  25.                     var admob_vars = {  
  26.                         pubid: 'a14e4b353ccfa57', // publisher id  
  27.                         bgcolor: '356FA8', // background color (hex)  
  28.                         text: 'FFFFFF', // font-color (hex)  
  29.                         test: false // test mode, set to false to receive live ads  
  30.                     };  
  31.                     </script>  
  32.                 <script type="text/javascript" src="http://mmv.admob.com/static/iphone/iadmob.js"></script>  
  33.    
  34.                 <div data-role="collapsible" data-collapsed="false">  
  35.                     <div id='lifeSpanBegin'>Born: {ARTIST_BIRTH_DATE}</div>  
  36.                     <div id='gender'>Gender: {ARTIST_GENDER} </div>  
  37.                     <div id='country'>Country: {ARTIST_COUNTRY} </div>  
  38.                     <div id='alias'>Alias:  {ARTIST_ALIAS} </div>  
  39.                     <div id='tags'>Tags: {ARTIST_TAGS}</div>  
  40.                 </div>  
  41.    
  42.                     <div data-role="collapsible-set">  
  43.    
  44.                         <div data-role="collapsible" data-collapsed="false">  
  45.                             <h3>Releases</h3>  
  46.                             <ul data-role="listview" data-inset="true">  
  47.                                  {RELEASES_LIST}  
  48.                             </ul>  
  49.                         </div>  
  50.    
  51.                         <div data-role="collapsible">  
  52.                             <h3>Links</h3>  
  53.                            <ul data-role="listview" data-inset="true">  
  54.                                  {LINKS_LIST}  
  55.                             </ul>  
  56.                         </div>  
  57.    
  58.                     </div>  
  59.                 </div><!--/content-primary --> 
  60.             </div><!-- /content --> 
  61.    
  62.             <div data-role="footer" class="footer-docs" data-theme="b">  
  63.             <h2>Data from MusicBrainz.org</h2>  
  64.             </div>  
  65.             </div><!-- /page --> 
  66.     </body>  
  67. </html 

現(xiàn)在，我們?yōu)橹八械?0位歌手創(chuàng)建訪問MusicBrainz Web服務(wù)的PHP文件，并為每一個(gè)歌手創(chuàng)建HTML文件。我們使用了PHP Array來存儲20位流行歌手的歌手編號。你還可以將歌手編輯存儲在數(shù)據(jù)庫中，使用PHP-Mysql代碼來獲取歌手編號及其他必要的信息。

MusicBrainz為開發(fā)人員提供了可以在本地下載和處理的數(shù)據(jù)庫，而不是使用Web服務(wù)。你可以下載數(shù)據(jù)庫，學(xué)習(xí)如何在你的本地機(jī)器上配置同樣的內(nèi)容。

  1. <?php  
  2. header("Content-type: text/html; charset=utf-8");  
  3.    
  4. include 'classes/artist.php';  
  5. include 'classes/release.php';  
  6. include 'classes/relation.php';  
  7.    
  8. $artist         = new artist();  
  9. $release        = new release();  
  10. $relation       = new relation();  
  11. $artistTemplate = file_get_contents("artistTemplate.html");  
  12. $outputFolder   = "Data";  
  13.    
  14. $artistId   =   array("650e7db6-b795-4eb5-a702-5ea2fc46c848", "cc197bad-dc9c-440d-a5b5-d52ba2e14234", "73e5e69d-3554-40d8-8516-00cb38737a1c",  
  15.                       "122d63fc-8671-43e4-9752-34e846d62a9c", "f82bcf78-5b69-4622-a5ef-73800768d9ac", "d5be5333-4171-427e-8e12-732087c6b78e",  
  16.                       "20244d07-534f-4eff-b4d4-930878889970", "eeb1195b-f213-4ce1-b28c-8565211f8e43", "e21857d5-3256-4547-afb3-4b6ded592596",  
  17.                       "72c536dc-7137-4477-a521-567eeb840fa8", "65f4f0c5-ef9e-490c-aee3-909e7ae6b2ab", "45a663b5-b1cb-4a91-bff6-2bef7bbfdd76",  
  18.                       "f5dfa020-ad69-41cd-b3d4-fd7af0414e94", "ada7a83c-e3e1-40f1-93f9-3e73dbc9298a", "e0140a67-e4d1-4f13-8a01-364355bee46e",  
  19.                       "3d2b98e5-556f-4451-a3ff-c50ea18d57cb", "0103c1cc-4a09-4a5d-a344-56ad99a77193", "d8354b38-e942-4c89-ba93-29323432abc3",  
  20.                       "d262ea27-3ffe-40f7-b922-85c42d625e67", "35f866dc-c061-48ba-8157-cf2e0eac4857");  
  21.    
  22. foreach ($artistId as $id)  
  23. {  
  24.         $MBArtistQuery         = "http://musicbrainz.org/ws/2/artist/?query=arid:$id";  
  25.         $MBArtistReleasesQuery = "http://musicbrainz.org/ws/2/release/?query=arid:$id";  
  26.         $MBArtistLinksQuery    = "http://musicbrainz.org/ws/2/artist/$id?inc=url-rels";  
  27.    
  28.         $fileHandle = fopen("$outputFolder/$id.html", "w+");  
  29.         $artistXML  = simplexml_load_file("$MBArtistQuery");  
  30.         $artistData = showArtist($id, $artistXML, $artistTemplate);  
  31.    
  32.         sleep(20);  
  33.    
  34.         $artistReleaseXML = simplexml_load_file("$MBArtistReleasesQuery");  
  35.         $artistData       = showArtistReleases($id, $artistReleaseXML, $artistData);  
  36.    
  37.         sleep(20);  
  38.    
  39.         $artistLinksXML = simplexml_load_file("$MBArtistLinksQuery");  
  40.         $artistData     = showArtistLinks($id, $artistLinksXML, $artistData);  
  41.         fwrite($fileHandle, $artistData);  
  42.         fclose($fileHandle);  
  43.         sleep(20);  
  44. }  
  45.    
  46. function showArtistLinks($artistId, $artistXML, $artistTemplate)  
  47. {  
  48.     $links = "";  
  49.     foreach ($artistXML->artist->{'relation-list'}->relation as $artistsRelation)  
  50.     {  
  51.         $relation->type   = $artistsRelation['type'];  
  52.         $relation->target = $artistsRelation->target;  
  53.    
  54.         $links .= "<li><a href='$relation->target'><h4>$relation->type</h4><p><strong>$relation->target</strong></p></a></li>";  
  55.     }  
  56.     $artistTemplate = str_replace("{LINKS_LIST}", $links, $artistTemplate);  
  57.     return $artistTemplate;  
  58. }  
  59.    
  60. function showArtistReleases($artistId, $artistReleaseXML, $artistTemplate)  
  61. {  
  62.     $releases = "";  
  63.     foreach ($artistReleaseXML->{'release-list'}->release as $releaseInfo) {  
  64.         $release->id     = $releaseInfo['id'];  
  65.         $release->title  = $releaseInfo->title;  
  66.         $release->date   = $releaseInfo->date;  
  67.         $release->status = $releaseInfo->status;  
  68.         $release->type   = $releaseInfo->{'release-group'}['type'];  
  69.         $release->format = $releaseInfo->{'medium-list'}->medium->format;  
  70.         $release->tracks = $releaseInfo->{'medium-list'}->{'track-count'};  
  71.         $releases       .= "<li>$release->title<span class='ui-li-count'>$release->date</span></li>\n";  
  72.     }  
  73.    
  74.     $artistTemplate = str_replace("{RELEASES_LIST}", $releases, $artistTemplate);  
  75.     return $artistTemplate;  
  76. }  
  77.    
  78. function showArtist($artistId, $artistXML, $artistTemplate)  
  79. {  
  80.     $artist->id            = $artistId;  
  81.     $artist->name          = $artistXML->{'artist-list'}->artist->name;  
  82.     $artist->gender        = $artistXML->{'artist-list'}->artist->gender;  
  83.     $artist->country       = $artistXML->{'artist-list'}->artist->country;  
  84.     $artist->lifeSpanBegin = $artistXML->{'artist-list'}->artist->{'life-span'}->begin;  
  85.    
  86.     foreach ($artistXML->{'artist-list'}->artist->{'alias-list'}->alias as $artistAlias) {  
  87.         $artist->alias.=$artistAlias . ",";  
  88.     }  
  89.    
  90.     foreach ($artistXML->{'artist-list'}->artist->{'tag-list'}->tag as $artistTags) {  
  91.         $artist->tags.=$artistTags->name . ",";  
  92.     }  
  93.    
  94.     $artistTemplate = str_replace("{ARTIST_NAME}", $artist->name, $artistTemplate);  
  95.     $artistTemplate = str_replace("{ARTIST_BIRTH_DATE}", $artist->lifeSpanBegin, $artistTemplate);  
  96.     $artistTemplate = str_replace("{ARTIST_GENDER}", $artist->gender, $artistTemplate);  
  97.     $artistTemplate = str_replace("{ARTIST_COUNTRY}", $artist->country, $artistTemplate);  
  98.     $artistTemplate = str_replace("{ARTIST_ALIAS}", $artist->alias, $artistTemplate);  
  99.     $artistTemplate = str_replace("{ARTIST_TAGS}", $artist->tags, $artistTemplate);  
  100.    
  101.     return $artistTemplate;  
  102. }  
  103. ?> 

在index.php頂部包括的歌手、唱片和關(guān)系這些類是簡單的類對象，保存了歌手的每一種類型的信息?？稍赑roject Download鏈接中的PHP文件夾中找到同樣的內(nèi)容。

【51CTO譯稿，非經(jīng)授權(quán)謝絕轉(zhuǎn)載，合作媒體轉(zhuǎn)載請注明原文出處、作者及51CTO譯者！】#p#

第三步：將創(chuàng)建的歌手文件復(fù)制到你的Xcode項(xiàng)目中

從命令行接口(CLI)運(yùn)行index.php，它應(yīng)該會(huì)在Data文件夾里面生成20個(gè)帶有格式ARTIST-ID.html的HTML文件。把這20個(gè)文件拷貝到你Xcode項(xiàng)目中的數(shù)據(jù)文件夾?，F(xiàn)在，運(yùn)行Xcode項(xiàng)目，點(diǎn)擊某個(gè)歌手，即可瀏覽到詳細(xì)資料頁面。你應(yīng)該會(huì)看到面向iPad的下列結(jié)果：

運(yùn)行Xcode項(xiàng)目 點(diǎn)擊某歌手即可瀏覽到詳細(xì)資料頁面

點(diǎn)擊查看大圖

別忘了把你的Xcode項(xiàng)目設(shè)為“Universal”(通用)，那樣你的雜志應(yīng)用程序在iPhone上也可以順暢運(yùn)行。在本例中，該應(yīng)用程序用起來和看起來都很好!

把你的Xcode項(xiàng)目設(shè)為“Universal”（通用），那樣你的雜志應(yīng)用程序在iPhone上也可以順暢運(yùn)行#p#

第四步：控制雜志的頁面順序

在默認(rèn)情況下，PugPig沒有任何順序地顯示數(shù)據(jù)文件夾中的所有HTML文件，不管index.html或其他文件名稱。為了總是先顯示index.html文件，然后顯示其余頁面，我們需要在數(shù)據(jù)文件夾指定一個(gè)清單文件(manifest file)。將它命名為custom.manifest，然后為它添加下列內(nèi)容。

  1. CACHE MANIFEST  
  2. index.html  
  3. 35f866dc-c061-48ba-8157-cf2e0eac4857.html  
  4. d262ea27-3ffe-40f7-b922-85c42d625e67.html  
  5. d8354b38-e942-4c89-ba93-29323432abc3.html  
  6. 0103c1cc-4a09-4a5d-a344-56ad99a77193.html  
  7. 3d2b98e5-556f-4451-a3ff-c50ea18d57cb.html  
  8. e0140a67-e4d1-4f13-8a01-364355bee46e.html  
  9. ada7a83c-e3e1-40f1-93f9-3e73dbc9298a.html  
  10. f5dfa020-ad69-41cd-b3d4-fd7af0414e94.html  
  11. 45a663b5-b1cb-4a91-bff6-2bef7bbfdd76.html  
  12. 65f4f0c5-ef9e-490c-aee3-909e7ae6b2ab.html  
  13. 72c536dc-7137-4477-a521-567eeb840fa8.html  
  14. e21857d5-3256-4547-afb3-4b6ded592596.html  
  15. eeb1195b-f213-4ce1-b28c-8565211f8e43.html  
  16. 20244d07-534f-4eff-b4d4-930878889970.html  
  17. d5be5333-4171-427e-8e12-732087c6b78e.html  
  18. 82bcf78-5b69-4622-a5ef-73800768d9ac.html  
  19. 122d63fc-8671-43e4-9752-34e846d62a9c.html  
  20. 73e5e69d-3554-40d8-8516-00cb38737a1c.html  
  21. cc197bad-dc9c-440d-a5b5-d52ba2e14234.html  
  22. 650e7db6-b795-4eb5-a702-5ea2fc46c848.html 

我們還需要在項(xiàng)目中稍稍改動(dòng)一點(diǎn)Objective-C代碼。打開MusicBrainz_MagazineViewController.m文件，把viewDidLoad方法中的下面這行：

  1. [pageControl setDataSource:[[[KGLocalFileDataSource alloc] initWithPath:@"Data"] autorelease]];  

換成

  1. [pageControl setDataSource:[[[KGHTMLManifestDataSource alloc] initWithPath:@"Data/custom.manifest"] autorelease]];  

另外，在同一文件中pageControl的尺度從0.4166667改成1.0。

  1. [pageControl setScale:1.0];  

該尺度由基于iOS設(shè)備的jQuery Mobile自動(dòng)處理，所以我們不需要為iPhone縮小尺度。

最后的改進(jìn)

現(xiàn)在我已經(jīng)為多位巡演的流行歌手創(chuàng)建了HTML頁面，可以對應(yīng)用程序作進(jìn)一步的改進(jìn)，只要使下面這個(gè)PHP過程實(shí)現(xiàn)自動(dòng)化：為所有歌手創(chuàng)建HTML頁面，并將它們保存在數(shù)據(jù)文件夾中，因而制作一份完整的離線歌手雜志。至于圖像，你可以獲取維基百科CC圖像，把它們加入到應(yīng)用程序中，讓它看起來更吸引人。

為了讓應(yīng)用程序顯得更可愛，可以添加一些Ajax魅力，使用來自eventful.com或songkick.com等眾多活動(dòng)網(wǎng)站和音樂網(wǎng)站的豐富鏈接、API和RSS，創(chuàng)建一個(gè)動(dòng)態(tài)頁面。比如說，為歌手從eventful.com獲取最新活動(dòng)或演唱會(huì)這些素材!

原文名稱：Build a MusicBrainz App

原文鏈接：http://mobile.tutsplus.com/tutorials/mobile-web-apps/build-a-musicbrainz-app/

【51CTO譯稿，非經(jīng)授權(quán)謝絕轉(zhuǎn)載，合作媒體轉(zhuǎn)載請注明原文出處、作者及51CTO譯者！】

責(zé)任編輯：佚名 來源： 51CTO.com
jQMjQuery MobileHTHL5iOS SDKMusicBrainz
相關(guān)推薦

2016-05-27 15:44:12

H5LeanCloudWex5

2015-02-05 10:11:44

HTML5Application

2012-03-21 09:36:33

ibmdw

2024-12-10 08:01:38

2013-08-29 09:53:04

HTML5MongoDB位置感知

2012-05-24 15:49:35

HTML5

2012-06-01 09:29:56

HTML5

2011-07-12 09:25:45

HTML 5

2015-01-12 12:11:10

移動(dòng)應(yīng)用原生混合

2015-01-12 09:52:08

移動(dòng)應(yīng)用原生混合

2024-05-15 11:42:33

FlutterWeb 庫應(yīng)用程序

2012-03-30 15:54:43

ibmdw

2012-06-15 11:32:19

ibmdw

2011-05-25 09:34:30

HTML5cssjavascript

2012-03-15 15:35:51

iUI框架EclipseiOS Web

2017-12-10 14:13:14

云服務(wù)云原生應(yīng)用程序

2010-02-04 10:17:38

Android應(yīng)用程序

2011-09-01 10:01:35

PhoneGap應(yīng)用程序GoodDay

2017-03-02 11:10:39

AndroidMVVM應(yīng)用程序

2012-05-29 10:04:08

點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號