このトピックでは、Webデザイナの設定方法について説明します。
index.html |
コードのコピー
|
---|---|
<!DOCTYPE html> <html lang="en"> <head> <title>Webデザイナ</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <!-- 必須 --> <link rel="stylesheet" href="vendor/css/materialdesignicons.min.css" media="all" type="text/css" /> <link rel="stylesheet" href="vendor/css/bootstrap.min.css" /> <link rel="stylesheet" href="vendor/css/font-awesome.min.css"> <link rel="stylesheet" href="vendor/css/ionicons.min.css"> <link rel="stylesheet" href="vendor/css/fonts-googleapis.css" type="text/css"> <!---------------> <!-- 追加のオプション:レポートの保存/名前を付けて保存ダイアログ --> <link rel="stylesheet" href="file-dialog.css" /> <!-- 追加のオプション:プレビュー --> <link rel="stylesheet" href="viewer-container.css" type="text/css"> <!-- 追加のオプション:データセットの追加 --> <link rel="stylesheet" href="data-set-picker.css" /> <!-- 追加のオプション:ファイルビュー --> <link rel="stylesheet" href="file-view.css" /> <!-- 追加のオプション:データソースエディタを使用してデータソースの追加/編集 --> <link rel="stylesheet" href="ar-datasource-editor.css" /> <!-- 必須 --> <link rel="stylesheet" href="web-designer.css" /> </head> <body> <!-- 必須 --> <script src="vendor/js/jquery.js"></script> <script src="vendor/js/bootstrap.min.js"></script> <!---------------> <!-- 追加のオプション:開く/名前を付けて保存ダイアログ --> <script src="file-dialog.js"></script> <!-- 追加のオプション:プレビュー --> <script src="viewer-container.js"></script> <!-- 追加のオプション:データセットの追加 --> <script src="data-set-picker.js"></script> <!-- 追加のオプション:ファイルビュー --> <script src="file-view.js"></script> <!-- 追加のオプション:データソースエディタを使用してデータソースの追加/編集 --> <script src="ar-datasource-editor.js"></script> <!-- 必須 --> <script src="baseServerApi.js"></script> <script src="web-designer.js"></script> <!---------------> <!-- 必須 --> <div id="designer-id" style="width: 100%; height: 100%;"></div> <!-- 追加のオプション:ファイルビュー --> <div id="file-view-id" style="width: 100%; height: 100%; display: none;"></div> <!-- 追加のオプション:プレビュー --> <div id="viewer-container-id" style="width: 100%; height: 100%; display: none;"></div> <!-- 追加のオプション:名前を付けて保存ダイアログ --> <div id="save-as-dialog-id" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: none;z-index: 9999;"></div> <!-- 追加のオプション:開くダイアログ --> <div id="open-dialog-id" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: none;z-index: 9999;"></div> <!-- 追加のオプション:データセットの追加 --> <div id="data-set-picker-dialog-id" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: none;z-index: 9999;background-color: #dedede;"></div> <!-- 追加のオプション:データソースエディタを使用してデータソースの追加/編集 --> <div id="data-source-editor-dialog-id"></div> <script> var designerId = 'designer-id'; var viewerContainerId = 'viewer-container-id'; var fileViewId = 'file-view-id'; var saveAsDialogId = 'save-as-dialog-id'; var openDialogId = 'open-dialog-id'; var dataSetPickerDialogId = 'data-set-picker-dialog-id'; var dataSourceEditorDialogId = 'data-source-editor-dialog-id'; /* 実装方法については、以下の内容を参照してください。 */ /* 必須:デザイナのオプションを作成します。 */ var designerOptions = GrapeCity.ActiveReports.WebDesigner.createDesignerOptions(baseServerApi); /* 追加のオプション:保存 */ designerOptions.saveButton.visible = true; designerOptions.onSave = onSaveImpl; /* 追加のオプション:名前を付けて保存 */ designerOptions.saveAsButton.visible = true; designerOptions.onSaveAs = onSaveAsImpl; /* 追加のオプション:開くダイアログ */ designerOptions.openButton.visible = true; designerOptions.onOpen = onOpenImpl; /* 追加のオプション:ファイルビュー */ designerOptions.openFileView = openFileViewImpl; /* 追加のオプション:プレビュー */ designerOptions.openViewer = openViewerImpl; /* 追加のオプション:データセットの追加/編集/削除 */ designerOptions.dataTab.dataSets.canModify = true; /* 追加のオプション:データセットの追加 */ designerOptions.dataSetPicker.open = openDataSetPickerImpl; designerOptions.dataSetPicker.close = closeDataSetPickerImpl; /* 追加のオプション:データソースの追加/編集/削除 */ designerOptions.dataTab.dataSources.canModify = true; /* 追加のオプション:データソースエディタを使用してデータソースの追加/編集 */ ARDataSourceEditor.init(dataSourceEditorDialogId); designerOptions.openDataSourceEditor = openDataSourceEditorImpl; /* 必須:デザイナアプリケーションを描画します。 */ GrapeCity.ActiveReports.WebDesigner.renderApplication(designerId, designerOptions); </script> </body> </html> |
javascript |
コードのコピー
|
---|---|
var dialogs = [ saveAsDialogId, openDialogId, dataSetPickerDialogId, dataSourceEditorDialogId, ]; var showElement = function (id) { if (!id) return; ($('#' + id)).css('display', 'block'); }; var hideElement = function (id) { if (!id) return; ($('#' + id)).css('display', 'none'); }; var hideDialogs = function () { dialogs.forEach(hideElement); } var showDesigner = function () { var info = GrapeCity.ActiveReports.WebDesigner.api.getReportInfo(); var isDirty = GrapeCity.ActiveReports.WebDesigner.api.isReportDirty(); document.title = info.name + (isDirty ? ' *' : ''); showElement(designerId); GrapeCity.ActiveReports.WebDesigner.focus(); }; var makeOptions = function (baseOptions, additionalOptions) { return $.extend({}, baseOptions || {}, additionalOptions || {}); } |
javascript |
コードのコピー
|
---|---|
/* 追加のオプション:保存 */ var onSaveImpl = function (options) { baseServerApi .saveExistingReport({ id: options.reportInfo.id, content: options.reportInfo.content }) .then(function (saveResult) { options.onSuccess({ id: saveResult.Id, name: options.reportInfo.name }); }); }; |
javascript |
コードのコピー
|
---|---|
/* 追加のオプション:名前を付けて保存 */ var onSaveAsImpl = function (options) { showElement(saveAsDialogId); fileDialog.createSaveReportAsDialog(saveAsDialogId, { locale: options.locale, api: { getReportsList: function () { return baseServerApi.getReportsList().then(function (reportsList) { return reportsList.map(function (reportInfo) { return { path: reportInfo.Name }; }); }); }, saveReport: function (saveOptions) { return baseServerApi.saveNewReport({ name: saveOptions.path, content: options.reportInfo.content }).then(function (saveResult) { return { id: saveResult.Id }; }); }, }, reportInfo: { path: options.reportInfo.name, }, onSuccess: function (saveResult) { hideElement(saveAsDialogId); options.onSuccess({ id: saveResult.id, name: saveResult.path }); }, onClose: function () { hideElement(saveAsDialogId); showDesigner(); }, }); }; |
javascript |
コードのコピー
|
---|---|
/* 追加のオプション:開く */ var onOpenImpl = function (options) { showElement(openDialogId); var loadedReportList = null; fileDialog.createOpenReportDialog(openDialogId, { locale: options.locale, api: { getReportsList: function () { return baseServerApi.getReportsList().then(function (reportsList) { loadedReportList = reportsList; return reportsList.map(function (reportInfo) { return { path: reportInfo.Name }; }); }); }, openReport: function (openOptions) { return new $.Deferred(function (def) { var reportInfo = (loadedReportList || []).find(function (r) { return r.Name === openOptions.path; }); if (!reportInfo) return def.reject(); GrapeCity.ActiveReports.WebDesigner.api.openReport({ reportInfo: { id: reportInfo._id, name: reportInfo.Name, permissions: ['all'], }, onFinish: function () { def.resolve({ id: reportInfo._id }); }, }); }); }, }, onSuccess: function (openResult) { hideElement(openDialogId); }, onClose: function () { hideElement(openDialogId); showDesigner(); }, }); }; |
javascript |
コードのコピー
|
---|---|
/* 追加のオプション:ファイルビュー */ var openFileViewImpl = function (options) { hideElement(designerId); showElement(fileViewId); var fileViewOptions = makeOptions(options, { onClose: function () { if (options.onClose) options.onClose(); hideElement(fileViewId); showDesigner(); }, serverApi: { getReportsList: baseServerApi.getReportsList, getReportRevisions: baseServerApi.getReportRevisions, getDataSetsList: baseServerApi.getDataSetsList, getTemplatesList: baseServerApi.getTemplatesList, getTemplateContent: baseServerApi.getTemplateContent, getTemplateThumbnail: baseServerApi.getTemplateThumbnail, }, createReport: GrapeCity.ActiveReports.WebDesigner.api.createReport, openReport: GrapeCity.ActiveReports.WebDesigner.api.openReport, saveReport: GrapeCity.ActiveReports.WebDesigner.api.saveReport, ignoreCase: true, delimiter: '/', }); fileView.renderFileView(fileViewId, fileViewOptions); }; |
javascript |
コードのコピー
|
---|---|
/* 追加のオプション:プレビュー */ var openViewerImpl = function (options) { hideElement(designerId); showElement(viewerContainerId); var viewerContainerOptions = makeOptions(options, { makeViewerUrl: function () { var baseUrl = 'http://localhost:58723/preview/'; var reportId = encodeURIComponent(options.reportInfo.id); var language = options.locale; return baseUrl + reportId + '?lng=' + language; }, }); viewerContainer.renderViewerContainer(viewerContainerId, viewerContainerOptions, function () { var isTemporaryReport = options.reportInfo.isTemporary; if (isTemporaryReport) { var reportId = options.reportInfo.id; baseServerApi.deleteTemporaryReport({ id: reportId }); } hideElement(viewerContainerId); showDesigner(); }); }; |
javascript |
コードのコピー
|
---|---|
/* 追加のオプション:データセットの追加 */ var openDataSetPickerImpl = function (options) { var openInPanel = options.mode === 'Panel'; if (!openInPanel) { hideDialogs(); showElement(dataSetPickerDialogId); } dataSetPicker.renderDataSetPicker(openInPanel ? options.elementId : dataSetPickerDialogId, makeOptions(options, { serverApi: { getDataSetsList: baseServerApi.getDataSetsList, getDataSourcesAndDataSets: baseServerApi.getDataSourcesAndDataSets, }, onClose: function () { options.onClose(); if (!openInPanel) hideElement(dataSetPickerDialogId); dataSetPicker.dispose(); } })); }; var closeDataSetPickerImpl = function () { dataSetPicker.dispose(); }; |
javascript |
コードのコピー
|
---|---|
/* 追加のオプション:データソースエディタを使用してデータソースの追加/編集 */ var openDataSourceEditorImpl = function (options) { ARDataSourceEditor.open(makeOptions(options, { serverApi: { testConnection: baseServerApi.testDataSourceConnection, }, })); }; |