Web based IDE for Professinal development
SOLUTIONS

Y[wai]

Y[wai] : Web Application Innovator


Pure HTML, HTML5, JavaScript based Web Development UI/UX Platform.
It means that you can quickly and easily innovate your web development and maintenance process.



Normalized web system architecture, Any types webserver & WAS
Supported various web system types, Supported 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 quick technical support for developers' convenience and easy and quick development.





Provides a system development environment optimized for the 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 provides an environment for developing the components you want.



Data Control & Responsive Web

Data can be processed in JSON or XML format using automation components or extended JSON objects.
Asynchronous communication with separate screen and data is supported. (Request data after screen load → load objectified data)


Support AJAX(AJAJ) Data transaction module.
Support Get JSON data from screen or specific HTML object and Put JSON data to screen or specific HTML object.

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

Architecture : Binary Data Process




Support Responsive Web Development

Supports “Bootstrap” and most “Bootstrap Themes.
All components supported resizable & responsive function.
Support 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 a development environment.

Normalized web system architecture, Any types webserver & WAS
Supported various web system types, Supported 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 quick technical support for developers' convenience and easy and quick development.



Provides a system development environment optimized for the 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, it is a product that 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 provides an environment to develop desired components.

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 [ Download Trial waiEclipse ] button in UITOOL to download ZIP format waiEclipse.

[ Step 2 ]

1. Unpack the received zip file to a desired path.

[ Step 3 ]

1. Launch Eclipse.

[ Step 4 ]

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

[ Step 5 ]

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

[ Step 6 ]

1. Easily develop web screens with Y[wai]'s HTML Design editor.
2. [ Right-click the developed file - Run with browser ] 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 by enabling the design of HTML using Y[wai] Component in WYSIWYG format along with the convenient code editing function of Visual Studio Code.













Provides various components, intuitive development tools,
and quick technical support for developers' convenience and easy and quick development.

Provides a system development environment optimized for the 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 is provided 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 v0.9.4 (September 01, 2022) Release notes

waiVSCode Download Guide


[ Step 1 ]

1. Click [ 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 either Disable or Uninstall.

[ 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 the script is 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


Pure HTML, HTML5, JAVASCRIPT BASED Web Report Development solution.



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


JavaScript based Rendering Engine, Canvas based component template, JSON/XML Data Type, JSON type report form
It can work even if WAS is not present or present. You can combine the data on the screen or receive the data through the service on the screen and pass it to waiReport: Viewer to preview or print.
If you use Y[wai] together, you can preview or print the searched data immediately by interworking with Data Service component.

Architecture

Client side rendering, Any types web server, Not used WAS






When used with Y[wai], more systematic and convenient project management is possible.
In conjunction with Y[wai] 's Data Service component, you can instantly preview or print the inqueried data.





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 "Trial Y[wai] IDE" to access the IDE.

[ Step 3 ]

1. [ Menu – New File ] in IDE, Select "Report form" as the File type.
2. Enter a File name.
3. Click [ 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


Pure HTML, HTML5, JavaScript based Web Business Application frame.
It is a web terminal frame optimized for pure web based business application development.
waiBizFrma provides common screen configuration and functions, and has a flexible customizable structure.


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

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

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

Features





Menu
Slide Menu, Tree Menu are basically provided.

 The menu layout, which is displayed as JSON data, provides various themes by default.
The developer can change the style arbitrarily by changing the CSS.
Developer can develop Menu Layout according to “Menu Layout Template” and use it in waiBizFrame.
It also has a 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 a specific screen and an 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.
Through the option of waiFrame, 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.
It also supports handling of various events.
Tab icons or styles are provided in CSS files outside the Tab Control Engine, allowing developers to change the style.

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

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

Approval Function
Receive approval requests and responses, capture screens of approval requestors, and send authorization request data.
  • TCP / IP: Provide P2P or Server-Client method
  • WebSocket: Provide P2P or Server-Client method
  • Screen capture and transfer function
  • Approval wait time feature
  • Customizable approval module
  • Provide 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
  • Extract data in the form of JSON from the entire web screen or a specific part
  • Set data in JSON format on the entire web screen or a specific part
  • JSON data control function (provides merge, separation, replication, etc. for common data processing)
  • Global function and event dynamic linking
  • WaiBrowser (Y [wai] dedicated browser) interface function
    - Keyboard Event Handling
    - Local PC interface (Status, File System,…), etc.

Web Banking System
Optimized for building web banking system terminal

 It is optimized to build a web banking system terminal that excludes Active-X, and 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
    - Support 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


Web Electronic document development solution for digital work environment, waiDoc
Pure HTML, HTML5, JAVASCRIPT Based Web Document Development Platform.
Support electronic document creation, archiving and data utilization.

Paperless electronic document generation solution.
Anytime, anywhere can be viewed and written in the web / mobile environment.
Smart paperless solution for convenient data entry such as photos, various input formats, and signatures.

Features : Convenient UI formatting

Web based Editor
Y[wai] Since it is built-in in IDE, users can access the Editor through a web browser without any additional installation.
Create a waiDoc document (.WDF) in WYSIWIG fashion.

Web based Editor
The waiDoc document (.WDF) can be viewed on PC or Smart Device through Viewer anytime, anywhere.
Combine multiple PDFs or images to create a single waiDoc document.
Multiple waiDoc pages can be created from one of the pages in the original document.
You can change the order and insert / delete intermediate pages regardless of the page order of the original document.


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 "Trial Y[wai] IDE" to access the IDE.

[ Step 3 ]

1. [ Menu – New File ] in IDE, Select "waiDoc" as the File type.
2. Enter a File name.
3. Click [ 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. View 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.