Simples Consultoria

Cafecito Sprint: the lost post

hector — 2013-01-10T18:32:06Z

After many months of delay, collective.cover 1.0a1 was finally released last Monday, January 10, 2013.

It has been a lot of work: more than 5,000 lines of code, more than 700 commits, 20 contributors, endless hours of testing and reviewing… a lot of excitement and satisfaction, in a nutshell!

You can use collective.cover to create elaborated landing pages especially well suited for news portals, government sites and intranets.

Current release includes some basic layouts ready to be used, a working layout editor (kind of) and some pretty basic tiles:

Basic: shows general information about objects
Carousel: shows a carousel of images
Collection: shows the results of a collection
Embed: used to embed content from a remote source
File: shows a file object
Image: shows an image object
Link: shows a link object
List: shows a list of items
Rich Text: shows rich text format

We included a couple of mechanisms to compose a page: a search box that lists the most recent items created on the site (better suited for sites that change their front page very often, like news sites) and a content tree box that lets you navigate your site structure to select the items (probably more useful for intranets).

We know the UI still sucks. I had a brief conversation with David Glick and Alex Limi after our presentation at the Plone Conference 2013 in Arnhem. Limi was very critic with our approach and I think I understood his reasons. We think most of the mess could be easily solved when plone.app.toolbar becomes usable.

If you want to try it, please read the instructions on the package, take special care on pinning correct versions of dependencies and remember that collective.cover was developed to run on top of Plone 4.2 and later. Read carefully the reviewers guide prepared by André and Thiago, and have fun breaking things around.

We spend a lot of time trying to make this release stable enough to be used in production sites. I want to make special mention of the great work done by Silvestre Huens (quimera), Juan Pablo Giménez (jpgimenez), Franco Pellegrini (frapell), Cleber Santos (cleberjsantos) and Gonzalo Almeida (flecox).

Work on release 1.0a2 is already on course with the following main objectives:

Make collective.cover fully compatible with Plone standard tiles (issue 81) and probably get rid of some of our own basic tiles
In-line editing using Create, a comprehensive web editing interface designed to provide a modern, fully browser-based HTML5 environment for managing content (issue 77)
Refactor of some tiles, like the carousel (issue 123)
Refactor of some ugly UI approaches
Refactor of some ugly internals
Bug fixes

We have collective.cover in production in a couple of sites (one news site and one intranet) and we're going to use it on, at least, half a dozen of new sites we're going to release in the following weeks.

Are you trying collective.cover? We want to know about it.

Please feel free to send us your comments, suggestions, bug reports and, of course, fixes.

Development of collective.cover was sponsored by OpenMultimedia, Ravvit and Simples Consultoria.

Share and enjoy!

Special report from São Paulo, Brazil: Cafecito Sprint Day 9

hector — 2012-07-05T20:49:06Z

Day 9 (Thursday, June 28)

Early in the morning hvelarde get mad when he realized the team had only 2 days to complete the sprint and not enough work had been done on the tiles stuff yet. We had to change that!

Happily, agnogueira had created a bunch of tile mockups so we could concentrate on this.

Frontend Team

flecox implemented some UI on the permission stuff developed by frapell.

quimera stopped working on the resizing of the columns, for now; he implemented the delete tile feature and the UI to show if a tile allows certain content type to be dragged on it.

Backend Team

frapell added a permission check to the populate_with_object method so it won't modify an object if the user has no permission to do so.

jpg_rcom fixed a bug in the data manager that was affecting the creation of the tile and implemented the basic tile image scaling. Now, when the object dragged to a tile contains an image, the tile shows it. Great!

hvelarde created a file tile, removed a bunch of legacy code and added more tests to the package.

Special report from São Paulo, Brazil: Cafecito Sprint Day 8

hector — 2012-06-28T23:46:34Z

Day 8 (Wednesday, June 27)

Oliver joined the sprinters and succeeded to commit his first sprint group photo.

Frontend Team

quimera spent the whole day trying to implement columns drag&drop; he almost succeeded… Holy cow! Did I said "almost"?

flecox added support for column permissions on the layout user interface. Now you can set group permissions to all tiles inside a column in an easy way: if a user does not belong to a group with editing permissions on a tile, he will not be able to modify the content on it.

Backend Team

frapell added plone.app.stagingbehavior to provide versioning, working copy, and locking functionality. He also created an event to move annotations from the working copy to the baseline when a check-in is applied.

jpg_rcom created a custom ITileDataManager to store image modification time.

hvelarde replaced the way we were registering tiles for the package: we now use plone.registry and we have a vocabulary for listing the available tiles; he also made some code cleaup.

Have you tried the package lately? It's really amazing!

Special report from São Paulo, Brazil: Cafecito Sprint Day 7

hector — 2012-06-27T15:37:44Z

Day 7 (Tuesday, June 26)

Frontend Team

quimera worked on the drag&drop feature for tiles and columns; he also fixed many bugs. We can now create and save layouts; we only need to implement more tiles now.

flecox worked on modal windows to select the type of tile being added to a layout and to configure them.

davi-lima made some code cleanup.

Backend Team

frapell worked on adding a permission subsystem, so now we are able to grant groups permissions to edit tiles content. The edit-tile view now checks for that when trying to render, and it will raise an Unauthorized exception if the user doesn’t belong to the specific group. Kudos!

jpg_rcom fixed the basic tile he started last week, and started implementing an image field with blob support.

hvelarde cleaned up the buildout configuration used for development, and implemented locking behavior for the composition content type.

Special report from São Paulo, Brazil: Cafecito Sprint Day 6

hector — 2012-06-27T15:04:16Z

Day 6 (Monday, June 25)

Frontend Team

quimera continued working on the edition of layouts: he added a Saving event, error handling for the Save action, fixed the JSON structure in the layout view and made other minor fixes.

flecox worked on the column resizing feature and the Content Tree screenlet.

davi-lima made some refactoring on the tile template for the layout.

agnogueira created a set of tile mockups that we will need to implement on the first release of the package.

Backend Team

frapell continued working on the tile configlets based on z3c.form; he also added configuration templates for base widgets, richtext widgets and textline widgets, and added a new data manager for the tiles, so we can handle configurations before they are rendered.

nueces added a "tail" for a collection content type; we are still trying to figure out where to put it on the package.

hvelarde worked on packaging and documentation stuff, and spent most of the evening understanding, the wrong way, that sometimes collaboration in Open Source projects among different languages, cultures, and time zones is hard.

Special report from São Paulo, Brazil: Cafecito Sprint Day 5

hector — 2012-06-27T15:38:36Z

Day 5 (Friday, June 22)

Frontend Team

flecox and davi-lima continued to work on the screenlets, implementing both the Recent Items and Content Tree tabs and also making room for the clipboard one, which will be developed next (based on a catalog filter for content UUID).

quimera implemented a Save functionality to export the designed layout into a JSON structure which is AJAX-stored as an annotation in the context. That was amazing!

They also spent big time debugging and cleaning up the code as well as preparing icons, internationalizing and localizing templates and improving documentation.

Backend

frapell updated package's documentation to explain how to create a tile to use in the composition; he also made a configuration template for automatic rendering a Configure mode for the widgets in the tile by using z3c.form. Really cool!

hvelarde worked on moving Carlos de la Guardia's original collective.composition repository to the Collective just to have the issue tracker there; he also added i18n code to plone.app.tiles and Brazilian Portuguese and Spanish translations to the package, and tried to fix the basic tile but he failed miserably: wish him better luck next time.

Special report from São Paulo, Brazil: Cafecito Sprint Day 4

hector — 2012-06-27T15:38:48Z

Day 4 (Thursday, June 21)

The day started with a hangout of the sprinters with Rok Garbas (garbas); he has been working on plone.app.deco lately and he wanted to find out if we can collaborate in some way.

We followed closely his presentation and explained him that the goal of the sprint is to release an usable package to create front pages for projects we are working on, and to release it for the community.

Maybe after that we can start looking how to generalize what we are learning.

Frontend Team

davi-lima and flecox worked on refactoring the "screenlet" mechanism for providing the windows and overlays that will display tools and settings used in the Compose and Layout tabs for the Composition object. The work is not finished but the screenlet also knows how to update itself based on user interaction, like content filtering, based on text filters and eventually tabs.

quimera worked in the HTML serialization of a created layout and the save functionality.

Backend Team

Juan Pablo Giménez (jpg_rcom) joined (remotely from Rosario, Argentina) frapell on the backend team; jpg_rcom is a long time Plone contributor and co-author of Plone 3 Products Development Cookbook book.

frapell tried to implement a configuration view for the tiles. This view will allow us to adjust how fields will show up: we could have a tile that displays a title, a description and an image and we will be able to change the order of the fields, the alignment of the text or the size of the image.

jpg_rcom created a new basic tile that will display title, summary and an image for most standard content types.

agnogueira and hvelarde found a nice icon for the package; if only we could find a good name also…

Special report from São Paulo, Brazil: Cafecito Sprint Day 3

hector — 2012-06-21T20:40:02Z

Day 3 (Wednesday, June 20)

We need your help to find a better name for this package!

If you have an idea, please let us know.

Frontend Team

flecox created a screenlet to search for content types and drag&drop them on tiles, after the drop is done an AJAX call send the UID of the object and the id of the tile and return the HTML of the tile with the data of the content.

quimera decided to divide in two the layout: layout view to create the “layout” with rows and cells and a permissions view to wrap the parts of the layouts in groups and add permissions to them.

Backend Team

frapell made some advances adding functionality that will allow to send an object to a tile and update its content, and to delete tiles data to maintain integrity.

A major change was made into the way the composition use the layout. Now, the layout gets stored in the composition itself, so it is independent from what it is in the registry, and from other compositions. In the moment that the composition gets created, random ids get assigned to the tiles.

Some bug fixes were tackled too, and more functionality was included into the recursive layout renderer, which can identify which view is being rendered on, and can render different content accordingly.

And finally, a new functionality was included into the tiles, that will allow to return a list of accepted content types that can be dropped into a tile.

hvelarde spent part of the day preparing the blog posts for the first two days of the sprint and made some code review (mainly PEP 8/Pyflakes) to Plone core packages like plone.app.blocks, plone.app.tiles and plone.tiles.

At the end of the day both teams merged code and got something almost usable; the day was very productive and what we have now looks pretty good!

Download the development buildout and check it by yourself ;-)

Special report from São Paulo, Brazil: Cafecito Sprint Day 2

hector — 2012-06-22T20:44:19Z

Day 2 (Tuesday, June 19)

Frontend Team

Ricardo Bánffy (rbanffy) joined agnogueira, davi-lima, flecox and quimera on the front end team; rbanffy is founding member of Associação Python Brasil and long time technology advisor at Simples Consultoria.

Once again the team begun the day discussing the implementation of the whole front end, with lots of drawings in the whiteboard. The team realized that, to be grid-friendly, they need to allow users to draw all the possible layouts with our “Groups” and “Tiles” entities and then implement the right combination of “row” and “cell” CSS classes from Deco.gs (or the similar ones from the other grid systems).

The team noticed they are going to have a lot of trouble very soon dealing with nested rows, cells and all their width calculation using percentage values . They decided to start with baby steps and, following the mockups, create a simple static layout that can´t be modified, but can be used by an “Editor” to add content to the static tiles.

Finally, they discussed the format of the JSON they'll deliver to the backend to inform about the structure of the created layout.

Backend Team

The layout data structure was initially designed by frapell, and he also implemented a recursive renderer for it. Finally, the layout structure was included in the main composite view and a temporal way of editing the tiles was added.

Unneeded code was successfully removed by hvelarde; he also added some basic tests and made some updates on i18n.

Special report from São Paulo, Brazil: Cafecito Sprint Day 1

hector — 2012-06-21T19:22:24Z

Day 1 (Monday, June 18)

Work started late thanks to a broken fiber optics cable brought to us by Vivo (Telefônica Brasil).

Coffee after lunch was courtesy of Leo's Cafecito.

Frontend Team

The team was formed by agnogueira, davi-lima, flecox and quimera.

They begun the day discussing how some grid systems (like Deco.gs) can disturb responsive design principles, with rows preventing cells from floating one below the other when screen is shrinked. So, even though inspired by Deco.gs, they decided to begin with their own set of CSS classes to indicate widths and floats, but not positions.

For tiles' drag&drop and resizing functionalities they chose to start with jQuery UI since it's being included in Plone anyway. The team decided to begin with the resizing so they wrote code implementing the "Groups and Tiles" mockup as a proof of concept. They couldn't use the native snap functionality, because of the lack of a "snap" event in the resize API, so they found some trouble calculating exactly when enough pixels were dragged to update the tile CSS class which defines its width. At first they tried binding the math into the jQuery UI resize event but it was too expensive and lagged, so they went for start and stop events.

Generally it was a nice first day ending with important discussions with the backend team on how we'll persist the layouts after the user presses the Save button on the Layout tab.

Backend Team

The team was formed by frapell, hvelarde and nueces.

The team decided to take on the problem using the collective.composition approach. Based on a blog post by David Glick, they merged back the tiles implementation in collective.composition from frapell's fork and moved the package into the Collective. The idea was to remove some of the content types implemented and start adding different tiles types.

They debated a bit on which would be the best implementation, first they wanted to use recursive tiles and implement a “folder” tile to hold other tiles, but plone.app.blocks doesn’t work that way. So, the main idea will be to use panels to store the tiles. Then they’ll store the panels and tiles HTML structure in a field for the "Composition” object. This way we can have versioning and working copy for free. Global layouts will be added in the Plone registry, that way, we can use Generic Setup to import and export layouts.

Take a look (and help out!) at the full development buildout running on https://github.com/collective/collective.composition.

Como usar jQuery no Plone

thiago — 2009-07-24T19:16:37Z

jQuery oferece uma vasta gama de possibilidades e recursos que podem ser amplamente usados pelos desenvolvedores web. De fato, ele é tão útil que já vem pré-instalado no Plone. No entanto o processo exato de instalação de um add-on pode ser um pouco confuso para quem não tem experiência. Pensando nisso separamos aqui o procedimento de uma maneira simplificada:

Em primeiro lugar suba para o seu site o add-on que quer instalar. Atenção, como mencionado acima, não é preciso subir novamente o arquivo jquery.js, pois este já está instalado no Plone.

O segundo passo é renomear o seletor '$' que vem na imensa maioria dos add-ons e mudá-lo para 'jq' ou 'jQuery'. Isso é importante para que o script não entre em conflito com outros scripts que já estajam instalados e operantes no Plone. Então, por exemplo se a chamada está $(”#portal-logo”), deve ficar jq(”#portal-logo”) ou jQuery(”#portal-logo”).

Depois disso entre na ZMI e em seu plonesite acesse o portal_javascripts. É aqui que são feitos os registros dos javascripts usados no seu site. Em ID/URL coloque o nome do seu arquivo. Deixe as opções Condition e Conditional Comment em branco e o tipo de compreensão 'safe'. A opção Merging allowed deve estar desabilitada também.

Vale dizer que o processo acima só funcionará para scripts bem feitos. Se eventualmente você se deparar com um add-on que insiste em não funcionar, existe ainda a última opção de registrar ele diretamente no template em que você o quer. No main_template temos um slot destinado para estas inclusões de javascript. Se este for o seu caso, esta é uma maneira prática de fazer isso: