You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@archiva.apache.org by Olivier Lamy <ol...@apache.org> on 2011/10/26 14:31:01 UTC

UI refactoring

Hello Folks,

As now we have most of the archiva services available tru REST, this
will be more easy.
My first plan is to write a struts2 theme based on jquery and
bootstrap css (this theme will be called jqboot).
The goal is to have a shareable theme (if some folks want to use it in
their applications)
Note this means using jquery for various redback stuff (users list
etc..) and in some part of ui (ajax tabs in artifact info display
etc....)

Let me know your opinion.

Thanks,
-- 
Olivier Lamy
Talend : http://talend.com
http://twitter.com/olamy | http://linkedin.com/in/olamy

Re: UI refactoring

Posted by Olivier Lamy <ol...@apache.org>.
Perso, I'd like to avoid using a new web framework.
Even if I like those frameworks which generates validation for us :-)

As the Archiva UI is not really complicated using a simple plain
html/javascript UI based on REST call could be nice/fast/simple.

Sure Vaadin helps a lot for complicated UI (which will be the case of
Kalumet) but I'm not sure about the performance especially at network
level.

2011/10/26 Jean-Baptiste Onofré <jb...@nanthrax.net>:
> Hi,
>
> In Karaf, we're currently working on a new sub-project using Apache
> Wicket/Pax-Wicket.
>
> On ACE, we use Vaadin (it's possible to use Vaadin and Wicket together).
> I like Vaadin as it allows to write directly in Java (it's an approach
> similar to Echo framework).
> Vaadin will certainly the framework that will be used in Apache Kalumet, in
> replacement of the Echo2 one.
>
> Regards
> JB
>
> On 10/26/2011 02:31 PM, Olivier Lamy wrote:
>>
>> Hello Folks,
>>
>> As now we have most of the archiva services available tru REST, this
>> will be more easy.
>> My first plan is to write a struts2 theme based on jquery and
>> bootstrap css (this theme will be called jqboot).
>> The goal is to have a shareable theme (if some folks want to use it in
>> their applications)
>> Note this means using jquery for various redback stuff (users list
>> etc..) and in some part of ui (ajax tabs in artifact info display
>> etc....)
>>
>> Let me know your opinion.
>>
>> Thanks,
>
> --
> Jean-Baptiste Onofré
> jbonofre@apache.org
> http://blog.nanthrax.net
> Talend - http://www.talend.com
>



-- 
Olivier Lamy
Talend : http://talend.com
http://twitter.com/olamy | http://linkedin.com/in/olamy

Re: UI refactoring

Posted by Jean-Baptiste Onofré <jb...@nanthrax.net>.
Hi,

In Karaf, we're currently working on a new sub-project using Apache 
Wicket/Pax-Wicket.

On ACE, we use Vaadin (it's possible to use Vaadin and Wicket together).
I like Vaadin as it allows to write directly in Java (it's an approach 
similar to Echo framework).
Vaadin will certainly the framework that will be used in Apache Kalumet, 
in replacement of the Echo2 one.

Regards
JB

On 10/26/2011 02:31 PM, Olivier Lamy wrote:
> Hello Folks,
>
> As now we have most of the archiva services available tru REST, this
> will be more easy.
> My first plan is to write a struts2 theme based on jquery and
> bootstrap css (this theme will be called jqboot).
> The goal is to have a shareable theme (if some folks want to use it in
> their applications)
> Note this means using jquery for various redback stuff (users list
> etc..) and in some part of ui (ajax tabs in artifact info display
> etc....)
>
> Let me know your opinion.
>
> Thanks,

-- 
Jean-Baptiste Onofré
jbonofre@apache.org
http://blog.nanthrax.net
Talend - http://www.talend.com

Re: UI refactoring

Posted by Jean-Baptiste Onofré <jb...@nanthrax.net>.
knockoutJS looks interesting but I don't tried it yet.

Regards
JB

On 10/26/2011 03:58 PM, Emmanuel Venisse wrote:
> Hi Olivier,
>
> Do you know knockoutJS?
> http://knockoutjs.com/
>
> It's a good JS framework with data binding, With it it is easy to write UI
> with a Model-View pattern and a complete independence between JS and html.
>
> Emmanuel
>
> On Wed, Oct 26, 2011 at 2:31 PM, Olivier Lamy<ol...@apache.org>  wrote:
>
>> Hello Folks,
>>
>> As now we have most of the archiva services available tru REST, this
>> will be more easy.
>> My first plan is to write a struts2 theme based on jquery and
>> bootstrap css (this theme will be called jqboot).
>> The goal is to have a shareable theme (if some folks want to use it in
>> their applications)
>> Note this means using jquery for various redback stuff (users list
>> etc..) and in some part of ui (ajax tabs in artifact info display
>> etc....)
>>
>> Let me know your opinion.
>>
>> Thanks,
>> --
>> Olivier Lamy
>> Talend : http://talend.com
>> http://twitter.com/olamy | http://linkedin.com/in/olamy
>>
>

-- 
Jean-Baptiste Onofré
jbonofre@apache.org
http://blog.nanthrax.net
Talend - http://www.talend.com

Re: UI refactoring

Posted by Olivier Lamy <ol...@apache.org>.
Yup seen that but not yet tested :-).
I have to explore more the capabilities


2011/10/26 Emmanuel Venisse <em...@gmail.com>:
> Hi Olivier,
>
> Do you know knockoutJS?
> http://knockoutjs.com/
>
> It's a good JS framework with data binding, With it it is easy to write UI
> with a Model-View pattern and a complete independence between JS and html.
>
> Emmanuel
>
> On Wed, Oct 26, 2011 at 2:31 PM, Olivier Lamy <ol...@apache.org> wrote:
>
>> Hello Folks,
>>
>> As now we have most of the archiva services available tru REST, this
>> will be more easy.
>> My first plan is to write a struts2 theme based on jquery and
>> bootstrap css (this theme will be called jqboot).
>> The goal is to have a shareable theme (if some folks want to use it in
>> their applications)
>> Note this means using jquery for various redback stuff (users list
>> etc..) and in some part of ui (ajax tabs in artifact info display
>> etc....)
>>
>> Let me know your opinion.
>>
>> Thanks,
>> --
>> Olivier Lamy
>> Talend : http://talend.com
>> http://twitter.com/olamy | http://linkedin.com/in/olamy
>>
>



-- 
Olivier Lamy
Talend : http://talend.com
http://twitter.com/olamy | http://linkedin.com/in/olamy

Re: UI refactoring

Posted by Olivier Lamy <ol...@apache.org>.
Hello,
I have started some documentation (sources in module archiva-webapp-js/src/site)

Deployed http://people.apache.org/~olamy/archiva/doc/ref/1.4-M3-SNAPSHOT/archiva-web/archiva-webapp-js/

Let me know (as probably some stuff won't here :-) ).

2012/1/16 Olivier Lamy <ol...@apache.org>:
> 2012/1/16 Brett Porter <br...@apache.org>:
>>
>> On 13/01/2012, at 7:14 PM, Olivier Lamy wrote:
>>
>>> Hello,
>>> To follow up on this topic.
>>> It looks I have made some progress on this part :-).
>>>
>>> You can have a look at this capture: http://screencast.com/t/dEPpB3rzk
>>
>> Cool :)
> I hope :-).
> Note some nice other improvement with the coming tw bootstrap 2.0
>>
>>> Most of needed redback screen are implemented (still missing reset password).
>>> You can test on trunk running (on top directory): mvn tomcat:run -pl
>>> :archiva-webapp-js -am -Pjs -Pdev -am
>>> I have created a top jira entry
>>> http://jira.codehaus.org/browse/MRM-1497 (with sub task for each
>>> page/screen to rewrite). Do not hesitate to add if  I missed some.
>>
>> Is there a reason you created a new version? Should be part of 1.4 since it's on trunk, and maybe have ui-rewrite as a label?
>
> In fact I didn't know this label stuff :-)
>
>>
>>>
>>> So now I have to document how it works :-).
>>> Do you prefer wiki/confluence page or a something in the archiva web site ?
>>
>> Fine either way... "website" would mean part of the doxia site inside webapp-js, right? Last time we talked about this, Deng preferred confluence and I preferred the doxia site (more recently, I'm writing all this sort of thing in Markdown (either as a README.md, or as part of a doxia site since that works now). We should choose one and move the remaining docs there.
>>
>> Do you have a preference?
> I like the idea about having editable with vi :-)
> So using apt/xdoc looks fine.
>>
>> - Brett
>>
>> --
>> Brett Porter
>> brett@apache.org
>> http://brettporter.wordpress.com/
>> http://au.linkedin.com/in/brettporter
>> http://twitter.com/brettporter
>>
>>
>>
>>
>>
>
>
>
> --
> Olivier Lamy
> Talend: http://coders.talend.com
> http://twitter.com/olamy | http://linkedin.com/in/olamy



-- 
Olivier Lamy
Talend: http://coders.talend.com
http://twitter.com/olamy | http://linkedin.com/in/olamy

Re: UI refactoring

Posted by Olivier Lamy <ol...@apache.org>.
2012/1/16 Brett Porter <br...@apache.org>:
>
> On 13/01/2012, at 7:14 PM, Olivier Lamy wrote:
>
>> Hello,
>> To follow up on this topic.
>> It looks I have made some progress on this part :-).
>>
>> You can have a look at this capture: http://screencast.com/t/dEPpB3rzk
>
> Cool :)
I hope :-).
Note some nice other improvement with the coming tw bootstrap 2.0
>
>> Most of needed redback screen are implemented (still missing reset password).
>> You can test on trunk running (on top directory): mvn tomcat:run -pl
>> :archiva-webapp-js -am -Pjs -Pdev -am
>> I have created a top jira entry
>> http://jira.codehaus.org/browse/MRM-1497 (with sub task for each
>> page/screen to rewrite). Do not hesitate to add if  I missed some.
>
> Is there a reason you created a new version? Should be part of 1.4 since it's on trunk, and maybe have ui-rewrite as a label?

In fact I didn't know this label stuff :-)

>
>>
>> So now I have to document how it works :-).
>> Do you prefer wiki/confluence page or a something in the archiva web site ?
>
> Fine either way... "website" would mean part of the doxia site inside webapp-js, right? Last time we talked about this, Deng preferred confluence and I preferred the doxia site (more recently, I'm writing all this sort of thing in Markdown (either as a README.md, or as part of a doxia site since that works now). We should choose one and move the remaining docs there.
>
> Do you have a preference?
I like the idea about having editable with vi :-)
So using apt/xdoc looks fine.
>
> - Brett
>
> --
> Brett Porter
> brett@apache.org
> http://brettporter.wordpress.com/
> http://au.linkedin.com/in/brettporter
> http://twitter.com/brettporter
>
>
>
>
>



-- 
Olivier Lamy
Talend: http://coders.talend.com
http://twitter.com/olamy | http://linkedin.com/in/olamy

Re: UI refactoring

Posted by Brett Porter <br...@apache.org>.
On 13/01/2012, at 7:14 PM, Olivier Lamy wrote:

> Hello,
> To follow up on this topic.
> It looks I have made some progress on this part :-).
> 
> You can have a look at this capture: http://screencast.com/t/dEPpB3rzk

Cool :)

> Most of needed redback screen are implemented (still missing reset password).
> You can test on trunk running (on top directory): mvn tomcat:run -pl
> :archiva-webapp-js -am -Pjs -Pdev -am
> I have created a top jira entry
> http://jira.codehaus.org/browse/MRM-1497 (with sub task for each
> page/screen to rewrite). Do not hesitate to add if  I missed some.

Is there a reason you created a new version? Should be part of 1.4 since it's on trunk, and maybe have ui-rewrite as a label?

> 
> So now I have to document how it works :-).
> Do you prefer wiki/confluence page or a something in the archiva web site ?

Fine either way... "website" would mean part of the doxia site inside webapp-js, right? Last time we talked about this, Deng preferred confluence and I preferred the doxia site (more recently, I'm writing all this sort of thing in Markdown (either as a README.md, or as part of a doxia site since that works now). We should choose one and move the remaining docs there.

Do you have a preference?

- Brett

--
Brett Porter
brett@apache.org
http://brettporter.wordpress.com/
http://au.linkedin.com/in/brettporter
http://twitter.com/brettporter






Re: UI refactoring

Posted by Olivier Lamy <ol...@apache.org>.
Hello,
To follow up on this topic.
It looks I have made some progress on this part :-).

You can have a look at this capture: http://screencast.com/t/dEPpB3rzk
Most of needed redback screen are implemented (still missing reset password).
You can test on trunk running (on top directory): mvn tomcat:run -pl
:archiva-webapp-js -am -Pjs -Pdev -am
I have created a top jira entry
http://jira.codehaus.org/browse/MRM-1497 (with sub task for each
page/screen to rewrite). Do not hesitate to add if  I missed some.

So now I have to document how it works :-).
Do you prefer wiki/confluence page or a something in the archiva web site ?

2011/12/6 Olivier Lamy <ol...@apache.org>:
> 2011/12/6 Brett Porter <br...@apache.org>:
>> Haven't looked yet, but the tech sounds good.
>>
>> One question:
>>
>> On 06/12/2011, at 12:40 AM, Olivier Lamy wrote:
>>
>>>
>>> To handle karma on the ui, an attribute must be added in element which
>>> need roles.
>>> Sample:
>>> <li style="display: none" redback-permissions="{permissions:
>>> ['archiva-manage-users']}"><a href="#"
>>> onclick="displayUsersGrid()">User List</a></li>
>>>
>>
>> How does this work?
>
> Note it can be an array of permissions.
> After logging a function get user karma and check all element which
> have this attribute. If the user doesn't have at least one of the
> needed permissions the html element is hide.
>
> See https://fisheye.codehaus.org/browse/redback/redback/trunk/redback-integrations/redback-knockoutjs/redback-knockoutjs-example/src/main/webapp/js/main.js?r=1605&r=1606#to62
>  function decorateMenuWithKarma
>
> BTW permissions are checked again on rest call with the annotation
> mechanism described here:
> http://redback.codehaus.org/integration/rest.html
> ("PermissionInterceptor" section).
>
>>
>> - Brett
>>
>>
>> --
>> Brett Porter
>> brett@apache.org
>> http://brettporter.wordpress.com/
>> http://au.linkedin.com/in/brettporter
>>
>>
>>
>>
>
>
>
> --
> Olivier Lamy
> Talend: http://coders.talend.com
> http://twitter.com/olamy | http://linkedin.com/in/olamy



-- 
Olivier Lamy
Talend: http://coders.talend.com
http://twitter.com/olamy | http://linkedin.com/in/olamy

Re: UI refactoring

Posted by Olivier Lamy <ol...@apache.org>.
2011/12/6 Brett Porter <br...@apache.org>:
> Haven't looked yet, but the tech sounds good.
>
> One question:
>
> On 06/12/2011, at 12:40 AM, Olivier Lamy wrote:
>
>>
>> To handle karma on the ui, an attribute must be added in element which
>> need roles.
>> Sample:
>> <li style="display: none" redback-permissions="{permissions:
>> ['archiva-manage-users']}"><a href="#"
>> onclick="displayUsersGrid()">User List</a></li>
>>
>
> How does this work?

Note it can be an array of permissions.
After logging a function get user karma and check all element which
have this attribute. If the user doesn't have at least one of the
needed permissions the html element is hide.

See https://fisheye.codehaus.org/browse/redback/redback/trunk/redback-integrations/redback-knockoutjs/redback-knockoutjs-example/src/main/webapp/js/main.js?r=1605&r=1606#to62
 function decorateMenuWithKarma

BTW permissions are checked again on rest call with the annotation
mechanism described here:
http://redback.codehaus.org/integration/rest.html
("PermissionInterceptor" section).

>
> - Brett
>
>
> --
> Brett Porter
> brett@apache.org
> http://brettporter.wordpress.com/
> http://au.linkedin.com/in/brettporter
>
>
>
>



-- 
Olivier Lamy
Talend: http://coders.talend.com
http://twitter.com/olamy | http://linkedin.com/in/olamy

Re: UI refactoring

Posted by Brett Porter <br...@apache.org>.
Haven't looked yet, but the tech sounds good.

One question:

On 06/12/2011, at 12:40 AM, Olivier Lamy wrote:

> 
> To handle karma on the ui, an attribute must be added in element which
> need roles.
> Sample:
> <li style="display: none" redback-permissions="{permissions:
> ['archiva-manage-users']}"><a href="#"
> onclick="displayUsersGrid()">User List</a></li>
> 

How does this work?

- Brett


--
Brett Porter
brett@apache.org
http://brettporter.wordpress.com/
http://au.linkedin.com/in/brettporter





Re: UI refactoring

Posted by Olivier Lamy <ol...@apache.org>.
So Old thread and I didn't give you any report on that :-)

I have started some hacking on redback side.

The technologies/framework, I have used are the following:

* knockout as mvc javascript library (yup data binding is nice :-) )
(http://knockoutjs.com/ MIT license)
* validation with: jquery plugin validation
(http://bassistance.de/jquery-plugins/jquery-plugin-validation/ dual
license MIT and GPL)
* i18n with http://code.google.com/p/jquery-i18n-properties/ (dual MIT
GPL: bascially REST services returns the already existed properties we
have and those i18n are "injected"/"transformed" on jquery template
loading and/or knockout template execution)
* js loader is requirejs (http://requirejs.org/ MIT / new BSD)
* css is twitter boostrap
* for advanced ui (we will probably need jqueryui in some place) a
theme exists in the same spirit as bootstrap
http://taitems.github.com/Aristo-jQuery-UI-Theme/ (MIT or GPL see
sources https://github.com/taitems/Aristo-jQuery-UI-Theme/blob/master/css/Aristo/Aristo.css).

The POC is currently in a module called redback-knockoutjs-example in
redback source (the usual mvn tomcat:run works fine).

To handle karma on the ui, an attribute must be added in element which
need roles.
Sample:
<li style="display: none" redback-permissions="{permissions:
['archiva-manage-users']}"><a href="#"
onclick="displayUsersGrid()">User List</a></li>

Currently I tried to make js files shareable for various applications
(btw some will be moved from the example module to an other one called
redback-knockoutjs-integration )
But I'm not really sure to be able to do something shareable as it was
done for struts2 integration.

When I will have finish all the needed screens in redback, I will
probably start a branch in archiva and start working on integrating
this.

All comments/help are welcome :-)

2011/10/27 Emmanuel Venisse <em...@gmail.com>:
> Backbone is good too but doesn't support data-binding that is a very
> important feature to let html/JS very simple
>
> On Wed, Oct 26, 2011 at 6:42 PM, Jean-Baptiste Onofré <jb...@nanthrax.net>wrote:
>
>> A kind of similar is Backbone.js too:
>>
>> http://documentcloud.github.**com/backbone/<http://documentcloud.github.com/backbone/>
>>
>> The rendering of Backbone is interesting and the features are very close
>> knockoutJS.
>>
>>
>> Regards
>> JB
>>
>> On 10/26/2011 03:58 PM, Emmanuel Venisse wrote:
>>
>>> Hi Olivier,
>>>
>>> Do you know knockoutJS?
>>> http://knockoutjs.com/
>>>
>>> It's a good JS framework with data binding, With it it is easy to write UI
>>> with a Model-View pattern and a complete independence between JS and html.
>>>
>>> Emmanuel
>>>
>>> On Wed, Oct 26, 2011 at 2:31 PM, Olivier Lamy<ol...@apache.org>  wrote:
>>>
>>>  Hello Folks,
>>>>
>>>> As now we have most of the archiva services available tru REST, this
>>>> will be more easy.
>>>> My first plan is to write a struts2 theme based on jquery and
>>>> bootstrap css (this theme will be called jqboot).
>>>> The goal is to have a shareable theme (if some folks want to use it in
>>>> their applications)
>>>> Note this means using jquery for various redback stuff (users list
>>>> etc..) and in some part of ui (ajax tabs in artifact info display
>>>> etc....)
>>>>
>>>> Let me know your opinion.
>>>>
>>>> Thanks,
>>>> --
>>>> Olivier Lamy
>>>> Talend : http://talend.com
>>>> http://twitter.com/olamy | http://linkedin.com/in/olamy
>>>>
>>>>
>>>
>> --
>> Jean-Baptiste Onofré
>> jbonofre@apache.org
>> http://blog.nanthrax.net
>> Talend - http://www.talend.com
>>



-- 
Olivier Lamy
Talend: http://coders.talend.com
http://twitter.com/olamy | http://linkedin.com/in/olamy

Re: UI refactoring

Posted by Emmanuel Venisse <em...@gmail.com>.
Backbone is good too but doesn't support data-binding that is a very
important feature to let html/JS very simple

On Wed, Oct 26, 2011 at 6:42 PM, Jean-Baptiste Onofré <jb...@nanthrax.net>wrote:

> A kind of similar is Backbone.js too:
>
> http://documentcloud.github.**com/backbone/<http://documentcloud.github.com/backbone/>
>
> The rendering of Backbone is interesting and the features are very close
> knockoutJS.
>
>
> Regards
> JB
>
> On 10/26/2011 03:58 PM, Emmanuel Venisse wrote:
>
>> Hi Olivier,
>>
>> Do you know knockoutJS?
>> http://knockoutjs.com/
>>
>> It's a good JS framework with data binding, With it it is easy to write UI
>> with a Model-View pattern and a complete independence between JS and html.
>>
>> Emmanuel
>>
>> On Wed, Oct 26, 2011 at 2:31 PM, Olivier Lamy<ol...@apache.org>  wrote:
>>
>>  Hello Folks,
>>>
>>> As now we have most of the archiva services available tru REST, this
>>> will be more easy.
>>> My first plan is to write a struts2 theme based on jquery and
>>> bootstrap css (this theme will be called jqboot).
>>> The goal is to have a shareable theme (if some folks want to use it in
>>> their applications)
>>> Note this means using jquery for various redback stuff (users list
>>> etc..) and in some part of ui (ajax tabs in artifact info display
>>> etc....)
>>>
>>> Let me know your opinion.
>>>
>>> Thanks,
>>> --
>>> Olivier Lamy
>>> Talend : http://talend.com
>>> http://twitter.com/olamy | http://linkedin.com/in/olamy
>>>
>>>
>>
> --
> Jean-Baptiste Onofré
> jbonofre@apache.org
> http://blog.nanthrax.net
> Talend - http://www.talend.com
>

Re: UI refactoring

Posted by Jean-Baptiste Onofré <jb...@nanthrax.net>.
A kind of similar is Backbone.js too:

http://documentcloud.github.com/backbone/

The rendering of Backbone is interesting and the features are very close 
knockoutJS.

Regards
JB

On 10/26/2011 03:58 PM, Emmanuel Venisse wrote:
> Hi Olivier,
>
> Do you know knockoutJS?
> http://knockoutjs.com/
>
> It's a good JS framework with data binding, With it it is easy to write UI
> with a Model-View pattern and a complete independence between JS and html.
>
> Emmanuel
>
> On Wed, Oct 26, 2011 at 2:31 PM, Olivier Lamy<ol...@apache.org>  wrote:
>
>> Hello Folks,
>>
>> As now we have most of the archiva services available tru REST, this
>> will be more easy.
>> My first plan is to write a struts2 theme based on jquery and
>> bootstrap css (this theme will be called jqboot).
>> The goal is to have a shareable theme (if some folks want to use it in
>> their applications)
>> Note this means using jquery for various redback stuff (users list
>> etc..) and in some part of ui (ajax tabs in artifact info display
>> etc....)
>>
>> Let me know your opinion.
>>
>> Thanks,
>> --
>> Olivier Lamy
>> Talend : http://talend.com
>> http://twitter.com/olamy | http://linkedin.com/in/olamy
>>
>

-- 
Jean-Baptiste Onofré
jbonofre@apache.org
http://blog.nanthrax.net
Talend - http://www.talend.com

Re: UI refactoring

Posted by Emmanuel Venisse <em...@gmail.com>.
Hi Olivier,

Do you know knockoutJS?
http://knockoutjs.com/

It's a good JS framework with data binding, With it it is easy to write UI
with a Model-View pattern and a complete independence between JS and html.

Emmanuel

On Wed, Oct 26, 2011 at 2:31 PM, Olivier Lamy <ol...@apache.org> wrote:

> Hello Folks,
>
> As now we have most of the archiva services available tru REST, this
> will be more easy.
> My first plan is to write a struts2 theme based on jquery and
> bootstrap css (this theme will be called jqboot).
> The goal is to have a shareable theme (if some folks want to use it in
> their applications)
> Note this means using jquery for various redback stuff (users list
> etc..) and in some part of ui (ajax tabs in artifact info display
> etc....)
>
> Let me know your opinion.
>
> Thanks,
> --
> Olivier Lamy
> Talend : http://talend.com
> http://twitter.com/olamy | http://linkedin.com/in/olamy
>