Elements

From PhiWiki
Jump to: navigation, search

Attention: the documentation is currently in an update progress for version 2.0! Some links and references may not work. Please be patient.

Overview

Here you find a brief description of all available elements provided in Phi. Click on an item of interest to obtain a detailed description.

Note: Since v2.0.0 all items can be layouted.

Input Display Layouts & container
Lineedit (1) Text line type="text" Ellipse (13) Ellipse <img> Login (17) Login container <div>
Textarea (2) Multiline <textarea> Rect (14) Rect with rounded corners <div> or <img> GridLayout (19) Grid layout <div>
Password (3) Password type="password" Image (16) Image item <img> VBoxLayout (20) Vertical layout <div>
Checkbox (4) Check box type="checkbox" Link (23) Menu link <div> HBoxLayout (21) Horizontal layout <div>
Radiobutton (5) Radio button type="radio" Graphictext (28) Graphical text <img> Formlayout (22) Form layout <div>
Button (6) Native Button type="button" Graphicrichtext (29) Graphical rich text <img> Address (34) Address container <div>
Submit (7) Submit button type="submit" Label (30) Text label <div> Creditcard (36) Credit card container <div>
Reset (8) Reset button type="reset" Rollover (37) Image rollover button <img> Contact (38) Contact container <div>
Filebutton (9) File button type="file" Richtext (41) Text (HTML subset) <div> Period (39) Date period container <div>
Select (10) Select box <select> Svg (42) Scalable vector graphics <svg> or <img> Registeruser (40) Register user container <div>
Hidden (11) Hidden item type="hidden" Slideshow (44) Slide show <div> HSpacer (26) Horizontal spacer <div>
Imagebutton (12) Image button <button> VSpacer (27) Vertical spacer <div>
Multiselect (18) Multi select box <select>
Dateedit (31) Dateedit <div>
Calendar (32) Calendar item <div>
Langselect (33) Language selection <select>
Checklist (43) Table with checkboxes <div>
Table (46) Decorated table <div>

Display items

All shaped items can be drawn with a different color, shape and outline. Display items can be part of layouts since v2.0.0.

// since version 1.3.0 (ServerScript):
$('id').color('#3445a2');
$('id').bgColor('red');

// versions before 1.3.0 (ServerScript):
var item=document.getElementById('id');
item.style.pattern=1; // solid pattern
item.style.line=2; // dashed line
item.style.penWidth=2.5;
item.style.outlineColor='#a300ff';
item.style.backgroundColor='#a300ff'; // same as item.style.outlineColor

See also: item.style.

Canvas

Φ61 Provides a canvas space. In older Browsers, which do not support the Canvas element directly, a static PNG image is created and send to the client.

Example:

phi.onload=function() {
 draw();
}

function draw(){
 var ctx = document.getElementById('canvas').getContext('2d');
 // Quadratric curves example
 ctx.beginPath();
 ctx.moveTo(75,25);
 ctx.quadraticCurveTo(25,25,25,62.5);
 ctx.quadraticCurveTo(25,100,50,100);
 ctx.quadraticCurveTo(50,120,30,125);
 ctx.quadraticCurveTo(60,120,65,100);
 ctx.quadraticCurveTo(125,100,125,62.5);
 ctx.quadraticCurveTo(125,25,75,25);
 ctx.stroke();
}

Warning: Image manipulation with drawImage(), getImageData() and putImageData() is currently not supported.

External items

Beginning with version v1.3.0 Artephis got a new element section for external items like Facebook, Twitter & Co.

Facebook like button

Φ55 v1.3.0 Provides a Facebook like button. You can enter the options in the text area, using an ampersand & as delimiter.

Supported options:

  • href [url] - the URL to like
  • layout [standard | button_count | box_count] - defines the layout of the button, i.e. showing the counter
  • show_faces [true | false] - show thumbnails of the people who like this
  • action [like | recommend] - text on the button
  • colorscheme [light | dark] - defining the style
  • font [arial | lucida+grande | segoe+ui | tahoma | trebuchet+ms | verdana] - font style

Example:

href=http://www.phisys.com&layout=standard&show_faces=true&action=like

Note: Facebook provides special settings in the header of a HTML document called open graph. You can set these options in the Page settings dialog.

Google+ button

Φ57 v1.3.0 Provides a Google+ button. Use the ampersand & as delimiter.

Currently supported are:

  • href [url] - the URL for the Google+ button
  • size [ standard | small | medium | tall ] - size of the button (24px, 15px, 20px, 60px)
  • callback [function] - JavaScript callback function

Example:

size=medium&href=http://www.phisketeer.org

Warning: due to the nature of this item, the button will not be displayed in older browser versions (mainly IE prior version 9) and it's not a bug of Phi.

Google calendar

Φ62 v1.5.0 Provides a Google calendar. Use the ampersand & as delimiter.

Currently supported are:

  • color [#000000] - the color for the calendar
  • bgcolor [#000000] - the background color
  • title [string] - title of the calendar
  • ctz [string] - time zone
  • wkst [ 0 | 1 ] - week start (Sunday or Monday)

Example:

6br0cushftao9k56ldrebkrbls%40group.calendar.google.com&color=%23B1440E&title=Phisketeer&wkst=1&bgcolor=%23ffffff&ctz=Europe%2FZurich

Google static map

Φ56 v1.3.0 Creates a static Google map for a specific location. Phi creates a PNG image on server side, so all graphical effects can be applied in both environments (even Blur, Reflections, etc.). Use the ampersand & as delimiter.

Supported options:

  • center [cityname] - name (optional street separated by comma) of the city to be centered on the map (mandatory)
  • zoom [0-21] - zoom level (mandatory)
  • maptype [roadmap | satellite | terrain | hybrid] - type how the map is rendered. roadmap is the default
  • sensor [true | false] - client is using a sensor (mandatory)
  • style - map style (see the Google styled maps API)
  • markers - allows to set markers (see the Google maps marker API)
  • path - draws a path between two locations ( see the Google maps path API)

Example:

center=Zurich&zoom=14&maptype=terrain&sensor=false

Note: do not use local city names like Zürich use Zurich instead.

Note: to work correctly the server needs to connect to the Google server the first time the map is requested. The image will than be cashed.

Google maps

Φ63 v1.5.0 Creates a dynamic Google map for a specific location. Use the ampersand & as delimiter.

Note: please refer to the http://en.wikipedia.org/wiki/Google_Maps documentation for further information about Google maps.

HTML document

Φ49 v1.0.1 Includes an external HTML document by specifying an URL. This enables you also to include external Flash movies or even complete other pages into your current page.

See also: item.url.

Twitter button

Φ58 v1.3.0 Provides a Twitter button. Use the ampersand & as delimiter.

Supported options:

  • count [horizontal | vertical | none] - position of the counter
  • url [url] - URL of the page to share
  • text [title] - content of the title tag (tool tip)
  • related [accounts] - recommended accounts
  • via - screen name of the user to attribute the Tweet to

Example:

count=horizontal&url=http://www.phisys.com&text=my+special+title

YouTube video

Φ60 v1.3.0 Embeds a YouTube video. Add the video ID followed by a question mark '?' and use the ampersand & as delimiter for the parameters.

Important supported options:

  • hd [0 | 1] - play video in HD if available
  • modestbranding [0 | 1] - hide YouTube logo
  • version - version of the player (should be 3)

See also: YouTube player parameters

Example:

<Video ID>?hd=1&modestbranding=1&version=3

Note: an embedded video is currently the only element which can not be perspectively transformed in any way.

Layout items

Layout items can be layouted in linear, form or grid layouts. The layout item becomes a parent of the layouted child items. In Phi the contents of layouts are automatically resized to fit for example the text label in different languages. Since v2.0.0 all items can be part of a layout.

See also: Layouts.

Country selection

Φ47 Offers a country selection box with predefined english country names.

To preselect a country with the corresponding country code use (in the server script environment):

var lang='de'; // ususally optained by a sql statement
var reg=new RegExp( '\\['+lang+']' );
var countries=document.getElementById( 'phicountry' ).value;
countries=countries.replace( reg, '['+lang+'][true]' );
document.getElementById( 'phicountry' ).value=countries;

And in the client browser environment:

var lang='de';
$('phicountry').selected( lang, true );

See also: system.countryName(), .selected().

Warning: if you create this item dynamically with document.createElementById() the content will not be set.

Email edit

v1.1.0Φ51 Displays a text field for an email address. The input is validated.

Phone number edit

v1.1.0Φ54 Text field for editing phone numbers. The input is validated and may contain a '+' at the beginning, numbers and spaces.

Progress bar

v1.3.0Φ59 Provides a progress bar the display a progress. Progress values are in the range from 0 to 100. A progress bar has an initial value of 0.

$('progressbar').progress( 10 ); // Sets the progress of the bar to 10%

See also: .progress().

Note: the initial value can currently not be changed with server scripting.

Search edit

Φ50v1.1.0 Text edit for searching strings. Some browsers render those text boxes specially (i.e. Safari with rounded corners).

Phi layout container items

Phi layout container represents a convenience way for users to prevent to input their data again and again. If you do not want to provide a special field to the user simply make it invisible or since v2.0.0 you can also break the layout container and remove the unnecessary elements.

Note: since layout container items contain other elements they can not be created with document.createElementById().