Documents
Resources
Learning Center
Upload
Plans & pricing Sign in
Sign Out
Your Federal Quarterly Tax Payments are due April 15th Get Help Now >>

Building Interactive Web Applications using Stored Processes

VIEWS: 32 PAGES: 78

									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

								
To top