[]
        
(Showing Draft Content)

보고서 테마

보고서 테마는 보고서의 모양과 느낌을 사용자 정의하는 방법 중 하나입니다. 이 기능은 여러 보고서의 모양을 단일 구성으로 제어하려는 경우에 유용합니다. 연결된 리소스에서 보고서 제목이나 표 열 헤더 같은 정적 텍스트를 끌어오는 다국어 보고서를 제공하는 데에도 도움이 될 수 있습니다.

보고서 테마 구조

보고서 테마는 색 팔레트, 주요 및 보조 글꼴 속성, 이미지 목록, 텍스트 값을 포함하는 JSON 개체입니다. 현재 ActiveReportsJS는 테마 편집기를 제공하지 않지만 다음 단계에 따라 쉽게 테마를 처음부터 만들 수 있습니다.

  • *.rdlx-json-theme 확장명을 가진 새 파일을 만듭니다.
  • 새로 만든 파일에 다음 내용을 복사하고 값을 고유한 값으로 바꿉니다. base64-image 같은 온라인 도구를 사용하여 이미지 파일을 base64 문자열로 변환할 수 있습니다.
{
  "Theme": {
    "Colors": {
      "Dark1": "#000000",
      "Dark2": "#1a1a1a",
      "Light1": "#40cddf",
      "Light2": "#e6e6e6",
      "Accent1": "MediumTurquoise",
      "Accent2": "Gold",
      "Accent3": "DeepPink",
      "Accent4": "#557bd2",
      "Accent5": "#8acc1f",
      "Accent6": "#409dcc",
      "Hyperlink": "#aaa",
      "HyperlinkFollowed": "#3c3c3c"
    },
    "Fonts": {
      "MajorFont": {
        "Family": "Montserrat",
        "Style": "Normal",
        "Size": "20pt",
        "Weight": "Medium"
      },
      "MinorFont": {
        "Family": "Montserrat",
        "Style": "Normal",
        "Size": "9pt",
        "Weight": "Normal"
      }
    },
    "Images": [
      {
        "Name": "Logo",
        "MIMEType": "image/png",
        "ImageData": "iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsSAAALEgHS3X78AAABD0lEQVRIie2UzW3CQBCFn1OB0wG3dyUVABUk6SDpIHRAB0AFoQPSAaEDru8UOmBLiFYao9F6gZXZW/Iky9q/93lnxoN/3VLj1yWdALTJmTnJ1dBIPiTj1Dzq+Z40pYDqKgGMa97gO7OnlTQYkgIOmT3BniqAfcZ8RvI4FNCkE5J+AIycee5WxcoleW3v9kLZ3g3YAOhCsqwOIBlDM7fhWNJnVYBBvgB07eHtEkTS6FYJ95KcGOwATG24Ifnu1qLxzvIUXInvSS5KAfHw1kEOFr7gzHsiefa9CnCgmOwPNxWuVZgHFDU7kvGrX111FZdvcTe1xD9ZiIr/7KIQ5STpBcDEuu3UbQkkH4f6/jUB+AWm0kmTmeXA3wAAAABJRU5ErkJggg=="
      }
    ],
    "Constants": [
        {
          "Key": "Title",
          "Value": "Sales Report"
        }
      ]
  }
}

보고서를 테마에 연결

보고서를 테마에 연결하려면 *.rdlx-json-theme 파일을 보고서 파일과 동일한 디렉터리에 저장해야 합니다. 그러면 보고서 테마 속성 편집기의 드롭다운 목록에 사용 가능한 테마가 표시됩니다. 테마를 선택한 후 다음 식을 사용하여 테마의 값을 참조할 수 있습니다.

테마 값
밝게 1 색 {Theme.Colors!Light1}
밝게 2 색 {Theme.Colors!Light2}
어둡게 1 색 {Theme.Colors!Dark1}
어둡게 2 색 {Theme.Colors!Dark2}
강조색1 색 {Theme.Colors!Accent1}
강조색2 색 {Theme.Colors!Accent2}
강조색3 색 {Theme.Colors!Accent3}
강조색4 색 {Theme.Colors!Accent4}
강조색5 색 {Theme.Colors!Accent5}
강조색6 색 {Theme.Colors!Accent6}
하이퍼링크 색 {Theme.Colors!Hyperlink}
HyperlinkFollowed 색 {Theme.Colors!HyperlinkFollowed}
주 글꼴 패밀리 {Theme.Fonts!MajorFont.Family}
주 글꼴 크기 {Theme.Fonts!MajorFont.Size}
주 글꼴 스타일 {Theme.Fonts!MajorFont.Style}
주 글꼴 두께 {Theme.Fonts!MajorFont.Weight}
보조 글꼴 패밀리 {Theme.Fonts!MinorFont.Size}
보조 글꼴 크기 {Theme.Fonts!MinorFont.Size}
보조 글꼴 스타일 {Theme.Fonts!MinorFont.Style}
보조 글꼴 두께 {Theme.Fonts!MinorFont.Weight}
이미지 데이터 * {Theme.Images!<Image Name>.ImageData}
이미지 MIME 형식 {Theme.Images!<Image Name>.MIMEType}
상수 값 {Theme.Constants("<Constant Key>")}

* 테마의 이미지를 사용하려면 이미지 보고서 항목소스 속성을 데이터베이스로 설정합니다.

스타일 속성

일부 보고서 항목에는 테마 기반의 여러 값을 설정하는 바로 가기인 스타일 속성이 있습니다. 예를 들어 텍스트 상자스타일 속성에는 밝게 1 강조색1 주요와 같이 세 개의 값이 공백으로 구분된 항목 목록이 포함되어 있습니다. 항목 중 하나를 선택하면 텍스트 상자는 첫 번째 값을 텍스트 전경색(예: 밝게 1)으로, 두 번째 값을 텍스트 배경색(예: ``강조색1)으로, 세 번째 값을 글꼴 속성(예: 주요```)으로 사용합니다.

런타임 테마 확인

실제로 보고서를 실행하고 내보내거나 뷰어 컴포넌트에 로드하는 응용 프로그램은 런타임에 테마를 확인해야 합니다. 이 작업을 위해 리소스 로케이터 기능을 사용할 수 있습니다. 예를 들어 *.rdlx-json-theme 파일을 응용 프로그램의 정적 자산에 저장하고 리소스 로케이터 구현의 코드를 통해 파일 내용을 반환할 수 있습니다. 테마를 동적으로 변경할 수도 있습니다. 이 방법의 전체 코드 샘플은 라이브 데모를 참조하십시오.

X

카카오톡 채널 추가를 통해 GrapeCity의 최신 정보를 빠르게 받아 보세요!