Philippe Lewicki ©2005 SQLFusion LLC 11/01/05

This documentation will help you get quickly started with Pagebuilder.

Page Builder is a web creation tool for non-technical users. You can find it in Open Source Fusion. With Page Builder, you can build in no time custom web sites for your individual and business needs. All you need is a web browser such as Firefox or Internet Explorer (Click on the screenshot to see a larger picture).

You can first create a simple web site. Later on, you can for example turn this website into a community website for you, your friends and your family. If you run a business, you can turn this website into an e-commerce. You can even build powerful web applications with which you and your co-workers can run your entire business from nothing more than web browsers. You will be impressed with the ease of use as well as the depth and breadth of features available in PageBuilder.

Feel the freedom!

Ask your web hosting company to provide you with a user account for Drag drop site creator or Open Source Fusion. They will direct you to a website URL from which you can login and start using Page Builder.

Star Troop This page will contain all future events

©2003 SQLFusion LLC 11/10/03 20: 50:34 Page : 3/25 PAS Page Builder 2.0 User Manual Start PageBuilder Once you have your server setup and configured with PAS and PageBuilder you can start pagebuilder with the following : http://youdomainname/pagebuilder.php You need to select which type of browser your are using and enter your login and password. The Display Modes are Frames versions and Popup with will popup multiple windows. Frame version PAS Pagebuilder will open with the main tool bar, side bar and the web page window.

©2003 SQLFusion LLC 11/10/03 20: 50:34 Page : 4/25 PAS Page Builder 2.0 User Manual Popup windows version PageBuilder will open 3 windows, the “Main Tool bar”, the “Layers” window and the “Web page window”. You can then open 3 additional windows : style editor , includes manager , and tools. Open Pages On startup, In the main window, intropage.php gives you some startup help and the list of the new packages installed, with a link to their documentation. By default an index.php page is installed. The index.php page is the default and first page loaded when users access your web site, also called the home page. In the Main Toolbar window Select the index.php page in the drop down and click on the openfile icon . The PageBuilder will load the index page in the Web Page Window. From there you can choose to add anything you want into the page.

©2003 SQLFusion LLC 11/10/03 20: 50:34 Page : 5/25 PAS Page Builder 2.0 User Manual Add Text To insert text into the page click the add text link or on the main toolbar window. It will open the following text editor window. Rich text Editor Currently the rich text editor works on internet explorer (5 or higher) for Windows, Mozilla version 1.3 (or higher) and Firebird. The layer name is used to identify the layer in the page, Type or cut and paste the content into the editor. You can cut and paste your text from other applications like Open Office or MS Office. To insert the text into the page just click the Add link on the upper right. The text will appear on your page and also in the list of layers (Layers Windows) with the name you’ve provided. In the web page window drag the text where you want it to be, and click on the fix position ( ) button in the main toolbar to save the new position. If you want to modify the text, double click on it. If you want to modify its style sheet information double click on it and click on the style tab.

©2003 SQLFusion LLC 11/10/03 20: 50:34 Page : 6/25 PAS Page Builder 2.0 User Manual Add Images To insert an image click on the add image link on the “Main Toolbar” window. Enter the name you want for that layer and select an existing image in the drop down or upload a new one from your computer Then click on the Add link. You can also use an image that is already on your web site, from a template style or image library. Click on the “Site images” tab. To select an image click on the little round radio button on the left side of the image. Enter the name you want for that image layer.

©2003 SQLFusion LLC 11/10/03 20: 50:34 Page : 7/25 PAS Page Builder 2.0 User Manual The image will appear on the web page. Double click on it to resize the images or rotate it. You can also change the source code that displays that image. If it is an image that already exists on your site, if you rotate it or resize it, the changes will apply everywhere this image is displayed. The image is permanently changed. Add a script from the side tools If you click on the “Tools” link in the side panel it will list the Tools by categories. The default categories are : Menus, Images and links, Form and events, plugins. If you have installed other PAS Packages you will probably have more tool categories. Under the categories you will find a list of tools. To insert one of them in your page just click on its link. A form will request the parameters it needs to run properly. These tools can also be found by clicking the add script button. Manipulate the layers in a page Each element on the page is called a layer. You can move the layers anywhere you want on the page. Click on the layer, keep the mouse button down and move the mouse. Release the mouse button to stop moving the layer. If you want to resize a text or script layer you click on the layer, keep the mouse button down, press the shift key and move the mouse. You’ll see the layer rectangle changing size. Very important: Each time you’ve moved or resized a layer you need to fix its position in the page. Click the to save the position and sizes of your layers. This is the end of the getting started tour.

©2003 SQLFusion LLC 11/10/03 20: 50:34 Page : 8/25 PAS Page Builder 2.0 User Manual Managing pages From the Main toolbar window you can add, edit and delete web pages. Create a new Page To create a new page enter the name of the page in the field with “New Page Name” and click on the create new page icon . The page name needs to end with a “.php”. PageBuilder is using PHP scripting that is identified by the “.php” at the end of the filenames. For portability reasons we suggest that you to use “_” instead of spaces in your file name. On some browsers or operating systems, spaces in file names are not handled very well. Open an existing page To open an existing page select the main toolbar window and select the file you want to open in the drop down list, and click on the open page icon . PageBuilder will load the page in the Web Page windows and the page layers in the Edit Layers properties window. Delete a Page To delete a page you need to open it first. Once the page is loaded in the web page windows you can click on the delete page icon to delete the currently opened page. Saving a page To save your changes to a file, click on the save link or icon. The fix pos link or also saves the page. We suggest that you save your changes often.

©2003 SQLFusion LLC 11/10/03 20: 50:34 Page : 9/25 PAS Page Builder 2.0 User Manual Managing Layers Each element that you can drag and manipulate on your page is called a layer. The icons on the Add tool bar each create a different type of layer: See the related section for each of these layer types. You can manage them from the web page window or the layer window. In the web page window you can edit a layer by double clicking on it, resize it by dragging and pressing the shift key, or modify its style and properties by clicking on it and changing the values on the side bar. The Layer window allows you to manage all the layers on the page at once. You can change properties, or delete a layer by clicking on the icon. You can also modify the content of the layer by clicking on its name. The PageBuilder will open the Edit Layer window. Technical note: The layers are not stored in the page that they appear in on your site. They are stored in a separate page in the layers directory with the same filename. Moving layers in the page When a web page is open you can drag and drop any of its layers. Click on the Layer, hold the mouse down and move it to where you want it on the page, then release the mouse button. Dont forget to click on the Fix position Link or icon in the main toolbar window. Resizing layers If you want to resize a text or script layer, click on the layer, keep the mouse button down, press the shift key and move the mouse. You’l sl ee the layer rectangle changing size. Each time you modify a layer’s position or size you’ll need to click on the fix pos link ( icon) or your changes will be lost.

©2003 SQLFusion LLC 11/10/03 20: 50:34 Page : 10/25 PAS Page Builder 2.0 User Manual Layers general properties In the Layers Window you can change the general layer properties like, position, size, visibility, lock.... Before making change to the layers property make sure you have saved the position of your layers by clicking on the icon. You can access the layers properties by clicking on the layer or opening the Layers windows by clicking on the layers link or in the main toolbar. Each layer has at least the following properties : Size, Position, Visibility, Level, Lock, border.

©2003 SQLFusion LLC 11/10/03 20: 50:34 Page : 11/25 PAS Page Builder 2.0 User Manual Size: you can change the Height and Width of the layer. This will affect the Width of some elements but will not affect images, it is also the dragable zone of your layer. To View the layer size in you web page, click on it and a little border will appear around your layer. By default all of the units are pixels. But you can use other units like : mm (milimeters), in (inches), pt (points), pc (picas) or %(percent). The percent unit is the size in percentage of that layer compare to the browser window size. To apply a different unit add the 2 letters of the unit or the % at the right of your number. Position: you can define the exact position of a layer by setting the left and top coordinates of the layer on your page. This is useful for aligning layers, or to have layers in the exact same position from page to page. Visibili ty: Your can hide a layer on your web page. If you uncheck the Vis. check box the layer will disappear from your web page but still be in the list of layers. If your layer contains scripts they will be executed but no output will be displayed. Level: You can put a layer behind or in front another layer by changing its level index. The levels start at 0. The layer with the highest number will appear on top. Lock: You can lock some layers so they can not be modified on the web page anymore. When you have defined a position for a layer and don’t want to move it by accident, check the Lock check box and the layer will not be moveable anymore. border: When you check the border box, a black border will appear around your layer. Sometimes you need to know where the limits of your layers are, or where it is on the page if it’s a layer with no content. If you want to have a permanent border around your layer it is better to use the style editor. Global: If you check this box, the layer will be stored in the pb_globaldivs.php page. This page is included (by default) on all pages, so layers that are set as global will appear on all pages. Order: This is the execution order. Layers very often contain scripts and sometimes you want some scripts to be executed before other ones. By default the order is 30. If you want one layer to be executed before all others, give it’s execution order a value under 30.

©2003 SQLFusion LLC 11/10/03 20: 50:34 Page : 12/25 PAS Page Builder 2.0 User Manual Text Layers Add text To add text to your web page click on the text link in the main toolbar. The add text layer window will pop up with a form to set the name of the layer and its content. Using the richtext editor you can cut and past content from other applications. Edit text To edit a text layer double click on it or click on its name in the list of layers from the “Layers” window. For internet explorer on windows and mozilla 1.3 or greater a rich text editor allow you to add rich editing in your text. It will also allow you to keep the style of text that was cut and pasted from another application. For other browsers it will display the content source of the text layer with a Style tab to change and apply other style to the site. If you want to add bold, italic colors, etc... you will need to know a minimum of the HTML language. Check the minimal survival HTML kit at the end of this documentation. Delete text To delete a text layer, click on the icon at the left of your layer name in the Layers Window. Or in the side bar click on “Properties” and then “Delete”

©2003 SQLFusion LLC 11/10/03 20: 50:34 Page : 13/25 PAS Page Builder 2.0 User Manual Image Layers Add an image To add an image to your Page click on the “add image” link or in the main toolbar. You can upload an image from your computer, or select an image from the images already uploaded to your web site. Upload a new image: Enter the layer name, use the Browse button to select an image in your computer. Then click on the Add link and the image will be uploaded to your site and inserted in your page. Using an image already uploaded in your site : Click on the “Site images” tab to display all of the images on your website.

©2003 SQLFusion LLC 11/10/03 20: 50:34 Page : 14/25 PAS Page Builder 2.0 User Manual Enter a name for that layer in your page and click on the round radio button on the left of the image to select it. The files displayed are reduced on the right you can see the filename and its real size. Note : you can select only one image at the time. Click on the Add link The new image will be inserted into your page. Edit an image To edit an image click on its name in the Edit Layers Properties window. The Add/Edit Layer window will pop up with the content of the image tag. Use the tabs on top of the window to select your modification. You can rotate the image, resize it or apply a style to it. Resize: The resize tab will display the image with the resize form. You can use the precalculated resize values: ½ 1/ 3 – ¼ 1/ 8 to reduce your image to a half, third, fourth, or eights, then click the Resize button. Resizing or rotating an image will permanently modify it. If your reduce the size of your image and then expand it again, the image will lose quality. If you rotate or resize an image that already exists on your website, the changes will apply everywhere the image is displayed. The change is made to the image, not the page. If you want to keep your image at its original size but display it smaller, you can add width and/or height parameters to the image tag(in the Code tab) on your page. For example : <img src=”images/myimage.jpg” border=”0” width=”100”> This will limit your image width to 100 pixels. <img src=”images/myimage.jpg” border=”0” height=”100”> This will limit your image height to 100 pixels. Rotate: The rotate tab displays the image with 2 links to rotate the image 90d to the right or 90d to the left. Style: In the style window only the border will apply unless in the code tab you have put some extra text or tags. Refer to the “Style Editor” section for more information. Code: This tab contains the exact HTML source code of the layer. You can modify the parameters of the image tag or add more text or tags (title, legend, etc...). Delete Image To delete an image, click on the icon to the left of your image layer name in the Layer Window. Or in the side bar click on “Properties” and the “Delete”

©2003 SQLFusion LLC 11/10/03 20: 50:35 Page : 15/25 PAS Page Builder 2.0 User Manual Color Boxes As background or decoration you can create colored boxes. First add a text layer to your page, then double click on it and click on the Style tab. Select a background color for you colored box. Click the Save link. To finish, delete the text in your colored box(if you entered any) and use drag+shift to resize it. To put your colored box in the background click on the Layers button. In the Level column enter 10 for all the layers and 2 for your colored box. Then click Update Layers. To return to your page click on the View button on the main tool bar.

©2003 SQLFusion LLC 11/10/03 20: 50:35 Page : 16/25 PAS Page Builder 2.0 User Manual Scripts (menus, rollover links, forms....) Scripts are a big part of PAS PageBuilder dynamic features. They are generally PHP or Javascript scripts with some parameters to customize it to your page. They are used to create roll over images, menus, forms, etc... For more information on specific scripts check the Tools chapter in the documentation or check the package documentation . Scripts in the side bars : If you click on the “Tools” link in the side panel it display a list of Tools by category. The default categories are : Menus, Images and links, Form and events, plugins. Under each category you will find a list of tools. To insert one of them in your page just click on its link. A form will request the parameters it needs in order to execute properly. All the tools are also scripts that you can find when you click on the add script button. If you have installed any PAS packages, other categories will be in your tools list. Other scripts: You can find other scripts when you click on the Add Script link or in the main toolbar. The first item is the option to create a new script, all of the scripts on your site are listed in the drop down list. Select one and click on the Add link. Some scripts will display a form with parameters to customize it to your page and site. Create scripts You can create a new script if you are a Javascript, HTML or PHP programmer. Click the Add Script link or , then type the name of the new script and click the Add link. Dont select any scripts in the drop down list. A simple default script will be inserted into your page. You can then modify it by double clicking on it. You can type your programming code in the <template></template> tags or under the comment and insert an include in the template tag. You can find more information on how to create scripts and PAS packages at http://sqlf.net

©2003 SQLFusion LLC 11/10/03 20: 50:35 Page : 17/25 PAS Page Builder 2.0 User Manual Database Forms Database forms let you gather information your website users. Each PAS package comes with it’s own database forms. For example, the PAS Registration package comes with a registration form, a login form, and a getpasswordform. You can add and modify existing forms on your pages, but you cannot create new forms. To create Dynamic Forms you need to use PAS WebIDE. Dynamic forms require a database. You need to ask your hosting company or system administrator if you have a database, and if it is correctly configured. It is easy to add a form to a page but to modify the form’s template you will need HTML skills, and you may also need PHP skills. Add a database form Click on the database form link in the main toolbar window. The Add/Edit Layer will pop up with a form : Choose a layer name for that form in this page. Select the database form you want to insert from the drop down. Select the page to display after the user has submited the form. If the form should be empty when the user enters data, check the Empty Form check box. If the purpose of the form is not to insert or edit data from the database (Default Event) then you can select an other event that will process the content of the form. To insert the form click the Add link. Edit a database form To edit a database form double click its layer or click its name in the Layer List window. The Add/Edit Layer window will pop up with the PHP source code used to display the form. For more information on the use of the ReportForm object check the PAS WebIDE developer documentation. To get more information on the form and how to use it you can click on the Info tab. It contains a description of the form, its features and how to set it up. Database forms use a template to display the form fields. The template is separated into three sections: header, row, and footer. The template contains HTML code and sometimes PHP code.

©2003 SQLFusion LLC 11/10/03 20: 50:35 Page : 18/25 PAS Page Builder 2.0 User Manual If you have insert the same database form on different pages of your site, all of the changes that you will do in the header, row, footer or info will apply to all of the forms on all of the pages. Only the Code and Style tab are specific to the page you’re working on. Delete a database form To delete a database form, click on the icon at the left of your image layer name in the Edit Layer Properties Window. database Reports Database reports are the best way to display database driven content. They use templates to display Database content on your web Page. Each PAS package comes with it’s own database reports. You can add and modify existing reports on your pages, but you cannot create new reports. To create database reports you need to use PAS WebIDE. Adding a database report is easy but editing it requires HTML and sometime PHP skills. A database report can be a list of products, a list of news articles, a shopping cart, a category menu, etc. Add a database report Click on the database report link in the main toolbar window. The Add/Edit Layer will pop up with a form : Chose a name for this layer and select in the Drop down the name of the database report you want to insert into your page. Then click on the “Add” link. Edit a database report To edit a database report click its name in the Edit Layer Properties window. For more information on how to execute a Report (database report) see the PAS WebIDE developer documentation. The template of the database report is in the Header, Row and Footer tabs. The Info tab contains important information on how to use the database report. Some database reports like “Display News List” are very simple but others can be a lot more complex to use like the category list or the shopping cart. All of the information you need to make the database report work should be in the Info Tab.

©2003 SQLFusion LLC 11/10/03 20: 50:35 Page : 19/25 PAS Page Builder 2.0 User Manual Delete a database report To delete a database report, click on the icon at the left of your image layer name in the Edit Layer Properties Window. Tools The tools section makes it easy to insert something on to your page. It’s a very quick way to install images, links, text, menus and most forms, reports, and scripts. Tools are scripts that are grouped by tool category. They are in the side bar which make them more accessible and faster to insert in your page. Images and links This is a collections of scripts to add roll over images, links, popup images, and trigger events on your web pages. Images with link This will insert an image with a link to a page in your web site or external web site. Images Rollover with link This requires two images that will switch when the mouse passese over it. The first image is displayed while the mouse is not over it, the second image is displayed as soon as the mouse goes over it. You can select a page to link to on your web site or type the address (with http://) of an external website. Thumbnail with image popup This requires 2 images. A small image that is displayed on your page and a larger image that is displayed when the user clicks on the small one. Text Link This is a text link with a rollover effectthe text style changes when the mouse is over it: font, color, etc. You can use the Style sheet editor to create the styles, use the ones from a design template package, or use the default ones. You can select a page from your site to link to an external web site. Event text link This is an advanced script, and it requires a minimum knowledge of how to program PAS applications and their events. You can find the PAS Programmer documentation on SQLFusion.org (http://sqlfusion.org). Select in the drop down the event you want to trigger and add the parameters for that event.

©2003 SQLFusion LLC 11/10/03 20: 50:35 Page : 20/25 PAS Page Builder 2.0 User Manual Menus A good way for users to navigate between pages on your site is using menus. This is the set of default menu design templates: Auto created text menu This menu automatically reads all of the page names on your site and displays a link for each of them. Images Rollover This menu is a list of images, vertical or horizontal and has a rollover(mouse over) effect. For each element in the menu you can select a page from your web site or an external URL (internet address with http://). It requires you to have 2 images for each link in your menu. Text Rollover Similar to the Image rollover menu but uses style sheets for the rollover effect. Long Menu with images This is the same as an Image Rollover menu but with more items.

©2003 SQLFusion LLC 11/10/03 20: 50:35 Page : 21/25 PAS Page Builder 2.0 User Manual Form and Events tools This is an advanced feature. These tools let you create a form that triggers an event upon submission. To get more information on Events and how to use them check the PAS programmer documentation at SQLFusion.org (http://sqlfusion.org). Use all four of these tools to create the form. Form Header Select the event that you want the parameters(hidden form fields) and form content to be submitted to. This script will need to be executed before all of the other ones. In the Layers window put the order for that script(event) under 30. Text Field This lets you create one or more text fields for users to enter data. Text Area This lets you create one or more text area fields for users to enter multiline data. Form Footer / Submit This is required to close the form and display the submit button. If you don’t enter a submit button label a default Submit will be set by your browser. Plugins Flash Movie Use this to upload and display a flash movie on a page. You cannot drag drop a flash movie without first creating a border around it. To add a border, click on the Layers link or and check the border check box for your flash movie. Then use the border to drag the flash movie. Portal like box Its displays content in a portal like style (IE phpnuke, my.yahoo.com...). You can change the style of the background color and text colors using the Style Sheet Editor.

©2003 SQLFusion LLC 11/10/03 20: 50:35 Page : 22/25 PAS Page Builder 2.0 User Manual Style editor To edit a layer, click on its name and it will open the Edit Layer window. At the top of the window there are a few tabs. All of the layers have a Style tab, when you click on it you’l l see: The Style editor will apply a CSS style to your layer. You can control the font, text, color and border. Font: By default the drop down has four standard font Face : Serif, San Serif, Monospace, and Cursive. You can add other fonts by entering their name in the text box on the right of the drop down. For exemple : Arial, Helvetica, or Verdana. You can set the size in different units; px for pixel is the recommend one to have a fixed font size on all of the browser types. Text: You can have control of the text alignment and text decoration. Color: The colors are in web format so you need to select them from the pop up window by clicking on the background color icon or text color icon. Border: You can set a border around your layer and specify the style and width. The margin is the space between the border and the content of the layer. When the content goes over the size of the layer you can control the behavior; the different options are : visible will show everything even if it goes over the defined size of the layer hidden will hide everything that is over the defined size of the layer. scroll will add a scroll bar to allow users to scroll through the content of the layer, but will display only the defined size of the layer. auto will automatically add a scroll bar if the content of the layer goes over the defined size.

©2003 SQLFusion LLC 11/10/03 20: 50:35 Page : 23/25 PAS Page Builder 2.0 User Manual Page Includes Editor If you have a big web site it is sometime very useful to be able to include other pages within a page. For exemple if you have standard header and menu for multiple pages in your site, just create one page with the header and menu and then include that page in the other ones. This way you don’t have to create the header and menu on every page. Then when you need to change the menu or the header it will be changed on all of the pages that include it. To open the include editor click on the Includes link or the icon. Add an include page To include a page on your currently opened page, select it in the last drop down in the “Include Files” section. If you want to include a page that was created with PAS Pagebuilder you need to include the one in the /layers/ directory. Click the Apply link to add the page to the list of included pages. Remove an include page Select “Empty” in the drop down on the include page and click on the Apply link. Variables This is an advanced feature that lets you set PHP variables that get passed through CGI. Some include pages require variables, or if you want to set global variables for your page you can set them using the variable section. To add a variable, type the name of the variable and its content and click on the Apply link. To remove a variable empty its value field and click on the Apply link.

©2003 SQLFusion LLC 11/10/03 20: 50:35 Page : 24/25 PAS Page Builder 2.0 User Manual HTML survival kit To get the most out of PageBuilder you need a minimum knowledge in HTML. HTML is a tag based language. Lets start with a simple example : This is a <b>simple</b> text the web page will display : This is a simple text The <b> tag start the bold and the </b> with a “/” slash stops the bold. Here is a list of useful tags : <i> italic </i> <u> Underline </u> <font color=red> This text will be in red </font> <font size=5> This text will be very very big </font>

©2003 SQLFusion LLC 11/10/03 20: 50:35 Page : 25/25