Visualize: CSS/jqueryui embedding

by Pavel Savushchyk

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/vader/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<script type="text/javascript">
    window.addEventListener("load", onLoad);
</script>
<div style="width:197px;float: left;border-right:1px solid #333;margin-right:2px">
     <h4>Settings</h4>

    <div>
        <button id="loadV">Load visualize</button>
        <div id="loadReports" style="display:none;"> <span>Add report:</span>

            <select id="selected_resource" name="report" style="width:195px;">
                <option value="">-</option>
                <option value="/public/Samples/Reports/1._Geographic_Results_by_Segment_Report">1._Geographic_Results_by_Segment_Report</option>
                <option value="/public/Samples/Reports/2_Sales_Mix_by_Demographic_Report">2_Sales_Mix_by_Demographic_Report</option>
                <option value="/public/Samples/Reports/3_Store_Segment_Performance_Report">3_Store_Segment_Performance_Report</option>
                <option value="/public/Samples/Reports/04._Product_Results_by_Store_Type_Report">04._Product_Results_by_Store_Type_Report</option>
                <option value="/public/Samples/Reports/AllAccounts">AllAccounts</option>
                <option value="/public/Samples/Reports/5g.AccountsReport">5g.AccountsReport</option>
                <option value="/public/Samples/Reports/06g.ProfitDetailReport">06g.ProfitDetailReport</option>
                <option value="/public/Samples/Reports/ProfitDetailReport">ProfitDetailReport</option>
                <option value="/public/Samples/Reports/07g.RevenueDetailReport">07g.RevenueDetailReport</option>
                <option value="/public/Samples/Reports/RevenueDetailReport">RevenueDetailReport</option>
                <option...

JavaScript

var serverUrls = [
    "http://172.17.10.74:8080/jasperserver-pro-branch",
    "http://localhost:8080/jasperserver-pro",
    "http://build-master.jaspersoft.com:7580/jrs-pro-feature-amber-embedded-report"];
var urlUsed = 1;
var reportsList = {};
function onLoad() {
    $( "#buttons_ui button:first" ).button({
      icons: {
        primary: "ui-icon-locked"
      },
      text: false
    }).next().button({
      icons: {
        primary: "ui-icon-locked"
      }
    }).next().button({
      icons: {
        primary: "ui-icon-gear",
        secondary: "ui-icon-triangle-1-s"
      }
    }).next().button({
      icons: {
        primary: "ui-icon-gear",
        secondary: "ui-icon-triangle-1-s"
      },
      text: false
    });
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
    $("#datepicker-user").datepicker();
    $("#datepicker-user2").datepicker();
    $( "#tabs" ).tabs();
    
    $("#loadV").click(loadV);
    fillSheetList();
}
function loadV() {
    $.getScript(serverUrls[urlUsed] + "/client/visualize.js?_opt=false", function () {
        visualize({
            auth: {
                name: "superuser",
                password: "superuser",
                locale: "de",
            }
        }, function (v) {
            fillSheetList();
            $("#loadV").remove();
            $("#loadReports").show();
            $("#selected_resource").change(function () {
                var value = $("#selected_resource").val();
                if (value === "") return;
                createReport(v, $("#selected_resource").val());
            });
        });
   ...