From PhiWiki
Jump to: navigation, search

Artephis is the IDE (Integrated Development Environment) for creating the special pages which are parsed by the Phis server or the Apache module. The produced file names end in *.phis. Artephis uses a binary format for fast access however we plan support for XML in version 3 - this enable other vendors or the open source community to create their own editors for Phi. Use Getting started as a good introduction into Artephis.

Artephis main window

Note: The images can vary on different operating systems.

See also: Installation notes, Item gallery, Page settings, Item properties, Database support, Text sources, Image sources, Item layouts and Tutorial & How-To.

Main Window

The main window contains all the needed tools to create well designed Internet- and Intranet pages. The central widget contains the workspace. Multiple workspaces can be opened simultanously separated by tabs and all elements can be moved and copied in between different workspaces using Cut&Paste.

Show template

If you reference a Master template page, this page will be displayed in the background (with can be switched on and off by clicking on the). Elements from the master page can not be selected nor be moved or changed. Master templates can be made invisible by clicking on the Show template icon.

Tab order mode

Click on Switch to tab order mode to easily edit the tab ordering of the items by simply clicking on the elements. If the number does not start with '1' you probably have a master template page with input items loaded in the background.


Artephis menu

The File menu contains menu items for file handling of the selected page. This should be self explaining. The Edit menu has items for text settings and cut/copying elements. You also will find the undo/redo links here and the tab order switch. The Site contains links to site configurations. The site menu specify default values for all new created pages, like author, version information, database connections, colors (ie. corporate identity), etc. - this menu is available in the professional versions only. The Items offers links to layout input elements, delete them, or open the properties page. You also may enable the grid for exact alignment. In the Tools menu you can show and hide the tool boxes. Finaly the Help menu item contains links for context menu and information about the IDE version.


Element selector

In the Elements box you can drag several Phi items and simply drop them into the current document.

  • Display items are useable for drawings only.
  • External items reference external data like Google+, Facebook, YouTube, etc.
  • Input items create POST data (by using the item ID) for forms.
  • Layout items contain predefined layout container for example credit card layouts, address layouts, login, and more.

Since v2.0.0 all items can be part of layouts.

Note: You can even create your own items as they are implemented as plug-ins since v2.0.0 using Qt/C++.



Each item defines it own properties. Some properties like font, colors, outline are common and available in the bottom toolbars.

The following properties can be changed by directly Drag&Drop or clicking the respective icon:

  • color (foreground, font, pattern)
  • a couple of predefined patterns and the gradient type
  • opacity (100%=opaque, 0%=fully transparent)
  • outline / background color
  • outline style (solid, dash, dot, ...)
  • outline line with

If you double click (or from the context menu) an item the Item properties dialog will be shown.

If you use the special palette color Transparent from the left bar, the respective color will be fully transparent.

Note: If you do not want any outlining use None for the outline style and not a transparent color!
Style: None

See also: Predefined colors, .opacity(), Item API, Item properties.


In the History toolbox on the right you can undo several steps of editing. A single entry contains the changed setting(s) and the corresponding ID of the item. The usual Undo and Redo short-cuts are also available.

Active elements

Element selector

Since v1.3.1 the Active elements toolbox shows all used items in the current page displaying the type (icon), the item ID, position and size. By clicking on the elements icon on the left you can hide or show elements for better editing on the workspace (e.g. if you have overlapping items). The z-index can be changed by dragging and moving an element to a higher or lower position or using .zIndex() from the Javascript.pngJavaScript API.


With the transformation toolbar you can change the rotation angles and/or shear each item. You can switch to the transformation mode by clicking on the item header. Perspective transformations

Note: All recent browser versions can display elements in a real 3D space now. Phi creates 3D transformations for all items based on images (SlideShow, Graphical text, Rollover button, Image) on server side for browser versions which do not support 3D transformations - perspective transformation components are silently ignored for all other items. However all browsers support transformations in a 2D space (like skewing and rotation through the z-axis).

See also: 3D transformation.

Page settings

You can reach the Page settings dialog by clicking on the gear icon: Page settings. Here you can define several settings like the page ID (must be unique!), title, size, predefined colors, database settings, Serverscript.pngServerScript, Javascript.pngJavaScript and a lot more.

Phis server log

ServerScript menu
If you use a local running Phis server (always true on Mac OS X) you can examine the log which you can open from the File menu clicking ServerScript log.


The Preferences dialog contains settings about the IDE language and version, licensing (not always visible) and server settings.


Change the IDE language or update the IDE if a new version is available (not available for AppStore versions).


Only available for professional versions. You can enter your license information here.


Here you can change the Phis server settings or start and stop the service.