IUEditor Manual¶

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

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.
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.
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 - Mojave. (10.14 +)

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

Menu¶

Description about IUEditor Menu Bar

IUEditor¶

About IUEditor : Show IUEditor’s version info.
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.
Save As : Save the current project under a different name.
Close : Close current project.

Project¶

Build : Generate HTML & CSS & JS files based on IU Project.
Build Clean : Clean build data. It can fix program error.
Stop : Stop the build.
Project Setting : Open Project Setting panel.
Project Code : Open Project Code panel.
Refresh Page : Refresh current page. It can fix program error.

View¶

Show Tab Bar : Show the tab bar.
Show All Tabs : Show the entire tab.
ZoomOut : Zoom Out stage.
ZoomIn : Zoom In stage.
Outline : Show or hide outline 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.
Enter Full Screen : Switch to full screen.

Window¶

Event : Open Event panel.
Resource : Open Resource panel.
Memo : Open Memo panel.
Manage Custom Widgets : Open Manage Custom Widgets Panel.
Log : Open log panel.

Help¶

Search : Search IUEditor function.
Documentation : Open IUEditor Manual page in the browser.
Ask IUEditor : Go to the webpage to ask questions about the program.
Acknowledgements : Show information about the APIs used in the program.

Widget Panel¶

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

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 : Update 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 : Add a new custom page.
Add New Page Button : Add a new page.
Add New Group Button : Add 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 : Add a new custom composition.
Add New Composition Button : Add a new composition.
Add New Group Button : Add 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¶

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.

Add Memo : Open Memo Panel where you can add memo about the selected widget.
Export to Widget : Open Export Widget Panel that is used to export Custom Widget .
Show Event : Open Event Panel that allows us to add an event to the selected widget and later make adjustments on events
Select Tab : Switch 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 Scenario. And Refresh Thumbnail updates the page thumbnails that are included in the workflow and the page list.

Revision History¶

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

Add New Date : Create a new editable row field in the table.
Remove Date : Delete the selected row from table.

Project Workflow¶

Display Workflow of the current project. Users can add nodes by drag and drop of page’s thumbnail. Press delete key to delete the selected node.

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.

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

Node Description¶

Display 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 : Select an image from the resource panel to replace the numbering in the screenshot area.
Add Memo Button : Create a new editable row field in the table.
Delete Button : Delete the selected memo in the table.

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

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 : Add the title of the project.
Favicon : Add favicon image (Favicon image resource is required).
Custom Header Code : Add 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 : Add Meta Image for meta-data. (URL)
Author : Add Author name for meta-data.
Project URL : Add Project URL for meta-data.
Project Keywords : Add Project Keywords for meta-data. (Multiple keywords are available)
Project Description : Add Project Description for meta-data.
Facebook Admin : Add Facebook Admin ID for meta-data.
Facebook App ID : Add 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.
Run server after build : Set Run Server 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.

Project Code¶

When you click the Project > Project Code ⇧⌘C button, Project Code panel will be shown.

You can add your code to all pages.

HTML¶

<head>
   <!-- start : your code -->
   <!-- auto generated code by IUEditor -->
   <!-- end : your code -->
 </head>

Back-end¶

<!-- page head custom code for back-end : your code -->
<!DOCTYPE html>
<head>
   <!-- start : your code -->
   <!-- auto generated code by IUEditor -->
   <!-- end : your code -->
 </head>

Resource Panel¶

When you run Window > Resource (⇧⌘R) menu, Resource Panel will be shown. You can import resources (images, videos, js, css, json) into Resource Panel.

Note

Supported Image File Types : gif, jpg, jpeg, png, ico, icns, svg, bmp

Note

Supported Video File Types : mp4, ogg, webm

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

Resource Management Tips¶

You can create groups and reorder files in resources.
You can insert an image 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¶

Add Scroll Animator to animate widget by scrolling. When the target widget appear in the middle of browser, the selected value will transform from before to after.

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

Variable¶

Add Variable to the selected widget.

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

Receiver¶

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

Variable Name : Show the list of variables that have Receiver Event.
Receiver Widget : Show 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 : Add title to the selected memo.
Memo : Add 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.

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 : Search by custom widget name.

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

Customize Viewport Size : Resize viewport size of the custom widget.
Name : Set name of custom widget.
New Group : Set the group of the custom widget.
Export Directory : Set the export directory of the custom widget.
Description : Add descriptions to the custom 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)

Empty Page (Header / Footer) : Create new project with Empty Page (Header / Page Content / Footer)
Empty Page (Header) : Create new project with Empty Page (Header / Footer)
Empty Page (Blank) : Create new project with Empty Page (Page Content)
IUPro : Create new project with IUPro Template.
Paper : Create new project with IUPaper Template.
IUAcademy : Create new project with IUAcademy Template.
Recent Project : Show last 5 projects that recently have been updated.
Open Project : Open 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)

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)

Page¶

Page Setting¶

When you select the index page and click the Property button, Page Setting properties 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 : Add Page Title to current page.
Page Keyword : Add Page Keywords to current page. (Multiple keywords available)
Page Description : Add Page Description to current page.
Page Meta Image : Add Meta Image to current page. (URL)

Page Custom Code¶

Page Header Custom Code : Add Custom Code in header of current page.
Page Header Custom Code for Backend : Add 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.

Page Content¶

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

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.

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 basic 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¶

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

Image and Text¶

Image and text 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.

Note

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

Web Movie¶

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¶

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¶

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¶

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)¶

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¶

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¶

Input Paragraph 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 Number Set¶

Page Number 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

Slider¶

Slider 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 Slider¶

Range Slider widget displays range slider interface. You can change range value 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 .. image:: resource/templates/iupro.png
IUPaper .. image:: resource/templates/paper.png
IUAcademy .. image:: resource/templates/academy.png

Shortcut¶

Project Management¶

Project Setting Shift+Cmd+P : Open Project Setting panel.
Refresh Shift+Cmd+F : Refresh current page.
Import Custom Widget Shift+Cmd+W : Open 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 : Open Event panel.
Resource Panel Shift+Cmd+R : Open Resource panel.
Memo Shift+Cmd+M : Open 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¶

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

Django¶

Python web framework.

Python¶

Server-side programming language.

Tutorials¶

Here are basic tutorials for IUEditor.

Go Tutorial

IUEditor Manual¶

What is IUEditor?¶

Advantages¶

Values¶

More …¶

Environment¶

Menu¶

IUEditor¶

File¶

Project¶

View¶

Window¶

Help¶

Top Toolbar¶

Command¶

Tab Menu¶

Stage¶

Middle Toolbar¶

Refresh¶

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 - Multiple Widgets¶

Developer Mode¶

HTML ID¶

Custom Code¶

Prototype Mode¶

Revision History¶

Project Workflow¶

Node Description¶

Project Setting¶

Default¶

Meta¶

Build¶

Django¶

Project Code¶

HTML¶

Back-end¶

Resource Panel¶

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 Information¶

Export Widget Panel¶

Export Widget (.iuw)¶

Export Page (.iup)¶

Export Composition (.iuc)¶

Project Type¶

Default Project¶

Django Project¶

AngularJS Project¶

Page¶

Page Setting¶

Page Custom Code¶

Page Default Widget¶

Page¶

Header¶

Page Content¶

Footer¶

Section¶

Centered Box¶

Panel¶