AgileApps Support Wiki Pre Release

Difference between revisions of "Lab B.1: Hello World"

From AgileApps Support Wiki
imported>Aeric
imported>Aeric
m (Text replace - '{domain}' to '{{domain}}')
 
(29 intermediate revisions by the same user not shown)
Line 7: Line 7:
:*Read the [[Application Architecture]] overview.
:*Read the [[Application Architecture]] overview.


==Exercise==
==Overview of JSP Pages==
===Overview: JSP Pages===
A Java Server Page (JSP) is a file that contains a mixture of Java code and HTML. A JSP page is compiled to a Java [[Class]], and must therefore have a name that qualifies as a Java class name (so no spaces, underscores, or punctuation marks). The name must also have a <tt>.jsp</tt> extension.
A Java Server Page (JSP) is an HTML file that contains Java code. If no Java code happens to be present, then the "JSP" page contains nothing but HTML. (In the platform, they are called simply [[Page]]s, since they can be either HTML pages or JSP pages.)
 
And by using [[Static Resources]], the JSP pages can incorporate CSS and JavaScript libraries to give you complete control of their look and feel.
 
===The Many Uses of JSP Pages===
[[Objects]] contain your data, but you work with your data and interact with the platform using JSP Pages. In fact, the platform itself is mostly a giant collection of JSP Pages that you use to interact with the underlying database.
 
Once you know how to create JSP Pages, you will be able to do extensive front-end customization for your users:
:; By visiting the page URL:
:: Every page has a URL of the form: https://{{domain}}/networking/pages/xyz.jsp
:: You link to that URL from anywhere. As long as the user is logged in, they can see the page.
:: (If they are not already logged in, the platform prompts them for their login credentials.)
 
:; As a Dashboard [[Widget]]:
:: A JSP Page can be used as a Widget in a [[Dashboard]] (also known as the [[Dashboard]]). There, it can display any data, graphics, or summary information needed to give your users up-to-the minute information.
 
:; As a [[Web Tab]]:
:: In the normal course of events, the platform shows tabs for the high-level objects the user will interact with. Clicking on one opens displays records in the object. You can also use a JSP Page as a Web Tab. When the user clicks on it, the Page opens as a platform tab.
:::[[File:NavBar-Workspace.png]]
 
:; In a [[Site]]:
:: A [[Site]] allows external users to access your data, using the Pages you create.


====The Many Uses of JSP Pages====
:; As a Custom [[Form]]:
Interact with the Platform
:: Using the interactive [[Form]] builder, you can create forms with pre-defined styling in a variety of layouts. Using a Page, you gain total control of the CSS styling. Plus, you can have any layout you want, and include any additional information that may be needed to help the user.
Work with your data�


:; As a Custom [[Lookup]]:
:: When users go to a standard page, they see a table that shows the [[Record Locator]] defined for the object they are referencing. (For example, the Record Locator when looking up a Company object might show the Company name and location.) But you can also define a JSP Page for that purpose, and use it to display the information the user needs displaying graphics, styling, and data you choose.


====JSP Basics====
===Coding Patterns===
The are only a few patterns you need to know to do some serious work with JSP pages:
There are only a few patterns you need to know to do some serious work with JSP pages:
:* <tt><nowiki><% … code … %></nowiki></tt>  -- execute some code
:* <tt><nowiki><%= variable %></nowiki></tt>  -- insert data into the HTML stream


:{| border="1" cellpadding="5" cellspacing="1"  
:{| border="1" cellpadding="5" cellspacing="1"  
! Conditional display of HTML !! Loops for repeated HTML
! align="left" width="180em"| Execute code  !! align="left"| Insert data into the HTML stream
|-
| <tt><nowiki><% ... code ... %></nowiki></tt>
| <tt><nowiki><%= variable %></nowiki></tt>
|}
 
And:
:{| border="1" cellpadding="5" cellspacing="1"
! align="left" width="180em"| Conditional display of HTML !! align="left"| Loops for repeated HTML
|-
|-
|
|
<tt><nowiki><% if () { %>
<tt><nowiki><% if (...) { %></nowiki></tt><br>
  … HTML
<tt> &nbsp; ... HTML ... </tt><br>
<% } %>
<tt><nowiki><% } %></nowiki></tt>
</nowiki></tt>
 
|
|
<tt><nowiki><% for (item:List) { %>  
<tt><nowiki><% for (item:List) { %></nowiki></tt><br>  
  … HTML
<tt> &nbsp; ... HTML ... </tt><br>
<% } %>
<tt><nowiki><% } %></nowiki></tt>
</nowiki></tt>
|}
|}
Of course, you can loop using [[Parameters Class]] iterators, or any other looping construct that Java allows.
===Accessing Incoming Parameters===
{{:Using the request Object}}
'''To access record IDs for multiple records parameter:'''
:<syntaxhighlight lang="java" enclose="div">
<%
  // Get the object ID and a comma-separated list of record IDs.
  // (Or a single record ID, if only one record was returned)
  String object_id = request.getParameter("object_id");
  String selectedRecords = request.getParameter("selectedRecords");
  // Fetch record details using the searchRecords function
%>
</syntaxhighlight>
==Exercise==


===Set up a development environment===
===Set up a development environment===
Line 44: Line 87:


===Create a JSP Page===
===Create a JSP Page===
# Click '''Designer > Pages > [New Page]'''
# Click '''[[File:GearIcon.png]] > Developer Resources > Pages > [New Page]'''
#::{{Note|If this is the first development activity to occur, you may see an error message like the following at the top of the screen:  
#::{{Note|If this is the first development activity to occur, you may see an error message like the following at the top of the screen:  
<pre>
<pre>
Line 66: Line 109:
===Visit the page to confirm that it exists===
===Visit the page to confirm that it exists===


* In your web browser, visit https://{platform}/networking/pages/HelloWorld.jsp, substituting your platform URL for "<tt>{platform}</tt>".
* In your web browser, visit https://{{domain}}/networking/pages/HelloWorld.jsp, substituting your platform address for "<tt>{{domain}}</tt>".
:The page you created appears.
:The page you created appears.



Latest revision as of 19:18, 25 April 2014

Goals
  • Set up a development environment
  • Create a JSP page
  • Visit the page in the platform
Prerequisites

Overview of JSP Pages

A Java Server Page (JSP) is a file that contains a mixture of Java code and HTML. A JSP page is compiled to a Java Class, and must therefore have a name that qualifies as a Java class name (so no spaces, underscores, or punctuation marks). The name must also have a .jsp extension.

And by using Static Resources, the JSP pages can incorporate CSS and JavaScript libraries to give you complete control of their look and feel.

The Many Uses of JSP Pages

Objects contain your data, but you work with your data and interact with the platform using JSP Pages. In fact, the platform itself is mostly a giant collection of JSP Pages that you use to interact with the underlying database.

Once you know how to create JSP Pages, you will be able to do extensive front-end customization for your users:

By visiting the page URL
Every page has a URL of the form: https://{yourDomain}/networking/pages/xyz.jsp
You link to that URL from anywhere. As long as the user is logged in, they can see the page.
(If they are not already logged in, the platform prompts them for their login credentials.)
As a Dashboard Widget
A JSP Page can be used as a Widget in a Dashboard (also known as the Dashboard). There, it can display any data, graphics, or summary information needed to give your users up-to-the minute information.
As a Web Tab
In the normal course of events, the platform shows tabs for the high-level objects the user will interact with. Clicking on one opens displays records in the object. You can also use a JSP Page as a Web Tab. When the user clicks on it, the Page opens as a platform tab.
NavBar-Workspace.png
In a Site
A Site allows external users to access your data, using the Pages you create.
As a Custom Form
Using the interactive Form builder, you can create forms with pre-defined styling in a variety of layouts. Using a Page, you gain total control of the CSS styling. Plus, you can have any layout you want, and include any additional information that may be needed to help the user.
As a Custom Lookup
When users go to a standard page, they see a table that shows the Record Locator defined for the object they are referencing. (For example, the Record Locator when looking up a Company object might show the Company name and location.) But you can also define a JSP Page for that purpose, and use it to display the information the user needs displaying graphics, styling, and data you choose.

Coding Patterns

There are only a few patterns you need to know to do some serious work with JSP pages:

Execute code Insert data into the HTML stream
<% ... code ... %> <%= variable %>

And:

Conditional display of HTML Loops for repeated HTML

<% if (...) { %>
  ... HTML ...
<% } %>

<% for (item:List) { %>
  ... HTML ...
<% } %>

Of course, you can loop using Parameters Class iterators, or any other looping construct that Java allows.

Accessing Incoming Parameters

To get all of the parameters available in the request object, and their values:

<syntaxhighlight lang="java" enclose="div">

<%

 String[] params = request.getParameterValues();
 for (int i=0; i<params.length; i++)
 {
   String paramName = params[i];
   String paramValue = request.getParameter( paramName );
 }

%> </syntaxhighlight>

To obtain a record identifier from a request object sent by the platform:

With the object ID and record ID, use the getRecord API to retrieve the record.
<syntaxhighlight lang="java" enclose="div">

<%

 String object_id = request.getParameter("object_id");
 String record_id = request.getParameter("record_id");

%> </syntaxhighlight>

Notepad.png

Note: Although the object_id is alphanumeric, it can be used in any API that requires an object name.

To obtain a record identifier from a request object sent by a Custom Action button:

This code gets the record IDs and uses the searchRecords API to retrieve the records:
<syntaxhighlight lang="java" enclose="div">

<%

 // Get the object ID and the comma separated list of record IDs
 String object_id = request.getParameter("object_id");
 String selectedRecords = request.getParameter("selectedRecords"); 
 // Break the comma-separated list into record IDs. 
 // Join them with "OR" operands for use when searching for the records
 String filterCriteria = "";
 if (selectedRecords != null)
 {
   StringTokenizer st = new StringTokenizer(selectedRecords,",");
   while (st.hasMoreTokens())
   {
     if ( !"".equals(filterCriteria.trim()))
     {
        // Criteria string isn't empty, and we're adding another expression
        // Prefix the new expression with a boolean OR operator
        filterCriteria += " OR "
     }
     filterCriteria += "record_id = "+ st.nextToken();
   }
 }
 // Use the filter criteria to fetch the selected records
 // Here, we ask for the record_id and name fields
 Result results;
 results = Functions.searchRecords(object_id , "record_id,name", filterCriteria);
 int resultCode = results.getCode();
 if (resultCode < 0)
 {
    // Error occurred
 }
 else if (resultCode == 0)
 {
   // No records found. (This situation should never occur.)
 }
 else
 {
   // Records retrieved successfully
   // Process them here
   ParametersIterator iterator = results.getIterator();
   while(iterator.hasNext())
   {
     Parameters params = iterator.next();
     String recordID = params.get("record_id");
     String recordName = params.get("name");
     // Take additional action according to your business logic
   }
 }

%> </syntaxhighlight>

To access record IDs for multiple records parameter:

<syntaxhighlight lang="java" enclose="div">

<%

 // Get the object ID and a comma-separated list of record IDs.
 // (Or a single record ID, if only one record was returned)
 String object_id = request.getParameter("object_id");
 String selectedRecords = request.getParameter("selectedRecords"); 
 // Fetch record details using the searchRecords function

%> </syntaxhighlight>

Exercise

Set up a development environment

  1. In the navigation pane, click Setup.
  2. If you don't see an entry called Develop, then:

Create a JSP Page

  1. Click GearIcon.png > Developer Resources > Pages > [New Page]

Notepad.png

Note: If this is the first development activity to occur, you may see an error message like the following at the top of the screen:

    To create a new class, page, or execute Java code in Data Policies,
    namespace needs to be set in Company Information. Click here ...

The link takes you to the Developer Configuration page, where you can specify your organization's namespace--typically, the company name or an abbreviation of it that corresponds to the company URL. (The lab exercises use "demo".)

  1. Enter the page name: HelloWorld.jsp
    Note: It is necessary to add the .jsp extension when specifying the page name.
  2. Add content for the page: <syntaxhighlight lang="java">

    Hello World!

    </syntaxhighlight>

  3. Click [Save]

Visit the page to confirm that it exists

The page you created appears.
Next
Lab B.2: Simple Interaction