AGADOS function & feature Chapter-01 UI define elements

Agados Functions & Features
Chapter 1. Biz-Apps UI 정의(디자인) 기능과 특징
Functions & Features Revision: 2016.07.23
Template Revision:20131025 v2.0

Ⓒ 2014 agados All rights reserved. 2
Imagination of Agados Based Biz. Application (Package/Service)
App Defining & Running Mechanism in Agados App AI Engine Platform
Application DB
Data Access by Agados
I/F OBJ
Biz. Logics by Agados
General JSP /Servlet /
ASP
Object
Servlet
(java,
.NET)
ObjectObjectObjectObject
ObjectObjectI/F Object
Presentation Layer by Agados
ObjectObject ObjectObject
Object
EJB/COM/ …
JDBC/ODBC ConnectionMiddleware
External
Module
Hybrid Architecture through X-Using Platforms
I/F
I/F
I/F
ObjectObject
HTML5 Web Windows Native App

Imagination of Agados Based Biz. Application (Package/Service)
App Defining & Running Mechanism in Agados App AI Engine Platform
App Modeler
Define Tool
App Configure Tool
Redefine Tool
Visual Monitor Client
AI Engine Client
Your Application
Smart Client
Application
DB
Application
Model Data
Application
Log Data
WAS (JBoss, IIS, …)
App AI Engine
(Design, Execute)
App AI
Log Engine
Out-of-Box
Reporting Tool
App AI
Monitor Engine
External System
Your App.
Biz. Assembly
(Model OBJ)HTTP
Your Application
Smart Server
DB(Data)
Server
 Agados based App Environment
Server : Windows Server, Unix, Linux
for Java / .NET
DBMS : SQL Server, Oracle, MySQL, …
JSP, ASP
Your App.
Biz. Assembly
(General Class)
Servlet
Other Framework
Internet Browser

Biz. Application을 위한
화면 디자이너/재조정기
• ‘아가도스 AppStudio’는 Biz-App내에서 Configure Tool의 역할을 수행
• ‘아가도스 AppStudio’는 DevExpress UI Control 을 적용.
• 사용자는 각 UI 컨트롤의 속성만 정의
(Do Not Control by Program Code)
• 아가도스를 통해 만들 Biz-Apps 에 적용 가능한 UI 를 살펴볼 수 있다.

화면 디자인/재조정 기능
다양한 Controls 사용
Screen 디자인/재조정
 다양한 UI Controls 사용
 Screen Rules 제작
 Screen Rule은 Repository에 Meta Data화

Windows Native Apps 용 UI Control
• 복잡한 업무용 Application의 특성상, 인트라넷용 Window Native Apps이 최적
• 윈도우즈용 Business Application을 가장 쉽고 빠르게 생성할 수 있는 수단

다양한 Controls – Editor 와 Button 컨트롤
Control Control Name
 Label
 Button
 TextEdit
 TextEdit (Number Format)
 TextEdit (Date Format)
 MemoEdit
 MemoExtEdit
 RichTextEdit

다양한 Controls – Box 컨트롤
 ButtonEdit
 CalcEdit
 CheckButton
 CheckEdit
 ComboBox
 ColorEdit
 CheckedComboBox
 ControlNavigator
 DataNavigator
 CheckedListBox

 FilterControl
 FontEdit
 DropDownButton
 DateEdit
 GridLookUpEdit
 HiperLinkEdit

 MarqueeProcessBar
 ImageEdit
 ImageListBox
 ImageComboboxEdit
 LookUpEdit
 ListBoxControl

 PictureEdit
 MRUEdit
 PopupContainerEdit
 RangeTrackBar
 RadioGroup
 SpinEdit
 TimeEdit
 ZoomTrackBar
 ProgressBar
 TrackBar

다양한 Controls – Container 컨트롤
 Panel
 ScrollPanel
 FlowLayoutPanel
 UserPanel
 IPanel
 TabControl
 HScrollBar
 VScrollBar
Like Iframe in HTML
Invoke User Control+Logic

다양한 Controls – Container Layout 컨트롤
‘Layout Function’ 은, Application 실행 시 화면 사이즈가 변경 되었을 때, ‘자동 컨트롤 위치 배치’ 기능을 제공한다.
1. LayoutRate, LayoutType
 변경 Rate & Type 을 Control마다 적용
 LayoutType : Default, X, Y, Width, Height, Location, Size, XandHeight, XandWidth, YandHeight, YandWidth,
Bound, Fix
 LayoutRate : 변경 Rate를 적용
LayoutType : X
버튼의 LayoutType 을 X 로
설정,
Form 사이즈가 변경되면
Button은 자동으로 재배치된다.

다양한 Controls – Container Layout 컨트롤
2. LayoutControl
 화면의 Bound가 변경되었을 때, ‘auto-calculating function’ 을 통해 ‘Auto-Bound-Adjustment’ 된다.
Customization mode

다양한 Controls – Bar 컨트롤
 NavBarControl  TitleControl
 WebBrowser

다양한 Controls – Grid 컨트롤
1. Base Grid (기본 그리드)

2. Band Grid (밴드 타입)

3. Advanced Band Grid (고급 밴드 타입)

4. Card Grid (카드 타입)

5. Layout Grid (별도 Layout 타입)

다양한 Controls – Pivot Grid 컨트롤
고급 Pivoting 기능을 위한 Grid

다양한 Controls – Pivot Grid 컨트롤
PivotGrid 와 Chart 의 조합

다양한 Controls – Tree List 컨트롤
Tree 구조 스타일 List

다양한 Controls – Scheduler 컨트롤
Daily View
Work Weekly View

Weekly View
Monthly View

TimeLine View
Gantt View

다양한 Controls – Chart (2D/3D Bar) 컨트롤
Gantt View

다양한 Controls – Chart ( Point / Line / Bubble ) 컨트롤
Point / Line / Bubble/ Stacked Line

다양한 Controls – Chart ( Lines ) 컨트롤
Full Stacked Line/ Spline / Step Line / Scatter Line

다양한 Controls – Chart ( 3D Lines ) 컨트롤
3D Line/ 3D Full-Scatter Line / 3D Scatter Line / 3D Step Line / 3D Spline

다양한 Controls – Chart ( Pie / Doughnut / Funnel ) 컨트롤
Pie / 3D Pie / Doughnut / 3D Doughnut / 3D Spline / Funnel / 3D Funnel

다양한 Controls – Chart ( Area ) 컨트롤
Area / Stacked Area / Spline Area / Full Stacked Area /
Stacked Spline Area / Step Area / Full-Stacked Spline Area

다양한 Controls – Chart ( Area ) 컨트롤
3D Area / 3D Stacked Area / 3D Full Stacked Area / 3D Step Area /
3D Spline Area / 3D Stacked Spline Area / 3D Full-Stacked Spline Area

다양한 Controls – Chart ( Range ) 컨트롤
Range Bar/ Range Bar Side-by-Side / Range Area / 3D Range Area

다양한 Controls – Chart ( Radar / Polar ) 컨트롤
Radar Point / Radar Line / Radar Area /
Polar Point / Polar Line / Polar Area

다양한 Controls – Chart ( etc… ) 컨트롤
Stock / Candle Stick / Gantt / Gantt Side-by-Side /
Regression Line / Trend Line / Fibonacci Indicators

다양한 Controls – Chart ( Gauge ) 컨트롤
Gauge Controls Control Type
 Base Gauge
Gauge Control Control Type
 State Indicator Advanced Gauge
 Digital
Circle / Digital / Linear / State Indicator

다양한 Controls – Bar Manager , Tabbed MDI Manager 컨트롤
Bar Manager
 ‘BarManager’ 은 Application 상의 ‘Menu’, ‘Tool Bar’ 그리고 ‘Status Bar’를 관리하는 컨트롤
Tabbed MDI Manager
 ‘TabbedMdiManager’ 은 Application PKG 상에서 MDI-Style 처럼 Form이 열릴 때 Tab 스타일의 Form으로 관
리하는 컨트롤.

다양한 Controls – Dock Manager , Alert 컨트롤
Dock
Manager
 ‘DockManager’ 은 ‘Docking’ 기능을 제공
Alert Control
 ‘AlertControl’ 은 Message를 보여주는 컨트롤

표준 HTML5 용 UI Control
• 브라우저 내에서 실행되는 표준 HTML5 적용 Biz-Apps 제작에 사용
• HTML5 웹 표준 적용, 복잡한 Business Application을 가장 쉽고 빠르게 생성

화면 디자인/재조정 기능 (HTML5 화면 적용 UI Controls)
1. Data Grid Category – Adaptability
Overview

1. Data Grid Category – Appearance
Overview
Right-To-Left Support

1. Data Grid Category – Columns
Multi-Row Headers (Bands)
Columns based on a Data Source

1. Data Grid Category – Columns
Column Customization

1. Data Grid Category – Data Summaries
Grid Summaries
Group Summaries

1. Data Grid Category – Data Summaries
Custom Summaries

1. Data Grid Category – Editing
Batch Editing
Cell Editing and Editing API

Form Editing

Row Editing and Editing Events

Data Validation

1. Data Grid Category – Export
Export to Excel

1. Data Grid Category – Filtering & Sorting
Filtering
Multiple Sorting

1. Data Grid Category – Filtering & Sorting
Filtering API

1. Data Grid Category – Grouping
Record Grouping

1. Data Grid Category – Grouping
Remote Grouping

1. Data Grid Category – Mater-Detail
Master-Detail View

1. Data Grid Category – Paging & Scrolling
Record Paging

1. Data Grid Category – Paging & Scrolling
Virtual Scrolling

1. Data Grid Category – Pivot Grid
Layout Customization

State Persistence

Drill Down

Chart Integration

Field Chooser

Field Panel

1. Data Grid Category – Selection
Multiple Record Selection

1. Data Grid Category – State Persistence
Layout Customization
The DevExtreme HTML5 Pivot Grid Widget supports multiple customizations allowing you to provide the look and feel that will satisfy
any user. This demo illustrates only a small part of the available customizations. Toggle the check boxes above the widget to change
the layout at runtime.

2. Chart Category – Advanced Features
API - Display a Tooltip Select a Point
Crosshair Customize Points and Labels

Discrete Axis Zooming and Scrolling Error bars
Export and Printing API Hover Mode

Logarithmic Axis Multiple Axes
Multiple Panes Multiple Point Selection

Multiple Series Selection Null Point Support
Point Image Points Aggregation

Selection Series Templates
Tooltip HTML Support Zooming and Scrolling

2. Chart Category – Tree Map
Flat & Hierarchical Data Structure Tiling algorithms
Colorization Drill Down

2. Chart Category – Simple Bullets

2. Chart Category – DOUGHNUT SERIES

2. Chart Category – Polar and Radar Charts

2. Chart Category – RANGE SERIES
Range Area
Range Bar

2. Chart Category – PIE SERIES
Pie with Multiple Series
Pie with Custom Labels

2. Chart Category – LINE AND POINT SERIES
Bubble Spline
Scatter Line

2. Chart Category – FINANCIAL SERIES
Candlestick
Stock

2. Chart Category – Bar
Full Stacked Bar
Side-by-Side Bar

2. Chart Category – Bar
Auto-Calculated Bar Width
Custom Bar Width

2. Chart Category – SPARKLINES
Winloss Sparklines
Simple Sparklines

3. Gauges Category – Linear Gauge Basic Elements
Different Value Indicator Types

3. Gauges Category – Linear Gauge Basic Elements
Custom Layout
Scale Custom Tick Values

3. Gauges Category – Circular Gauge Basic Elements
Different Subvalue Indicator Types

3. Gauges Category – Circular Gauge Basic Elements
Angles Customization
Gauge Tooltip

3. Gauges Category – Bar Gauge Basic Elements
TooltipLabels Customization

4. Navigation Category – Menu
Overview

4. Navigation Category – Tab Panel
Overview
Tabs

4. Navigation Category – Multi View
Overview

4. Navigation Category – Panorama
Overview

4. Navigation Category – Tree View
Hierarchical Data Structure

4. Navigation Category – Accordion
Accordion

5. Editors Category – Text Box
Overview

5. Editors Category – Text Area
Overview

5. Editors Category – Tag Box
Overview

5. Editors Category – Switch / Number Box
Switch
Number Box

5. Editors Category – Select Box (Search & Editing)
Overview

5. Editors Category – Date Box
Overview

5. Editors Category – Color Box
Overview

5. Editors Category – Check Box
Overview

5. Editors Category – Validation
Overview

5. Editors Category – Autocomplete
Overview

5. Editors Category – Calendar
Overview

6. Forms & Multi-purpose Category – BOX
BOX

6. Forms & Multi-purpose Category – Field Set
Field Set

6. Forms & Multi-purpose Category – Form
Columns Adaptability

Customize Item

Grouped Fields

6. Forms & Multi-purpose Category – Radio Group
Radio Group

6. Forms & Multi-purpose Category – Responsive Box
Web
Tablet
Phone

6. Forms & Multi-purpose Category – Scheduler
Tab Agenda

Tabs

Time Zones Support

Custom Templates

7. Actions and Lists Category – Button
Overview

7. Actions and Lists Category – Context Menu
Overview

7. Actions and Lists Category – File Uploader
Overview

7. Actions and Lists Category – List
Group List
Item Template

7. Actions and Lists Category – List
List with Search Bar
List Editing and API

7. Actions and Lists Category – Lookup
predefined value selection

7. Actions and Lists Category – Maps
Providers and Types

7. Actions and Lists Category – Maps (Vector Map)
Bubble Markers
Tooltip HTML Support

Bubble Markers
Pie Markers

Tooltip HTML Support

Dynamic Viewport
Custom Map Data

9. Dialog & Notifications Category – Load Panel(Indicator), Popup, Popover
Load Indicator Load Panel
PopoverPopup

9. Dialog & Notifications Category – Load Panel(Indicator), Popup, Popover
Progress Bar
TooltipToast

AGADOS function & feature Chapter-01 UI define elements

AGADOS function & feature Chapter-01 UI define elements

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (9)

Similar to AGADOS function & feature Chapter-01 UI define elements

Similar to AGADOS function & feature Chapter-01 UI define elements (20)

More from Yongkyoo Park

More from Yongkyoo Park (20)

Recently uploaded

Recently uploaded (20)

AGADOS function & feature Chapter-01 UI define elements