Page 1 of 2 12 LastLast
Results 1 to 10 of 15

Thread: Panel zimlet to display a list of links

  1. #1
    Join Date
    Mar 2011
    Posts
    39
    Rep Power
    4

    Default Panel zimlet to display a list of links

    Hi!

    I would like to develop a zimlet, that would display a list of links in the left panel, below the "Zimlets" section.

    This zimlet would not be even visible within the "Zimlets section", but would only provide content, similar to calendar view, which is displayed at the bottom of the left pane.

    How would I got about implementing this type of zimlet? I guess this is not a regular panel zimlet?

    Thanks!
    --
    Zimbra 7.1.2 GA NETWORK

  2. #2
    Join Date
    Jul 2012
    Location
    Algiers
    Posts
    55
    Rep Power
    3

    Default

    Hi. Try to look in zimbra's own javascript source code to see how the folders, tags, zimlets and mini-calendar panels are implemented.

    It's dangerous to go alone, take this : Zimlet JavaScript API Reference - ZmAppViewMgr

  3. #3
    Join Date
    Mar 2011
    Posts
    39
    Rep Power
    4

    Default

    Hi!

    Sorry for a late reply, I did not get the subscription message that a reply was posted. I'll have a look at the provided docs.

    Thank you!

    Regards,
    Miha.
    --
    Zimbra 7.1.2 GA NETWORK

  4. #4
    Join Date
    Mar 2011
    Posts
    39
    Rep Power
    4

    Default

    So, I dug around to see what I can acomplish. I played a little, but I'm afraid I'm not playing it right.

    var tree = appMgr.getCurrentViewComponent(ZmAppViewMgr.C_TREE );
    var headerDataId = appCtxt.getOverviewId([this.containerId, 'Links']);
    var headerParams = {label: 'Links', icon: "Zimlet", dataId: headerDataId, className: 'ZmOverviewZimletHeader'};
    tree._addSection(headerParams, null, {})
    So this adds a new section, but there are a couple of problems.

    1) I'm using _addSection, which is (sort of) private
    2) When right clicking this section, I get (undesired) context-menu 'Mark all as read'
    3) I'd like to customize the icon shown (can I just provide icon in the zimlet resource and write css to customize <div class="ImgCustomicon"></div>?
    4) Or should I use DwtComposite directly (something like var view = new DwtComposite(this.getShell()); and then add this view as section?)

    Thanks,
    Miha.
    --
    Zimbra 7.1.2 GA NETWORK

  5. #5
    Join Date
    Jul 2012
    Location
    Algiers
    Posts
    55
    Rep Power
    3

    Default

    1) My point of view is that it's ok to use it because looking at how the GUI is implemented in Zimbra you can tell they didn't want you to add anything other than zimlets on the left panel. For example, the ZmAppViewMgr has a tree and a treefooter properties which documentation says :

    tree: displays folders, saved searches, and tags
    tree footer: displays mini-calendar (initially hidden)
    So they're being very specific and limited in what the GUI should contain, I can infer from that they didn't provide any public method or API to create new sections.

    If you plan to inherit a zimbra function, beware of the method names though : I have spent hours and hours debugging my zimlet and didn't find any flaw in my code, except that I found out (3 days later) that I was overriding a base function method in my own function, and that was causing zimbra to crash at a non deterministic point, which was very hard to debug. Add into that the asynchronus calls when you're using an interactive debugger that jumps from weired locations to other weired locations and you're assured to have lotsafun (see [LA] How to avoid name collisions ? : learnprogramming for a reddit post explaining what happend in more details).

    In my opinion what Zimbra should have done is prefixing their methods with Z_ or whatever, so that I don't have to prefix mine, because that's what I'm actually doing when defining methods inside a function that inherits a zimbra function to avoid name collisions.


    2) For the context-menu at right-click, try to figure-out what's the function that is called when you right-click on it (maybe grep the source files for of the tree function if that's what you're working on ?) I'll bet it something like onClick or onSingleClick or singleClicked something like that.

    3)

    var headerParams = {label: 'Links', icon: "Zimlet", dataId: headerDataId, className: 'ZmOverviewZimletHeader'};
    I suppose if you change the icon parameter in there from Zimlet to MyIcon, you can provide a ImgMyIcon class in a css file and see if that changes anything ?

    4) I really don't know about this, give it a try if that doesn't take too much time ?
    Last edited by ychaouche; 10-11-2012 at 02:06 AM. Reason: prefix

  6. #6
    Join Date
    Mar 2011
    Posts
    39
    Rep Power
    4

    Default

    Hi ychaouche!

    I'll have a go with custom icons, etc. As for the customization I guess you're right. They surely seem that they don't want us to extend this part of the screen.

    So far, I've come up with this:
    var appMgr = appCtxt.getAppViewMgr();
    var tree = appMgr.getCurrentViewComponent(ZmAppViewMgr.C_TREE );
    var controller = new ZmOverviewController(tree);
    var overview = controller.createOverview({
    id: 'links',
    parent: tree,
    showUnread: false,
    showNewButtons: false,
    noTooltips: true
    });
    // this moves the overview to the left a bit, so it is aligned with "Zimlets". It does not have the same styling though (gradient background)
    overview.setClassName('ZmOverviewSection');

    // tree that contains links
    var linkTree = new DwtTree({
    parent: overview,
    style: DwtTree.MULTI_STYLE,
    });

    // hide border which seems to be the default
    linkTree.getHtmlElement().style.border = "none";

    var treeStartItem = new DwtTreeItem({
    parent: linkTree,
    text: 'Links',
    selectable: true
    });
    treeStartItem.showExpansionIcon(true);

    var subItem1 = new DwtTreeItem({
    parent: treeStartItem,
    text: 'Povezava 1',
    selectable: true
    });
    subItem1.addListener(
    DwtEvent.ONCLICK, function() {
    console.log('click');
    console.log(arguments);
    },
    1
    );
    Now, apart from styling, event listener does not work.

    Does anybody have an idea why it does not work? I even tried encapsulating it in AjxListener. If I inspect the object (Chrome inspector) I can see that the listener is registered and I can also execute it manually: subItem1._eventMgr._listeners['onclick']._array[0].func().

    It just won't be called when clicking on the item.
    --
    Zimbra 7.1.2 GA NETWORK

  7. #7
    Join Date
    Jul 2012
    Location
    Algiers
    Posts
    55
    Rep Power
    3

    Default

    I often got caught with the AjxListener thing.

    Let's get rid of the dumb mistakes I often do :

    1/ Make sure you have a new keyword before the AjxListner constructor
    2/ If you want to pass a function, then just pass it as first argument
    3/ If however you want to pass a method, make sure you pass the object containing that function first, then the method.

    So for example :

    Code:
    something.addListener(new AjxListener(this,this._someMethod,arguments_array));
    Note however the this._someMethod will receive arguments not as an array but as individual arguments so beware of this.

  8. #8
    Join Date
    Mar 2011
    Posts
    39
    Rep Power
    4

    Default

    Hi!

    I don't think AjxListener is the case (could be wrong thoug). I've tried it like this:
    Code:
        subItem1.addListener(
            DwtEvent.ONCLICK, 
            new AjxListener(function() {
                console.log('click');
                console.log(arguments);
            }, this, {})
        );
    And also without AjxListener, with just a plain function (subItem1.addListener(DwtEvent.ONCLICK, function() { });

    I suppose this could have something to do with DwtTreeItem?

    Regards,
    Miha.
    --
    Zimbra 7.1.2 GA NETWORK

  9. #9
    Join Date
    Mar 2011
    Posts
    39
    Rep Power
    4

    Default

    The following method, works.
    Code:
    linkTree.addSelectionListener(new AjxListener(function() { console.log('click'); console.log(arguments);}, null, {}));
    So you obviously need to bind to tree, and then filter in this function for clicks. Seems awkward, but doable nontheless.
    --
    Zimbra 7.1.2 GA NETWORK

  10. #10
    Join Date
    Mar 2011
    Posts
    39
    Rep Power
    4

    Default

    In the mean time (problems with two events firing from a single click) I solved it by setting the content of the tree item to <a href="http://www.zimbra.com/forums/zimlets/..."> and that works.
    --
    Zimbra 7.1.2 GA NETWORK

Similar Threads

  1. installed zimlet doesn't appear in panel
    By Jignesh in forum Installation Help
    Replies: 0
    Last Post: 02-27-2012, 09:50 PM
  2. Admin panel dont display deferred mail
    By section1 in forum Administrators
    Replies: 5
    Last Post: 11-03-2011, 06:32 PM
  3. Getting username in panel from zimlet
    By loocek in forum Zimlets
    Replies: 1
    Last Post: 07-27-2011, 12:06 PM
  4. Panel using an iFrame Example Zimlet
    By bku09 in forum Developers
    Replies: 1
    Last Post: 04-18-2010, 06:53 PM
  5. Changing the label of the zimlet in the zimlet panel
    By bogdan.mocanu in forum Zimlets
    Replies: 1
    Last Post: 08-12-2008, 04:07 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •