Element Editor

From Wiki openElement
(Difference between revisions)
Jump to: navigation, search
(Properties)
(Properties)
Line 122: Line 122:
 
**'''Enumeration''': an Integer value from a list of values with corresponding names  
 
**'''Enumeration''': an Integer value from a list of values with corresponding names  
 
**'''ElementOfPage''': List of strings, where each value corresponds to a page element's ID
 
**'''ElementOfPage''': List of strings, where each value corresponds to a page element's ID
 +
 +
Example of JSON structure of properties shared via the page's "var" file (e.g. index(var).js):
 +
<nowiki>
 +
{"UniqueElementName":
 +
{
 +
"Pstring":"text",
 +
"Pinteger":10,
 +
"Pfloat":1.2,
 +
"Pboolean":true,
 +
"Pcolor":"255, 128, 0",
 +
"Plocalizablestring":{"Items":{"DEFAULT":"text","FR":"text"}},
 +
"Plocalizablehtml":{"Items":{"DEFAULT":"<b>text</b>","FR":"<b>text</b>"}},
 +
"Plinkpage":{"Target":null,"Links":{"Items":{"DEFAULT":"donate.htm","FR":"donate.fr.htm"}}},
 +
"Plinkfileimage":{"Target":null,"Links":{"Items": {"DEFAULT":"Files/Image/Logo/Logo1.png","FR":"Files/Image/Logo/Logo1.png"}}},
 +
"Penumeration":0,
 +
"Pelementofpage":{"List":["WE5a9f56bcc4","WE5a9f56bcc5"]}
 +
}
 +
}
 +
</nowiki>
  
 
==HTML==
 
==HTML==

Revision as of 22:31, 5 February 2014

The Element Editor enables you to create or modify elements that are compatible with openElement.

The premise is simple: Create or adapt a script (HTML, JS, PHP, etc.) in the form of an element so that it may be easily used and configured by a user without writing code.

Contents

Overview

  • The editor generates a dll file that contains everything the element needs to function (code, images, etc). Place the dll file in the '\Common\Elements\' subfolder of an openElement project folder to add the element to the list of elements available.
  • The 'Element Info' tab is used to configure the information that users of the element will be presented with.
  • The 'Properties' tab allows you to configure variables that the user will be able to modify. You may then use these values in scripts or in the HTML to affect behavior.
  • The 'HTML' tab is for writing the actual HTML (as it will appear in the source of the published page and in the editor). The code may contain special tags - see below for details.
  • The 'Scripts' tab is for all the scripts (JS, PHP, css) that the element needs to use. Just like the 'HTML' tab, this section provides options to insert special code snippets, such as the code that obtains a property's value - see below for details.
  • There may be multiple instances of an element on the same page, so your scripts must be able to manage that. A basic model is available by going to 'Scripts' -> 'Design' -> 'Main loop for the samples of this element'; sometimes this code is added automatically on creation of a new script.
  • Scripts should not be enabled in editor mode to avoid possible conflicts with openElement.


To better understand the basics of elements and the Element Editor, you may download these examples:

Dynamic 100%-width background: Download Element (.dll)

Info Panel: Download Element (.dll)

Owl Responsive Carousel: Download Element (.dll)

Modal Pop-Up Window: Download Element (.dll)

Floating Container: Download Element (.dll)

Simple Responsive Left Menu: Download Element (.dll)

Responsive Social Media Share Bar: Download Element (.dll)

Element Info

Behavior

  • Default Property: The default property that users are proposed to set when a new instance of an element is added to the page. Example: "Images" property for a gallery.
  • Default Style Preset: The default style preset an element should have when first added to the page. Click … to select an .OESkin file.

Design

  • Information for Users: Click … to open a dialog to enter practical information for users about your element (e.g. Name, Author, Description, URL, etc.)
  • jQuery Version: Select which version of jQuery is required for proper functioning of the element
  • License: Select the licensing for your element. If it is proprietary, choose the terms under which you would like to distribute the element. If it is adapted from someone else’s source code, be sure to give proper credit in the Information for Users and to use the appropriate license.
  • Type of Element: PageEdit (visible on the page) or HiddenEdit (hidden from the page - i.e. does not have corresponding HTML code in the page's body - and configurable from the hidden elements bar above the editing pane)
  • Unique Element Name: The element’s unique name, as generated when the element is first created.
  • Version Number: Version number of element, indicates whether changes have been made, so that users can use the latest version

Images

  • Icon: Icon for the element. Click … to select an image file (size 16x16)
  • Large Preview: Large preview of your element in action, to be shown to users. Click … to select an image file (size 300x200)
  • Medium Preview: Medium preview of your element in action, to be shown to users. Click … to select an image file (size 160x100)
  • Small Preview: Small preview of your element in action, to be shown to users. Click … to select an image file (size 90x90)

Properties

Add or modify properties (variables) that the user of your element can then modify in the Properties tab of the Elements Menu in openElement.

These values will be accessible in the element’s HTML code or using JavaScript.

You will find macros that generate the code for each property you’ve created in:

'HTML' -> 'Properties'

e.g: <oe:property:write name="Property1"/>

'Scripts' → 'Design' ->'Properties' (Set property’s 'Share Value' to 'JS' )

e.g:

$(function(){ EG30dce908.Init(); }); 
var EG30dce908 = { 
	Init: function() { 
		if (OEConfEG30dce908 === undefined) return; 
		var allElements = OEConfEG30dce908; 
		for(var ID in allElements) { 
			var $el = $('#'+ID); // The element's main <div> tag 
			var properties = allElements[ID]; // element's available properties for JS 
			this.InitElement(ID, $el, properties); 
		} 
	}, 
	InitElement: function(ID, $el, properties) { 
		// YOUR CODE HERE 
		var prop1 = properties.Pstring; // Example: obtain user property value 
		// Use design macro for more samples  
	} 
}; 

Add

Click to add a property for your element. Choose a Type (String, Integer, Float, Boolean, Color, LinkPage, LinkFile, LocalizableString, etc.) and assign text or value if property is null.

Behavior

Assign behaviors for the properties

  • Read Only – True, False

Read only = True will make the property un-editable by the user.

  • Share Value – Js, Php, All

Indicate if the value must be exported to be used with JavaScript or PHP

  • Update Mode – Element, Page, ElementwithCSS, OnlyCSS, None

How the page should be updated after each value change.

  • Visible – True, False

Should changes made by the user be visible or invisible?

Design

  • Property Name

Assign a name to identify this resource in the code. Name must be unique.

  • User Information

Enter information about the property for users (i.e. Name, Description, Category)

Format

Value Format Select the value’s format or type (e.g. String, Integer, Float, Boolean, Color, LinkPage, LinkFile, LocalizableString, etc.)

  • Basic formats:
    • String, Integer, Float, Boolean
  • OE-specific formats:
    • Color: RGB color (string)
    • LocalizableString: Multilanguage dictionary of text strings, a pair of values - e.g. ('EN':'My text') - for each of the website's languages.
    • LocalizableHtml: Multilanguage dictionary of HTML strings, a pair of values - e.g. ('EN':'<b>My Text</b>') - for each of the website's languages. Enables editing an HTML-formatted string value.
    • LinkPage: Multilanguage dictionary of links to site pages, a pair of values for each of the website’s languages.
    • LinkFileXX: Multilanguage dictionary of links to files, a pair of values for each of the website’s languages.
    • Enumeration: an Integer value from a list of values with corresponding names
    • ElementOfPage: List of strings, where each value corresponds to a page element's ID

Example of JSON structure of properties shared via the page's "var" file (e.g. index(var).js):

{"UniqueElementName": 
	{ 
	"Pstring":"text", 
	"Pinteger":10, 
	"Pfloat":1.2, 
	"Pboolean":true, 
	"Pcolor":"255, 128, 0", 
	"Plocalizablestring":{"Items":{"DEFAULT":"text","FR":"text"}}, 
	"Plocalizablehtml":{"Items":{"DEFAULT":"<b>text</b>","FR":"<b>text</b>"}}, 
	"Plinkpage":{"Target":null,"Links":{"Items":{"DEFAULT":"donate.htm","FR":"donate.fr.htm"}}}, 
	"Plinkfileimage":{"Target":null,"Links":{"Items": 	{"DEFAULT":"Files/Image/Logo/Logo1.png","FR":"Files/Image/Logo/Logo1.png"}}}, 
	"Penumeration":0, 
	"Pelementofpage":{"List":["WE5a9f56bcc4","WE5a9f56bcc5"]} 
	} 
} 

HTML

Scripts

Style Zones

Resources

Sharing

Personal tools
Namespaces

Variants
Views
Actions
openElement
Community
Toolbox