1

私は最近、app2sdk を使用すると、いくつかのfontawesomeフォントにアクセスできることを発見しました。たとえば、ここではそれらを使用してラリーグリッドにトレンドの矢印を表示しています。

ここに画像の説明を入力

これは、フォントのようにこれらのアイコン (この例では色) を簡単にスタイル設定できるため、どの代替手段よりもはるかに簡単でした。また、すぐに使用できる便利なアイコンが多数用意されています。

しかし、この機能を使用するのは賢明でしょうか? この機能は rc2 では機能していますが、rc1 では機能していませんでした。どこにも文書化されていないと思います。SDK の将来のリリースで機能し続ける可能性があるかどうか、誰か知っていますか?

また、すべてのアイコンが利用できるわけではありません。これは Rally で定期的に更新されますか?

4

1 に答える 1

2

Entypoに基づいた Rally アイコンがあります。これは進行中の作業であるため、フォントは将来変更される可能性がありますが、Rally 独自のセットであり、すべての Entypo アイコンが使用できるわけではありません。

次のカスタム アプリを実行すると、AppSDK2 の特定のリリースで使用できる「Rally」フォント ファミリのアイコンをプログラムで確認できます。

<!DOCTYPE html>
<html>
<head>
    <title>FontExplorer</title>

    <script type="text/javascript" src="/apps/2.0rc2/sdk.js"></script>

    <script type="text/javascript">
        Rally.onReady(function () {
                Ext.define('CustomApp', {
    extend: 'Rally.app.App',
    componentCls: 'app',
    launch: function() {
        var fontStyles = _.find(document.styleSheets, function(styleSheet) {
            return styleSheet.href.match(/rui-fonts\.css$/);
        });
        var iconRules = _.filter(fontStyles.rules, function(rule) { 
            return rule.selectorText && rule.selectorText.match(/\.icon\-\w+\:\:before/) && rule.style[0] === 'content';  
        });

        this.add(_.map(iconRules, function(cssRule) {
            var iconName = cssRule.selectorText.substring(1).replace('::before', '');
            return {
                xtype: 'component',
                html: '<span style="font-family:courier" >' + iconName + '</span>',
                style: {
                    fontSize: '20px',
                    display: 'block'
                },
                cls: iconName,
                listeners: {
                    afterrender: function() {
                        if(this.getEl().getStyle('fontFamily') !== 'Rally') {
                            this.destroy();
                        }
                    }
                }
            };    
        }, this));
    }
});


            Rally.launchApp('CustomApp', {
                name:"FontExplorer",
           parentRepos:""
            });

        });
    </script>


    <style type="text/css">
        .app {
     /* Add app styles here */
}

    </style>
</head>
<body></body>
</html>
于 2014-01-30T16:52:59.833 に答える