nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

As we transition to the new Hyland Community, some post links may be temporarily disrupted as we finalize redirects. We apologize for the inconvenience and are working to resolve this as quickly as possible. Details.

Prototype: Alfresco Web Scripts + extjs ajax lib

jpfi

Hi,

Along with a colleague I played around with Web Scripts and extjs (a fabulous ajax lib).
After a couple of days we've finished a first prototype of a ajax-based Alfresco repository browser - we named it opsoro.

feature overview:- ria-feeling (sortable & movable columns, view/hide components, async loading…)- live Search (search as you type)- folder browser- category browser- tag cloud browser- My Alfresco portal (draggable portlets)- document tagging- embedded preview (crop content & image preview)- inline view (text, pdf, images … IE only: ms office et. al.)You find a flash screemcam here: http://opensource-ecm.com/opsoro/opsoro.html

This Web Script API is truly first-rate! It is impressive to find out how easy and rapid to develop things can be;-)

Find more posts tagged with

Comments

xerox

Nice layout,features….
very impressive…

paulhh

Very cool, very impressive!

Our hope was that Web Scripts would make it much easier for people to build their own apps or customise ours. I think this is one of the best demonstrations of that.

Cheers
Paul.

paulhh

How long did it take you to develop this?

Extjs would not be an easy library for us to use ourselves because of licensing, but there are other toolkits such as Tibco's GI toolkit that is BSD/Apache.

Cheers
Paul.

jpfi

Hi,
first of all: Thank you for the complement.

Well, we started from scratch in both technologies (Alfresco WebScripts and extjs).
If I draw-off some days because of the learning curve of the technologies I would estimate ~10 days.

The client side only consists of ~1000 lines of custom javascript + Icons, CSS & some html.

On the server side we were able to reuse some builtin webscripts. So, the server side consists of 7 custom WebScripts with.

Extjs has an extremely impressive api and widget collection. I don't know if Tibco's GI toolkit can compete here.

We also take a look at the eclipse RAP Project (http://www.eclipse.org/rap) and qooxdoo (http://qooxdoo.org). I'll invest some time in the next few weeks to develop a similar client using Eclipse RAP (I'm a total fan of this OSGi stuff ;-)).
Cheers,
jpfi

simon

Impressive… Any idea about the performance of this approach, is it slower than the native interface?

jpfi

Hi Simon,

Thanks!
I think it is rather faster than slower.
Thru the WebScript Architecture you get a web-style scalability.
Even though there is a lot of javascript on the client-side a modern browser seems to be performant enough.
The screencam was taken on 2 GHz Laptop with 2 GB RAM running Alfresco 2.9B. There are ~5GB and ~5000 docs in the repo. Firebug reports ~50-150 ms for an AJAX-request and extjs seems to be very fast handling the response (it's all JSON) and updating the GUI.
But we didn't any deeper performance tests yet.
Cheers,
Jan

rscheele

great interface.. are you going to share this with the community?

jpfi

Hi Rob,

We are somewhat surprised of the positive response to our prototype.
We are currently discussing in what manner we will do further development of this prototype. There are several options, one is to set up a forge project.
I'll post the result of this discussion as soon as possible.
Cheers,

Jan

dmatejka

hi jpfi,
I want to add want more congratulation.. it is really the way we would love to develope our front end for our employees.

Would be awsome if you set up a forge project for this.. please inform of any result.. we will wait…

rscheele

Yes, please forge, this is the true power of open source and open standards.
What is Alfresco's point of view (especially gui designers) of the opsoro project?

mikeh

What is Alfresco's point of view (especially gui designers) of the opsoro project?

We like it for a number of reasons:
- it shows how quickly completely new and exciting user interfaces can be created using webscripts and third party Javascript libraries
- it shows how our "out of the box" webscripts and UI elements can be re-used in completely new environments
- it shows that the direction we're heading in for our future UI development (more AJAX, and other "Web 2.0" paradigms) is the correct one, and one which Community members are excited about

And finally, we're encouraged that people are spending the time and effort creating these innovative user interfaces using Alfresco!

Thanks,
Mike

maxtsai

perhaps that Alfresco can consider include this UI in the future release ..

protenus

Yes, please forge, this is the true power of open source and open standards.
What is Alfresco's point of view (especially gui designers) of the opsoro project?

Would be great to see that on forge. We are working on similar interfaces, and would love to be able to contribute.

jpfi

Hi,

the decision is made, opsoro will follow its own name "OPen SOurce ROcks" –> It's Open Source.
We'll contribute opsoro as an forge project soon. We'll also set up a a dedicated project site (opsoro.com).
I'm not so far to communicate a fix first release date, but two or three weeks sounds realistic, I'm just back from holiday 😉
I'm confident that we're able together with the community to deliver a nice alternative approach using alfresco.

Stay tuned!

Jan

PS: I'll be in Barcelona: http://www.alfresco.com/about/events/2008/04/cc-emea-0408/

dmatejka

happy to hear that.. it is really value added to the alfresco as a project…

jpfi

Hi,
There is no a Alfresco Forge Project: http://forge.alfresco.com/projects/opsoro/.
I have also released a first version opsoro 0.1 Beta here: http://forge.alfresco.com/frs/download.php/357/opsoro.zip.

Install instructions: Downlaod zip and extract the three contained file somewhere:

opsoro_AMP.amp: AMP File which patches missing cropContent-Method in ftl-files. Install this using Alfresco Module Manager
opsoro_WebScripts.zip: contains the opsoro webScript bundle. Install them: http://wiki.alfresco.com/wiki/Web_Scripts#Step_2:_Storing_a_Web_Script
opsoro_WebApp.zip: contains opsoro client. simply extract it to tomcats webapps directory.

So…Have Fun!

Please contact me if you'd like to contribute or perhaps sponsor the project in some way.
We're currently preparing and discussing the further roadmap of opsoro. There are some really nice options like:

upload content
categorize documents
edit properties
checkout checkin
advanced search
IE only: edit office files inline using webDav
support actions: start workflow, transform…

We're also considering to support Adobe AIR and implement features like these:

drag'n drop from and to system (e.g. explorer)
offline access. Make folders markable as offline folders and sync the containing files and some core meta data to AIRÂ´s local SQLite DB.

Cheers, Jan

jpfi

Hi,
I just recognized that there are two little bugs:

live search result window disappears
property grid columns not correctly shown (IE only)

There is also a issue with Enterprise 2.2.0Beta, because tag-root classification isn't added during first bootstrap…

Cheers,
Jan

mikeh

There is also a issue with Enterprise 2.2.0Beta, because tag-root classification isn't added during first bootstrap…

That's correct - the tagging extension to the category tree is only being applied to the 2.9 branch and later.

It should be possible to take the relevant parts from the 2.9 bootstrap and patch them into v2.2E via an AMP, but this would be unsupported by us.

Thanks,
Mike

dmatejka

Hi Jan,
thank you for your beautifol forge project. We are trying to try it, but.. which alfresco version we should use?.. We have tryied it on the latest build 2008-3-31 but still no luck.

Is there a possiblity we are just running "wrong" version of alfresco?.. or we are missing somethnig completelly diferent? (e.g. brain?

)

thanx

jpfi

Hi,
ok, I'll insert the tag-root initialization and the webscripts to the amp-file.
I've forgotten to mention that there is a opsoro_config.js inside of the opsoro WebApp part which defines some base urls (default: http://localhost:8080).
Maybe You've to adjust this to your environment to avoid cross domain xmlHttpRrequest issues :!: Sorry…
Cheers, Jan

dmatejka

thank you for this info.. we are running at 10080.. so that was one of the isues we have..

unfortunatelly I can still see only pictures loaded (only top logo picture, LIVE SERCH box and text "Messages….")
We will try it tomorrow at clean alfresco instalation.. maybe we missed something obvious.

have a good night..

jpfi

Hi,
try using firefox with firebug extension: http://www.getfirebug.com/
It seems that you're having more path issues and using this plugin gives more debugging infos in a separate console.
It should work with 2008-03-31 nightly build…
Good night,
Jan

dmatejka

hallo jan,
firebug is displaying this error
[Exception… "'Permission denied to call method XMLHttpRequest.open' when
calling method: [nsIDOMEventListener::handleEvent]" nsresult: "0x8057001e
(NS_ERROR_XPC_JS_THREW_STRING)" location: "<unknown>" data: no]

seems it does not have a permission .. do we have to set up some access rights? -we have EVERYONE as a consumer in Data dictionary.

moreover, when we have an issue in alfresco log

Caused by: java.io.FileNotFoundException:
./alf_data/lucene-indexes/indexbackup_temp/indexbackup_temp/index
backup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbacku
p_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_tem
p/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/ind
exbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbac
kup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_t
emp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/i
ndexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexb
ackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup
_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp
/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/inde
xbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexback
up_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_te
mp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/in
dexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexba
ckup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_
temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/
indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/index
backup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbacku
p_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_tem
p/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/ind
exbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbac
kup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_t
emp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/i
ndexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexb
ackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup
_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp
/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/inde
xbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexback
up_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_te
mp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/in
dexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexba
ckup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_
temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/
indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/index
backup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbacku
p_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_tem
p/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/indexbackup_temp/use
r/alfrescoUserStore/c7e94c0d-ff3f-11dc-9c6d-e7e769b1ee62/IndexInfoDeletions
(File name too long)

any idea what we do wrong?

we are not a web developers by any means… . so probably missing something basic..

jpfi

Hi Daniel,
the first Error seems to be a cross domain issue.
1. Make sure that your tomcat/webapps folder have two folders inside: alfresco and opsoro (extract opsoro-webapp.zip here)
2. Make sure that your webapps/opsoro/opsoro_config.js defines the URLs:
If your alfesco webclient is running under http://yourhost:9090/alf your URLs should be defined as following:
var ROOT_URL = 'http://yourhost:9090;
var ALFRESCO_URL = ROOT_URL +'/alf/';
Ext.BLANK_IMAGE_URL = ROOT_URL + "/opsoro/lib/ext/resources/images/default/s.gif";

The second error is another issue with your alfesco installation. There is somewhere a path entry in your properties which seems to be recursive.
if you have further probs with opsoro just drop me a line via skype: fme.jpfitzner
cheers, Jan

jpfi

Hi,
I've just built the first version of opsoroAIR - opsoro as an Adobe AIR application.
It is here available for download: http://forge.alfresco.com/frs/download.php/358/opsoroAIR.zip

To run it:

Make sure you have the latest Adobe AIR runtime installed (http://labs.adobe.com/downloads/air.html)
Extract the WebScript and install them: http://wiki.alfresco.com/wiki/Web_Scripts#Step_2:_Storing_a_Web_Script
simple double-click the opsoroAIR.air-file
go to your installation path and edit opsoro_config.js. ROOT_URL must match to your alfresco host
…have fun and report bugs, issues…;-)

Cheers, Jan

janvg

When I install opsoro air and browse the alfresco repository, the application is showing only questionmarks in front the folders.
it seems to me I'm missing some images ?

flm

Hi Janvg,

Make sure you edit the port in opsoro_config.js in the installed air application path. Jan left it at :9090 and your alfresco is probably running at :8080. I had the same effect with the blue question marks before changing that.

Bye,
Florian

jpfi

Hi,
there is another 'bug':
Ext.BLANK_IMAGE_URL in opsoro_config.js points to your alfresco-appserver too. Thats uggly… I'll include the s.gif file in the air package.
So long, there is a workaround:

download s.gif here: http://forge.alfresco.com/plugins/scmsvn/viewcvs.php/opsoro/trunk/source/web/client/lib/ext/air/samples/tasks/images/s.gif?root=opsoro&view=log
copy s.gif to your opsoroAir installation into images folder
in opsoro_config.js set Ext.BLANK_IMAGE_URL = 'images/s.gif';

This should work.
Cheers, Jan

janvg

thx, this did it

janvg

When I use the opsoro client and select "my alfresco" I can see a Panel 3 with lorem ipsum content. I was wondering where this content is managed ?