1. #1
    Sencha User
    Join Date
    Aug 2011
    Location
    United Kingdom
    Posts
    8
    Vote Rating
    0
    craigwalshuk is on a distinguished road

      0  

    Default Overriding the applyHtml function in Architect

    Overriding the applyHtml function in Architect


    I am displaying a list of tweets from a particular user or hash tag when a button is pressed:

    Code:
    this.getSocialNavigation().push({
        xtype: 'list',
        id: 'TweetList',
        itemTpl: [
        '<img src="{profile_image_url}" class="avatar" />',
        '<div class="tweet">',
        '<span class="posted">{created_at:timeAgoInWords}</span>',
        '<h2>{from_user}</h2>',
        '<div class="tweettext">{text}</div>',
        '</div>'
        ],
        store: 'Tweets',
        title: 'Tweet List'
    });
    but the links, hashtags and usernames are just coming back as text, so I had a look at the touchtweets example in the sdk and found the TweetListItemText.js file that is overriding the applyHtml function to covert them:

    Code:
    /**
     * This is the component used in TweetListItem's to display the text of a tweet.
     *
     * This needs to be special so we can:
     *  - linkify URLs in the tweet
     *  - Wrap usernames with spans
     *  - Wrap hashtags with spans.
     */
    Ext.define('Twitter.view.TweetListItemText', {
        extend: 'Ext.Component',
    
    
        /**
         * We simply override the applyHtml method, which is called when the {@link #html} configuration is changed.
         * We run a few regexs and try and match the URLs, hashtags or usernames, and then return the resulting value
         * so the {@link #html} configuration can be updated (updateHtml).
         */
        applyHtml: function(html) {
            // replace URLs with proper tags
            html = html.replace(/(http:\/\/[^\s]*)/g, "<a class=\"link\" target=\"_blank\" href=\"$1\">$1</a>");
    
    
            // usernames
            html = html.replace(/(^|\s)@(\w+)/g, "$1<span class=\"username\">@$2</span>");
    
    
            // hashtags
            html = html.replace(/(^|\s)#(\w+)/g, "$1<span class=\"hashtag\">#$2</span>");
    
    
            return html;
        }
    });
    How do I implement the above in Architect?

  2. #2
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,445
    Vote Rating
    129
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    add a basic function and name it applyHtml
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Location
    United Kingdom
    Posts
    8
    Vote Rating
    0
    craigwalshuk is on a distinguished road

      0  

    Default


    Hi Aaron thanks for your reply.

    Here is what I have on the button tap action in my controller that doesn't seem to work:

    Code:
    this.getSocialNavigation().push({
        xtype: 'list',
        id: 'tweetList',
        store: 'Tweets',
        title: 'Tweet List',
        
        itemTpl: [
        '<img src="{profile_image_url}" class="avatar" />',
        '<div class="tweet">',
        '<span class="posted">{created_at:timeAgoInWords}</span>',
        '<h2>{from_user}</h2>',
        '<div class="tweettext">{text}</div>',
        '</div>'
        ],
        
        applyHtml: function(html) {
            html = html.replace(/(http:\/\/[^\s]*)/g, "<a class=\"link\" target=\"_blank\" href=\"$1\">$1</a>");
            html = html.replace(/(^|\s)@(\w+)/g, "$1<span class=\"username\">@$2</span>");
            html = html.replace(/(^|\s)#(\w+)/g, "$1<span class=\"hashtag\">#$2</span>");
            
            return html;
        }
    });
    I've also tried putting just the applyHtml section above as a function in the Application section, a function in the launch section and as a function in the controller, all with no success.

    Any further help is greatly appreciated.

    Kind Regards,
    Craig Walsh.

  4. #4
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,445
    Vote Rating
    129
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Sencha Touch doesn't allow you to pass in functions to override existing members at the instance level. You must override these at the class level.

    If you move the applyHtml from the .push() call to the actual subclass itself, this will work.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  5. #5
    Sencha User
    Join Date
    Aug 2011
    Posts
    206
    Vote Rating
    8
    allisterf is on a distinguished road

      0  

    Default


    Could do with some help with this too.

    Not sure I'm going around this the right way:

    I used Architect to create a new component based on Ext.dataview.List - so now I have defined a TweetList component, which extends the Ext.dataview.List, with the code:

    Code:
    Ext.define('TSApp.view.TweetList', {
        extend: 'Ext.dataview.List',
    
        config: {
            itemTpl: [
                '<div>List Item {string}</div>'
            ]
        }
    
    });
    I assume from your instructions that I need to add the applyHtml function into that component? How do you do that, as it's read only? Or am I doing this completely wrong?

    In the event that the answer is something along the lines of 'create an override', could you explain that with an example, as it's not that clear to me...

    Thanks for all your help,
    Allister

  6. #6
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,445
    Vote Rating
    129
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Activate your top level component that you want to add the applyHtml function to.

    Drag the Basic Function from the toolbox (Under Behaviors) to the top level component.
    OR
    Double click the basic function with the top level component activated
    OR
    Search for "Functions" in the property grid and click the +

    After adding the function configure the name to applyHtml and the proper params.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  7. #7
    Sencha User
    Join Date
    Aug 2011
    Posts
    206
    Vote Rating
    8
    allisterf is on a distinguished road

      0  

    Default


    Hi Aaron - thanks for the ponters. Still not getting it to work though.

    What I'm looking for is for the links in the twitter feed list to be actual links.

    Thelist is a top level component and my code is:
    Code:
    Ext.define('MyApp.view.TweetPanel', {
        extend: 'Ext.dataview.List',
        alias: 'widget.tweets',
    
        config: {
            height: 700,
            showAnimation: 'slideIn',
            styleHtmlContent: true,
            width: 300,
            hideOnMaskTap: true,
            modal: true,
            scrollable: 'vertical',
            store: 'TweetStore',
            cls: [
                'blackpanelbg'
            ],
            itemTpl: [
                '<div class ="tweetpic">',
                '<img src="{profile_image_url}" />',
                '</div>',
                '',
                '<div class="tweet">',
                '<span class="posted">{created_at:timeAgoInWords}</span>',
                '<div class="user">',
                '{from_user}',
                '</div>',
                '<p>{text}</p>',
                '</div>'
            ],
            plugins: [
                {
                    type: 'listpaging'
                },
                {
                    type: 'pullrefresh'
                }
            ]
        },
    
        applyHtml: function(html) {
            html = html.replace(/(http:\/\/[^\s]*)/g, "<a class=\"link\" target=\"_blank\" href=\"$1\">$1</a>");
            html = html.replace(/(^|\s)@(\w+)/g, "$1<span class=\"username\">@$2</span>");
            html = html.replace(/(^|\s)#(\w+)/g, "$1<span class=\"hashtag\">#$2</span>");
    
            return html;
    
        }
    
    });
    The panel is a slide-in, but otherwise nothing unusual. I added the basic function to the list and set the function name and params, then added my replace functions.

    Any idea where it might be going wrong?

    Allister

Thread Participants: 2

Tags for this Thread