Element Editor

From Wiki openElement
Jump to: navigation, search

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.

To get started, click on File and then select New to create a new element or Open to edit an existing element.

  • Unique name: An automatically generated unique identifier that will be used internally by the openElement software.
  • File name: The file must start with WE and must be a unique name. It will be saved with the extension '.dll'. Do not use spaces or special characters for this name.
  • Display name: Give the element a name as it should appear to users.


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

Properties

Select a property (as defined in Properties tab), and choose a macro to write a corresponding code block, for example writing the property's value or using a condition

Design

  • Editor Mode:

Allows you to create a condition for displaying a block of code depending on the page's rendering mode. e.g:

<oe:editor state="on"> 
	openElement editor enabled 
<oe:else /> 
	openElement editor disabled 
</oe:editor> 
  • Element Container Zone:

Allows you to define a zone (div) in which users can drag & drop other elements. e.g:

<oe:container zonename="YourUniqueName" childposition="absolute" />
  • Style Zone:

Allows you to define a zone that you or users can "skin" to offer various style presets. e.g:

<oe:styleszone tagname="div" zonename="Zone1" class="" style=""> 
	If needed, write the HTML code here  
</oe:styleszone>
  • Text Resources:

Allows you to write the value of a localizable text resource. e.g:

<oe:resource:text name="String1" />
  • Image Resources:

Allows you to write the value of a link to a localizable image resource. e.g:

<oe:resource:image name="Emptyskin45" />
  • File Resources:

Allows you to write the value of a link to a localizable file resource. e.g:

<oe:resource:file name="File1" />

Scripts

Scripts

  • Shared Scripts: Select a shared external script to call on for the element
  • Add: Add external code:
    • Location (in an external file, in the HTML head, start of Body, end of Body, at Top of Document)
    • Type (JavaScript, PHP, CSS, HTML, Other)
    • Name (assign a name), extension will be automatically tacked on

After clicking OK, enter the code as it should appear in the external file (or whichever location you selected)

Properties

(This menu represents the configuration of the script - it does not concern the element's properties)

  • Location - see above
  • Order (Weight) – P1-P8: Change the priority of code written on the page. This is a good way to ensure a script is loaded before another.
  • Enable in Editing Mode: By default, scripts are not written to the page's code in Editing Mode. You may enable them, but use caution to avoid any conflict with openElement.

Design

  • Main Loop for Instances of this Element:
Adds code that loops through all instances of the element on the page, and calls the function InitElement() that receives the element's ID, jQuery object corresponding to its top
tag, and its "shared" properties. The place to enter your code is marked by the comment "YOUR CODE HERE".

Example of code inserted by this macro (EGd7c77113 is the element's unique name):

$(function(){ EGd7c77113.Init(); });

var EGd7c77113 = {

	Init: function() {
		if (OEConfEGd7c77113 === undefined) return;
		var allElements = OEConfEGd7c77113;

		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
		
		// examples:
		// var elWd = parseInt($el.width()); // Obtain the width of the element
		// var bgIm = $el.find('.OESZ_Zone1').css('background-image'); // obtain the background image for Style Zone 'Zone1'
		
	}

};

Important: all other macros should be used inside the InitElement() function.

  • Editor Mode:

Inserts a conditional statement that allows you to execute code ("your code here") in Editor mode only ("inside" openElement). Example of code inserted by this macro:

if (WEInfoPage.RenderMode == 'Editor') {
    // YOUR CODE HERE
  }
  • Style Zones:

Access a Style Zone's HTML tag. Example of code inserted by this macro:

$el.find('.OESZ_Zone1').first()
  • User Properties (Uniquely Shared):

Access a property's value. Only properties marked as Shared "JS"/"All" in the "Properties" tab are accessible. Example of code inserted by this macro:

properties.Property1
  • Text/Image/File Resources:

Access values stored as corresponding resources (defined in the "Resources" tab). Example of code inserted by this macro:

WEEdSiteCommon.GetLocalizableString(OEConfSharedEGd7c77113.Text.T1)

Style Zones

Add

Alows you to define a zone that your or the user can "skin" to offer style presets. This zone will be placed in the element's code. e.g:

<oe:styleszone tagname="div" zonename="Zone1" class="" style=""> 
	If needed, write the HTML code here  
</oe:styleszone>

Behavior

  • Contains Only a Link – True, False

Contains only a hyperlink tag (<a href=> </a>).

  • Exclude from Style Presets – True, False

Choose whether or not to save this zone’s configuration when saving a Style Preset (Enable this if you do not want to save this zone as a "public" Style Zone).

  • Global Event – True, False

Reacts to Style Zone events (hover, click) on the entire element

  • UI Deactivations – Text, Text Decoration, Border, Background, Padding, Margin

Deactivate groups of ribbon menu buttons for this zone

  • Visibility Level – Standard, Advanced, Advanced Selectable

Zone visibility level for the user. Standard = Normal visibility; Advanced = Does not appear in the ribbon and no selection on the page; Advanced Selectable = Only appears in the ribbon if selected on the page

Design

  • (Zone Name) – Text entry

Enter a name to identify the resource in the code. This name must be unique

  • Preview Image – Select image file

Add a preview image to describe the zone. Strict image size of 48x48 px

  • User Information – Click … to enter Name & Description

Information for users about the zone.

Resources

Add text, image, and file resources for the element to use

Text

Translation or modification of customized text

Images

Image files to include on the website

Files

Various file resources to include on the website

Enumerations

Translation or modification of the text of your element's enumeration properties.

Properties

Translation or modification of the descriptive text of your element's properties.

Sharing

If you have created an element that you think the user community would find useful, post a link to to the .dll file on the element editor subforum. Forum users, moderators, and admins will then test your element and, if it meets all the quality criteria, it will be added to the store for all openElement users to download.
Personal tools
Namespaces

Variants
Views
Actions
openElement
Community
Toolbox