Getting started

From PhiWiki
Jump to: navigation, search
How-To overviewText - manipulating text and defining text sources

In this document you will guided step by step to create your first page with the Phi framework. Artephis is the editor you design and add functionality to your dynamic web pages in Phi.

Starting Artephis

EditorIcon.png
After installing Phisketeer you find Artephis in the following locations:

Windows

Start Artephis from the Start-menu (Phisketeer folder) or from the binary path, usually C:\Program files (x86)\Phisketeer\bin\Artephis.exe

Mac OS X

Open Finder and start Artephis from the Applications folder or from the Launchpad.

Unix / Linux

Untar the downloaded archive

$ tar -zxf Phisketeer-Linux64-2_x_y.tar.gz

Check phisketeer-2.x.y/bin/Artephis for missing libraries on your system

$ cd phisketeer-2_x_y/bin
$ ldd Artephis

In Ubuntu for example you can install depended libraries with

$ sudo apt-get x11-common libxfixes3 libxcb-dri2-0 libxcb-glx0 libxdamage1 libglapi-mesa libgstreamer0.10-0 libxslt1.1

If all libs can be resolved start the Artephis IDE

$ ./Artephis

Now use the Settings menu from Artephis and start the Phis server.

Setting up the page

PageMenuIcon.png

First we need to define some setting for our new page.

PageTitle.png
  1. Click on the Settings icon to open the page dialog (or open the context menu by clicking the right mouse button in a free page area and select Page settings). In the Info tab you find the Page ID. You can overwrite this page ID, however it must be unique through all pages in one domain (Phis, the web service caches pages for faster access).
  2. Enter a title for your page.
  3. Change to the Page tab and click on the background color button. Choose a light gray color.
  4. Accept the settings by clicking on Ok.

Adding items to the page

Elementbox.png

In the element box you find all items Phi provides for your page.

  1. Drag an Ellipse item and drop it in the center of your page.
Grid.png
  1. Enable the Grid for snapping positions.
  2. Use the red boxes to change the size.
  3. Double click the ellipse to open the property dialog (you can also click on the tools icon in the menu bar, or use the context menu by right clicking on the item).
  4. The Id is the unique item id for this page. The Parent is the container item for layouted items. You may ignore this yet. Change the Id to ellipse_1.
  5. Enter 1440 in the span angle (spans a 90° angle counter clockwise from the horizontal: 1=1/16th degree).
  6. Change to the Gradient tab and play around with some gradient settings. You can also save your newly own created pattern.
  7. Click on the Effects tab and choose Graphical. Select Shadow.
Ellipses.png
  1. Close the dialog by pressing Ok.
  2. Press Ctrl-C and than Ctrl-V to get a copy.
  3. Open the second ellipse_2 property dialog and enter 1440 in the start angle.

Saving the page

Now we need to save the page and view it via an external browser or Amphibia.

  1. Select Save as from the menu and save your page in the document root of the server, located usually in:
    1. Windows: C:\Program files (x86)\Phisketeer\data\default\localhost
    2. Mac OS X: ~/Library/Artephis/phis/default/localhost
    3. Unix / Linux: /var/phis/default/localhost
    4. Apache module: See Apache document root
  2. Ensure you have write permissions to the location.
  3. Save it as mypage.phis (*.phis is the ending for Phi server pages).
  4. Verify the location: usually after installation of the PhiSuite you find already two pages phitest.phis and phitestpost.phis in that location.

Since v1.4.0 you can start the standard browser or PhiApp directly from the tool menu viewing the current edited page.

Testing your page in a browser

After saving you can directly test your page in a browser.

Browserview.png

Since v1.4.0 you can directly use the icons in the tool bar of the Artephis editor to open the current page in a browser or in native Phi mode with PhiApp.

Or open the URL manually in your favorite browser:

  1. Open a browser of your wish (like Firefox, IE, Opera).
  2. Enter the URL (per default Phis serves the pages on port 8080): http://localhost:8080/mypage.phis.
  3. You should now be able to view the two created pies with a shadow.
  4. Examine the source code (HTML output) which Phi created for your page.

Phi creates PNG images for all your graphics, slide shows, rollovers, etc. automatically and generates special code for every browser type to optain the best supported results by each browser and version, ie. a SVG (scaleable vector graphics) item will be rendered as an image on server side if the browser does not support it natively. This frees a developer completely from implementing browser specific details and he can concentrate on the functionality.

You can see which browser code is used if you examine the HTML header, for example: <meta name="generator" content="Phis 1.4.0/Gecko 19">

See also: Supported browser engines.

Note: Since v1.5.0 the PhiPlugin is obsolete and not longer supported.

Lessons learned

  • Each page needs its own page ID within the same domain.
  • You may use a grid to arrange your items.
  • Gradients are a powerful effect for some display items.
  • Items have a unique ID within the same page.
  • Phi server pages have the file ending *.phis.
  • Embeded images in the page are created as PNGs sent to the browser.
  • Phi creates different HTML code for several browsers.
  • You can copy items between pages or the same page by pressing Ctrl-C and Ctrl-V (Cmd in Mac OS X).

How-To overviewText - manipulating text and defining text sources