Robert Nickel

robert@artnickel.com

András Mantia

amantia@kde.org

Christopher Hornbaker

chrishornbaker@earthlink.net

Reviewer Fabrice Mous

fabrice@kde.nl

Reviewer This chapter describes the parts of &quantaplus; that you will be interacting with mostly. These not only make your more productive, but they also allow you to customize &quantaplus; to your work-flow. As previously mentioned, toolbars in &quantaplus; are primarily managed through the Toolbars menu. Usage and creation are somewhat different. The creation of toolbars is discussed in a later section entitled Creating Toolbars. Using toolbars is quite simple. When you click on an icon for a desired element or action, one of three possibilities occur: the element is inserted (optionally with a closing element); an element dialog is activated, allowing you to fill in the attributes in a dialog box; or, lastly, an action is activated and does something nifty for your current file or project. If you find yourself doing tedious and redundant typing for a particular element, that is not in &quantaplus;, then you can add it. See for more information. Configuring the toolbars and the elements on it can be done either by using the context menu (right click on a toolbar), where you can create a New Action, a New Toolbar, you can perform other actions like Remove Toolbar, Rename Toolbar or Configure Toolbars, which will get you the dialog where you can specify which actions should be visible on this or other toolbars. By invoking the context menu on an action (icon) placed to a toolbar, aside of the above actions you will see the Remove Action and Edit Action entries, which speak for themselves. The toolbars and the actions on them can be configured by using the SettingsConfigure Toolbars... and SettingsConfigure Actions.. menu entries. About the user definable actions you can read in . A tag dialog looks just like the following: An example of a tag dialog. The above image is the dialog for the anchor tag. If you know &HTML;/&XHTML;, then you should have noticed that all the attributes that you can use, in an anchor element, are available. Notice the tabs above for Main, Core and i18n, Events, and Focus, they hold all of the other attributes, according to their purpose, available to the anchor element. All you need do is: fill in the blanks for the attributes you want in your anchor, omit the attributes you do not want, and click OK. You now have a well formed anchor set down at the current cursor position. &quanta-projects; Templates are basically skeleton documents, code snippets and files to link to. &quantaplus; uses templates fundamentally as a standard file system with enhanced organization and interfacing. You can copy, move or link any repository currently on your system into the templates tree. Think of &quantaplus; templates as having roughly the limitations to your imagination that your file system has. Templates exist in nested folders. There is no limit to how deep you can nest them, however, within any given folder &quantaplus; expects a consistent action for the base template type described below. Additionally templates allow for pre and post text to be concatenated to non document type templates. This facilitates tag creation. The next update after the introduction is scheduled to add the ability to pass variables to the text such as image size information to assist in tag creation. Our goal with templates is to extend them to include multi file concept templates useful for things like placing an order or creating an about section. Ideally this will be a tool for making your work more productive and dynamic. An eventual goal is to have a structural template design mode to deal with site layout and structure which you could use to design and interactively update your sites. If you would like to be involved, check out our help wanted page. Some of the templates that ship with &quantaplus; have conditions for their usage. Please read carefully the usage statement of conditions at the top of each template before you use it. There are various template types supported by &quantaplus;. These are: Binary templates Document templates Text snippets Site templates Examples for these types are provided with &quantaplus;. Binary templates Binaries are anything not identified purely in text. They can be any file, except text, including images, &PDF;s, flash files, etc. Binary templates are usually included in your document via links (&ie; images as an img src=/src/url). Some examples can be found in the Templates tree under Global Templates. Please see for more information on the Templates tree. Document templates Documents can be any type of text document. You can create new documents based on these templates. Generally you would want to nest more specific or diverse documents in subfolders. Here you can make a basic framework for what you do and deliver it to your work in an organized fashion and realize much better efficiency. Some examples can be found in the Templates tree under Global Templates. Please see for more information on the Templates tree. Text snippets This type of template is useful when you don't want to create a new document based on a template, but want to insert the same text area over and over in your documents. They can contain anything, starting with a comment and ending with a complete menu handling JavaScript method or perl script. Some examples can be found in the Templates tree under Global Templates. Please see for more information on the Templates tree. Site templates As the name says these templates are useful to build a whole site from a template. They are a collection of various documents which can be organized in a directory structure, everything gathered in a compressed tar archive. As of writing there are no example site templates in &quantaplus;. Templates are accessible based upon their established workspace in &quantaplus; Create a document structure that you love (&XML;, &HTML;, DocBook, &etc;.) and click on File Save as Template Save as Local/Project Template . Once this is done, you will notice that (even if it is saved as a Project template) the template does not show in the project tab view. Look into the templates view to find your template under the Project templates tab. Select some text in your document and click on File Save as Template Save Selection to Local/Project Template file . Alternatively you can just use drag and drop to drag the selection to the Templates treeview. Creation of a binary template is simple: just copy the file into a template folder. You can use standard file management functions to do it, like drag and drop or copy and paste from Konqueror or the Files Tree. In the Files Tree or the Project Files treeviews right click on a folder and select Create Site Template, pick up a name for the template and save it. By default it will try to save to the project template folder, but of course you can choose to save it as a local or global template as well. Project templates allow you to be more tightly focused. You can create headers, footers or go dynamic with &PHP; include files and link them. Additionally there are some very cool things we took into consideration when using templates in projects. When creating a project you can opt to copy to your local project, all the existing global and user templates. Legacy project get default templating abilities so nothing is lost You can choose where to locate your template files so they can be in your server root and easy to upload or you can make them secure to link to below server root which is a very cool trick. When linking to a file not in the project templates you will be prompted to copy the file to the project templates prior to linking. This will prevent broken links on upload. You always have control where you place your templates so you can choose to move them. However &quantaplus; does not track this so you will need to change links. Template structure on the template tab is based on the files found in $TDEDIR/share/apps/quanta/templates and $HOME/.kde/share/apps/quanta/templates. Each of these folders is specified as one of four types of container as explained above. To set the behavior of each folder, &RMB; click in the template view on the folder and choose Properties. The following dialog will come up: Properties dialog. Type Drop down box with the three types discussed previously; files, text, template. This box will be grayed out if you have the Inherit parent attribute box checked. Inherit parent attribute (foo) This is checked by default and is fine for all but the top level folders in your templates tree. If the top level folder has this checked, it will basically deactivate templates for that folder and all that aren't explicitly set below it. If this is not a top level folder, then the blah will say something like Text snippet. If it says nothing, then chances are that you are on a top level folder. Use pre/post text Enables pre and post text for templates in this folder. This could be a common header/footer for all of your templates for a given project and then you copy content templates into that folder and have a complete page with the custom header/footer as a starting point. Pre-text The actual text to insert before your templates content. Post-text The actual text to insert after your templates content. Additionally if you look at your options with the &RMB; you will see complete file management tools for creating folders or copying and pasting templates from one location to another. Nicolas Deschildre

nicolasdchd@ifrance.com

Christopher Hornbaker

chrishornbaker@earthlink.net

Reviewer The Visual Page Layout (&VPL;) editor (also known as WYSIWYG (What You See Is What You Get)) allows you to edit a &HTML; or &XHTML; document while seeing the changes on-the-fly. Just like your favorite wordprocessor, you can click on your document and a cursor will appear, thus enabling you to enter text, insert images, apply text decorations, &etc;. &VPL;'s aim is to allow you to create great, valid web pages without any knowledge of Internet markup languages. &quantaplus; offers two modes: &VPL; Editor and &VPL; & Source Editors, which are accessible from the View menu. The first replaces the Source Editor with the &VPL; Editor, and the second splits the editor window into two parts: the Source Editor and the &VPL; Editor. The &VPL; Editor works like so: It loads a document like a normal &HTML; or &XHTML; page and a cursor appears. Then you can edit it, and switching back to Source Editor, you see that the changes you made on the &VPL; Editor have been merged in the Source Editor. When working in the &VPL; Editor with a document that contains &PHP;, you will see a small green icon representing the &PHP; code. You cannot directly edit it with the &VPL; Editor. To edit &PHP;, you will still need to use the Source Editor. There are no plans to change this functionality. The second mode behaves exactly like the first, except that you instantly see the impact that your changes have made, either in the Source Editor or in the &VPL; Editor, and the cursors of the source editor and of the &VPL; Editor are synchronized. Pressing F9 loads this mode, but, if it is already loaded, it will move the focus from one view to the other, while keeping you at the same location of the document. The refresh intervals between the &VPL; Editor and the Source Editor are configurable. Go to Settings Configure Quanta... . Select the &VPL; View tab. You can choose whether you want to refresh a view only when you click on it or automatically. If you choose automatically, then you can choose a refresh interval. The general recommendation is: A smaller number for fast computers and a bigger number for slower ones. The &VPL; & Source Editors mode. Now, let's say you want to edit the title of your web page. How do you do it? Simply launch Tools Document Properties . This tool allows editing of invisible tags when using the &VPL; Editor. The Document Properties dialog is also launched when you create a new document while in the &VPL; Editor. This is in order to lessen the amount of hand coding you need to perform. With it, you can edit: Title The title of the document. Meta items Meta tags allow you to store information about the document itself ⪚ keywords for the Internet search engines. You can add or remove Meta items by pressing the two buttons below, and edit them by clicking on the list ⪚ put keywords on the name column and keyword1 keyword2 on the content column. CSS Rules CSS Rules are the new way to tell your web browser how to present the page. You can add or delete the CSS Rules by pressing the buttons below. You can also fill the fields like the Meta items. The editing of CSS Rules is not yet supported. Link CSS Stylesheet You can also link an external CSS stylesheet. Simply click on the Browse button and select your file. You can use your cursor like you do in a wordprocessor, moving with the arrows. There may come a time when the cursor does not want to go where you want it to go (a pesky bug). Selection also works as usual. You can insert text by typing and remove text by pressing the &Backspace; or Delete key. Now we come to tag insertion. You can insert images, applets, text decorations such as bold and so on by using the same toolbars you use in the source editor. Note that the insertion of tags does not remove previous identical tags ⪚ if you insert an anchor tag around some text, then you must remove any other anchor tag around it. Some toolbar items will be disabled, such as the Table Wizard or Quick List Wizard. They will work later in &VPL;, but, for this release, you should use the Tables or Lists toolbars. To edit a tag (be it an image, an applet, or whatever), switch to the Attribute Tree, accessible via View Tool views . Click on the tag you wish to edit, or, if you cannot access it, click on an object contained by it. The Attribute Tree will show the current tag name as well as a list of all its parents and attributes. Currently &VPL; does not support, say, &XHTML;+MathML, but you will see that you can edit namespaces via this view. You can simply click on the Value field and modify whatever you want. If you want to access a parent of the current tag, then select it and the Attribute Tree will load it. To delete a tag, we will use the Attribute Tree. Have you noticed the two little red crosses at the top-right corner? The first one deletes only the currently selected tag and, if the &HTML;/&XHTML; specification does not allow some children of the deleted tag to be children of the parent tag of the tag set to be deleted, then they are also deleted, and so on. The second cross will delete the selected tag as well as all of its children, so be careful!