Web based IDE for professional development
SOLUTIONS

Y[wai]

Y[wai] : Web Application Innovator


Y[wai] is a web development UI/UX platform based on pure HTML, HTML5, and JavaScript.
You can quickly and easily innovate your web development and maintenance process.



A normalized web system architecture that supports any type of web server & WAS
Supports various web system types and SVN Server

As a general web system configuration, it works regardless of the web server and WAS type to help build various types of web services.



Provides various components, intuitive development tools, and rapid technology support
for developer's convenience and easy and fast development.





Provides a system development environment optimized for your corporate environment
and guarantees the best performance, speed, and stability.





Architecture : Development



Architecture : Run-time





Development Environment & Various Components

Y[wai] provides a WYSIWYG based development tool(IDE) that runs in a web browser without additional download and installation.
It provides various components in the form of HTML tag and the environment to develop the components you want.



Data Control & Responsive Web

Data can be processed in JSON or XML format using automation components or extended JSON objects.
It supports asynchronous communication with separated screen and data.
If you request data after loading the screen, the objectified data will be loaded.


Supports AJAX(AJAJ) data transaction module
Supports getting JSON data from screen or specific HTML object
and putting JSON data to screen or specific HTML object.

Data in binary format (images, files, etc.) is treated as JSON data and blob data.
It provides compression and encryption, and decompression and decryption.

Architecture : Binary Data Process




Supports responsive web development.

It supports “Bootstrap” and most “Bootstrap” themes.
All components support resizable & responsive function.
It supports responsive web design in Y[wai] IDE.

[ Responsive Web - Sample 1 ]
[ Responsive Web - Guide 1 ]

[ Responsive Web - Sample 2 ~ 9 ]
Y[wai] v2.0.2 (April 18, 2022) Release notes

waiPresentation v1.0 (June 1, 2019) Release notes

waiEclipse

Y[wai] IDE for Eclipse


Y[wai]’s web page editor and Eclipse are combined to make it easier to develop web pages.
In addition, when waiEclipse is executed, the web server is executed through "waiEclipseService" to make it easier to have the development environment.

A normalized web system architecture that supports any type of web server & WAS
Supports various web system types and SVN Server

As a general web system configuration, it works regardless of the web server and WAS type to help build various types of web services.

Provides various components, intuitive development tools, and rapid technology support
for developer's convenience and easy and fast development.



Provides a system development environment optimized for your corporate environment
and guarantees the best performance, speed, and stability.




Architecture

When waiEclipse is executed, waiEclipseService is automatically executed and web server is started.
Therefore, waiEclipse is optimized for web development.














Development Environment & Various Components

Y[wai] provides a WYSIWYG based development tool (IDE) that runs on Eclipse.
It provides various components in the form of HTML tags and the environment to develop the components you want.

In general, it is an Eclipse Plugin type that is widely used for web service development.
Y[wai]'s runtime and IDE are integrated so that web UI and service can be developed in one tool.







waiEclipse v1.2.8 (September 01, 2022) Release notes

waiEclipse Download Guide


[Step 1]

1. Click the [Download Trial waiEclipse] button in UITOOL to download ZIP format waiEclipse.

[Step 2]

1. Unpack the received zip file to a path you want.

[Step 3]

1. Launch Eclipse.

[Step 4]

1. Click the [File – New - Other..] in IDE, and select "Y[wai] - wai" as the Project type.
2. Enter a Project name.
3. Click the [Finish] button in New WAI Project dialog.

[Step 5]

1. Right-click on the webroot and select the [New - HTML File].
2. Enter a file name.
3. Click the [Finish] button in HTML File Wizard.

[Step 6]

1. You can easily develop web screens using Y[wai]'s HTML Design editor.
2. Right-click the developed file, select the [Run with browser], and check the screen with a web browser.
End of guide

waiVSCode

Y[wai] IDE for Visual Studio Code


Y[wai]'s web page editor and Visual Studio Code are combined to make it easier to develop web pages.

waiVsCode supports very easy and convenient web UI development.
It can be designed HTML by using Y[wai] component in WYSIWYG format with the convenient code editing function of Visual Studio Code.













Provides various components, intuitive development tools, and rapid technology support
for developer's convenience and easy and fast development.

Provides a system development environment optimized for your corporate environment
and guarantees the best performance, speed, and stability.




Development Environment & Various Components



Visual Studio Code can be downloaded for free from Microsoft, and you can find a lot of information about related extension development.
By opening it, various extensions can be found and installed within the program.
waiVSCode provides as such an extension, so after installing VS Code, you can easily install it by searching for “Wai Vscode” or “WYSIWYG HTML Editor” in the extension menu.





waiVSCode v1.6.6 (May 17, 2023) Release notes Manual (en) Manual (kr)

waiVSCode Download Guide


[Step 1]

1. Click the [Download Trial waiVSCode] button in UITOOL to download VSIX format waiVSCode.

[Step 2]

1. Run VSCode and select the [View - Command Palette..] menu or enter 'Ctrl+Shift+P' to open the Command window.
2. Enter 'vsix' in the Command window and select [Extensions: install from VSIX...].
3. Select and install the downloaded wai-vscode-x.x.x.vsix file.

[Step 3]

1. When the installation is complete, you can check that Wai vscode is installed in Extensions,
and you can disable waiVSCode with the 'Disable' button or delete it with the 'Uninstall' button.


[Step 4]

1. Right-click on the current working folder or a specific folder and select the 'Create Wai Project' menu to select the folder to be the web root.
2. A folder called 'wai' is created under the selected folder, and the Y[wai] component can be used in HTML under the selected folder.

[Step 5]

1. If you select a specific folder and select [New Wai Html File] from the right-click menu and enter a file name,
an empty HTML file in the basic Y[wai] format is created.
(The 'wai' folder is a Solution folder, so do not select the wai folder.)


[Step 6]

1. Open the right-click menu on the html created as New Wai Html File and select [Open Wai Designer].
2. In the case of html that is not created with New Wai Html File, the Y[wai] component cannot be used because wai.js is not added,
so please add arbitrarily or create an HTML file with New Wai Html File.

[Step 7]

1. When opening wai html designer with [Open Wai Designer], if there is no .js file with the same file name as the html name, a .js file is automatically created.
2. Even if there is no script connection in HTML, when wai.js is loaded, it automatically connects(loads) the js file with the same name as the corresponding html.

[Step 8]

1. In Wai HTML Designer, basic HTML, HTML5 tags, and Y[wai] components can be edited in WYSIWYG format.
2. Changes are automatically applied to the corresponding HTML file and JS.
End of guide

waiReport

HTML5 Canvas Based Report Solution


waiReport is a web report development solution based on pure HTML, HTML5, and JavaScript.


Web based WYSIWYG report-form editor, band type report form, Y[wai] IDE mountable
waiReport is a web development solution equipped with a rendering engine. The rendering engine is developed based on pure HTML, HTML5, and JavaScript.
It provides WYSIWYG based development tool(IDE) that works in a web browser without additional download and installation.
It supports general and easy band report formats.


JavaScript based rendering engine, Canvas based component template, JSON/XML data type, JSON type report form
waiReport works without WAS. You can combine data on the screen or receive data through the service and pass it to waiReport Viewer for preview or print.
If you use it with Y[wai], you can preview or print the searched data directly in conjunction with Data Service component.

Architecture

It is client-side rendering that supports all types of web servers, but does not use WAS.






If you use waiReport with Y[wai], you can manage the project more systematic and convenient.
You can directly preview or print the searched data in conjunction with Y[wai]'s Data Service component.





waiReport v1.0 (December 8, 2018) Release notes

waiReport Editor Guide in Y[wai] IDE


[Step 1]

1. Sign-In to the members tab of the UITOOL.

[Step 2]

1. Click the [Trial Y[wai] IDE] to access the IDE.

[Step 3]

1. Click the [Menu – New File] in IDE and select [Report form] as the File type.
2. Enter a File name.
3. Click the [OK] button in New File dialog.

[Step 4]

1. The generated waiReport file(.YRF) is composed of band format.


[Step 5]

1. Configure the report using the components you want in the component palette on the right.

[Step 6]

1. If you click the [Code] button, you can check the JSON format code of the generated report file.
※ Note : Various report samples are provided in the [/docs/Samples/4. Report] directory.
End of guide

waiBizFrame

Pure Web Business Application


waiBizFrame is a web business application frame based on pure HTML, HTML5, and JavaScript.
It is a web terminal frame optimized for development of pure web based business application.
waiBizFrame has a flexible customizable structure. It provides common screen configuration and functions.



Layout type terminal frame
All components consist of HTML, HTML5, and JavaScript.
waiBizFrame is flexible structure that can be customized. It provides structure and function of common screen.

The core engine of waiBizFrame provides frame control functions such as Layout Controller, Biz-Page Tab Controller, and Popup Controller.
In addition, terminal screen of business application can be composed in various forms by providing layout templates such as Slide Menu and Tree Menu.

In particular, web terminal screen can be implemented with minimal development,
by providing the necessary functions in the terminal screen of the financial business applications.

Features





Menu
Slide Menu and Tree Menu are basically provided.

 The menu layout, which is displayed as JSON data, provides various themes by default.
You can change the style arbitrarily by changing the CSS.
And you can develop the menu layout according to “Menu Layout Template”, and use it in waiBizFrame.
It also has the built-in function to select and search for specific items based on the data displayed in the menu.

MDI Tab

It consists of a tab layout to select the specific screen and a MDI layout to display the MDI screen.

 If you set the area of HTML screen to Tab Control Layout and MDI Layout, you can control HTML screen in tab type MDI form.
You can set various tab control functions such as the maximum number of open screens and the operation method when the maximum number is exceeded through the option of waiFrame.
It also supports handling of various events.
Tab icons or styles are provided in CSS files outside the Tab Control Engine, so you can change the style.

Dialog & Popup
It is implemented to be displayed on a web screen in a layered style so that it can be operated in various browsers.

 Various basic dialogs are provided. You can develop and add arbitrary dialogs.
The design of dialogs can be set in the form of template, making it easy to change the design.
It provides functions that can display specific HTML popups in the layered manner. Popup screen can also be changed to design in the template form.

Approval Function
Receives approval requests and responses.
Captures screen of approval requestors.
Sends authorization request data.
  • TCP / IP: Provides P2P or Server-Client method
  • WebSocket: Provides P2P or Server-Client method
  • Screen capture and transfer function
  • Approval wait time feature
  • Customizable approval module
  • Provides basic Request and Response Dialog screen
  • Callback function by processing

Runtime Library
You can quickly implement the necessary functions on the web terminal.
  • Screen capture function using HTML5 Canvas
  • Extracts data in the form of JSON from the entire web screen or the specific part
  • Sets data in JSON format on the entire web screen or the specific part
  • JSON data control function that provides merge, separation, replication, etc. for common data processing
  • Global function and dynamic linking of events
  • waiBrowser(the browser for Y[wai]) interface function
    - Keyboard event handling
    - Local PC interface (status, file System, etc)

Web Banking System
Optimized for building a web banking system terminal.

 It is optimized to build a web banking system terminal that excludes Active-X.
It provides various functions necessary for a banking system terminal.

  • Common data decomposition and assembly automation
  • DLL interface for interworking with other Windows-based infrastructure
  • Various functions for file transfer and control
  • Various device interworking (some modifications may be required depending on the model)
    - Passbook Printer
    - Pin-pad
    - Fingerprint reader
    - Scanner
  • Director authorization control
    - Supports both P2P method and server interworking method
    - Screen capture and transfer function of the request side for approval
    - Multi officer approval function

waiDoc

Web Application Innovator : Document


waiDoc is a web electronic document development solution for digital work environment.
It is a web document development platform based on pure HTML, HTML5, and JavaScript.
It supports writing, archiving, and data utilization of electronic documents.

A generation solution of paperless electronic documents
waiDoc can be viewed and written in the web and mobile environment, anytime and anywhere.
It is Smart paperless solution for convenient data entry such as photos, various input formats, and signatures.

Features : Convenient UI formatting

Web Based Editor
You can use the editor through a web browser without any additional installation, since Y[wai] is built-in IDE.
It creates the waiDoc document(.WDF) in WYSIWIG fashion.

Web Based Editor
A waiDoc document(.WDF) can be viewed on PC or smart devices through viewer, anytime and anywhere.
It can combine multiple PDFs or images to create one waiDoc document.
It can create multiple waiDoc pages from one of the pages in the original document.
It can change the order regardless of the page order of the original document and insert or delete intermediate pages.



Work & Using Flow Diagram





waiDoc e-Form Demo waiDoc v1.0 (July 1, 2019) Release notes

waiDoc Editor Guide in Y[wai] IDE


[Step 1]

1. Sign-In to the members tab of the UITOOL.

[ Step 2 ]

1. Click the [Trial Y[wai] IDE] to access the IDE.

[Step 3]

1. Click the [Menu – New File] in IDE and select [waiDoc] as the File type.
2. Enter a File name.
3. Click the [OK] button in New File dialog.

[Step 4]

1. Click the [Add file] button on the upper right to load the template you want to create. (PDF or image file)


[Step 5]

1. Create, modify, and design pages in the WYSIWYG Editor dedicated to waiDoc.

[Step 6]

1. Check and test the waiDoc document(.WDF) created by the Viewer.
End of guide

waiPresentation

Pure Web Multi-Format Presentation


waiPresentation is a multi-format presentation solution.