News Reader

[SegFault]

Hello,

I love Tine20 and I would like to manage my RSS in tine. I see no plan to support it, but I have plenty of free time and some programming skill.
To introduce myself, I'm a Java developer since the last 7 years. I'm ok with php and html, already did some basic css hacking. I never used the Zend framework (but for what I read, I understand the underlying concept), I never used ExtJS, and I did some really basic javascript a long long time ago (I mean, when javascript was v1.2). Also, I'm french, I don't speak german, and my english is far from perfect. Sorry about that, feel free to correct me, I like to improve my skills.

By now, I read all documentation on the wiki. And come here to take advice from tine development team.

So I plan to do a news reader, for first a milestone, I target :
- RSS 2.0 support (as specified here : http://www.rssboard.org/rss-specification )
- Interface to subscribe/unsubscribe to feed
- Interface to list and read items
- Support of user's category (Feed hierarchy/organisation)
- Read/Unread status of feed item.
- OPML Import/Export

This mean : no automatic syncing, no caching/persistence of feed info and feed item. Well in fact no extra, but all what is needed to have a functional news reader.

About the interface, a classic 3 pane presentation :

As widescreen become more and more widespread, some people prefer 3 vertical pane which is also an option, I'm very open about modifying this.

Well, I have 2 questions at this time :
- Naming capitalization : does the application name should be NewsReader (like ExempleApplication, RequestTracker), or Newsreader (like Addressbook, Filemanager) (or another suggested name)
- Is there any document which describe your conception of "quality of code" ?

Thanks for reading, I'm waiting for any suggestion, remark, question, encouragement

[SegFault]

To get better understanding of Tine20 application, I wanted to play around with the ExampleApplication.

On my dev box, I extract the trunk from SVN. Do the setup, and on final step install the ExampleApplication. But it is in a strange state after installation :
It is installed, his status is "uptodate". But the activated column say "no".

In my developer experience, I often see "sample for new dev" are easily outdated (no time, no test, etc).

So I tried to use the Addressbook as example. But some way to do things seems to be improved now. I mean, in Addressbook/Frontend/Json.php, the saveContact function seems to be written at a time when Tinebase_Frontend_Json_Abstract->_save() function did not exist.

Well, here is my question : is there any "simple" application that I can took as example which use today Tine20 best API/practice ?

Another question : is there any generated documentation about js ?

[ph_il]

first of all: good idea, we are looking forward to see a news reader in tine ...

i will now try to answer your questions:

- Naming capitalization : does the application name should be NewsReader (like ExempleApplication, RequestTracker), or Newsreader (like Addressbook, Filemanager) (or another suggested name)

this is up to you. there is no styleguide for this at the moment. i would slightly prefer "Newsreader".

- Is there any document which describe your conception of "quality of code" ?

for php code we use the zend coding standard: http://framework.zend.com/manual/1.11/e ... ndard.html
for javascript we use the extjs coding standard (but i could not find a document in the web describing this).

But it is in a strange state after installation :
It is installed, his status is "uptodate". But the activated column say "no".

newly installed applications are inactive by default. go to admin/applications to activate them.

In my developer experience, I often see "sample for new dev" are easily outdated (no time, no test, etc).

i checked the example app a few weeks ago. it should be mostly uptodate. i would recommend starting with it. there is a howto in the wiki (this one could be a little bit outdated):
http://www.tine20.org/wiki/index.php/De ... ationHowto

Another question : is there any generated documentation about js ?

we didn't do that for a while but you can try http://code.google.com/p/ext-doc/ and tell us your experience with it.

happy coding!

[SegFault]

Well ext-doc failed to generate documentation (NullPointerException, I tried to take a look at source, but svn trunk did not compile at all, and can't find any tag or branch matching stable realease).

I tried jsdoc-toolkit (http://code.google.com/p/jsdoc-toolkit/) and It worked. But, most of method are not recognized. It give at least a class list, hierarchy and which file contains it. On some class, we have some method/property.

Under windows, working folder jsdoc-toolkit, this is the command line I used :
java -jar jsrun.jar app/run.js -r=10 F:\Dev\data\workspaces\workspace-tine20\tine20\
Tinebase\js\ -a -p -d=doc -t=templates\jsdoc

The result is 4Mb, so I can't attach it to the post.

More information about "how to document this pattern" is avaible here : http://code.google.com/p/jsdoc-toolkit/wiki/CookBook
-----------------------------------

By now, I have a little code base which work on a cli frontend (subscribe, unsubscribe, list feeds, list items of a feed).

About the Js frontend, well I'm learning how it works by reading code, it's hard and slow. I feel a little out of default framework behavior. I understand things like that, correct me if I'm wrong, by default :
-TreePane manage main record container.
-CenterPane manage Application main record type.
-NorthPane contains toolbar and filter, mainly populated by magic voodoo (well it lost his magic since I trace what happen, but at first run, it was magic;)) from the center pane (Tine.widgets.grid.GridPanel to be exact).

In news reader, main record (at this time the only record type) is a Feed. And my mockup show them in TreePane. Toolbar is mainly about feed. But, filter is about Item, CenterPane too.

So I can't rely on magic js voodoo and need customization of each panel. ExtJS is well documented and step by step, I find my way trough it. But the interface is not an ExtJS only things, Tine20 add it's own level of API in the stack. I fear to move away from correct tine20 to do things, missing class, standardized component, etc.

When someone of Tine20's team have little time, it could be great to fill the wiki with an architectural overview of main class/component interaction and purpose about the JS part of Tine20 framework.

Anyway, I think I'll can submit a first implementation next week for a first code review.

[robert.lischke]

hi there,

and welcome to Tine 2.0 -- really appreciate your efforts!

Have you thought about some kind of groupware-feature for your RSS-reader? The first idea that comes to my mind is of course sending the item (link to webpage) via EMail -- but there might be others. It'd be great to use the collaborative approach of Tine 2.0 in this reader!

About the interface, a classic 3 pane presentation :

As widescreen become more and more widespread, some people prefer 3 vertical pane which is also an option, I'm very open about modifying this.

That's a Balsamiq-Mockup, am I right? If you attach the .xml or .bmml here I can easily add some suggestions (e.g. order of buttons on the top, proper tree-view of feeds in the left pane)

Looking forward,


Rob

[ph_il]

hi segfault,

a ok, jsdoc-toolkit is the one. should give this a try soon.

But, most of method are not recognized

yeahh, the jsdoc is sparse atm.

The result is 4Mb, so I can't attach it to the post.

no need to do this. i'll do a doc run on my own.

-TreePane manage main record container.
-CenterPane manage Application main record type.
-NorthPane contains toolbar and filter, mainly populated by magic voodoo (well it lost his magic since I trace what happen, but at first run, it was magic;)) from the center pane (Tine.widgets.grid.GridPanel to be exact).

that is exactly the way we do it. i might add that we display and manage the favorites in the west (tree) panel, too.

in your newsreader, the containers are the folders and subscribed feeds. but you could have a look at the email js code, there we have email accounts and email folders.

When someone of Tine20's team have little time, it could be great to fill the wiki with an architectural overview of main class/component interaction and purpose about the JS part of Tine20 framework.

perhaps you can join the tine IRC channel and ask questions there. i think at least one of the devs is on at almost any time ...

Anyway, I think I'll can submit a first implementation next week for a first code review.

looking forward to it!

could you please sign our CLA? then we can include your application in the tine svn and give you write permissions.

edit: IRC channel -> #tine20

[SegFault]

Hi,

Once again, thanks for your answers and support

I begin to make my way trough the framework too and success to override a few things in mainscreen, westpanel, toolbar, etc.
Now I have more question about the interface, specially in the west panel.

We can imagine corporate wide subscription, personal feeds list, and shared feeds list, so Feeds are in a tine20 container. To use the standard TreePanel in west pane to display container seems to be a good idea.
But, from usability standpoint, if I use additionnalItem in west pane to add a tree of feeds, it means to have the container AND container's contents in the same pane, it's doesn't feel like a so good idea : in tine20, users are used to see container selection => effect on the center panel. More globally, users are used to see selection => effect on another pane. But they are not used to selection => change in another tree in the pane itself.

I can see 3 solutions :
A - Do some hack in the TreePanel and add feeds as child item of container.

Pro: It make sense as feeds are displayed in their container.
Con: Out of standard container tree display ; Make tree very deep, painfull to deploy for users

B - Horizontal pane

Pro: The upper TreePane is the standard one. Compact layout.
Con: User have to notice the different panel and understand that the the action/read flow is upper tree, bottom tree, then center panel.

C - Vertical pane

Pro: The left TreePane is the standard one, action/read flow is simply left to right
Con: waste of space.

My preference go to the option B. What's yours ?

PS: I attached the original balsamiq mockup file.

[ph_il]

could you please sign our CLA? then we can include your application in the tine svn and give you write permissions.

all core developers think the rss reader is a nice idea and fits very good in tine 2.0. if the development is done in the svn from early on, we can support you best.

We can imagine corporate wide subscription, personal feeds list, and shared feeds list, so Feeds are in a tine20 container. To use the standard TreePanel in west pane to display container seems to be a good idea.
But, from usability standpoint, if I use additionnalItem in west pane to add a tree of feeds, it means to have the container AND container's contents in the same pane, it's doesn't feel like a so good idea : in tine20, users are used to see container selection => effect on the center panel. More globally, users are used to see selection => effect on another pane. But they are not used to selection => change in another tree in the pane itself.

A - Do some hack in the TreePanel and add feeds as child item of container.
B - Horizontal pane
C - Vertical pane

we plan to add subfolders to the default containter tree panel in the next release. we will start working on a filemanager very soon and we need that there as well. that means, we would prefer variant A ...
but if you do not want to do all the work with the tree panel and backend, you can start with our standard container tree (that supports only 1 level atm) and pimp this later.
i think we start with the subfolders in the next weeks but need to do some conception work first.

edit: just updated the task in the tracker -> http://www.tine20.org/bugtracker/view.php?id=2072

[SegFault]

I'm stuck. Maybe (probably) it's a stupid little thing I missed, but I've spent a large part of my night on it checking again and again the code, and didn't find what is causing my problem.

The context : I try to have subfolder in container.
The problem : The parameter in the json frontend is always empty.

So this is my JS code :

Code: Select all

Tine.Newsreader.TreePanel = Ext.extend(Tine.widgets.container.TreePanel, {
   id : 'Newsreader_Tree',
   filterMode : 'filterToolbar',
   recordClass : Tine.Newsreader.Model.Feed,

   /**
    * Add load support for container
    *
    * @todo Use the new API when avaible(http://www.tine20.org/bugtracker/view.php?id=2072)
    * @param node
    * @returns {___anonymous2088_2167}
    */
   onBeforeLoad : function(node) {
      var params = Tine.Newsreader.TreePanel.superclass.onBeforeLoad.call(
            this, node);

      if (node.attributes.account_grants) { // Assume this node is a container
         params = {
            method: 'Newsreader.getFeeds',
            testVar: 'Test value'
         };
      }

      return params;
   },

   /**
    * Copy of superclass method to override the leaf value.
    *
    * @todo Use the new API when avaible(http://www.tine20.org/bugtracker/view.php?id=2072)
    * @param attr
    */
   onBeforeCreateNode : function(attr) {
      // Level 1
      if (attr.accountDisplayName) {
         attr.name = attr.accountDisplayName;
         attr.path = '/personal/' + attr.accountId;
         attr.id = attr.accountId;
      }

      if (!attr.name && attr.path) {
         attr.name = Tine.Tinebase.container.path2name(attr.path,
               this.containerName, this.containersName);
      }

      if (!attr.feed) {
         Ext.applyIf(attr, {
            text : Ext.util.Format.htmlEncode(attr.name),
            qtip : Ext.util.Format.htmlEncode(attr.name),
            leaf : false,
            allowDrop : !!attr.account_grants
                  && attr.account_grants.addGrant
         });
      } else {
         Ext.applyIf(attr, {
            text : Ext.util.Format.htmlEncode(attr.title),
            qtip : Ext.util.Format.htmlEncode(attr.description),
            leaf : true,
            allowDrop : false
         });
      }

      // copy 'real' data to container space
      attr.container = Ext.copyTo({}, attr, Tine.Tinebase.Model.Container
            .getFieldNames());
   }
});


The method in json frontend :

Code: Select all

public function getFeeds($testVar)
{
...
}


Remember the problem : $testVar never had a value. In fact, if I go back in php callstack, the raw data in the request does not have param. The method is ok, and my leaf appear. But I can't use a parameter, so to retrieve feed of the correct container will be an issue.

I've read many times Tinebase/js/widgets/container/ContainerTree.js and Tinebase/js/widgets/tree/Loader.js
I tried to debug javascript too (in chrome), but the onBeforeLoad seems called from an ExtJS closure (if I correctly understand javascript, quit not sure for now), in the js call stack, I saw a call from the ExtJS loader himself, and the getParams seems in a Ext.Ajax.request(...), so I said to myself "we are in pure ExtJS loader call stack, nothing is modifying my data after that", but after taking a look at request in php, I said to myself "hum, someone is between me and the final request".

It's where I am now, I think I missed a piece of code anywhere, the one who "extract" the value of the "method" property and forget the other. But I promess I have searched a lot for it. So if any of you can give me a clue, it will be a great help.

[ph_il]

i think you just need to add a phpdoc block to your function, like this:

Code: Select all

/**
 * get feeds
 *
 * @param string $testVar
 */
public function getFeeds($testVar)
{
...
}

because we use reflection to get the params of the json API functions.