Introduction
Account
Web System Common Tools
Web System Applications Development
Web System Cook book
Web System Deprecated
Web System Web Form Builder / Content Editor (GYRE)
Editor GYRE is a visual editor of web applications and web sites. Its interface consists of three main elements:
1) Toolbar is located on the left.
It contains all available tools, divided into groups:
- Visual elements are used in executing an application, or working with the site;
- Auxiliary elements are used in designing applications and sites.
2) Canvas (working area) is located in the center.
It is a rectangular area that displays graphical content when creating applications and Web pages. The working area provides space for the creation, storage and modification of graphical objects. To place an element on the canvas, click on an icon on the toolbar, then left-click anywhere on the canvas. The element appears on the canvas, its upper left corner located at the click spot.
3) Properties panel is located on the right.
Each toolbar item and canvas have their own customizable properties. View and change the properties of elements in the properties panel. It displays the properties for the currently selected element (or group of elements) or canvas (if no element is selected).
GYRE Editor
To view or edit canvas properties, click any place on the canvas free of visual elements.
Properties panel.
Attach CSS - attaching style files. After pressing CSS button, dialog box appears with selected files. To attach a file click Attach new file, a new dialog box for selecting files appears. Attention, the file must be pre-loaded into Younicycle, Section Files, and have CSS extension. To remove a file, select it in the list, then click Detach. During the execution of the application, the attached files to connect to the section <HEAD>.
Dialog box with selected CSS file
Attach Javascript - attaching java script files. Selecting a file is similar to attaching CSS files, except that the files should have extension js. Selected files connect to the section <BODY>.
Dialog box with selected js file
Bg color - background color. This property specifies the background color of a page or application. The default is white. See also property Fill background.
Background color selection
Bg image - background image. Any image preloaded into Younicycle, section Images can be used. Younicycle recommends using small size image files to avoid creating delay during loading. See also property Fill background
Selecting background image
CSS class - style class. Classes are used when it is necessary to determine the style for a specific element of a Web page or set different styles for one tag. Basic knowledge of HTML and cascading style sheets (CSS) is required.
Data source - specifies the data source that can be used by some visual elements to display data.
Events - events (see (ref: 162)).
Canvas events:
- OnLoad - fires after application or page dowload;
- OnResize - fires when the page size is changed during the execution (in the browser).
List of canvas events
Fill background - determines the filling method of the background.
- Color - The default setting. Color property is set with Bg color.
- Image. Fill the background with an image. The image is set with Bg image.
- Transparent. Transparent background (shading is not used).
Page width - application/page width
Page height - application/page height
Show navigation bar - system navigation bar