보고서 테마

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

보고서 테마 구조

보고서 테마는 색 팔레트, 주요 및 보조 글꼴 속성, 이미지 목록, 텍스트 값을 포함하는 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 파일을 응용 프로그램의 정적 자산에 저장하고 리소스 로케이터 구현의 코드를 통해 파일 내용을 반환할 수 있습니다. 테마를 동적으로 변경할 수도 있습니다. 이 방법의 전체 코드 샘플은 라이브 데모를 참조하십시오.