20210821 - 포트폴리오 메인 페이지 작성 - 예상금액확인

1. 단가 표현을 위한 Collection 생성

Pre-Rendering - Before Regions - Processes

Identification - Name : CreateCollection

Type : Execute Code

Source - Location : Local Database

Language : PL/SQL

PL/SQL Code : 

declare

  --l_session apex_application.g_instance%type := apex_application.g_instance;

  l_query varchar2(20000) := 

    'select cd

          , to_number(grp2) hh24

          , to_number(grp3) amt

          , 0 page_cnt

          , 0 page_amt

          , null, null, null, null, null, null

       from jkmst_cd_mst 

      where grp_id = 1 and cd != ''00''

      order by cd';

begin

  APEX_COLLECTION.DELETE_ALL_COLLECTIONS;

  APEX_COLLECTION.CREATE_COLLECTION_FROM_QUERY2 (

    p_collection_name => 'ESTIMATION', 

    p_query => l_query,

    p_generate_md5 => 'YES');

end;

2. 예상금액확인 리전 생성

Identification - Name : 예상금액확인

Type : Classic Report

** 앞서 만들어 놓은 collection 에서 데이터를 읽어 오면서 컬럼별 스타일 적용

select '<span class="t-Icon fa fa-number-'||trim(to_char(n001))||'-o fa-2x" aria-hidden="true"></span>' cd

     , n002 hh24, n003 amt

     , n004 page_cnt

     , (n003 * n004) page_amt

     , '<button class="ButtonXU t-Button t-Button--default t-Button--hot" id=U-'||trim(to_char(n001))||' type="button"><span aria-hidden="true" class="fa fa-arrow-circle-o-up"></span></button>' btn_up

     , '<button class="ButtonXD t-Button t-Button--default" id=D-'||trim(to_char(n001))||' type="button"><span aria-hidden="true" class="fa fa-arrow-circle-o-down"></span></button>' btn_down

  from apex_collections 

 where collection_name = 'ESTIMATION'

 order by seq_id

Appearance - Template Options : Use Template Defaults, Show Region Icon, Accent 2, Scroll - Default

Icon : fa-dollar fa-2x

그리고 디자인이 들어간 CD, BTN_UP, BTN_DOWN 은 컬럼 Type을 Markdown 으로하여 HTML 표현

Dynamic Action - Name : UbtnClicked

When - Event : Click

Selection Type : jQuery Selector

jQuery Selector : .ButtonXU (button class name in sql design)

-- True Action1 : Set Value (PL/SQL에서 클릭 버튼 종류를 인식하기 위해 U, D 값 셋팅)

Set Type : JavaScript Expression : this.triggeringElement.id

Affected Elements : P3_ID

-- True Action2 : Execute Server-side Code (클릭된 Row의 값 계산, 누적)

declare

  lv_value varchar2(100) := :P3_ID;

  lv_calc  varchar2(1)   := substr(lv_value,1,1);

  ln_level number        := to_number(substr(lv_value,3));

  ln_cnt   number        := 0;

begin

--raise_application_error(-20001, substr(lv_value,1,1));

  if :P3_ID is null then return; end if;

  select n004 into ln_cnt 

    from apex_collections

   where collection_name = 'ESTIMATION'

     and seq_id          = ln_level;

  

  if lv_calc = 'U' then

    ln_cnt := ln_cnt + 1;

  else

    ln_cnt := ln_cnt - 1;

  end if;

  if ln_cnt < 0 then return; end if;

--raise_application_error(-20001, ln_cnt);

  APEX_COLLECTION.UPDATE_MEMBER_ATTRIBUTE (

    p_collection_name => 'ESTIMATION',

    p_seq             => to_char(ln_level),

    p_attr_number     => 4,

    p_number_value    => ln_cnt);

  select sum(n003 * n004) into ln_cnt 

    from apex_collections

   where collection_name = 'ESTIMATION';

  :P3_SUM := TO_CHAR(ln_cnt,'999,999,999,999');

end;

-- True Action3 : Refresh (계산된 Collection에서 값 읽어오기)

Selection Type : Region

Region : 예상금액확인

-- True Action4 : Execute JavaScript Code (리전 상단의 합계 버튼에 값 셋팅)

$('#myStaticBTN span.t-Button-label').text(apex.item('P3_SUM').getValue())

참고

https://docs.oracle.com/en/database/oracle/application-express/21.1/aeapi/CREATE_COLLECTION_FROM_QUERY2-Procedure.html#GUID-7800CD9E-FD29-4E49-B637-A426D78A644C

CREATE_COLLECTION_FROM_QUERY2 Procedure

Use this procedure to create a collection from a supplied query. This method is identical to CREATE_COLLECTION_FROM_QUERY, however, the first 5 columns of the SELECT clause must be numeric and the next 5 must be date. After the numeric and date columns, there can be up to 50 character columns in the SELECT clause. The query is parsed as the application owner. If a collection exists with the same name for the current user in the same session for the current Application ID, an application error is raised.                   

이 프로시저를 사용할 경우 반드시 첫 5개는 숫자, 다음 5개는 일자 그리고 1개는 문자가 필요함. Null이라도 표시해야 함.

declare

  l_query varchar2(20000) := 

    'select prod_id, prod_qty, 0, 0, 0, null, null, null, null, null, null 

from po_mst where rownum <= 3';

begin

  

  APEX_COLLECTION.CREATE_COLLECTION_FROM_QUERY2 (

    p_collection_name => 'PRODLIST', 

    p_query => l_query,

    p_generate_md5 => 'YES',

    p_truncate_if_exists => 'YES');

end;

20210820 - 포트폴리오 메인 페이지 작성 - 신청서 작성

1. 신청서 작성 폼 페이지 생성

2. Mega 메뉴 아이콘 등록

Shared Components - Lists - List Details - Create / Edit

Image/Class : fa-clipboard-new

3. 폼 리전 설정

Identification - Title : 신청서 작성

Type : Form

Appearance - Template Options : Use Template Defaults, Show Region Icon, Accent 15, Scroll - Default

Icon : fa-clipboard-new fa-lg

20210820 - 포트폴리오 메인 페이지 작성 - 리스트 List, Alert 템플릿

1. 홍보 안내 문구에 Alert 템플릿 활용

Identification - Title : WhoIam

Type : Static Content

Source - Text : <div style="font-family: 'Nanum Myeongjo'; font-weight: 800; font-size: calc(14px + 1.5vw); text-align: left; color: #EBE9E5;">JK인클라우드는요,</div>

Appearance - Template : Standard

Template Options : Use Template Defaults, Hidden, Text Content, Scroll - Hide

Identification - Title : WhoIam1, 2, 3, 4

Type : Static Content

Source - Text : <div style="font-family: 'Nanum Gothic Coding'; font-weight: 400; font-size: calc(12px + 0.7vw); text-align: left;">클라우드 LowCode 플랫폼 활용 개발 전문가입니다.</div>

Appearance - Template : Alert

Template Options : Use Template Defaults, Horizontal, Show custom Icons, Success, Hidden

Icon : fa-user-check

2. 현황에 리스트 List 템플릿 활용

Identification - Title : JK인클라우드 현황

Type : List

Source - List : Dashboard-List >> 아래에 List 만드는 과정 설명

Appearance - Template : Standard

Template Options : Use Template Defaults, Remove Borders, Scroll - Hide

Attributes

Appearance - List Template : Badge List

Template Options : Use Template Defaults, Apply theme Colors, Circular, 3 Column Grid, 96px

Shared Components - Lists - List Details : Dashboard-List

select null as lvl, -- This Column is mandatory it seems

       '경계에 서다, 독립' as label, -- Its a label Column

       'javascript:void(0);' as target, -- Link when the Badge is clicked

       null as attribute1,

       null as attribute2,

       null as attribute3,

       null as attribute4,

       trunc(sysdate-(to_date('20210801', 'YYYYMMDD'))+1)||'일차' as attribute5, -- Value Column inside the Badge

       'custom-list-class' as attribute6,

       'custom-a-tag-attr' as attribute7

from dual

union all

select null as lvl, -- This Column is mandatory it seems

       '프로젝트 진행중' as label, -- Its a label Column

       'javascript:void(0);' as target, -- Link when the Badge is clicked

       null as attribute1,

       null as attribute2,

       null as attribute3,

       null as attribute4,

       '1 건' as attribute5, -- Value Column inside the Badge

       'custom-list-class' as attribute6,

       'custom-a-tag-attr' as attribute7

from dual

union all

select null as lvl, -- This Column is mandatory it seems

       '프로젝트 완료 목표(하반기)' as label, -- Its a label Column

       'javascript:void(0);' as target, -- Link when the Badge is clicked

       null as attribute1,

       null as attribute2,

       null as attribute3,

       null as attribute4,

       '10 건' as attribute5, -- Value Column inside the Badge

       'custom-list-class' as attribute6,

       'custom-a-tag-attr' as attribute7

from dual

20210820 - 포트폴리오 메인 페이지 작성 - 폰트 Font, 카드 리전 Card Region

1. 각 리전간 공간 확보를 위해 Static Content Region 삽입

Identification - Title : -----------------

Type : Static Content

Source - Text : <br>

Appearance - Template : Standard

Template Options : Use Template Defaults, Hidden, Text Content, Scroll - Hide

2. 메인 문구에 대한 폰트 적용

Identification - Title : HeadLine

Type : Static Content

Source - Text : <div style="font-family: 'Nanum Myeongjo'; font-weight: 800; font-size: calc(16px + 2vw); text-align: center; color: #EBE9E5;">데이터에 기반한<br><br><br>나만의 맞춤 웹 시스템 구축</div>

Appearance - Template : Standard

Template Options : Use Template Defaults, Hidden, Text Content, Scroll - Hide

Page 속성

CSS - File URLs

https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding:wght@400;700&display=swap;

https://fonts.googleapis.com/css?family=Nanum+Gothic:400';

https://fonts.googleapis.com/css?family=Nanum+Myeongjo:400,700,800;

3. 보조 문구에 대한 폰트, 색상 적용

Identification - Title : HeadLine2

Type : Static Content

Source - Text : <div style="font-family: 'Nanum Gothic Coding'; font-weight: 400; font-size: calc(12px + 0.7vw); text-align: center; color: #F5E6CF;">요청내역을 작성하시면 <br><br>최적화된 비용과 시스템 구축 내용을 제안합니다</div>

Appearance - Template : Standard

Template Options : Use Template Defaults, Hidden, Text Content, Scroll - Hide

4. 제공 서비스 목록 Card Region

Identification - Title : Type-Service

Type : Cards

Source - Location : Local Database

SQL Query : 

select '고객 맞춤형' card_title

     , 'Best Customized' card_subtitle

     , '요구사항 맞춤 / 반응형 / 모바일 웹' card_body

     , '고객 요구사항에 맞추어 꼭 필요한 기능을 구현' card_secondary_body

     , 'fa fa-calendar-arrow-down' card_icon

     , 'Customized' card_badge

     , 'https://objectstorage.ap-seoul-1.oraclecloud.com/n/cnv4xxn5wibt/b/bucket-20210801-JKinCloud/o/20210801-005.png' card_image

  from dual

union all

.....

select '클라우드환경' card_title

     , 'Oracle Cloud' card_subtitle

     , '장비 구입 NO! 클라우드로 언제/어디서든 접속' card_body

     , 'sbody' card_secondary_body

     , 'fa fa-cloud-wrench' card_icon

     , 'Oracle Cloud' card_badge

     , 'https://objectstorage.ap-seoul-1.oraclecloud.com/n/cnv4xxn5wibt/b/bucket-20210801-JKinCloud/o/20210801-002.png' card_image

  from dual

Appearance - Template Options : Use Template Defaults, Style A

Attributes - Appearance - Layout : Grid

Grid Columns : 4 Columns

Title - Advanced Formatting : Enabled

HTML Expression : <span style="font-family: 'Nanum Gothic Coding'; font-weight: 700; font-size: 20px; monospace;">&CARD_TITLE.</span>

Secondary Body - Advanced Formatting : Enabled

HTML Expression : <span style="font-family: 'Nanum Gothic'; monospace;">&CARD_BODY.</span>

Icon and Badge - Icon Source : Icon Class Column

Icon Column : CARD_ICON

Icon Position : Start

Badge Column : CARD_BADGE

Media - Source : URL Column

URL Column : CARD_IMAGE

Position : Body

Appearance : Auto

Sizing : Fit

Performance - Lazy Loading : Enabled

5. 추가 문구에 대한 폰트, 색상 적용

Identification - Title : FooterLine

Type : Static Content

Source - Text : <div style="font-family: 'Nanum Myeongjo'; font-weight: 800; font-size: calc(14px + 1.5vw); text-align: center; color: #EBE9E5;">신청서, 5분이면 작성 끝</div>

Appearance - Template : Standard

Template Options : Use Template Defaults, Hidden, Text Content, Scroll - Hide

Identification - Title : FooterLine2

Type : Static Content

Source - Text : <div style="font-family: 'Nanum Gothic Coding'; font-weight: 400; font-size: calc(12px + 0.7vw); text-align: center; color: #F5E6CF;">IT 용어 사용하실 필요 없이<br><br>간결하게 필요 요청내역만 작성 해 주시면 됩니다</div>

Appearance - Template : Standard

Template Options : Use Template Defaults, Hidden, Text Content, Scroll - Hide

6. 신청서 작성, 예상비용 산정 Card Region

Identification - Title : Type-Request

Type : Cards

Source - Location : Local Database

SQL Query : 

select '신청서 작성하기' card_title

     , 'Best Customized' card_subtitle

     , '요구사항에 대한 신청서를 작성하세요' card_body

     , '고객 요구사항에 맞추어 꼭 필요한 기능을 구현' card_secondary_body

     , 'fa fa-clipboard-new' card_icon

     , '1' card_badge

     , 'https://objectstorage.ap-seoul-1.oraclecloud.com/n/../o/20210801-005.png' card_image

  from dual

union all

select '예상비용 산정' card_title

     , 'Data-Driven' card_subtitle

     , '예상 화면 개수와 난이도 입력한 후 바로 확인 가능합니다' card_body

     , '자신만의 데이터를 관리하며' card_secondary_body

     , 'fa fa-dollar' card_icon

     , '2' card_badge

     , 'https://objectstorage.ap-seoul-1.oraclecloud.com/n/../o/20210801-004.png' card_image

  from dual

Appearance - Template Options : Use Template Defaults, Style A

Attributes - Appearance - Layout : Grid

Grid Columns : 2 Columns

Card - CSS Classes : u-color-28-bg

Title - Advanced Formatting : Enabled

HTML Expression : <span style="font-family: 'Nanum Gothic Coding'; font-weight: 700; font-size: 20px; monospace;">&CARD_TITLE.</span>

Secondary Body - Advanced Formatting : Enabled

HTML Expression : <span style="font-family: 'Nanum Gothic'; monospace;">&CARD_BODY.</span>

Icon and Badge - Icon Source : Icon Class Column

Icon Column : CARD_ICON

Icon Position : End

Performance - Lazy Loading : Enabled

Action 버튼 추가

Identification - Type : Button

Label : GO

Link - Type : Redirect to URL

Target : javascript: setItems('&CARD_BADGE.');

Appearance - Display Type : Text

Hot : Enabled

Item 추가

Identification - Name : P1_TYPE

Type : Hidden

Setting - Value Protected : Disabled

Layout - Region : Type-Request

Advanced - Warn on Unsaved Changes : Ignore

Source - Maintain Session State : Per Request (Memory Only)

Dynamic Action - P1_TYPE

When - Event : Change

Selection Type : Item

Item : P1_TYPE

Action : Submit Page

Page 속성

Javascript - Function and Global Variable Declaration

function setItems(pType)

{

    apex.item("P1_TYPE").setValue(pType);

}

Process

After

Submit - Branches - RedirectProcess

Identification - Name : RedirectProcess

Execution Options - Point : After Submit

Behavior - Type : Function Returning a URL (Redirect)

Language - PL/SQL - PL/SQL Function Body

begin

 case 

   when :P1_TYPE = '1' then return apex_page.get_url(p_page => 1);

   when :P1_TYPE = '2' then return apex_page.get_url(p_page => 1);

 end case;

end;

참고

https://web-js.co.kr/font_kr.html

https://fonts.google.com/?subset=korean

20210820 - 포트폴리오 메인 페이지 작성 - Carousel Container

1. 배경색 Oracle Theme Redwood light 색상과 동일하게 변경

Page HTML Body Attribute : style="background-color: #47423E;"

2. 상단에 대표 이미지 몇 개를 Carousel Container 형태로 위치

3개의 이미지 Static Content Region 생성 

Identification - Title : IMG-1, IMG-2, IMG-3

Source - Text : <img class="center100" src="20210808-10-1.bmp">

Source - Text : <img class="center100" src="20210808-10-2.bmp">

Source - Text : <img class="center100" src="20210808-10-3.bmp">

그리고 Class는 Page 속성의 

CSS - Inline :

.t-CardsRegion {

  display: flex;

  align-items: stretch;

  justify-content: space-around;

  padding: 50px 0;

}

.center50 {

  display: block;

  margin-left: auto;

  margin-right: auto;

  width: 35%;

}

.center100 {

  display: block;

  margin-left: auto;

  margin-right: auto;

}

Region Template 속성 변경

1개의 Static Content Region 생성

Identification - Title : Head

Type : Static Content

Appearance - Template - Carousel Container

Template Options : Use Template Defaults, 5 Seconds, Slide, Hidden, Remove Borders, Hide

그리고 3개의 이미지 Region의

Layout - Parent Region : Head 로 선택

20210819 - 포트폴리오 메인 페이지 작성 준비

포트 폴리오 페이지 작성을 위해 신규 애플리케이션 생성.

시작은 페이지 1개 그리고 기능은 사용자 Feedback만 활성화. 좋아하는 Mega 메뉴도 포함.

Edit Application Properties

Edit Application Definition - Definition

Name : 이름도 바꾸고

Friendly URLs : Enable 하면 너무 길어져 Disable 하고

Edit Application Definition - User Interface

Text : JKinCLOUD

Theme Style: Redwood Light

Template Options - Display Menu Callout : Enable

Template Options - Layout : Custom

Mega 메뉴는 공개가 될 예정이므로 Administrator 페이지는 빼고 JK홈만 남겨 둠

Shared Components - Lists - List Details

20210612 - 페이지 아이템 값 제어 Page items and Javascript: More than $s and $v

페이지의 아이템 값을 셋업하고 가져올 때 Application Express API Reference 를 사용하여 조금 더 세부적인 제어를 할 수 있음.

1. 값 가져오기, 셋업하기 getValue(), setValue() (천설희 >> 김서울)

2. 다른 형태의 컴포넌트 값 가져오기 (List, Radio Group, Checkbox)

보여지는 값 : 경영지원팀

내부 코드 값 : 2

그리고 다른 항목의 보여지는 값도 DisplayValueFor 를 통해서 가져올 수 있음

3. 값 변경에 대한 DA Dynamic Action 있을 경우, 실행 여부 제어 가능

Event : Change

Selection Type : Item(s)

Item(s) : P3_ENAME

True-Action : Execute JavaScript Code

Code : alert("성명이 변경되었습니다")

apex.item("P3_ENAME").setValue("김경영")

apex.item("P3_ENAME").setValue("김경영", null, true)

4. 그외 여러가지 것들 제어

show, hide, enable, disable, set focus, assign CSS style

20210621.