======================================== LiveView JavaScript Samples ======================================== This is a StreamBase Studio project for LiveView whose main focus is to demonstrate the use of the StreamBase LiveView JavaScript API. This project is a LiveView project that is similar to the Hello LiveView sample, but modified to produce data more suitable to charting and display for the sample's effectiveness. Familiarity with the Hello LiveView sample project is assumed, and the remainder of this README focuses on the JavaScript portion of this sample. ____________ Requirements This sample is expected to work with all modern browsers. For the best user experience use latest versions available of either Firefox, Chrome, or Safari. _____________ Usage Summary To run this sample in Studio, you can: - In the LiveView Project Viewer, click the green Run button in the upper right. - Right-click any of the lvconf table configuration files in the Project Explorer view and select Run As > Run Configurations > Run (in the invoked Run Configurations dialog). - Right-click the project folder itself, and select Run As > LiveView Fragment Once the sample is running, point your web browser to the LiveView server, choosing one of the included sample application paths. For example: http://localhost:10080/simple http://localhost:10080/query-runner http://localhost:10080/dashboard http://localhost:10080/ipad http://localhost:10080/send-tuple To run this sample from the command line outside of Studio, you must: - Package this sample's LiveView fragment project into a fragment archive. - Create a separate StreamBase Application project, and set the pom.xml for that project to depend on the fragment archive created in the previous step. - Create a separate StreamBase Application archive file. - Install that archive into a StreamBase Runtime node. - Start the node. These steps are described in more detail in the "Deploy with epadmin" page of the Concepts Overview in the StreamBase documentation. _______________ Project Details This LiveView project has two tables (ItemsSales and ItemsInventory) and a data source for the ItemsSales table (ItemsSalesDataSource/application.sbapp) that runs the ItemsSales.sbfs feed simulation. This project registers the sample web applications with the LiveView server using subfolders under the src/main/liveview/lv-user-webapps folder. The folder names are used in the URL to reach the corresponding application, as shown in the five URLs above. Substitute your actual hostname for "localhost," if required, and change the port number if you configured LiveView to listen on a non-default port. _________________________ JavaScript Sample Details simple This sample application is the most basic of the samples. It creates a simple area chart whose data comes from a LiveView query. It is meant to illustrate the most basic use of the JavaScript API. The simple directory contains the following: - js folder: JavaScript Code, as follows: app.js: initializes the chart component, connects to LiveView, runs a query, and renders query results in the chart component - lib folder: contains the Highcharts library for rendering the area chart query-runner This sample application allows users to fetch metadata (including schema information) for all LiveView tables, execute queries, and subscribe to queries. Query data is presented in a live-updating HTML table. Note this application is not specific to the lv-sample-javascript project. You can drop this sample in your own project's lv-user-webapps directory and be able to get table information and run queries against your tables. The query-runner directory contains the following: - css folder: Bootstrap css files - js folder: javaScript Code, as follows: app.js: Contains all the code for the sample including reacting to user events and input as well as connecting to LiveView, issuing queries, and displaying query results. - lib folder: contains the Bootstrap library dashboard This sample application is intended to demonstrate how you might construct a dashboard application using MVC patterns and visualization libraries like Highcharts whose data is provided by LiveView queries. This sample contains HTML tables, gauges, as well as pie, column, and line chart examples. The dashboard directory contains the following: - css folder: Bootstrap and application CSS files - img folder: application images - js folder: JavaScript code, as follows: app.model.js: Provides the model for the application. All dashboard pages, page sections, components, and queries are defined here. LiveViewQueryService.js: A service responsible for interacting with the LiveView server via the LiveView JavaScript API. Additionally, the service provides live data models to the views for display of LiveView query data. TupleStore.js: Utility for maintaining LiveView query result data. views: Directory containing the various views in the dashboard. PageListView.js: Is a view that renders a navigation bar of the different pages defined in app.model.js PageView.js: Displays the currently selected page in the dashboard where a page is composed of sections of visual components that display live data. TableView.js: Defines an object that creates and maintains an HTML table to display LiveView query data. GaugeView.js: Defines an object that creates and maintains a Highcharts gauge that displays LiveView query data PieChartView.js: Defines an object that creates and maintains a Highcharts pie chart that displays LiveView query data. ChartView.js: Defines an object that creates and maintains a generic Highchart chart that displays LiveView query data. The ChartView constructor takes a config object that allows users to configure and display most Highcharts charts. - lib folder: Highcharts and Bootstrap JavaScript libraries ipad This sample demonstrates a basic web application targeted at iPads or tablets. Using d3 and jQuery mobile, it displays a Pie chart and a HTML table whose data is generated by a LiveView query. Touching one of the sections in the pie chart brings up a new screen that shows an HTML table with the specific query results that constitute the pie chart slice. The app will respond to touch and swipe gestures common to mobile apps. The ipad directory contains the following: - css folder: jQuery mobile styles and images as well as an application- specific CSS file - img folder: application images - js folder: JavaScript code app.js: initializes the application, and contains all call-back functions for updating data from LiveView. piechart.js: code responsible for creating and updating the sample's pie chart. table.js: code responsible for creating and updating the sample's HTML tables. - lib folder: d3 and jQuery mobile libraries. send-tuple This sample creates a simple gauge chart whose data comes from a LiveView query. This sample displays the most recent cell phone price and provides a button to apply a 90 percent discount to the sale price. The send-tuple directory contains the following: - js folder: JavaScript Code, as follows: app.js: initializes the chart component, connects to LiveView, runs a query, defines the send tuple behavior to determine the discount, renders query results in the chart component - lib folder: contains the Highcharts library for rendering the gauge chart This sample includes: engine.conf - a LiveView configuration file to set up JVM arguments for this sample. ________ Licenses /*! * Bootstrap v2.3.2 * * Copyright 2013 Twitter, Inc * Licensed under the Apache License v2.0 * http://www.apache.org/licenses/LICENSE-2.0 * * Designed and built with all the love in the world @twitter by @mdo and @fat. */ /*! * Bootstrap v3.3.4 (http://getbootstrap.com) * Copyright 2011-2015 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ /*! * jQuery JavaScript Library v1.7.2 * http://jquery.com/ * * Copyright 2011, John Resig * Dual licensed under the MIT or GPL Version 2 licenses. * http://jquery.org/license */ /*! * jQuery Mobile 1.3.2 * Git HEAD hash: 528cf0e96940644ea644096bfeb913ed920ffaef <> * Date: Fri Jul 19 2013 22:17:57 UTC * http://jquerymobile.com * * Copyright 2010, 2013 jQuery Foundation, Inc. and other contributors * Released under the MIT license. * http://jquery.org/license * */ /* * http://d3js.org, * Library released under BSD license. Copyright 2013 Mike Bostock. * License URL https://github.com/mbostock/d3/blob/master/LICENSE */ /* Highcharts JS v4.1.5 (2015-04-13) (c) 2009-2014 Torstein Honsi License: www.highcharts.com/license */ See important licensing information about your rights to use the Highcharts.js JavaScript library, as described in $STREAMBASE_HOME/doc/dochome/license-issues-sb.html