�ݺ�ߣ

MWLUG 2017
Moving Collaboration Forward
Object(ive) Thinking
Mike McGarel
Senior Application Developer
Celina Insurance Group

MWLUG 2017
Our Amazing Sponsors

MWLUG 2017
About Me
• Notes and Web developer since 1999
• XPages developer the last several years
• Java developer (within XPages) last 2-3
years
• IBM Champion 2015 and 2017
• Vice President of GRANITE
• Help maintain web site
for MWLUG

MWLUG 2017
Since we’re talking programming . . .
(most common programming language: cursing)

MWLUG 2017
About Objects
• They’ve been around a while
• Object-oriented programming (OOP) is
everywhere
• They normally contain properties
• They often contain functions or methods

MWLUG 2017
Consider objects when:
• You need to use more than a field value
• You need to combine data from different
sources
• Your data presentation needs
modification
• You need enhanced flexibility, e.g.
sorting and grouping
• You want to separate code from data
(which should be as often as possible)

MWLUG 2017
Separating Code from Data
• Model-View-Controller (MVC) pattern
• Model: data
• View: user interface
• Controller: business logic and code
needed for interation with above

MWLUG 2017
Object Property
• Name-value pair
• The value can be another object
• Example: Conference speaker
– Name
– Job title
– Session names (array of strings)
or
Sessions (array of session objects)

MWLUG 2017
Java Object Properties Example
public class Speaker() {
private String name;
private String jobTitle;
private List<Session> sessionsList;
public Speaker() {
}
}

MWLUG 2017
Object Functions or Methods
• Getters and setters for property values
• Data modification examples
– Shopping cart totals
– Filling in sequence of dates in a calendar
• UI rendering example
– Style class based on a property

MWLUG 2017
Java Object Methods Examples
public String getJobTitle() {
return this.jobTitle;
}
public void setJobTitle(String title) {
this.jobTitle = title;
}

MWLUG 2017
Java Object Methods Examples
// Style class from CSS file
.ceo-style {color:blue; font-weight:bold;}
// Method in Java class
public String getTitleStyleClass() {
if (this.getJobTitle().contains(“CEO”) {
return “ceo-style”;
}
}

MWLUG 2017
Java Object in XPages Examples
<xp:repeat id “rptSpeakers”
var=“speaker” rows=“100”
value=“#{controller.allSpeakers}”>
<xp:text escape=“true” id=“speakerTitle”
value=“#{speaker.jobTitle}”
styleClass=“#{speaker.titleStyleClass}”>
</xp:text>

MWLUG 2017
Java Object Building Example
// Used within loop of documents
Speaker speaker = new Speaker();
String n = doc.getItemValueString(“Name”);
speaker.setName(n);
String t = doc.getItemValueString (“JobTitle”);
speaker.setJobTitle(t);
// After adding other properties to speaker
this.getAllSpeakers().add(speaker);

MWLUG 2017
Client-side JavaScript Objects
• Everything is in the browser
• Objects surrounded by { }
• Object properties are name-value pairs
• Object properties separated by commas
• Arrays surrounded by [ ]
• Array values separated by commas

MWLUG 2017
JavaScript Object Example 1
var speakerObj = {
“name”: “Chris Robinson”,
“jobTitle”: “VP of Development”,
“sessionsList”: [“Java Tips”, “JSON Tips”]
};

MWLUG 2017
var allSpeakers = [ {
}, {
“name”: “Alex Wu”,
“jobTitle”: “CEO”,
“sessionsList”: [“Better Hiring, Less Firing”]
} ];

MWLUG 2017
function speaker(name, jobTitle, sessionsList)
{
this.name = name;
this.jobTitle = jobTitle;
this.sessionsList = sessionsList;
}
var speaker079 = new speaker(“Chris Robinson”,
“VP of Development”,
[“Java Tips”, “JSON Tips”]);

MWLUG 2017
JS Object in HTML Example
<span id=“title”></span>
<script>
var t = document.getElementById(“title”);
t.value = speaker079.jobTitle;
</script>

MWLUG 2017
JSON (JavaScript Object Notation)
• JSON is text
• Objects surrounded by { }
• Object properties are name-value pairs
• Object properties separated by commas
• Arrays surrounded by [ ]
• Array values separated by commas
• Text is used to send/store/retrieve data

MWLUG 2017
JSON to JavaScript Example
var sSpeaker = ‘{
}’;
var speakerObj = JSON.parse(sSpeaker);
speakerObj.name  “Chris Robinson”
speakerObj.sessionsList[1]  “JSON Tips”

MWLUG 2017
JavaScript to JSON Example
var speakerObj = {
};
var sSpeaker = JSON.stringify(speakerObj);
doc.replaceItemValue(“SpeakerInfo”, sSpeaker);

MWLUG 2017
DataTables.js Example
$('#example').dataTable( {
"columnDefs": [
{ "orderable": false, "targets": 0 }
]
} );

MWLUG 2017
React.js Example
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src=/slideshow/objective-thinking-79062856/79062856/{logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
);
}
}

MWLUG 2017
Here’s the project . . .
• Insurance policy form
• Different types of answer fields:
 Text box
 Checkbox
 Radio button
• Some questions appear based on the
answers to previous questions

MWLUG 2017
Here’s the thing . . .
• Many, many questions (1100+)
• Question/answers in flux
– Content editing
– Legal review
– QA and testing
• Need dynamic rendering of answer types
• Only displayed questions and answers
should be printed

MWLUG 2017
All in all . . .
• Hard-coding all the questions 
maintenance nightmare
• Programmers should be separated from
content
• Code should be reusable

MWLUG 2017
Sample Application
• Insurance form
• Policy targets pet stores that focus on a
single type of pet (puppies, kittens, etc.)
• Questions stored in Notes database

MWLUG 2017
View of Sample Questions

MWLUG 2017
Sample Question

MWLUG 2017
Objects to the Rescue!
• Question
• Answer
• Map of question objects
– Question ID as key
– Managed bean for convenience
• Map of answer objects
– Question ID as key
– Part of “page controller”

MWLUG 2017
Special Help from a Java Enum
• Set of Java constants
• Allows easier use of Java “switch”
statement (similar to Select Case in
LotusScript)
• Used here to target a specific object by
its ID
• Can have its own properties and methods

MWLUG 2017
Simple Enum Example

MWLUG 2017
Enum in Switch Code Example
switch (currentEnum) {
case PET106:
// Question PET102 is always displayed
answer = this.getPageAnswers().get("PET102");
result = this.isStringValueMatch(answer,"fish");
break;

MWLUG 2017
XPages Design Element: Switch
• Dynamically displays content
• Extension Library element
(coincidentally similar to Java method name)

MWLUG 2017
XPages Switch Element Example
<xe:switchFacet id="switchField“ selectedFacet="#{rowData.facetKey}“
defaultFacet="displayField">
<xp:this.facets>
<xp:inputText id="textField" xp:key="textField“ disableClientSideValidation="true">
<xp:this.value>
<![CDATA[#{controller.pageAnswers[rowData.questionID].stringAnswer}]]>
</xp:this.value>
</xp:inputText>
<xp:inputText id=“numberField" xp:key=“numberField“ disableClientSideValidation="true">
<xp:this.value>
<![CDATA[#{controller.pageAnswers[rowData.questionID].doubleAnswer}]]>
</xp:this.value>
</xp:inputText>
<!–- Other input controls -->
</xp:this.facets>
</xe:switchFacet>

MWLUG 2017
Parting Thoughts about Objects
• Flexible
• Reusable
• Extensible
• Common
• Vital — for job security!

MWLUG 2017
Thank you!
Mike McGarel
Twitter: @mmcgarel

�ݺ�ߣ

Object(ive) Thinking

Convert to study guideBETA

More Related Content

Object(ive) Thinking