Docstoc

Building Interactive Web Applications using Stored Processes

Document Sample
Building Interactive Web Applications using Stored Processes Powered By Docstoc
					Using SAS Stored Processes with
JavaScript and Flash to Build Web
based Applications
Introduction

 Introduction to SAS Web Applications
 Stored Processes on the Web
 Using JavaScript with SAS
 Ext JS & SAS
 Flash & SAS
 Conclusion
Does your app have to be on the web?

 Something I
  learnt yesterday
Consider JMP
 Very powerful
  scripting
  language
Do you want a SAS App on the Web?

 Often when a customer wants a web reporting tool, they
  get:
    SAS Enterprise BI Server
    Information Delivery Portal
    Web Report Studio/Viewer
    Web OLAP Viewer
    etc…
Do you want a SAS App on the Web?




         This looks OK,
but is it really what we want?
Do you want a SAS App on the Web?

 It is all customizable – which is great!
 Usually we want something even more customized
 Often we want something much more user friendly
 Sometimes there is no additional budget for the ideal
  SAS packaged solution
    Required skilled staff may not be easily available
Consider other ways to build applications
with SAS
 SAS AppDev Studio
 SAS/Intrnet
 Integration Technologies
    Web Services, Foundation Services (Java APIs), Web
     Infrastructure Kit
    Support for many languages: Windows Clients, Java, C++,
     VB.Net, etc.
 Enabling use of apps via a web interface, remote
  desktop, Citrix, etc.
 SAS Stored Processes
    Requires SAS 9
Why not build something like this?
SAS Stored Processes on the Web
Stored Processes for beginners

 Like a SAS macro
    Can pass parameters and define where it will run
    Can use security to define who can run it
    Can be run from many places
 Create either in:
    Enterprise Guide, auto handle metadata
    Other SAS tools such as Web Report Studio
    Define in management console and write code
 Run on stored process server or workspace server
Anatomy of a stored process

 Made up of 2 parts:
    Metadata
     » Server?
     » Users?
     » Parameters?
    SAS code, optionally containing
     » *ProcessBody;
         » Substitutes parameters
     » %stpbegin ;
         » ODS begin
     » %stpend ;
          » ODS end
    SAS Code vs. Stored Process



proc print data=sashelp.class ;
run ;
          Initiate input parm processing   *ProcessBody;

                           Initiate ODS    %stpbegin;

                                  code     proc print data=sashelp.class ;
                                           run ;

        Terminate ODS & deliver output     %stpend;
The WIK

 Web Infrastructure Kit
    Provides bits to connect a web browser to SAS 9 architecture
      » e.g. run a stored process from browser
    Scalable
    Secure
    Similar functionality to SAS/IntrNet
 Provides a range of web applications, portlets and tools
    SAS Stored Process web application
    Portal web application
Stored process web application

 Allows running a stored process
    From a web browser
    From an application such as EXCEL, MS Word
    Anywhere you can call a URL – be creative!
 Allows passing parameters via URL
 Allow SAS to deliver output directly to browser
    Or whatever has invoked the URL
 Maintains logs
Macro variables used with %stpbegin
   _action
      Form, execute, properties, background, strip, index, data
   _debug
      Log, time
      My favourite … 2179 … gives most information
   _gopt_device
      Sasemf, java, activex, png
   _gopt_hsize, _gopt_vsize
   _gopt_xpixels, _gopt_ypixels
   _goptions
   _odsdest, _odsoptions, _odsstyle
   _program
   _result
      Status, stream, streamfragment, package_to_email, etc.
Macro variables that are available when
running the web app
 Some of the useful ones, from many
    _srvname
      » Server, machine webapp is running on
    _srvport
    _url
    _program
      » Path to Stored Process being run
    _metauser
      » Userid from metadata
    _metaperson
      » Name from metadata, e.g. Phil Mason
    _username
What output do you want

 HTML, RTF, PDF, EXCEL, etc??
    Any ODS output
 You can use the %stpbegin macro to help choose the
  kind of output you want
 Use _odsdest=html for interactive parts
 User can choose another format and your report will be
  produced accordingly
Streaming HTML to browser

 Set _result to stream
    e.g. On URL add &_result=stream
 Set _odsdest=html
   » e.g. On URL add &_odsdest=html
 I prefer to set _result to streamfragment
    Just writes HTML for reports/graphs without extra bits
      » No <html> tag or <body> section
      » Allows more customisation and control
      » You can use your own CSS
Some simple techniques for building
Applications with Stored Processes
 Enterprise guide can generate a web page
    Use wizard to do this simply
    It prompts for parameters and calls stored process
 Stored processes which create their own interactive
  elements
 Generate HTML with hyperlinks to other HTML
    Implement drill down
    Make menus
    Writing your own custom HTML

     Write to the fileref _webout
     Doesn’t work in between %stpbegin & %stpend, since
      _webout is being used
     Usually use with _result=stream, when streaming to
      browser

Data _null_ ;
  File _webout ;
  Put “<h1>Make your choices and press submit to continue</h1>” ;
Run ;
One way to put HTML into a web page
*ProcessBody;
data html_code;              /* generate html code */
   infile datalines4 length=l;
   input #1 htmlline $varying400. l;
datalines4;
Put    your       HTML   here
;;;;
run;
data _null_;                 /* stream html code to browser */
   file _webout;
   set html_code;
   put htmlline;
run;
*';*";*/;run;
A useful addition to this technique

 Use Resolve function to resolve any macro variables or
  macro calls in the datalines.


data _null_;        /* stream html code to browser */
   file _webout;
   set html_code;
   htmlline=resolve(htmlline) ;
   put htmlline;
Run;
Stored process with menu

 If specific parameters are passed in then produce report
 If they are not, then produce a menu
    Menu allows selection of various options
    When user clicks on “submit” then stored process is called again
       » Users selections are passed in
e.g.        %if &menu=yes %then %do ;
              * Some code to make a menu ;
              %end ;
            %else %do ;
              * some code to produce a report ;
              %end ;
Persistence – how to pass data between
Stored Processes
 Passing parameters on URL
    Easiest way
 Sessions
 Cookies
    I have had some problems trying this with IE6
 Files / datasets
    Sharing dataset
    Using Lock statement, checking return code and looping till free
Passing lots of parameters of the same
name
 Often used in html selection lists
 If list is called pick then you will get a collection of macro
  variables
    url&pick=a&pick=b
    Pick0=2, pick1=a, pick2=b

 Its easy to make a macro to construct a macro variable
  for use with an IN operator
    %let picks=“a”,”b” ;
Get vs. Post method
<form method=‘post’ action=‘do?_program=my_stp’>

 Get has a limit of about 2,083 characters
 If you pass more they are truncated without warning
    Can have unpredictable results
 Get
    Nice for short URLs
    Shows URL to user in browser address line or properties
 Post
    More secure, user cant see URL
    Needed for long URLs
Check the stored process server logs

 Great source of
  information
 Write code to
  analyse logs
 Make sure your
  server options
  are set so you
  get the log info
  written that you
  want
Use WinMerge to find differences in your
code
 Free
 Open
  source
 Directory/fil
  e
 Windows
 Beyond
  Compare
  is better
Using JavaScript with SAS
What does a SAS programmer need to know
about JavaScript?
 Some basic HTML syntax
 Some basic JavaScript syntax
 How to define JavaScript libraries to HTML
 Some object oriented programming concepts
 How data is stored and used
 How SAS Stored Processes can feed data to objects
 How to find and use JavaScript debuggers
Where to put HTML code, JavaScript
libraries, images, etc.?
 SAS Web App runs
  via Application Server
  (a.k.a. Servlet
  Container)
    Often this will be
     Tomcat
 Use any accessible
  directory
    Can use ROOT
    Can use
     SASStoredProcess
     Web application
     subdirectories
Building interactivity with JavaScript

 Popup windows
    Using alert function
 Updating status message
 Taking actions based on user interactions with objects
    Using onclick, ondblclick, onmouseover, onkeydown, etc.
 Validating form fields
 Linking to one or more other URLs
 Customising HTML programatically
  Linking stored processes

   Best way I have found is by using the body onLoad
    method


data _null_ ;
  file _webout ;
  put '<body class="panel"' ;
  Put
"onload=""window.parent.document.getElementById(’details').
src = " ;
  Put
"'http://&_srvname:&_srvport/SASStoredProcess/do?_program=SB
IP://Foundation/test” ;
  Put "%nrstr(&parm1)=120%nrstr(&parm2)=BP' ;""" ;
  Put ">" ;
run ;
JavaScript IDE
Interactive Development Environment

 Advantages
    Syntax highlighting & code completion
    Debugger
    FTP, SFTP & Sync
 Possibilities
    Aptana Studio      Aptana Studio 3
    Netbeans
    Notepad ++
    Eclipse
    TextWrangler
    Hyperedit
JavaScript debuggers

 Apart from in IDEs
 Some Web browsers have them built in or available as
  add-ons
    Chrome
    Firefox, Firebug
    Safari, Firebug
    Internet Explorer, there are some …
The Ext JS JavaScript Framework
What is a JavaScript framework

 Provide a set of tools for building interactive web
  applications
    Means you can make great things quickly and easily
 Various are available:
    jQuery
    Ext JS
    Dojo Toolkit
    Spry Framework (from Adobe)
    script.aculo.us
    Prototype
    Moo Tools
    ASP.NET Ajax Framework
Ext JS

What is Ext JS?
 JavaScript Framework
 Open Source
 Maintained by Sencha.com
 Rich modern UI widgets
 Supports all major browsers:
  Internet Explorer 6+, Firefox 1.5+, Chrome 3+, Safari 3+, Opera 9+
 Commercial and GPLv3 License
Ext JS & SAS

 Ext JS and SAS make a powerful combination
 SAS generate dynamic data driven webpages
 AJAX requests to SAS Stored Processes
 Use Ext JS Graphs and Grids for web reports
 Requires minimal SAS installation:
     SAS Base
     Stored Process Server
     Metadata Server
     Management Console
     Enterprise Guide (optional)
Example of a SAS & Ext JS Web App
Census Left
Census Right
The Ext JavaScript framework home page
Ext JS Examples

 Samples provided
http://localhost:8888/Ext JS/examples/
http://localhost:8888/Ext JS4/examples/

http://localhost:8888/Ext JS/examples/desktop/desktop.html
http://localhost:8888/Ext JS/examples/forum/forum.html
http://dev.sencha.com/deploy/dev/examples/chart/reload-chart.html
http://localhost:8888/Ext JS/examples/layout-browser/layout-
browser.html
Ext JS Designer
Lets talk about how to use Ext JS

 Important terms and concepts:
    JSON (JavaScript Object Notation)
    AJAX (Asynchronous Javascript And XML)
    Components
    vtypes (validation types)
    Data Stores
    Events
JSON

 Key-Value pairs
 Man and Machine readable
 Nested if necessary
 Example:
{ key1 : value1
 ,key2 : { subkey1: subvalue1 }
}
      JSON example (& XML)
{"menu": {
   "id": "file",
   "value": "File",
   "popup": {
     "menuitem": [
       {"value": "New", "onclick": "CreateNewDoc()"},
       {"value": "Open", "onclick": "OpenDoc()"},
       {"value": "Close", "onclick": "CloseDoc()"}
     ]
   }
}}

The same text expressed as XML:

<menu id="file" value="File">
  <popup>
    <menuitem value="New" onclick="CreateNewDoc()" />
    <menuitem value="Open" onclick="OpenDoc()" />
    <menuitem value="Close" onclick="CloseDoc()" />
  </popup>
</menu>
    AJAX
       Communicate with the server asynchronously
       No need for complete page refreshes to send or retrieve data

Ext.Ajax.request( {
       url : 'do?_program=/myStp/report1' ,
       params : { action : 'getDate' },
       method: 'GET',
       success: function ( result, request ) {
              Ext.MessageBox.alert('Success',
               'Data return from the server: '+
result.responseText);
       },
       failure: function ( result, request) {
              Ext.MessageBox.alert('Failed', result.responseText);
       }
} ) ;
AJAX

 Note that AJAX is asynchronous
 This means that the browser will continue to run the rest
  of the code, without waiting for the AJAX request to
  finish
 You may need to synchronize again!
 function synchronize_step() {
 if (wait_condition) {
     setTimeout(“synchronize_step()”,100);
     return;
                    }
 continue_code();
 }
Components

 Components are the main building blocks of the user
  interface
 Commonly used components:
      Windows
      Panels (Tabpanel/Treepanel)
      Forms
      Textfields/Numberfields
      Grids
      Comboboxes
      Textareas
      Labels
      Checkboxes
      Radiobuttons
      Buttons
Components

 Define using JSON format
var mywindow = new Ext.Window({
   xtype: window
  ,id: ‘mywindow’
  ,title: ‘mytitle’
  ,items: [
        /* add components of window here*/
   ]
} ) ;
vtypes

 Validation Types
 When a textfield is edited, it is automatically validated.
 vtypes define when a value is valid or not
 A field will be marked as invalid
 A tooltip will explain why it is invalid

{ fieldLabel: ’File to save',
  name: ’save_file',
  vtype:’vfilename’
}
Vtypes – how to define
    Ext.apply(Ext.form.VTypes, {
     vfilename: function(v) {
       return ( v.indexOf("\\") == -1                 && v.indexOf("/") == -1
                 && v.indexOf("\"") == -1             && v.indexOf("*") == -1
                 && v.indexOf(">") == -1              && v.indexOf("<") == -1
                 && v.indexOf("?") == -1              && v.indexOf("|") == -1
                 && v.indexOf(":") == -1
                 && v.length +
                   Ext.getCmp('client_save_path').getValue().length <= 218
           ) ;    }
          ,vfilenameText: 'The maximum combined length of the path and
     filename is 218 characters. The following characters are invalid:
     " / \ * > < ? | :’
} ) ;
    vfilename is the name of the vtype
    vfilenameText is the tooltip text of the vtype
xt.form.VTypes["hostnameVal1"] = /^[a-zA-Z][-.a-zA-Z0-
9]{0,254}$/;
Ext.form.VTypes["hostnameVal2"] = /^[a-zA-Z]([-a-zA-Z0-
9]{0,61}[a-zA-Z0-9]){0,1}([.][a-zA-Z]([-a-zA-Z0-9]{0,61}[a-zA-Z0-
9]){0,1}){0,}$/;
Ext.form.VTypes["ipVal"] = /^([1-9][0-9]{0,1}|1[013-9][0-9]|12[0-
689]|2[01][0-9]|22[0-3])([.]([1-9]{0,1}[0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-
5])){2}[.]([1-9][0-9]{0,1}|1[0-9]{2}|2[0-4][0-9]|25[0-4])$/;
Ext.form.VTypes["netmaskVal"] =
/^(128|192|224|24[08]|25[245].0.0.0)|(255.(0|128|192|224|24[08]|2
5[245]).0.0)|(255.255.(0|128|192|224|24[08]|25[245]).0)|(255.255.
255.(0|128|192|224|24[08]|252))$/;
Ext.form.VTypes["portVal"] = /^(0|[1-9][0-9]{0,3}|[1-5][0-9]{4}|6[0-
4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]|6553[0-5])$/;
Ext.form.VTypes["multicastVal"] = /^((22[5-9]|23[0-9])([.](0|[1-9][0-
9]{0,1}|1[0-9]{2}|2[0-4][0-9]|25[0-5])){3})|(224[.]([1-9][0-9]{0,1}|1[0-
9]{2}|2[0-4][0-9]|25[0-5])([.](0|[1-9][0-9]{0,1}|1[0-9]{2}|2[0-4][0-
9]|25[0-5])){2})|(224[.]0[.]([1-9][0-9]{0,1}|1[0-9]{2}|2[0-4][0-9]|25[0-
Data Stores

 Data Stores are objects where data is stored for
  comboboxes, grids, etc.
 Local vs. Remote
    Local data stores refer to data defined on the client, like a
     JavaScript Array.
    Remote data stores refer to data defined on the server, using
     AJAX to retrieve the data.
 JavaScript objects use data in various formats
    Arrays
    Simple Stores
    XML
    JSON
Using SAS to provide data to JavaScript

 Key idea
    Stored processes can produce any kind of output
    Write a stored process to produce required data
      » e.g. JSON data
    Often a data source can be pointed to from JavaScript
      » e.g. using the URL parm in Ext JS
    A Stored Process can write to _webout to write the data to the
     web browser at the appropriate point
      » e.g. as an Array or SimpleStore
SimpleStores & Arrays
can be created by SAS
 Simplestore
var values = new Ext.data.SimpleStore({
            fields: ['id', 'value'],
            data : [['1','A'],['2','B'],['3','C']]
      });

 Array
var myCars=new Array(); // regular array (add an optional integer
myCars[0]="Saab";       // argument to control array's size)
myCars[1]="Volvo";
myCars[2]="BMW";
JSON Data Store – best one for Ext JS

 The store expects JSON data like this:
{ success: true
 ,rows: [
 {id: ‘id1’, val: ‘val1’}
,{id: ‘id2’, val: ‘val2’}
    ]
}
JSON Data Store produced by a
Stored Process
var mydatastore = new Ext.data.Store({
  url: "do?_PROGRAM=/CBA/dimitri_test2"
  ,reader: new Ext.data.JsonReader({
        root: 'rows',
        id: ’name'
   }, [’name', ’sex’, ’age’])
} ) ;
More complete example
dimitri_test.sas
Ext.onReady(function(){ /* When all Ext JS stuff is loaded we can
start defining our application */
  var sasdatasetStore = new Ext.data.Store({ /* data store
necessary to load data from the server */
  id : 'sasdatasetStore' /* id is a unique id of the component so
we can later reference it using Ext.getCmp('sasdatasetStore') */
 ,url: 'do?_program=/CBA/dimitri_test2' /* stored process to
retrieve data */
 ,reader: new Ext.data.JsonReader({ /* reader to process the JSON
data */
  root: 'rows', /* The property in the JSON data which contains
an Array of record objects */
  id: 'name' /* name of the value which is used as id */
  }, ['name', 'sex', 'age']) /* names of the values */
} );
sasdatasetStore.load(); /* load data from server */
Example of stored process producing data
*ProcessBody;
/* stream data to browser in JSON format */
data _null_;
   file _webout;
   set sashelp.class end=last;
   if _n_ =1 then
      put "{ success:true, rows:[";
        /* return data retrieved was a success,
           rows is an array containing all the data */
   else
      put ","; /* separator for each row in the data */
   put "{ name: '" name+(-1) "',
           sex: '" sex+(-1) "',
           age: '" age+(-1) "'}";
   if last then
     put "]}"; /* close array and JSON dataset */
run;
*';*";*/;run;
Events

 Events lets the application react to user
     Generated by one part of program – the event source
     Notify another part – the listener
 Usually are DOM or JavaScript (software) events
 You need to ‘listen’ for an event
{        xtype: 'textfield’
           ,id: “mytextfield”
 ,listeners :{
               valid: function() {
               /* code when textfield is valid*/        }
                } }
Events

 Or handle an event
{    xtype: 'button’
        ,id: "mybutton"
     ,text: ‘Click Me’
,handler: function() {
    /* code to handle clicking the button */   }
}
Using Flash with SAS
What does a SAS programmer need to know
about Flash?
 Basic HTML
 Basic JavaScript
 How to configure browser to use flash
    Sometimes an issue on some company intranets
 How to put directives into form needed for flash object
 How to put data into form needed for flash object
Find a nice Flash Object

 Here is a free one called Charts/SWF, XML version
Sample flash HTML
<HTML>
<script language="JavaScript">AC_FL_RunContent = 0;</script>
<script language="JavaScript"> DetectFlashVer = 0; </script>
<script src="AC_RunActiveContent.js" language="JavaScript”>
</script>
<script language="JavaScript" type="text/JavaScript">
<!--
var requiredMajorVersion = 10;
var requiredMinorVersion = 0;
var requiredRevision = 45;
-->
</script>


<BODY bgcolor="#FFFFFF”>



                                 1 of 4
<BODY bgcolor="#FFFFFF">
<script language="JavaScript" type="text/JavaScript">
<!--
if (AC_FL_RunContent == 0 || DetectFlashVer == 0) {
       alert("This page requires AC_RunActiveContent.js.");
} else {
var hasRightVersion = DetectFlashVer(requiredMajorVersion,
requiredMinorVersion, requiredRevision);
if(hasRightVersion) {
       AC_FL_RunContent(
 'codebase',
'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.
cab#version=10,0,45,2’,
 'width', '400',
 'height', '250',
 'scale', 'noscale',
 'salign', 'TL',
 'bgcolor', '#777788',
 'wmode', 'opaque’,

                                  2 of 4
'wmode', 'opaque',
'movie', 'charts',
'src', 'charts',

'FlashVars',
'library_path=charts_library&xml_source=sample.xml',
'id', 'my_chart',
'name', 'my_chart',
'menu', 'true',
'allowFullScreen', 'true',
'allowScriptAccess','sameDomain',
'quality', 'high',
'align', 'middle',
'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
'play', 'true',
'devicefont', 'false’
);
} else {


                                    3 of 4
} else {
       var alternateContent = 'This content requires the Adobe
Flash Player. '
       + '<u><a href=http://www.macromedia.com/go/getflash/>Get
Flash</a></u>.';
          document.write(alternateContent);
          }
}
// -->
</script>
<noscript>
          <P>This content requires JavaScript.</P>
</noscript>


</BODY>
</HTML>




                                   4 of 4
Using SAS to provide data to Flash

 Depends on what Flash object you use
 Usually will be XML or JSON
 Easy to use a stored process to produce this
 e.g. in previous example we had
'FlashVars',
'library_path=charts_library&xml_source=sample.xml',

 Should replace with this
'FlashVars',
'library_path=charts_library&xml_source=http://&_srv
name:&_srvport&_url?_program=//Foundation/XMLProvide
r"',
XML file contains data and directives for
making graphs
 XML File
data.xml
 HTML File
file://localhost/Applications/MAMP/htdocs/charts/data.html
 Result
http://localhost:8888/charts/data.html
Another Flash Object


 Constellation Roamer
  http://localhost:8888/constellation_roamer/constellation_
  roamer.html
 Configuration
  file://localhost/Applications/MAMP/htdocs/constellation_r
  oamer/constellation_config.xml
 Data
  file://localhost/Applications/MAMP/htdocs/constellation_r
  oamer/sample_graph_data.xml
Conclusions

 Stored Processes give you all the power and flexibility
  of SAS
 JavaScript enables interactivity
 A JavaScript framework provides a quick start
 Flash objects provide a powerful package of
  functionality that SAS driving JavaScript can use
 The techniques in this paper show one way to put it all
  together
Thanks for help with paper & presentation

 Dimitri Woei
    Business & Decision, Netherlands
 Chris Brooks
    Office of National Statistics, Wales
 Rafal Gagor
    Contractor, UK & Poland
Questions?
These slides will be put onto SASCommunity.org by the end of
next week


You can email me at phil@woodstreet.org.uk

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:32
posted:11/25/2012
language:English
pages:78