IUEditor Manual¶

_images/iueditor-facebook-ad-img-A03.png

Welcome to IUEditor Manual.

You can download IUEditor from website below.

IUEditor Homepage : http://iueditor.org
IUEditor Facebook Page (Korean): https://www.facebook.com/iueditor

Note

Anyone can use IUEditor for personal and non-commercial projects (up to 5 pages).

What is IUEditor?¶

IUEditor is optimized to simplify the complex process of design and development.

Advantages¶

IUEditor is a GUI-based program which allows users to design a prototype without any coding.
Also, IUEditor allows users to develop a product or a website that supports multi-screen devices with just one IU project file.
IUEditor is integrated via backend layers such as python.

Values¶

IUEditor enables designers to work together with developers without publishers so that your team or company can save cost and time.
Furthermore, IUEditor enables your team or company to ship products early, so you can adopt a lean process and iterate to build a better product or website.

More …¶

You can check javascript manual on http://cdn.iueditor.org/js/readme.html

Environment¶

IUEditor operates only on Mac OS X - Yosemite & El Capitan. (10.10.a +) And you have to install Git & Heroku Toolbelt (Heroku account also required)

Browser support : Chrome, Safari, Firefox, Opera - current / IE 9+

Git Download : http://git-scm.com/downloads
Heroku Toolbelt : https://toolbelt.heroku.com

Menu¶

IUEditor¶

About IUEditor : Show IUEditor’s version info.
License : Show IUEditor’s license info. You can enter license key and visit license page.
Preference : Open IUeditor Preference window.

File¶

New Project : Open New Project window.
Open : Open Finder to find IU Project file to open.
Open Recent : Open recent IU Project file.
Save : Save the current project.
Duplicate : Duplicate the project’s current path.
Rename : Edit the name of the project.
Move To : Change current project’s path .
Close : Close current project.

Project¶

Build : Generates HTML & CSS & JS files based on IU Project.
Build Clean : Clean build data. It can fix program error.
Project Setting : Opens Project Setting panel.
Upload to Server : Opens Upload to Server panel.
Upload to Heroku : Opens Heroku Management panel.
Refresh Page : Refresh current page. It can fix program error.

View¶

ZoomOut : Zoom Out stage.
ZoomIn : Zoom In stage.
Outline : Show or hide outline of widgets in canvas.
Widget Info : Show or hide information of widgets in canvas.
Ruler : Show or hide ruler on canvas.
Guide : Show or hide guide on canvas.
Tracing : Show or hide tracing image on canvas.

Window¶

Event : Opens Event panel .
Resource : Opens Resource panel .
Memo : Opens Memo panel .
Manage Custom Widgets : Opens Manage Custom Widgets Panel .

Help¶

Search : Search IUEditor function.
Documentation : Open IUEditor Manual page in the brower.
Visit IUEditor : Open IUEditor Homepage page in the brower.
Visit Facebook : Open IUEditor Facebook page in the brower.

Widget Panel¶

Widget toolbar is at the right side of canvas. Open and close Wiget Panel with Show/Hide Widget Button in the middle tool bar. Widget panel consists of IU Widget / Custom Widget tab.

IU Widget¶

In IU WIDGET tab, all available widgets in IUEditor will be shown. Fundamental elements including Box / Text / Image / Static Image / Cell widgets and other various widgets used in a web page are offered. All the provided widgets are divided into Base, Complex, Programming groups. You can see the detailed information of each widget by right-clicking the widget.

Go To Widget Property

Custom Widget¶

In CUSTOM WIDGETS tab, custom widgets imported by Import Button (Window> Manage Custom Widgets) will be shown. The widgets can be divided into customized widget groups. You can add custom widgets on canvas by drag and drop or double clicking the widget. You can check the detailed information of a widget by right-clicking it. All the information of custom widgets can be edited at Manage Custom Widget window.

Refresh Button : Updates custom widget library.
Search Field : Search custom widget library by name or tag.
Zoom in/Zoom out Button : Zoom in or out custom widget library.

Go To Manage Custom Widgets Panel

Navigation¶

Navigation area is at the left side of canvas. Three key elements are Structure , Page ,and Composition.

Structure¶

The components of the current page (section, header, footer, page content, widget, …) can be seen in this area.

You can rearrange, remove, rename, and hide widgets from the structure.

Add New Popup : Add a popup widget into the current page.
Add New Panel : Add a panel widget into the current page.
Add New Section : Add a section to the page content.
Delete : Delete the selected element.

Page¶

Page tab shows the list of pages/groups included in the current project. You can add, remove, and rename pages/groups.

Add New Custom Page Button : Adds a new custom page.
Add New Page Button : Adds a new page.
Add New Group Button : Adds a new group.
Delete Button : Delete the selected page or group.

Composition¶

Composition tab shows the design compositions of the current project. You can add, remove, and rename composition & group.

Add New Custom Composition Button : Adds a new custom composition.
Add New Composition Button : Adds a new composition.
Add New Group Button : Adds a new group.
Delete Button : Delete the selected composition or group.

References¶

How to rename widget, page, and group

Select the item (widget, page, or group) you want to rename
Press Enter or Tab key
Type new name as you want
Press Enter Key

Note

You can not use these names : id / ifdef / default

Canvas¶

Canvas is the preview of the website. The structure designed on the canvas by adding widgets will be shown in the web page.

`How to add widgets to canvas`_

Context Menu - Single Widget¶

_images/iu_manual_canvas_context_single.png

After selecting a single widget in canvas, right-click to open the Context Menu. Below are information and functions in the Context Menu.

Widgets : Shows the whole widgets placed at the current position of the mouse pointer.

_images/iu_manual_canvas_context_single_widget.png

Add Memo : Opens Memo Panel where you can add memo about the selected widget.
Export to Widget : Opens Export Widget Panel that is used to export Custom Widget .
Show Event : Opens Event Panel that allows us to add an event to the selected widget and later make adjustments on events
Select Tab : Switches Property panel on the top to the selected `Tab`_

Developer Mode¶

From the toolbar at the top, you can switch to Developer Mode by clicking Mode Switching Button.

In Developer mode, Code Panel will be shown. It consists of HTML ID / Custom Code .

HTML ID¶

You can check and change HTML ID here. There is a check box for Export HTML ID. At the Project panel (IUEditor Menu Bar > Preference), you can set the options from Export HTML ID Option. (Offered options: Always include/ Optimization & customization)

Custom Code¶

You can write back-end, custom css, script code. The tab composition differs between widget and project type.

Prototype Mode¶

From the toolbar at the top, you can switch to Prototype Mode by clicking Mode Switch Button.

Prototype Mode offers Revision History / Project Workflow / Node Description page. You can refresh scenario by clicking Reset Workflow and can build HTML Scenario by clicking Build Senario. And Refresh Thumbnail updates the page thumbnails that are included in the workflow and the page list.

Revision History¶

Displays the history of revision made in the current project. You can add or change the history.

Add New Date : Creates a new editable row field in the table.
``Remove Date `` : Deletes the selected row from table.

Project Workflow¶

Displays Workflow of the current project. Users can add nodes by drag and drop of page thumbnails. Press delete key to delete the selected node.

_images/iu_manual_advanced_prototype_mode_thumbnail.png

Default thumbnails : A list of page thumbnails included in the project.
Custom thumbnails : A list of page thumbnails captured by using Page Capture Button on the toolbar in editor mode.

Note

Thumbnails can be added by using Page Capture Button in Editor Mode.

_images/iu_manual_advanced_prototype_mode_workflow.png

Rectangle Button : Adds a square dialog below the selected node.
Rhombus Button : Adds a diamond dialog below the selected node.
Inward Label : Adds a label on top of the selected node.
Outward Label : Adda a label below the selected node.

Node Description¶

Displays the Node Description of the selected page. By adding memos to the node, you can send orders to partners of your collaborative project. You can also add or change content in the Screen Description or Exception area. Double-clicking the thumbnails on canvas also displays the node description.

Memo image area : Selects an image from the resource panel to replace the numbering in the screenshot area.
Add Memo Button : Creates a new editable row field in the table.
Delete Button : Deletes the selected memo in the table.

When you click the screenshot area, the number of the selected memo will apear.

Heroku Management¶

In order to upload the Built Files to your Heroku Server, open the Heroku Management Panel (Project > Upload to Heroku menu). With this panel, you can upload your project to the server.

Upload to Server¶

When you run Project > Upload to Server(⇧⌘U) menu, Upload to Server Panel will be shown.

With this panel, you can upload the Built Files to your Server.

Project Setting¶

When you run Project > Project Setting (⇧⌘P) menu, Project Setting will be shown. You can modify settings from Default , Meta , Build , Django Tab menu.

Default¶

Project Title : Adds the title of the project.
Favicon : Adds favicon image (Favicon image resource is required).
Custom Header Code : Adds custom code which will be applied to each page of the current project.

Note

After creation of a new project, Project Default Width cannot be changed.

Meta¶

Meta Image : Adds Meta Image for meta-data. (URL)
Author : Adds Author name for meta-data.
Project URL : Adds Project URL for meta-data.
Project Keywords : Adds Project Keywords for meta-data. (Multiple keywords are available)
Project Description : Adds Project Description for meta-data.
Facebook Admin : Adds Facebook Admin ID for meta-data.
Facebook App ID : Adds Facebook App ID for meta-data.

Build¶

Build Path : Set Build path for built files.
Build Resource Path : Set Build Resource Path for built resource files.
Resource Prefix : Set Resource Prefix.
Link Prefix : Set Link Prefix.
HTML Port : Set HTML Port for build.

Note

If your project’s domain isn’t the same as the root path, you have to modify Resource & Link Prefix.

Django¶

Note

Django tab is available on Django Project .

Django Build Path : Set Django Build path for Django build files.
Django Resource Path : Set Django Resource Path for Django resource files.
Django Resource Prefix : Set Django Resource Prefix.
Runserver after build : Set Runserver option.
Django Port : Set Django Port for Django build.
Python Interpreter Path : Set Python Interpreter Path for Django build.
Django Manage.py Path : Set Manage.py path for Django build.

Resource Panel¶

When you run Window > Resource (⇧⌘R) menu, Resource Panel will be shown. You can import resources (image / video / clipart) into Resource Panel.

Note

Supported File Type : jpg / png / git / svg / mp4

Import Resource Button : Imports resources from the local disk.
Import Clipart Button : Imports cliparts from Import Clipart .
Resource Type Select Button : Sorts out files in Resource Panel by file type.
Add New Folder Button : Adds a new folder.
Delete Button : Deletes the selected file(s) or folder(s).

Import Clipart¶

You can import clipart images that are supported by IUEditor.

_images/iu_manual_panel_resource_clipart.png

Import : Imports selected clipart(s)
Cancel : Closes Clipart Panel.
Grid / List View Change Button : Switches view type (List & Grid).
Clipart Type Select Button : Sorts out clipart in Clipart Panel by tag.
Search : Searches by filename.

Resource Management Tips¶

You can create groups and reorder files in resources.
You can insert image resources to widget by drag & drop into Image Widget .

Event Panel¶

When you run Window > Event (⇧⌘E) menu, Event Panel will be shown. You can add events like Scroll Animator or Variable .

Scroll Animator¶

Adds Scroll Animator to animate widget by scrolling. When target widget closing to middle of browser, selected value will transform from before to after.

X-Position : Adds Scroll Animator to X-Position.
Y-Position : Adds Scroll Animator to Y-Position.
Opacity : Adds Scroll Animator to Opacity.

Variable¶

Adds Variable to the selected widget.

Variable Name : Shows Variable list in your project.
Triggered Widget : Shows Triggered widget list according to the selected variable.
New Variable Name : Adds a new variable name.
Value Count : Set Default & Maximum value to the variable.
Trigger Action : Set Trigger Action to the selected widget.

Receiver¶

Adds Receiver Event to the selected widget. When Equation returns True, Receiver Event will be shown.

Variable Name : Shows the list of variables that have Receiver Event.
Receiver Widget : Shows the list of Receiver Widget according to the selected variable.
Equation : Set Equation case. (e.g. Sample Variable = 1)
Scroll Location : Set Equation range of the scroll position.
Animation Effect : Set Animation Effect when Receiver Event is run.
Duration : Set Duration for the Receiver Event.

Memo Panel¶

When you run Window > Memo (⇧⌘M) menu, Memo Panel will be shown. You can add a memo to the selected widget.

Show / Hide Table Toggle Button : Open or Close Memo List area.
Title : Adds title to the selected memo.
Memo : Adds memo to the selected widget.

Note

In the Memo List, you can modify Memo’s Number / Title / Content .

Manage Custom Widget Panel¶

When you run Window > Manage Custom Widgets (⇧⌘W) menu, Manage Custom Widgets Panel will be shown. You can import Custom Widgets, Compositions and Pages into this panel. This panel supports Grid / Table view in Widget list. You can open and close widget information area with toggle button next to the search box.

_images/iu_manual_panel_import_widget.png

Top Bar¶

Widget Tab : Manage imported custom widgets. Import custom widget with import button.
Page Tab : Manage imported custom page. Import custom page with import button.
Composition Tab : Manage imported custom composition. Import custom composition with import button.
Widget Information Toggle Button : Show or hide `Custom Widget Information`_ area.
Search Bar : Searches by custom widget name.

Custom Widget List¶

Custom Widget List is placed at the center of the panel.

Import : Imports custom widget file. (iuw)
Refresh : Refreshes current widget list.
Open Folder : Opens custom widget folder.

Custom Widget Info¶

Custom Widget Info is placed at the right side of the panel.

Preview : Shows the preview of the selected custom widget.
Zoom In / Out : Zoom In or Out on the preview.
Name : Displays the name of the selected custom widget.
Group : Displays the group of the selected custom widget.
Tag : Displays the list of tags added to custom widgets.
Description : Displays the description of the selected custom widget.

Export Widget Panel¶

You can open Export Widget Panel from the left side of the canvas:

Right-click the widget in structure section
Right-click the page in pages
Right-click composition in compositions

_images/iu_manual_panel_export_widget.png

Customize Viewport Size : Resizes viewport size of the custom widget.
Name : Sets name of custom widget.
New Group : Sets the group of the custom widget.
Export Directory : Sets the export directory of the custom widget.
Description : Adds descriptions to the cutsom widget.

Export Page (.iup)¶

When you export Page , IUEditor generates CustomPageName.iup file.

Export Composition (.iuc)¶

When you export Composition , IUEditor generates CustomCompositionName.iuc file.

Project Type¶

Default Project¶

Default Project is a Static Project which is not connected with any back-end framework. You can select Default Project in New Project Popup (which pops up when you run File > New Project (⌘N) menu)

_images/iu_manual_project_new_default.png

Empty Page (Header / Footer) : Creates new project with Empty Page (Header / Page Content / Footer)
Empty Page (Header) : Creates new project with Empty Page (Header / Footer)
Empty Page (Blank) : Creates new project with Empty Page (Page Content)
IUPro : Creates new project with IUPro Template.
Paper : Creates new project with IUPaper Template.
IUAcademy : Creates new project with IUAcademy Template.
Recent Project : Shows last 5 projects that recently have been updated.
Open Project : Opens existing IU project.

Note

When you select Empty Page, you can set default width value of new project.

Django Project¶

Django Project is a Dynamic Project which can be connected with Django as back-end framework. You can select Django Project in New Project Popup (which pops up when you run File > New Project (⌘N) menu)

_images/iu_manual_project_new_django.png

AngularJS Project¶

AngularJS Project is a Dynamic Project which can be connected with AngularJS as back-end framework. You can select AngularJS Project in New Project Popup (which pops up when you run File > New Project (⌘N) menu)

_images/iu_manual_project_new_angularjs.png

Wordpress Project¶

Wordpress Project is a Dynamic Project which can be connected with Wordpress as back-end. Wordpress project has special widgets for wordpress templates. You can select Wordpress Project in New Project Popup (which pops up when you run File > New Project (⌘N) menu)

_images/iu_manual_project_new_wordpress.png

WordPress: Basic Usage¶

Note

Video tutorial for IUEditor WordPress theme is available at: https://www.youtube.com/watch?v=ZbjSCoE0Ano&list=PLWlO_EZgRC0aLLZ-oe_yMqdEaV4KdM5-l&index=1

Introduction¶

You can generate a WordPress theme with IUEditor, using all of its powerful and convenient features.

_images/iu_manual_wordpress_basic_use_newproject.png

From a new project window, click WordPress tab and choose any default page sturucture or pre-built template to start with.

_images/iu_manual_wordpress_basic_use_widgetgroup.png

You may insert WordPress widgets (at the bottom right of the editor window) to locate and design WordPress theme elements.

Anatomy of Pages¶

_images/iu_manual_wordpress_basic_use_theme_anatomy.png

index: A basic, required page. This page represents home screen of the WordPress blog, also works as a default template in case of other page templates’ absence.
single: Single page template which is shown when a visitor enters to a specific post link.
archive: Archive of page templates to show posts retrieved by an author or during certain period
category: Category of page templates used to display posts in a certain category
page_404: 404 page template shown when a visitor enters to a wrong URL.

In addition, user can add more pages when WordPress template is needed. (ex: page.php, date.php, and so on)

Note

For more detailed information about anatomy of WordPress theme, please refer to the following link: https://yoast.com/wordpress-theme-anatomy/

Settings¶

_images/iu_manual_wordpress_basic_use_buildsetting.png

You can follow Project > Project Setting menu or press ⇧⌘P to open Project Setting window, then click WordPress tab to change settings for WordPress features.

WordPress theme Build Path: Output path for generated theme files. You may add $AppName at the end of the path so that the final path contains the name of the project at the end.
WordPress Resource Path: Output path for the resource files of the theme, such as images, css, and so on.
WordPress User Source Path: Output path for ‘User Source’, which are CSS or JS files added to the project by user.
WordPress Resource Prefix: URL path to access the Resource Path on the web.
WordPress User Source Prefix: URL path to access the User Source Path on the web.

WordPress: Site Information¶

Site Title¶

Prints the site title, set during the WordPress initialization step or in wp-admin.
To share site title with other pages in the theme, put Site Title widget in Header section.

Site description¶

Prints the site description set in wp-admin page.
To share site description with other pages in the theme, put Site Description widget in Header section.

WordPress: Article¶

In IUEditor, Article represents a WordPress article such as a post, a page. It may contain subject, content, thumbnail, date and author as its elements.

Article Widget¶

A core widget of WordPress theme, which contains Article Elements.
An Article widget inserted in a theme may be replaced as a single post (in single.php) or a list of multiple posts (in index.php, archive.php, etc) depending on the context.
You may control the number of Article samples in the editor with Sample Repeat setting in Property tab, and it would be helpful for layout work.
- For repeated print, Position has to be Relative.
Article Element, Comment, Comment Input Form, Tag Block widgets must be inserted under Article widget.

Article Title¶

Prints the parent Article’s title. (WordPress post/page title)
Works well only under an Article widget.
You may chooose to make it either link or plain text in Property tab.

Article Body¶

Prints the Article’s content body.
Works well only under an Article widget.
You may choose to make it display either full text or excerpt with Type setting in Property tab.
- When Excerpt chosen, you can control the length of the excerpt as the number of words with excerpt length setting in Property tab. (55 default)
You may choose to make it either link or plain text in Property tab.

Article Element¶

Prints one of elements of the Article (thumbnail, author or date)
- You can choose which element to display with Element Type setting in Property tab.
Works well only under an Article widget.
You may choose to make it either link or plain text in Property tab.

WordPress: Category¶

Display category of an Article or Article list.

Category Label¶

Prints a category of the Category widget’s parent Article.
Works well only under an Article widget.

Category Path¶

Prints category path that an Article contains.
Works well under an Article widget or anywhere in single page.

WordPress: Comment¶

Widgets regarding commments or comment input form in WordPress post.

Comment Element¶

Works well only under a Comment widget.
Can replace elements among the followings: Content, Avatar(image), Author, Date, Email, URL - selectable in Property tab

Comment Input Form¶

Prints WordPress comment input form and its elements.
Works well only under an Article widget.

WordPress: Other Widgets¶

WordPress Page Link¶

Prints page navigations for WordPress posts.
Texts of Previous, Next links can be modified in Property tab.

Tag Block¶

Prints tags of an Article.
Works well only under an Article widget.
You can alter the number of sample tags by choosing the first tag in the block.

Page¶

Page Setting¶

When you click the Page Setting button, Page Setting panel will be shown.

Empty Layout : Set Empty (Page Content) Page Layout .
Header + Footer : Set Header + Page Content + Footer Page Layout .
Header : Set Header + Page Content Page Layout
Footer : Set Footer + Page Content Page Layout
페이지 타이틀 Page Title : Adds Page Title to current page.
페이지 키워드 Page Keyword : Adds Page Keywords to current page. (Multiple keywords available)
페이지 설명 Page Description : Adds Page Description to current page.
페이지 메타 이미지 Page Meta Image : Adds Meta Image to current page. (URL)

Page Custom Code¶

When you click the Page Custom Code button, Page Custom Code panel will be shown.

Page Header Custom Code : Adds Custom Code in header of current page.
Page Header Custom Code for Backend : Adds Custom Code for Backend in header of current page.

Page Default Widget¶

Page

IUPage is same as html document. You can change page structure in property tab.

Header

Header is placed top of page. Header can import Header or another composition .

Page Content

Page Content is placed middle of page (Page Content cannot be removed). You can add sections in Page Content.

Footer

Footer is placed bottom of page. Footer can import Footer of another composition .

Section

Section is placed under Page Content.

Centered Box

Centered Box is placed under Section (Centered Box can be removed). Centered Box used for horizontal-center layout.

Panel

You can add a panel by press [+] button of panel group. To call panel, create link with any widget and select link target to panel.

Popup

You can add a popup by press [+] button of popup group. To call popup, create link with any widget and select link target to popup.

Composition¶

You can create repeatable elements by using Compositions. Compositions will be imported to Import / Header / Footer / Collection widgets.

Basic Widget¶

Box¶

Box widget is a fundamental widget which is generated to <div> tag. Mostly, Box widget is used to set layout and to group children widgets.

Property

Child : Valid
Link : Valid
Scroll Animator : Valid
Background Image : Valid
Backend Ellipsis : Invalid

Text¶

Text widget contains Text Content which is generated to <p>, <h1> or <h2> tag. You can edit text after double-click to widget.

Property

Child : Invalid
Link : Valid
Scroll Animator : Valid
Background Image : Valid
Backend Ellipsis : Valid

Image¶

Static Image widget contains Image Content which is generated to <img> tag. You can input image resource from Resource panel or Image URL link.

Fit Widget Size to Image Size : Resize widget according to image resource size.

Property

Child : Invalid
Link : Valid
Scroll Animator : Valid
Background Image : Valid
Backend Ellipsis : Valid

Static Image¶

_images/iu_manual_prop_basic_IUImage.png

Image widget contains Image Content which is generated by css {background} tag. You can input image resource from Resource panel or Image URL link and resize or rearrange image in widget area.

Fit Widget Size to Image Size : Resize widget according to image resource size.

Property

Child : Invalid
Link : Valid
Scroll Animator : Valid
Background Image : Invalid
Backend Ellipsis : Invalid

Cell¶

Cell widget contains Text Content , aligned Vertical-Center automatically. (PX unit only)

Property

Child : Invalid
Link : Valid
Scroll Animator : Valid
Background Image : Valid
Backend Ellipsis : Valid

Icon Button¶

Icon Button widget contains Text Content and Image, aligned Vertical-Center automatically.

Property

Child : Invalid
Link : Valid
Scroll Animator : Valid
Background Image : Valid
Backend Ellipsis : Valid

Complex Widget¶

Transition¶

Transition widget has two transition items. When mouse action triggered, transition item will change from item 1 to item 2. You can set Mouse Action (Mouse Over or Click) , Transition Effect, and Duration in property panel.

Property

Child : Invalid
Link : Valid
Scroll Animator : Valid
Background Image : Invalid
Backend Ellipsis : Invalid

Carousel¶

Carousel widget has multiple carousel items. You can simply make carousel interface with carousel widget. Carousel item is the same as Box widget, so you can add or remove child elements to Carousel item

Property

Child : Invalid
Link : Valid(Only for child widget)
Scroll Animator : Invalid
Background Image : Invalid
Backend Ellipsis : Invalid

Google Map¶

Google Map widget represents google map element. You can input Map location wherever you want.

In Editor Mode, Google Map widget offers maximum preview 600 px x 600 px size.
South Korea’s map is not available Color Theme feature.

Property

Child : Invalid
Link : Invalid
Scroll Animator : Valid
Background Image : Invalid
Backend Ellipsis : Invalid

WebMovie¶

Web Movie widget supports Youtube or Vimeo. You can use Web Movie widget with Short-Links :

Vimeo : http://vimeo.com/ videoURL
Youtube : http://youtu.be/ videoURL

Property

Child : Invalid
Link : Invalid
Scroll Animator : Valid
Background Image : Valid
Backend Ellipsis : Invalid

Video Clip¶

_images/iu_manual_prop_complex_IUMovie.png

Video Clip widget supports MP4. You can input videos from Resource panel.

Property

Child : Invalid
Link : Valid
Scroll Animator : Valid
Background Image : Valid
Backend Ellipsis : Invalid

Table¶

Table widget can add simple table on canvas.

Property

Child : -
Link : -
Scroll Animator : -
Background Image : -
Backend Ellipsis : -

Simple Tab View¶

Simple Tab View widget has more simple structure than Tab View widget .

Property

Child : -
Link : -
Scroll Animator : -
Background Image : -
Backend Ellipsis : -

Tab View¶

Tab View widget has multiple Tabs .

Property

Child : -
Link : -
Scroll Animator : -
Background Image : -
Backend Ellipsis : -

Collapsible¶

Collapsible widget has two item (Header and Content). When you triggered mouse action on Collapsible widget, Content item will be appeared. You can set Mouse Action (Mouse Over or Click) , Transition Effect, and Duration in property panel.

Property

Child : -
Link : -
Scroll Animator : -
Background Image : -
Backend Ellipsis : -

Import¶

Import widget can import Composition . If you want to use Composition, connect target Composition into Import widget.

Property

Child : Invalid
Link : Valid
Scroll Animator : Valid
Background Image : Valid
Backend Ellipsis : Invalid

Facebook Like Button¶

_images/iu_manual_prop_complex_IUFBLike.png

With Facebook Like Button widget, you can add Share to Facebook Button in your project. (No Resize)

Property

Child : Invalid
Link : Valid
Scroll Animator : Valid
Background Image : Valid
Backend Ellipsis : Invalid

Centered Box¶

_images/iu_manual_prop_complex_IUCenterBox.png

Centered Box widget makes horizontal centered layout to Section. Centered Box widget is added into section automatically, but you can remove this widget. (No resize)

Property

Child : Invalid
Link : Valid
Scroll Animator : Valid
Background Image : Valid
Backend Ellipsis : Invalid

Progress Bar¶

Progress Bar widget displays a progress bar. If you want draw certain status with bar elements, add this widget in your project.

Property

Child : Invalid
Link : Valid
Scroll Animator : Valid
Background Image : Invalid
Backend Ellipsis : Invalid

SVG (Scalable Vector Graphics)¶

_images/iu_manual_prop_complex_IUSVG.png

SVG widget displays Scalable Vector Graphics. You can select simple SVG form, or input custom svg code whatever you want.

Property

Child : Invalid
Link : Valid
Scroll Animator : Valid
Background Image : Invalid
Backend Ellipsis : Invalid

Programming Widget¶

Form¶

Form widget is a container for programming widgets which is generated to <form> tag. If you want to use programming widgets, you must to add Form widget in your project.

Property

Child : Valid
Link : Invalid
Scroll Animator : Valid
Background Image : Valid
Backend Ellipsis : Invalid

Input Text¶

_images/iu_manual_prop_pg_PGTextField.png

Input Text widget is a textfield which is generated to <input> tag (type : text).

Property

Child : Invalid
Link : Valid
Scroll Animator : Valid
Background Image : Valid
Backend Ellipsis : Invalid

Input Paragraph Text¶

_images/iu_manual_prop_pg_PGTextView.png

Input Paragrapth Text widget is a textfield which is generated to <textarea> tag.

Property

Child : Invalid
Link : Valid
Scroll Animator : Valid
Background Image : Valid
Backend Ellipsis : Invalid

Select¶

Select widget is a select button which is generated to <select> tag. If you want to make select button, add this widget into Form widget.

Property

Child : Invalid
Link : Valid
Scroll Animator : Valid
Background Image : Valid
Backend Ellipsis : Invalid

HTML (Hyper Text Markup Language)¶

HTML widget is a code container which is generated to custom html tag (e.g. <style>, <script>, etc, …). You can make custom widget by input custom html code into HTML widget.

Property

Child : Invalid
Link : Invalid
Scroll Animator : Valid
Background Image : Valid
Backend Ellipsis : Invalid

Collection¶

Collection widget can import multiple Composition widgets. If you want to make collection view with compositions, you can create collection view with Collection widget.

Property

Child : Invalid
Link : Valid
Scroll Animator : Valid
Background Image : Valid
Backend Ellipsis : Invalid

Page Link Set¶

Page Link Set widget displays page links that usually placed bottom of Collection.

주로 게시판이나 페이지 세트의 링크를 만들 때 사용합니다. 한 번의 몇개의 숫자를 나타낼 것인지 정할 수 있습니다.

Property

Child : Invalid
Link : Valid
Scroll Animator : Valid
Background Image : Valid
Backend Ellipsis : Invalid

Checkbox¶

Checkbox widget displays checkbox which is generated to <input> tag (type:checkbox).

Property

Child : Invalid
Link : Valid
Scroll Animator : Valid
Background Image : Invalid
Backend Ellipsis : Invalid

Radio Button¶

Radio Button widget displays radio button which is generated to <input> tag (type:radio).

Property

Child : Invalid
Link : Valid
Scroll Animator : Valid
Background Image : Invalid
Backend Ellipsis : Invalid

Button¶

Button widget displays button which is generated to <input> tag (type:default / reset / submit).

Property

Child : Invalid
Link : Invalid
Scroll Animator : Valid
Background Image : Valid
Backend Ellipsis : Invalid

File Upload¶

File Upload widget displays file upload interface which is generated <input> tag (type:file).

Property

Child : Invalid
Link : Invalid
Scroll Animator : Valid
Background Image : Invalid
Backend Ellipsis : Invalid

Switch¶

Switch widget displays toggle button which is generated to <input> tag (type:checkbox), and contains two switch items.

Property

Child : Invalid
Link : Invalid
Scroll Animator : Valid
Background Image : Invalid
Backend Ellipsis : Invalid

Flip Switch¶

Flip Switch widget displays sliding switch which is generated to <input> tag (type:checkbox).

Property

Child : Invalid
Link : Invalid
Scroll Animator : Valid
Background Image : Invalid
Backend Ellipsis : Invalid

Slide¶

Slide widget displays slider interface. You can change value by dragging slide pointer. (Or type a number to value)

Property

Child : Invalid
Link : Invalid
Scroll Animator : Valid
Background Image : Invalid
Backend Ellipsis : Invalid

Range Slide¶

Range Slide widget displays range slider interface. You can change range vaule by dragging slide pointers. (Or type a number to value)

Property

Child : Invalid
Link : Invalid
Scroll Animator : Valid
Background Image : Invalid
Backend Ellipsis : Invalid

Known Bug List¶

Here are bug list for current version.

Scroll Animator (Event Panel)¶

Scroll Animator is only available for Absolute Position widgets , Sometimes available for Relative Position widgets.

Unsupported variable name (Event Panel)¶

Variable name cannot have special characters and numbers, but only can Underbar(_).

‘#’ or ‘@’ character in File Path¶

If file path has ‘#’ or ‘@’ character, IUEditor cannot load resource path. Do not use ‘#’ or ‘@’ character in file path.

Preference¶

Set IUEditor’s service environment.

General¶

Select Tab Menu : Show or hide tab menus from top toolbar.
Guide Line Color : Change guide line color. (View guideline : View > Guide ⌘;)
Custom Template List URL : Input plist URL for apply custom template at new project window’s template list.

Project¶

Project Save Option : Compress project’s json file if ‘Minimize Data’ checkbox checked.
Compile Option
- Export HTML ID Option : Select whether contain HTML ID as default to all widget or customize.
- Name on Structure : Select whether contain widget’s name in html document or not.
Resource Copy Option : Select how to do about multiple resources when ``Custom Widget``_ added on canvas.
Widget Option : Select to contain centerbox in section as default .

Fonts¶

Add new webfont into font list.

Templates¶

IUEditor offers free templates projects below. You can select template project in New Project panel.

IUPro

IUPaper

IUAcademy

Shortcut¶

Project Management¶

Project Setting (Shift+Cmd+P) : Opens Project Setting panel.
Upload to Heroku (Shift+Cmd+H) : Opens Heroku Management panel.
Refresh (Shift+Cmd+F) : Refreshes current page.
Import Custom Widget (Shift+Cmd+W) : Opens Custom Widget Panel.

Mode Switch¶

Editor Mode (Cmd+[) : Switch to Editor Mode.
Developer Mode (Cmd+]) : Switch to Developer Mode.
Prototype Mode (Cmd+\) : Switch to Prototype Mode.

View Management¶

Zoom In (Cmd+ +) : Zoom In stage.
Zoom Out (Cmd+ -) : Zoom Out stage.
Widget Panel (Cmd+Return) : Show and Hide Widget panel.
Event Panel (Shift+Cmd+E) : Opens Event panel.
Resource Panel (Shift+Cmd+R) : Opens Resource panel.
Memo (Shift+Cmd+M) : Opens Memo panel.

Canvas View Management¶

Show Outline (Cmd+L) : Show or hide outline of widgets in canvas.
Show Widget Info (Cmd+I) : Show or hide information of widgets in canvas.
Show Ruler (Cmd+R) : Show or hide ruler on canvas.
Show Guide (Cmd+;) : Show or hide guide on canvas.
Tracing (Shift+Cmd+T) : Show or hide tracing image on canvas.

Dictionary¶

Definitions of words which used in this documents.

Build¶

Generates HTML & CSS & JS files based on IU Project.

Django¶

Python web framework.

Heroku¶

Cloud platform as a service (PaaS) supporting several programming languages.

Python¶

Server-side programming language.

Tutorials¶

Here are basic tutorials for IUEditor.

`Go to Tutorial`_

IUEditor Manual¶

What is IUEditor?¶

Advantages¶

Values¶

More …¶

Environment¶

Menu¶

Description about IUEditor Menu Bar¶

IUEditor¶

File¶

Project¶

View¶

Window¶

Help¶

Top Toolbar¶

Command¶

Tab Menu¶

Stage¶

Middle Toolbar¶

Page Capture¶

Position¶

Frame¶

Background Color¶

Show/Hide Widget Button¶

Widget Panel¶

IU Widget¶

Custom Widget¶

Navigation¶

Structure¶

Page¶

Composition¶

References¶

Canvas¶

Context Menu - Single Widget¶

Context Menu - Muiltiple Widgets¶

Developer Mode¶

HTML ID¶

Custom Code¶

Prototype Mode¶

Revision History¶

Project Workflow¶

Node Description¶

Heroku Management¶

Upload to Server¶

Project Setting¶

Default¶

Meta¶

Build¶

Django¶

Resource Panel¶

Import Clipart¶

Resource Management Tips¶

Event Panel¶

Scroll Animator¶

Variable¶

Receiver¶

Memo Panel¶

Manage Custom Widget Panel¶

Top Bar¶

Widget Group List¶

Custom Widget List¶

Custom Widget Info¶

Export Widget Panel¶

Export Widget (.iuw)¶

Export Page (.iup)¶

Export Composition (.iuc)¶

Project Type¶

Default Project¶

Django Project¶

AngularJS Project¶

Wordpress Project¶

WordPress: Basic Usage¶

Introduction¶

Anatomy of Pages¶

Settings¶

WordPress: Site Information¶

Site Title¶

Site description¶

WordPress: Article¶

Article Widget¶