T3UXW09 Technical challenges

Before we start the technical challenges a small status update. We combined Team 4 and Team 5. They are working on pagetree and Ext JS integration. The styling in the modules needs to be tackled. The combined Team was productive until very late at night. Actually until in the morning. Joern, one of the team manager of Team 4 had to leave. Kian is his replacement and he took on some general management task, because we also lack a manager for Team 1. Riona joined Team 4 for supporting the Introduction Package. Improving Backend Search for TYPO3 Searching content is always a large portion of content management and to improve the efficiency of doing so we have created a new search for the TYPO3 backend, that has been inspired by the Apple Max OSX Search "Spotlight" Since we are leaving the basic search functionality of TYPO3 as it is and are "only" improving the usability of the search, we chose to use the Ext JS Framework to implement a custom widget without big coding hassles. The widget communicates directly through the AJAX API "Ext Direct" (introduced by Sebastian Kurfürst recently) which enables direct routing of all server-side classed to the browser, which makes the development a joy. The general features of the search will include the following: AJAX Auto-complete / Suggest Users will find their searches auto-completed for them and AJAX search calls are sent for 3 letters typed. Results are sorted according to categories (users, content, pages, news etc.) and clicking on any of the results sends you directly to the element in edit-mode, so the search can really be used to speed up content editing. User-sensitive search The search considers user permission in the output, so no annoying "you don't have permission to edit this record" messages appear. Shortcuts The search will react to CTRL+F Keyboard Shortcuts to speed up searching (Firefox behavior). Extension-specific search All records of custom-built extensions will also be included in the search results and can be triggered with simple tags such as #news to get only content from tt_news for example. This enables direct searching in large extension records etc. Full use of the ExtJS The TYPO3 Backend is now making full use of the Javascript Library ExtJS. This not only allows us to build on a rich set of already existing and well-tested widgets, but also gives us more focus on our main task: Enhancing our TYPO3 application in a simple and effective way.
This comes in very handy when rendering certain parts of TYPO3 that previously had to be manipulated manually and were quite difficult to tackle. One of these parts would be the handling of frames in the TYPO3 Backend. Previously there were 3 frames needed to render the TYPO3 backend, which can now make use of a maximum one iframe. This foundations gives us the power to finally think of a complete Drag & Drop concept for the TYPO3 Backend, even in version 4. Technical overview TYPO3 toolbar The old toolbar was replaced by a new ExtJS toolbar in the top of the backend. Therefore we developed a new interface (backend_ExtJsToolbarItem) to connect toolbar items, including e.g. menus or forms, to the new ExtJS toolbar. There are two API functions that have to be included in the "next generation" toolbar items. Additionally we created the possibilty to add custom-built inline javascript to the backend building process. Examples of the toolbar integration are in the typo3/classes/ folder.
To assure downward compatibility we integrate a workaround for "old" toolbar items CSS Sprites TEAM3 is tackling the task of introducing CSS Sprites in the TYPO3 backend, replacing existing icons with these sprites and in general making the skinning system more easy to understand and use. In a first step all styles were removed from the backend to have a fresh and naked backend to start from. We then split up the stylesheets into layout related styles and visual styling. Cleaning up the existing icon set that grew in a quite uncontrolled way over the years. After initially removing the existing icons we thought about how to structure the new icon system. After some research we came across the <link http: tango.freedesktop.org external>Tango Desktop Project icon library. We really like how the Tango project names their icons in a clear and defined way. So for coming versions of the TYPO3 core we're also adopting the same guidelines as specified by the <link http: standards.freedesktop.org icon-naming-spec icon-naming-spec-latest.html external>freedesktop.org Icon Naming Specification In an attempt to ease the creation of the images for the new css sprite system we created a sprite generator class which will be part of t3lib. Additionally a <link http: www.phing.info external>Phing build script has been created to automate the task of creating all the sprites. Phing may also play a more important role in the future of TYPO3 to automate other tasks like packaging releases, running unit test and other similar tasks. We also led some reflection about the new CSS naming convention. For the moment, we are facing the problem that we don't have a consistent manner to named elements. For instance you will find CSS classes like "c-headLineTable" which doesn't give a clear idea about the purpose. To improve that situation, we are in the process of writing a specification which gives better guide lines for developers and designers. Stay tuned! ;)