FontAwesome hanya contoh, Anda dapat juga menggunakan font lain seperti Ionicon dan Material Design Icons.
Konsep
Untuk dapat melihat penggunaan ikon pada aplikasi yang dibangun dengan TabrisJS, kita perlu memikirkan cara paling mudah dalam penerapan font yang berisi icon ke dalam aplikasi. Untuk ini ide saya adalah menggunakan listview yang tiap itemnya menampilkan nama ikon dalam FontAwesome serta tampilan ikonnya.
Perlu diperhatikan bahwa aplikasi TabrisJS berbeda dengan aplikasi Web atau aplikasi hibrid yang menggunakan HTML yang di-compile dan ditampilkan dalam WebView pada aplikasi Cordova lainnya. Pada TabrisJS kita tidak dapat menggunakan HTML, karenanya kita memerlukan cara lain untuk menampilkan icon dalam FontAwesome pada aplikasi kita. Caranya, misalnya, dengan mengijinkan developer menampilkan teks yang di mix/dicampur dengan nama icon atau class icon kemudian utilitas yang kita siapkan akan memeriksa teks tersebut dan mengganti/mereplace nama-nama class dalam teks dengan icon sesuai kode karakternya.
Kita perlu menyiapkan sebuah file javascript sebagai utilitas untuk mem-parse teks dan menggantinya dengan icon pada file terpisah, sehingga dapat digunakan kembali pada proyek aplikasi mobile yang dibangun dengan TabrisJS di masa mendatang.
Membuat Projek
Langkah pertama, silahkan buat sebuah proyek dengan mengikuti petunjuk di sini.
Kemudian dalam folder proyek buatlah sebuah folder dengan nama res, Dan didalam folder res ini buatlah sebuah folder lagi dengan nama font. Download & copy file FontAwesome (TTF) ke dalam folder res/font ini, ganti namanya agar mudah dibaca. Perhatikan struktur folder berikut:
Kemudian di dalam folder src, buat sebuah file dengan nama TabrisFontAwesome.js. Buka file ini dan masukkan kode berikut:
module.exports = new (function(){
this.font = 'FontAwesome';
tabris.app.registerFont('FontAwesome', './res/font/fontawesome-webfont.ttf#'+this.font);
this.fa = function(txt){
let _t = this;
if (txt == ''){
return '';
}
let ret = txt;
_t.glyphTable.forEach(glyph => {
ret = ret.split('{'+glyph.n+'}').join(glyph.c);
});
return ret;
},
this.glyphTable = [
{n: "fa-glass", c: "\uf000"},
{n: "fa-music", c: "\uf001"},
{n: "fa-search", c: "\uf002"},
{n: "fa-envelope-o", c: "\uf003"},
{n: "fa-heart", c: "\uf004"},
{n: "fa-star", c: "\uf005"},
{n: "fa-star-o", c: "\uf006"},
{n: "fa-user", c: "\uf007"},
{n: "fa-film", c: "\uf008"},
{n: "fa-th-large", c: "\uf009"},
{n: "fa-th", c: "\uf00a"},
{n: "fa-th-list", c: "\uf00b"},
{n: "fa-check", c: "\uf00c"},
{n: "fa-times", c: "\uf00d"},
{n: "fa-search-plus", c: "\uf00e"},
{n: "fa-search-minus", c: "\uf010"},
{n: "fa-power-off", c: "\uf011"},
{n: "fa-signal", c: "\uf012"},
{n: "fa-cog", c: "\uf013"},
{n: "fa-trash-o", c: "\uf014"},
{n: "fa-home", c: "\uf015"},
{n: "fa-file-o", c: "\uf016"},
{n: "fa-clock-o", c: "\uf017"},
{n: "fa-road", c: "\uf018"},
{n: "fa-download", c: "\uf019"},
{n: "fa-arrow-circle-o-down", c: "\uf01a"},
{n: "fa-arrow-circle-o-up", c: "\uf01b"},
{n: "fa-inbox", c: "\uf01c"},
{n: "fa-play-circle-o", c: "\uf01d"},
{n: "fa-repeat", c: "\uf01e"},
{n: "fa-refresh", c: "\uf021"},
{n: "fa-list-alt", c: "\uf022"},
{n: "fa-lock", c: "\uf023"},
{n: "fa-flag", c: "\uf024"},
{n: "fa-headphones", c: "\uf025"},
{n: "fa-volume-off", c: "\uf026"},
{n: "fa-volume-down", c: "\uf027"},
{n: "fa-volume-up", c: "\uf028"},
{n: "fa-qrcode", c: "\uf029"},
{n: "fa-barcode", c: "\uf02a"},
{n: "fa-tag", c: "\uf02b"},
{n: "fa-tags", c: "\uf02c"},
{n: "fa-book", c: "\uf02d"},
{n: "fa-bookmark", c: "\uf02e"},
{n: "fa-print", c: "\uf02f"},
{n: "fa-camera", c: "\uf030"},
{n: "fa-font", c: "\uf031"},
{n: "fa-bold", c: "\uf032"},
{n: "fa-italic", c: "\uf033"},
{n: "fa-text-height", c: "\uf034"},
{n: "fa-text-width", c: "\uf035"},
{n: "fa-align-left", c: "\uf036"},
{n: "fa-align-center", c: "\uf037"},
{n: "fa-align-right", c: "\uf038"},
{n: "fa-align-justify", c: "\uf039"},
{n: "fa-list", c: "\uf03a"},
{n: "fa-outdent", c: "\uf03b"},
{n: "fa-indent", c: "\uf03c"},
{n: "fa-video-camera", c: "\uf03d"},
{n: "fa-picture-o", c: "\uf03e"},
{n: "fa-pencil", c: "\uf040"},
{n: "fa-map-marker", c: "\uf041"},
{n: "fa-adjust", c: "\uf042"},
{n: "fa-tint", c: "\uf043"},
{n: "fa-pencil-square-o", c: "\uf044"},
{n: "fa-share-square-o", c: "\uf045"},
{n: "fa-check-square-o", c: "\uf046"},
{n: "fa-arrows", c: "\uf047"},
{n: "fa-step-backward", c: "\uf048"},
{n: "fa-fast-backward", c: "\uf049"},
{n: "fa-backward", c: "\uf04a"},
{n: "fa-play", c: "\uf04b"},
{n: "fa-pause", c: "\uf04c"},
{n: "fa-stop", c: "\uf04d"},
{n: "fa-forward", c: "\uf04e"},
{n: "fa-fast-forward", c: "\uf050"},
{n: "fa-step-forward", c: "\uf051"},
{n: "fa-eject", c: "\uf052"},
{n: "fa-chevron-left", c: "\uf053"},
{n: "fa-chevron-right", c: "\uf054"},
{n: "fa-plus-circle", c: "\uf055"},
{n: "fa-minus-circle", c: "\uf056"},
{n: "fa-times-circle", c: "\uf057"},
{n: "fa-check-circle", c: "\uf058"},
{n: "fa-question-circle", c: "\uf059"},
{n: "fa-info-circle", c: "\uf05a"},
{n: "fa-crosshairs", c: "\uf05b"},
{n: "fa-times-circle-o", c: "\uf05c"},
{n: "fa-check-circle-o", c: "\uf05d"},
{n: "fa-ban", c: "\uf05e"},
{n: "fa-arrow-left", c: "\uf060"},
{n: "fa-arrow-right", c: "\uf061"},
{n: "fa-arrow-up", c: "\uf062"},
{n: "fa-arrow-down", c: "\uf063"},
{n: "fa-share", c: "\uf064"},
{n: "fa-expand", c: "\uf065"},
{n: "fa-compress", c: "\uf066"},
{n: "fa-plus", c: "\uf067"},
{n: "fa-minus", c: "\uf068"},
{n: "fa-asterisk", c: "\uf069"},
{n: "fa-exclamation-circle", c: "\uf06a"},
{n: "fa-gift", c: "\uf06b"},
{n: "fa-leaf", c: "\uf06c"},
{n: "fa-fire", c: "\uf06d"},
{n: "fa-eye", c: "\uf06e"},
{n: "fa-eye-slash", c: "\uf070"},
{n: "fa-exclamation-triangle", c: "\uf071"},
{n: "fa-plane", c: "\uf072"},
{n: "fa-calendar", c: "\uf073"},
{n: "fa-random", c: "\uf074"},
{n: "fa-comment", c: "\uf075"},
{n: "fa-magnet", c: "\uf076"},
{n: "fa-chevron-up", c: "\uf077"},
{n: "fa-chevron-down", c: "\uf078"},
{n: "fa-retweet", c: "\uf079"},
{n: "fa-shopping-cart", c: "\uf07a"},
{n: "fa-folder", c: "\uf07b"},
{n: "fa-folder-open", c: "\uf07c"},
{n: "fa-arrows-v", c: "\uf07d"},
{n: "fa-arrows-h", c: "\uf07e"},
{n: "fa-bar-chart", c: "\uf080"},
{n: "fa-twitter-square", c: "\uf081"},
{n: "fa-facebook-square", c: "\uf082"},
{n: "fa-camera-retro", c: "\uf083"},
{n: "fa-key", c: "\uf084"},
{n: "fa-cogs", c: "\uf085"},
{n: "fa-comments", c: "\uf086"},
{n: "fa-thumbs-o-up", c: "\uf087"},
{n: "fa-thumbs-o-down", c: "\uf088"},
{n: "fa-star-half", c: "\uf089"},
{n: "fa-heart-o", c: "\uf08a"},
{n: "fa-sign-out", c: "\uf08b"},
{n: "fa-linkedin-square", c: "\uf08c"},
{n: "fa-thumb-tack", c: "\uf08d"},
{n: "fa-external-link", c: "\uf08e"},
{n: "fa-sign-in", c: "\uf090"},
{n: "fa-trophy", c: "\uf091"},
{n: "fa-github-square", c: "\uf092"},
{n: "fa-upload", c: "\uf093"},
{n: "fa-lemon-o", c: "\uf094"},
{n: "fa-phone", c: "\uf095"},
{n: "fa-square-o", c: "\uf096"},
{n: "fa-bookmark-o", c: "\uf097"},
{n: "fa-phone-square", c: "\uf098"},
{n: "fa-twitter", c: "\uf099"},
{n: "fa-facebook", c: "\uf09a"},
{n: "fa-github", c: "\uf09b"},
{n: "fa-unlock", c: "\uf09c"},
{n: "fa-credit-card", c: "\uf09d"},
{n: "fa-rss", c: "\uf09e"},
{n: "fa-hdd-o", c: "\uf0a0"},
{n: "fa-bullhorn", c: "\uf0a1"},
{n: "fa-bell", c: "\uf0f3"},
{n: "fa-certificate", c: "\uf0a3"},
{n: "fa-hand-o-right", c: "\uf0a4"},
{n: "fa-hand-o-left", c: "\uf0a5"},
{n: "fa-hand-o-up", c: "\uf0a6"},
{n: "fa-hand-o-down", c: "\uf0a7"},
{n: "fa-arrow-circle-left", c: "\uf0a8"},
{n: "fa-arrow-circle-right", c: "\uf0a9"},
{n: "fa-arrow-circle-up", c: "\uf0aa"},
{n: "fa-arrow-circle-down", c: "\uf0ab"},
{n: "fa-globe", c: "\uf0ac"},
{n: "fa-wrench", c: "\uf0ad"},
{n: "fa-tasks", c: "\uf0ae"},
{n: "fa-filter", c: "\uf0b0"},
{n: "fa-briefcase", c: "\uf0b1"},
{n: "fa-arrows-alt", c: "\uf0b2"},
{n: "fa-users", c: "\uf0c0"},
{n: "fa-link", c: "\uf0c1"},
{n: "fa-cloud", c: "\uf0c2"},
{n: "fa-flask", c: "\uf0c3"},
{n: "fa-scissors", c: "\uf0c4"},
{n: "fa-files-o", c: "\uf0c5"},
{n: "fa-paperclip", c: "\uf0c6"},
{n: "fa-floppy-o", c: "\uf0c7"},
{n: "fa-square", c: "\uf0c8"},
{n: "fa-bars", c: "\uf0c9"},
{n: "fa-list-ul", c: "\uf0ca"},
{n: "fa-list-ol", c: "\uf0cb"},
{n: "fa-strikethrough", c: "\uf0cc"},
{n: "fa-underline", c: "\uf0cd"},
{n: "fa-table", c: "\uf0ce"},
{n: "fa-magic", c: "\uf0d0"},
{n: "fa-truck", c: "\uf0d1"},
{n: "fa-pinterest", c: "\uf0d2"},
{n: "fa-pinterest-square", c: "\uf0d3"},
{n: "fa-google-plus-square", c: "\uf0d4"},
{n: "fa-google-plus", c: "\uf0d5"},
{n: "fa-money", c: "\uf0d6"},
{n: "fa-caret-down", c: "\uf0d7"},
{n: "fa-caret-up", c: "\uf0d8"},
{n: "fa-caret-left", c: "\uf0d9"},
{n: "fa-caret-right", c: "\uf0da"},
{n: "fa-columns", c: "\uf0db"},
{n: "fa-sort", c: "\uf0dc"},
{n: "fa-sort-desc", c: "\uf0dd"},
{n: "fa-sort-asc", c: "\uf0de"},
{n: "fa-envelope", c: "\uf0e0"},
{n: "fa-linkedin", c: "\uf0e1"},
{n: "fa-undo", c: "\uf0e2"},
{n: "fa-gavel", c: "\uf0e3"},
{n: "fa-tachometer", c: "\uf0e4"},
{n: "fa-comment-o", c: "\uf0e5"},
{n: "fa-comments-o", c: "\uf0e6"},
{n: "fa-bolt", c: "\uf0e7"},
{n: "fa-sitemap", c: "\uf0e8"},
{n: "fa-umbrella", c: "\uf0e9"},
{n: "fa-clipboard", c: "\uf0ea"},
{n: "fa-lightbulb-o", c: "\uf0eb"},
{n: "fa-exchange", c: "\uf0ec"},
{n: "fa-cloud-download", c: "\uf0ed"},
{n: "fa-cloud-upload", c: "\uf0ee"},
{n: "fa-user-md", c: "\uf0f0"},
{n: "fa-stethoscope", c: "\uf0f1"},
{n: "fa-suitcase", c: "\uf0f2"},
{n: "fa-bell-o", c: "\uf0a2"},
{n: "fa-coffee", c: "\uf0f4"},
{n: "fa-cutlery", c: "\uf0f5"},
{n: "fa-file-text-o", c: "\uf0f6"},
{n: "fa-building-o", c: "\uf0f7"},
{n: "fa-hospital-o", c: "\uf0f8"},
{n: "fa-ambulance", c: "\uf0f9"},
{n: "fa-medkit", c: "\uf0fa"},
{n: "fa-fighter-jet", c: "\uf0fb"},
{n: "fa-beer", c: "\uf0fc"},
{n: "fa-h-square", c: "\uf0fd"},
{n: "fa-plus-square", c: "\uf0fe"},
{n: "fa-angle-double-left", c: "\uf100"},
{n: "fa-angle-double-right", c: "\uf101"},
{n: "fa-angle-double-up", c: "\uf102"},
{n: "fa-angle-double-down", c: "\uf103"},
{n: "fa-angle-left", c: "\uf104"},
{n: "fa-angle-right", c: "\uf105"},
{n: "fa-angle-up", c: "\uf106"},
{n: "fa-angle-down", c: "\uf107"},
{n: "fa-desktop", c: "\uf108"},
{n: "fa-laptop", c: "\uf109"},
{n: "fa-tablet", c: "\uf10a"},
{n: "fa-mobile", c: "\uf10b"},
{n: "fa-circle-o", c: "\uf10c"},
{n: "fa-quote-left", c: "\uf10d"},
{n: "fa-quote-right", c: "\uf10e"},
{n: "fa-spinner", c: "\uf110"},
{n: "fa-circle", c: "\uf111"},
{n: "fa-reply", c: "\uf112"},
{n: "fa-github-alt", c: "\uf113"},
{n: "fa-folder-o", c: "\uf114"},
{n: "fa-folder-open-o", c: "\uf115"},
{n: "fa-smile-o", c: "\uf118"},
{n: "fa-frown-o", c: "\uf119"},
{n: "fa-meh-o", c: "\uf11a"},
{n: "fa-gamepad", c: "\uf11b"},
{n: "fa-keyboard-o", c: "\uf11c"},
{n: "fa-flag-o", c: "\uf11d"},
{n: "fa-flag-checkered", c: "\uf11e"},
{n: "fa-terminal", c: "\uf120"},
{n: "fa-code", c: "\uf121"},
{n: "fa-reply-all", c: "\uf122"},
{n: "fa-star-half-o", c: "\uf123"},
{n: "fa-location-arrow", c: "\uf124"},
{n: "fa-crop", c: "\uf125"},
{n: "fa-code-fork", c: "\uf126"},
{n: "fa-chain-broken", c: "\uf127"},
{n: "fa-question", c: "\uf128"},
{n: "fa-info", c: "\uf129"},
{n: "fa-exclamation", c: "\uf12a"},
{n: "fa-superscript", c: "\uf12b"},
{n: "fa-subscript", c: "\uf12c"},
{n: "fa-eraser", c: "\uf12d"},
{n: "fa-puzzle-piece", c: "\uf12e"},
{n: "fa-microphone", c: "\uf130"},
{n: "fa-microphone-slash", c: "\uf131"},
{n: "fa-shield", c: "\uf132"},
{n: "fa-calendar-o", c: "\uf133"},
{n: "fa-fire-extinguisher", c: "\uf134"},
{n: "fa-rocket", c: "\uf135"},
{n: "fa-maxcdn", c: "\uf136"},
{n: "fa-chevron-circle-left", c: "\uf137"},
{n: "fa-chevron-circle-right", c: "\uf138"},
{n: "fa-chevron-circle-up", c: "\uf139"},
{n: "fa-chevron-circle-down", c: "\uf13a"},
{n: "fa-html5", c: "\uf13b"},
{n: "fa-css3", c: "\uf13c"},
{n: "fa-anchor", c: "\uf13d"},
{n: "fa-unlock-alt", c: "\uf13e"},
{n: "fa-bullseye", c: "\uf140"},
{n: "fa-ellipsis-h", c: "\uf141"},
{n: "fa-ellipsis-v", c: "\uf142"},
{n: "fa-rss-square", c: "\uf143"},
{n: "fa-play-circle", c: "\uf144"},
{n: "fa-ticket", c: "\uf145"},
{n: "fa-minus-square", c: "\uf146"},
{n: "fa-minus-square-o", c: "\uf147"},
{n: "fa-level-up", c: "\uf148"},
{n: "fa-level-down", c: "\uf149"},
{n: "fa-check-square", c: "\uf14a"},
{n: "fa-pencil-square", c: "\uf14b"},
{n: "fa-external-link-square", c: "\uf14c"},
{n: "fa-share-square", c: "\uf14d"},
{n: "fa-compass", c: "\uf14e"},
{n: "fa-caret-square-o-down", c: "\uf150"},
{n: "fa-caret-square-o-up", c: "\uf151"},
{n: "fa-caret-square-o-right", c: "\uf152"},
{n: "fa-eur", c: "\uf153"},
{n: "fa-gbp", c: "\uf154"},
{n: "fa-usd", c: "\uf155"},
{n: "fa-inr", c: "\uf156"},
{n: "fa-jpy", c: "\uf157"},
{n: "fa-rub", c: "\uf158"},
{n: "fa-krw", c: "\uf159"},
{n: "fa-btc", c: "\uf15a"},
{n: "fa-file", c: "\uf15b"},
{n: "fa-file-text", c: "\uf15c"},
{n: "fa-sort-alpha-asc", c: "\uf15d"},
{n: "fa-sort-alpha-desc", c: "\uf15e"},
{n: "fa-sort-amount-asc", c: "\uf160"},
{n: "fa-sort-amount-desc", c: "\uf161"},
{n: "fa-sort-numeric-asc", c: "\uf162"},
{n: "fa-sort-numeric-desc", c: "\uf163"},
{n: "fa-thumbs-up", c: "\uf164"},
{n: "fa-thumbs-down", c: "\uf165"},
{n: "fa-youtube-square", c: "\uf166"},
{n: "fa-youtube", c: "\uf167"},
{n: "fa-xing", c: "\uf168"},
{n: "fa-xing-square", c: "\uf169"},
{n: "fa-youtube-play", c: "\uf16a"},
{n: "fa-dropbox", c: "\uf16b"},
{n: "fa-stack-overflow", c: "\uf16c"},
{n: "fa-instagram", c: "\uf16d"},
{n: "fa-flickr", c: "\uf16e"},
{n: "fa-adn", c: "\uf170"},
{n: "fa-bitbucket", c: "\uf171"},
{n: "fa-bitbucket-square", c: "\uf172"},
{n: "fa-tumblr", c: "\uf173"},
{n: "fa-tumblr-square", c: "\uf174"},
{n: "fa-long-arrow-down", c: "\uf175"},
{n: "fa-long-arrow-up", c: "\uf176"},
{n: "fa-long-arrow-left", c: "\uf177"},
{n: "fa-long-arrow-right", c: "\uf178"},
{n: "fa-apple", c: "\uf179"},
{n: "fa-windows", c: "\uf17a"},
{n: "fa-android", c: "\uf17b"},
{n: "fa-linux", c: "\uf17c"},
{n: "fa-dribbble", c: "\uf17d"},
{n: "fa-skype", c: "\uf17e"},
{n: "fa-foursquare", c: "\uf180"},
{n: "fa-trello", c: "\uf181"},
{n: "fa-female", c: "\uf182"},
{n: "fa-male", c: "\uf183"},
{n: "fa-gratipay", c: "\uf184"},
{n: "fa-sun-o", c: "\uf185"},
{n: "fa-moon-o", c: "\uf186"},
{n: "fa-archive", c: "\uf187"},
{n: "fa-bug", c: "\uf188"},
{n: "fa-vk", c: "\uf189"},
{n: "fa-weibo", c: "\uf18a"},
{n: "fa-renren", c: "\uf18b"},
{n: "fa-pagelines", c: "\uf18c"},
{n: "fa-stack-exchange", c: "\uf18d"},
{n: "fa-arrow-circle-o-right", c: "\uf18e"},
{n: "fa-arrow-circle-o-left", c: "\uf190"},
{n: "fa-caret-square-o-left", c: "\uf191"},
{n: "fa-dot-circle-o", c: "\uf192"},
{n: "fa-wheelchair", c: "\uf193"},
{n: "fa-vimeo-square", c: "\uf194"},
{n: "fa-try", c: "\uf195"},
{n: "fa-plus-square-o", c: "\uf196"},
{n: "fa-space-shuttle", c: "\uf197"},
{n: "fa-slack", c: "\uf198"},
{n: "fa-envelope-square", c: "\uf199"},
{n: "fa-wordpress", c: "\uf19a"},
{n: "fa-openid", c: "\uf19b"},
{n: "fa-university", c: "\uf19c"},
{n: "fa-graduation-cap", c: "\uf19d"},
{n: "fa-yahoo", c: "\uf19e"},
{n: "fa-google", c: "\uf1a0"},
{n: "fa-reddit", c: "\uf1a1"},
{n: "fa-reddit-square", c: "\uf1a2"},
{n: "fa-stumbleupon-circle", c: "\uf1a3"},
{n: "fa-stumbleupon", c: "\uf1a4"},
{n: "fa-delicious", c: "\uf1a5"},
{n: "fa-digg", c: "\uf1a6"},
{n: "fa-pied-piper", c: "\uf1a7"},
{n: "fa-pied-piper-alt", c: "\uf1a8"},
{n: "fa-drupal", c: "\uf1a9"},
{n: "fa-joomla", c: "\uf1aa"},
{n: "fa-language", c: "\uf1ab"},
{n: "fa-fax", c: "\uf1ac"},
{n: "fa-building", c: "\uf1ad"},
{n: "fa-child", c: "\uf1ae"},
{n: "fa-paw", c: "\uf1b0"},
{n: "fa-spoon", c: "\uf1b1"},
{n: "fa-cube", c: "\uf1b2"},
{n: "fa-cubes", c: "\uf1b3"},
{n: "fa-behance", c: "\uf1b4"},
{n: "fa-behance-square", c: "\uf1b5"},
{n: "fa-steam", c: "\uf1b6"},
{n: "fa-steam-square", c: "\uf1b7"},
{n: "fa-recycle", c: "\uf1b8"},
{n: "fa-car", c: "\uf1b9"},
{n: "fa-taxi", c: "\uf1ba"},
{n: "fa-tree", c: "\uf1bb"},
{n: "fa-spotify", c: "\uf1bc"},
{n: "fa-deviantart", c: "\uf1bd"},
{n: "fa-soundcloud", c: "\uf1be"},
{n: "fa-database", c: "\uf1c0"},
{n: "fa-file-pdf-o", c: "\uf1c1"},
{n: "fa-file-word-o", c: "\uf1c2"},
{n: "fa-file-excel-o", c: "\uf1c3"},
{n: "fa-file-powerpoint-o", c: "\uf1c4"},
{n: "fa-file-image-o", c: "\uf1c5"},
{n: "fa-file-archive-o", c: "\uf1c6"},
{n: "fa-file-audio-o", c: "\uf1c7"},
{n: "fa-file-video-o", c: "\uf1c8"},
{n: "fa-file-code-o", c: "\uf1c9"},
{n: "fa-vine", c: "\uf1ca"},
{n: "fa-codepen", c: "\uf1cb"},
{n: "fa-jsfiddle", c: "\uf1cc"},
{n: "fa-life-ring", c: "\uf1cd"},
{n: "fa-circle-o-notch", c: "\uf1ce"},
{n: "fa-rebel", c: "\uf1d0"},
{n: "fa-empire", c: "\uf1d1"},
{n: "fa-git-square", c: "\uf1d2"},
{n: "fa-git", c: "\uf1d3"},
{n: "fa-hacker-news", c: "\uf1d4"},
{n: "fa-tencent-weibo", c: "\uf1d5"},
{n: "fa-qq", c: "\uf1d6"},
{n: "fa-weixin", c: "\uf1d7"},
{n: "fa-paper-plane", c: "\uf1d8"},
{n: "fa-paper-plane-o", c: "\uf1d9"},
{n: "fa-history", c: "\uf1da"},
{n: "fa-circle-thin", c: "\uf1db"},
{n: "fa-header", c: "\uf1dc"},
{n: "fa-paragraph", c: "\uf1dd"},
{n: "fa-sliders", c: "\uf1de"},
{n: "fa-share-alt", c: "\uf1e0"},
{n: "fa-share-alt-square", c: "\uf1e1"},
{n: "fa-bomb", c: "\uf1e2"},
{n: "fa-futbol-o", c: "\uf1e3"},
{n: "fa-tty", c: "\uf1e4"},
{n: "fa-binoculars", c: "\uf1e5"},
{n: "fa-plug", c: "\uf1e6"},
{n: "fa-slideshare", c: "\uf1e7"},
{n: "fa-twitch", c: "\uf1e8"},
{n: "fa-yelp", c: "\uf1e9"},
{n: "fa-newspaper-o", c: "\uf1ea"},
{n: "fa-wifi", c: "\uf1eb"},
{n: "fa-calculator", c: "\uf1ec"},
{n: "fa-paypal", c: "\uf1ed"},
{n: "fa-google-wallet", c: "\uf1ee"},
{n: "fa-cc-visa", c: "\uf1f0"},
{n: "fa-cc-mastercard", c: "\uf1f1"},
{n: "fa-cc-discover", c: "\uf1f2"},
{n: "fa-cc-amex", c: "\uf1f3"},
{n: "fa-cc-paypal", c: "\uf1f4"},
{n: "fa-cc-stripe", c: "\uf1f5"},
{n: "fa-bell-slash", c: "\uf1f6"},
{n: "fa-bell-slash-o", c: "\uf1f7"},
{n: "fa-trash", c: "\uf1f8"},
{n: "fa-copyright", c: "\uf1f9"},
{n: "fa-at", c: "\uf1fa"},
{n: "fa-eyedropper", c: "\uf1fb"},
{n: "fa-paint-brush", c: "\uf1fc"},
{n: "fa-birthday-cake", c: "\uf1fd"},
{n: "fa-area-chart", c: "\uf1fe"},
{n: "fa-pie-chart", c: "\uf200"},
{n: "fa-line-chart", c: "\uf201"},
{n: "fa-lastfm", c: "\uf202"},
{n: "fa-lastfm-square", c: "\uf203"},
{n: "fa-toggle-off", c: "\uf204"},
{n: "fa-toggle-on", c: "\uf205"},
{n: "fa-bicycle", c: "\uf206"},
{n: "fa-bus", c: "\uf207"},
{n: "fa-ioxhost", c: "\uf208"},
{n: "fa-angellist", c: "\uf209"},
{n: "fa-cc", c: "\uf20a"},
{n: "fa-ils", c: "\uf20b"},
{n: "fa-meanpath", c: "\uf20c"},
{n: "fa-buysellads", c: "\uf20d"},
{n: "fa-connectdevelop", c: "\uf20e"},
{n: "fa-dashcube", c: "\uf210"},
{n: "fa-forumbee", c: "\uf211"},
{n: "fa-leanpub", c: "\uf212"},
{n: "fa-sellsy", c: "\uf213"},
{n: "fa-shirtsinbulk", c: "\uf214"},
{n: "fa-simplybuilt", c: "\uf215"},
{n: "fa-skyatlas", c: "\uf216"},
{n: "fa-cart-plus", c: "\uf217"},
{n: "fa-cart-arrow-down", c: "\uf218"},
{n: "fa-diamond", c: "\uf219"},
{n: "fa-ship", c: "\uf21a"},
{n: "fa-user-secret", c: "\uf21b"},
{n: "fa-motorcycle", c: "\uf21c"},
{n: "fa-street-view", c: "\uf21d"},
{n: "fa-heartbeat", c: "\uf21e"},
{n: "fa-venus", c: "\uf221"},
{n: "fa-mars", c: "\uf222"},
{n: "fa-mercury", c: "\uf223"},
{n: "fa-transgender", c: "\uf224"},
{n: "fa-transgender-alt", c: "\uf225"},
{n: "fa-venus-double", c: "\uf226"},
{n: "fa-mars-double", c: "\uf227"},
{n: "fa-venus-mars", c: "\uf228"},
{n: "fa-mars-stroke", c: "\uf229"},
{n: "fa-mars-stroke-v", c: "\uf22a"},
{n: "fa-mars-stroke-h", c: "\uf22b"},
{n: "fa-neuter", c: "\uf22c"},
{n: "fa-genderless", c: "\uf22d"},
{n: "fa-facebook-official", c: "\uf230"},
{n: "fa-pinterest-p", c: "\uf231"},
{n: "fa-whatsapp", c: "\uf232"},
{n: "fa-server", c: "\uf233"},
{n: "fa-user-plus", c: "\uf234"},
{n: "fa-user-times", c: "\uf235"},
{n: "fa-bed", c: "\uf236"},
{n: "fa-viacoin", c: "\uf237"},
{n: "fa-train", c: "\uf238"},
{n: "fa-subway", c: "\uf239"},
{n: "fa-medium", c: "\uf23a"},
{n: "fa-y-combinator", c: "\uf23b"},
{n: "fa-optin-monster", c: "\uf23c"},
{n: "fa-opencart", c: "\uf23d"},
{n: "fa-expeditedssl", c: "\uf23e"},
{n: "fa-battery-full", c: "\uf240"},
{n: "fa-battery-three-quarters", c: "\uf241"},
{n: "fa-battery-half", c: "\uf242"},
{n: "fa-battery-quarter", c: "\uf243"},
{n: "fa-battery-empty", c: "\uf244"},
{n: "fa-mouse-pointer", c: "\uf245"},
{n: "fa-i-cursor", c: "\uf246"},
{n: "fa-object-group", c: "\uf247"},
{n: "fa-object-ungroup", c: "\uf248"},
{n: "fa-sticky-note", c: "\uf249"},
{n: "fa-sticky-note-o", c: "\uf24a"},
{n: "fa-cc-jcb", c: "\uf24b"},
{n: "fa-cc-diners-club", c: "\uf24c"},
{n: "fa-clone", c: "\uf24d"},
{n: "fa-balance-scale", c: "\uf24e"},
{n: "fa-hourglass-o", c: "\uf250"},
{n: "fa-hourglass-start", c: "\uf251"},
{n: "fa-hourglass-half", c: "\uf252"},
{n: "fa-hourglass-end", c: "\uf253"},
{n: "fa-hourglass", c: "\uf254"},
{n: "fa-hand-rock-o", c: "\uf255"},
{n: "fa-hand-paper-o", c: "\uf256"},
{n: "fa-hand-scissors-o", c: "\uf257"},
{n: "fa-hand-lizard-o", c: "\uf258"},
{n: "fa-hand-spock-o", c: "\uf259"},
{n: "fa-hand-pointer-o", c: "\uf25a"},
{n: "fa-hand-peace-o", c: "\uf25b"},
{n: "fa-trademark", c: "\uf25c"},
{n: "fa-registered", c: "\uf25d"},
{n: "fa-creative-commons", c: "\uf25e"},
{n: "fa-gg", c: "\uf260"},
{n: "fa-gg-circle", c: "\uf261"},
{n: "fa-tripadvisor", c: "\uf262"},
{n: "fa-odnoklassniki", c: "\uf263"},
{n: "fa-odnoklassniki-square", c: "\uf264"},
{n: "fa-get-pocket", c: "\uf265"},
{n: "fa-wikipedia-w", c: "\uf266"},
{n: "fa-safari", c: "\uf267"},
{n: "fa-chrome", c: "\uf268"},
{n: "fa-firefox", c: "\uf269"},
{n: "fa-opera", c: "\uf26a"},
{n: "fa-internet-explorer", c: "\uf26b"},
{n: "fa-television", c: "\uf26c"},
{n: "fa-contao", c: "\uf26d"},
{n: "fa-500px", c: "\uf26e"},
{n: "fa-amazon", c: "\uf270"},
{n: "fa-calendar-plus-o", c: "\uf271"},
{n: "fa-calendar-minus-o", c: "\uf272"},
{n: "fa-calendar-times-o", c: "\uf273"},
{n: "fa-calendar-check-o", c: "\uf274"},
{n: "fa-industry", c: "\uf275"},
{n: "fa-map-pin", c: "\uf276"},
{n: "fa-map-signs", c: "\uf277"},
{n: "fa-map-o", c: "\uf278"},
{n: "fa-map", c: "\uf279"},
{n: "fa-commenting", c: "\uf27a"},
{n: "fa-commenting-o", c: "\uf27b"},
{n: "fa-houzz", c: "\uf27c"},
{n: "fa-vimeo", c: "\uf27d"},
{n: "fa-black-tie", c: "\uf27e"},
{n: "fa-fonticons", c: "\uf280"}
];
})();
File di atas berisi objek (instance dari sebuah fungsi). Objek ini melakukan pemanggilan fungsi
tabris.app.registerFont('FontAwesome', './res/font/fontawesome-webfont.ttf#'+this.font);
sehingga Anda harus memastikan bahwa nama file dan struktur folder benar-benar sesuai dengan yang ada pada kode di atas.
Kode selanjutnya adalah fungsi fa( ) yang menerima parameter string, yang kemudian memeriksanya dan mengganti class-class ikon FontAwesome dengan karakter ikon yang sesuai. Perhatikan bahwa kode ret = ret.split('{'+glyph.n+'}').join(glyph.c); memerlukan kurung kurawal untuk menandai class ikon, contoh:
fa-mapharus ditulis{fa-map}fa-cogharus ditulis{fa-cog}
Maksud konvensi penulisan ini agar class yang direplace menjadi karakter icon hanya class yang benar-benar akan direplace, dan menghindari proses replace pada string yang kebetulan berisi teks yang sama dengan nama class. Dengan konvensi ini, developer dapat membuat string seperti berikut:
let Teks = 'Class fa-hourglass akan menghasilkan icon {fa-hourglass}';
Selanjutnya untuk diperhatikan, setiap widget/komponen UI yang menggunakan utilitas ini harus menggunakan font FontAwesome untuk property Text-nya:
new TextView({
right: 10, centerY: 0, width: 140,
font: 'bold 12px FontAwesome',
textColor: '#212121'
text: TabrisFontAwesome.fa(
'Class fa-hourglass akan menghasilkan icon {fa-hourglass}'
);
});
Kode Utama
Setelah kita siapkan utilitas, mari kita buka file app.js dan ganti isinya dengan kode berikut:
const {
NavigationView,
Page,
CollectionView,
Composite,
TextView,
ui
} = require('tabris');
// Include utilitas:
const TabrisFontAwesome = require('./TabrisFontAwesome');
let navigationView = new NavigationView({
left: 0, top: 0, right: 0, bottom: 0
}).appendTo(ui.contentView);
let page = new Page({title: 'FontAwesome Icons'}).appendTo(navigationView);
let glyphs = TabrisFontAwesome.glyphTable;
new CollectionView({
left:0, top:0, bottom:0, right:0,
cellHeight: 48,
itemCount:glyphs.length,
createCell: function(){
let cell = new Composite();
let f = '14px '+TabrisFontAwesome.font;
new Composite({
id: 'garis',
left: 0, right: 0, bottom: 0, height: 1,
background: '#e7e7e7'
}).appendTo(cell);
new TextView({
id: 'glyph',
alignment: 'right',
right: 10, centerY: 0, width: 140,
font: f,
textColor: '#212121'
}).appendTo(cell);
new TextView({
id: 'name',
left: 10, right: ['prev()', 10], centerY: 0,
font: f,
textColor: '#212121'
}).appendTo(cell);
return cell;
},
updateCell: function(cell, index){
let glyph = glyphs[index];
cell.apply({
'#name': {text: glyph.n},
'#glyph': {text: TabrisFontAwesome.fa('{'+glyph.n+'}')}
});
},
}).appendTo(page);
Menjalankan Aplikasi
Selanjutnya, dari folder utama projek, buka terminal/command prompt dan jalankan perintah
tabris run ios|android
Alternatifnya, bisa juga Anda jalankan tabris serve -w dan gunakan Tabris Developer App untuk menjalankan aplikasi.
Berikut tampilan projek di atas:
Selamat berkreasi!
