Professional Documents
Culture Documents
r
r
Copyright Information
kony
Copyright Information
r
r
This publication is in copyright. No part of this content may be copied, reproduced, or translated
in any form or mdium without the prior written consent of Kony Solutions Inc.
To obtain permission to reproduce the information (text or graphics) contained in this course
material for any purpose, submit the specifics of your request in writing to Konyvia the e-mail
address traininq@konv.com
"
Introduction to Skins
Quick Preview
Introduction to Layout
kony
Your Workstation
Wireless network
r
r
>
r
Copyright20t2Kony Solutions, Inc. CONFIDENTIAL
kony
After boot
kony
Click to start
kony
Kony Studio
kony
KonyOne5.0
re with
Burn
New folder
ame
_KonyOne Studio_insta!laticn
Ant
IOS
KMAPJBOSS
KonyOne_Studio
KonyOne-Se rver
video widget samples
81 eclipse
jij) KonyOne Ser.'er (Stop)
^ KonyOne Sep.er(Start)
>'- KonyOne Studio
r
Memcached
^5 Uninstall
OS X Desktop
The Dock also includes Xcode
r
*
kony
Write Once
Run Everywhere
All Devices
kony
kony
Mobile Application
Tablet
Mobile Browser
r
Kony Native App
kony
r
*
The application components and the userwritten code modules are compiled and
JavaScript code (bytecode) is generated
for the following:
Ul Components
Non-UI Components
User Defined Components
Code
]</>|
JS to Native Bridge
, --%
(V
c
c
Copynght2012Koi
UJ
Native Libraries
kony
The KonyOne platform provides its own development environment - KonyOne Studio.
KonyOne Studio:
provides the ability for the developer to perform all of the required activities from visual
Ul designing, coding, data integration, application building, emulator testing and
deployment to servers.
>
kony
Open Documents
Navigator
Kony Perspectives
ST'-T""-"!"'
-
H,
!!
Object
Application
List and
components
Emulators
LJi
Form object hierarchy
Consol
Widget Palette
jl/
kony
E Applications 2 fe Navigator
i
~Lq3 HeloWorki
0 forre (2)
C mobrie (2)
Stop Eclipse.
Replace plug-ins.
Restart eclipse.
Pkjgn llame
5.0.0.GM
S.O.O.GM
S.O.O.GM
5,0,0.GM
Jj -Naovecodegen
S.O.O.GM
0 La Core
5.0.0.GM
ij LaBaseScts
@LuaLfl
S.O.O.GM
g| La 1*32
5.0.0.GM
S.O.O.GM
5.0.0.GH
jej LaLoggev
S.O.O.GM
|3 La Debug LaunoSer
3 La Debug Core
0 La Debug U!
S.O.O.GM
>Tetet AnoVwd
B ..-.::; Pkjg-n
| Android
Versin
:. -Kony Studio
.','-HrdPartyJars Plug-*i
V-Kony Codegerwator
i'v'-KonyHetpPbg-in
i-.Kafikberrv&jJME
5.0.0.GM
5.0.0.GM
5.0.0.GM
5.0.0.GM
S.O.O.GM
5.0.0.GM
BTHnOent
S.O.O.GM
Sspa
S.O.O.GM
t/Desktop Web
5.0.0.GM
Building Applications
kony
Creating the "looks" for all the Ul elements (we cali these "skins")
10
kony
:.i<wi.
/toa*
*WWVt
|1
aam
Kony Apphcotion
m a
ilr.TKxtntrr.^B'jvKjt. |j*.Xruf
""*""
*>*r.
~-l.~,
g UMPI
..-
Cr.-,.
i# <h1 JD XI
-4.JKW
_,
".* si
Sm
. Bl* .,
^-,-.;.'-r:
.'
"
K-
kony
Forms within an application are categorized under "mobile tablet and desktop channels"
separately.
Cuati; a Ni Furn
B (^ HdoWorid
B B forms (0)
\J taUett
rp
v deskt i
Copy
v popups (C
i V tmplate
Refresh
33 ai. modules (
S si resource*
53 *a. servtces ( ~
UtiSties
- Impon i
faExoort
Debug As
VaSdate
Team
Compare With
Restore from Local Htory
Your new
Form
r
11
kony
You can set the form nature to either native, Static or Dynamic
(3 HclloWorld
G3Apptcabons 3 x- Navigator
? frmHome 23
U fotms (1)
K mobile0)
frmHome
\) tablet (0)
Indicates the
app start-up
form
B tjjHeJoWorld
B@ forms (1)
I B < moble (1)
9 tablet (0)
Copy
Ctrl+C
Delete
F2
El t tompiates (0)
| </ Native
{/ web_module (0 ^ Fork
* resources (10) ~
a -i services (0)
*-Rel"a
-i
kony
The Form
=
tool is NOT
'
WYSIWYG -
it's a layout
that will be
used to
""sr
genrate the
...
actual Form
you'll see in
your App.
There are 3 types of forms: Native, HTML5 Static and HTML5 Dynamic.
12
Following are
different types of
widgets:
Containers
Basic
Advanced
Mobile Web
.> Palette
* Container Widgets
< BasicWidgets
C^HBox
OButton
QTab
QTabPane
rvfT VBox
Advanced
Add a widget by
SeleCting it and
dragging onto the
.. Palette
^-Advanced Widgets
nina* web Advanced
t>
.1-Palette
>
* Container Widgets
i* Container Widgets
(H]Form
ScrolIBox
t>
ko **
V Base Widgets
W Advanced Widgets
, i," Advertisement
'io Calendar
A Browser
v- CheckBoxGroup
23ComboBox
gg DataGrid
tai Camera
tm Hz Image Strp2
Image2
Labe)
$Kap
Line
ObjectSeIector3D
unk
ListBox
Phone
l PickerView
\\ Segmenta
Meniiltpm
<" Switch^
.: Palette
^ Moble WebAdvanced
bj
fe Container Widgets
oBaseWidgets
%vAdvanced Widgets
Widget Properties
J
l,
'
'
'."'.
'
25
kony
....
*-
'
"
13
kony
QL3
i~ MetoWo...j /Soaper...
MuntlmiT
.!. "**
P (k-ffO >W.'.lvO-*lM
B Lr-General
id
segmenta 104557599518
isVisibie
true
renderer
<Pfione:tjue,Android:b-iieTT
0 >v<
P Q (*wnc
P
retamStects faise
< va;
rov.'Template t-tone
7 a*S**-,4.0nd*t>.'
P iwnioucn
secbooHea* ftone
P B .YnttM
t; iir Data
masterDate
- I
pHM
P # ot
ftot Defined
*WI
1' ItaKitrr.
P Q Mane
P ... *n*t
P ? KaKttaMT) ft.B1
Appearance
ooentabon
mafgn
BOX_LAYOUT_VERTICAL
Edt
padding
Edit
Stepixets) (443,200)
vadth
hoght
Si (%)
200
(100,54)
utdth
100
height
54
sho'.vSaoba faise
viewType
SEGU!_VIEW_TYPE_TAB...
groupCefe
faise
O 11 AlC>wr.'
screenLeveK faise
btodcedUISb StanDefaults
seiecbonBeh- SEGU_DEFAULT_6EHAV...
S Gtt layout
layoutAfcgnmBOX_LMOJTJUGNJH...
-: fe s^n
rowSfcn
rowFoojsSkii SkmDefaUts
JA
kony
IHiMiBbIi
3
id
bulto 104S57599S20
eViaWe
true
renderer
Lr- Appesrance
ATdvetAlnjniT VWKETJUGNjCENTK
contentAbon. CCxrrBJT_ALIGM_CBTS
ffl
S<re(piefs} (446,26)
Si
Si(H)
(100,13)
dtsplayText
true
mafffn
Edt
padding
Edt
Common properties:
pressedSon 5fcinDefaUB
devices.
showProgres true
5 0l Stan
skn
StanDefauHs
fbOJsStan
Skn Defauite
-. > Event
orOck
Not Defined
El urPhone
gtovffeet faise
El i~ Moble Web (Phc
extemalURL
subrr-tURL
preOndiGys
postOnoW;
to be configured separately.
14
Building an Application
:
'
kony
'
i-
.3
a" -"
0'
o*
"
o**<
G
O*
O* ..,
Build Options
kony
The build process creates new resources from the existing resources, updates the existing
resources, or both.
Build process generates JavaScript code for the following application components:
> Ul Components: forms, popups, and widgets.
The generated JavaScript code of application components and the user written code
modules are then compiled during the build process.
These binahes are executed by the JS Engine on the mobile devices whenever the
application is launched.
15
kony
ASingle Page Application (SPA) represents a special type of web application in which
all of the HTML, CSS, and JavaScript files necessary for the application are retrieved
with a single page load.
The page neither re-loads automatically during user interaction with the application, or
transfers the control to another page.
KonyOne Platform serves the devices with a SPAversin of the application using the
device detection logic.
The platform falls back on the tradltional Mobile Web platform for devices that do not
have HTML5 compliant browsers.
Once the first page is downloaded, a SPA behaves the same way as that of a clientside model application.
kony
16
"
akony^
Mixed -
A mix of some native forms, some static forms and some dynamic forms.
Can be installed on the device or put in an app store just like a native application.
All the native forms will be converted to JS Bytecode.
Whereas, all static forms will be a packaged in the binary and dynamic forms will
be downloaded at run time from the server.
kony
Both the Mixed and the Hybrid (Wrapper) will be executed in the web with SPA architecture.
Note: An application can be either a native, Hybrid (Wrapper) or Mixed. Henee selecting
one option in the IDE automatically disables the other two.
Use Cases:
17
XA
kony
Build (Incremental):
Uses the previously built state and applies the modifications to the resources that have
changed since the last build.
JavaScript code would be generated and compiled for all the components modified by
Developer.
Use Cases:
Builds the application for all the build-related resources without deleting the build
resources that were existing earlier.
JavaScript code will be generated and compiled for all the application components.
Use Case:
>
kony
Valdate:
Validates the application for duplcate Form ames, Skin ames, and Widget IDs.
Use Case:
This option creates an optimized war file by applying minifieron the generated files.
Publishing an application will still crate a war file from files present In webapps folder.
Note: You must build the application using other options for thin client before using this
option.
This build option is for creating builds for Staging and Production environments.
18
r
r
X-
kony
This option is mandatory on importing an application targeted for thin client to Kony
Studio versin 5.0 from Kony Studio versin 2.5, 2.6 or 3.0.
Checks if there are any widgets that have been previously rendered off and if Mobile Web
has references to any of those widgets. This option is useful when you are upgrading to
KonyOne Studio from earller versions.
Checks if there are any references to widgets In the code that have been previously
rendered off for thin client.
Using this option will crate a file with references for widgets rendered off for thin client:
The file ame is: RenderedOffWAPWidgetsReferenceslndication.txt
<workspace>\temp\<AppName>\output\
These references should be removed from code for thin client for the application to work
without any exceptions.
AA
kony
Following table lists the path to the executables created in build process for various
platforms:
Executable
j Extensin
iPhone
KBF
Android
apk
Path to executable
<workspace>\webapps\<appd>r\kbf\
<workspace>\temp\<AppName>\build\luaandrod\dist\luavmandrod.ap
k
Windows 7
Blackberry (Storm &
Torch devices)
Blackberry (Other
Families)
Thin Client
xap
cod
cod
<workspace>\temp\<AppName>\build\luawnmobile\windows7\WP7Ma
ngo.xap
<workspace>\temp\<AppName>\buld\luaj2me\blackberry47\dist\<app
d>-bb-<JDE_Version>-storm.cod
<workspace>\temp\<AppName>\buld\luaj2me\blackberry\dst\<JDE_Ve
rson>-<Family>-<appid>-bb.cod
<workspace>\temp\<AppName>\build\wap\buld\<appd>-local.war
Note: For Phone, KBF is extracted into the Xcode project inside mac machine.
19
V*
i*
kony
p a ~- _j o
i
O""
s Q ^p^.-
o*. *
O
D
. .*
rj
o*
D
D
O*' K r
o
>a
( t "
O*
r b-
_^J
The output is the complete installer file for installing the app on the device (except OS
where objective-C source is generated - needs to be built in Xcode).
kony
"5 HebWotidSkins 0, Emulators 23 j
H-3 Emulators;
3
=D
A
Android
B y_ Mobile
VT3
> Tablet
X GalaxyTab
y
E 1 &t
Devices
Blackberry
S ? V4.2
ffl-5 V4.S
B 5* V4.7
a ?r vs.o
BB-9700
B 5 V6.0
/ BB-9800
Windows
B Native
B {'/ **
;-/ Windows Phone Mango
*f Windows Phone 7
X WtfidowsPhone6.5
20
kony
Native apps connect to the internet. For mobile web, you'll need to run the MDS service:
Start -> Programs -> Research in Motion -> BlackBerry Email and MDS Services ->
MDS
For most models, the app will be Installed n the device's Download folder. Navigate there
and click the app to start it.
When the simulator starts, you'll have to go through all the initialization stuff...just cancel out
of everything.
"
i-
Windows
* Native
V WindowsPhone Mango
kony
By default, the emulators ship with all the same port so you get a conflict if trying to run
more than one emulator at once (Bold and Storm, for example).
To get around that, open the corresponding emulator's .bat file and edit the port.
Cjt
j\
Orgarwe "
-
Favorita
x.Downbads
- _ Recent Places
Bum
1Date modified
ame -
Debug
Q 9000 - Hotepad
Mj}
Java
File Ectt
Format
Type
| Size
.1
-]n|x|
View Hdp
Desktop
B \t trenes
.43] 1Searchsl...
New folder
E J Documente
_90G0
"^9550
5 h-; Pictures
_ 9S50.bug
S f Podcasts
^95S0
21
kony
On the emulator, you must clickthe Android Men to continu the load process when
prompted.
Youcan cise the App and it will be installed on the main programs page on the device; you
can click it to restart the App.
You can configure command line options when running the emulator:
Reference: http://developer.android.com/quide/developinq/tools/emulator.html
Note: No need to re-launch emulator after re-build -just double-click the emulator again. It
will load the new versin into the running emulator.
kony
22
kony
The Android SDK provides a Telnet tool that allows you to simlate various device
functions.
You can now send various commands to the emulator (Ex: send a text message, configure
the battery level, etc. Explore the help function to see available commands.)
EB Telnet locaihost
c^
E3
k^fl
^^^^^^H
cr
i ' i t u I-I4i
ujiBJ.i
Tml
2j^B
ffl^^^HI
|^9
kony
emulator.
# HelloWorld
<9 /Q Internet Explorer
flk Settings
r
Note: No needto re-launch emulator after re-build -just double-click the emulator again.
23
Windows Mango
kony
You can now build applications targeted for Windows Mango platform using Kony Studio.
In addition to the existing Windows 7 features following additional Features are added to the
new Windows Mango platform.
Enhanced Camera Capabilities
Native with Crop - The native camera Interface with the additional provisin to crop
captured images.
Custom with Crop - Acustom camera interfacewith the provisin to crop captured
images.
Custom with Easy Capture - Acustom camera interface which can be tapped anywhere
to capture, and saves a thumbnail, instead of the full captured image.
Ability to use Windows Phone 3D model selectors
Large Airliner Seat Selection - Selection of four seat locations in a twin-aisle aircraft.
'i'
kony
Keyboard customizations
Select a keyboard layout from the list of keyboard layouts (Default, Chat, URL, ... etc.)
Tap on the text field at the top (where it says "Try keyboard") - this brings up the
keyboard with the selected layout.
Connectivity information
Memory status
Other information
Accelerometer capabilities
Orientthe phone at various angles and watch the acceleration components change in
real-time.
Shake the phone to switchthe light bulb on (itautomatically goes off again after a
couple of seconds).
24
AA
kony
Demos dynamic creation and removal of a secondary tile to a particular page in the
application (the Live Tiles demo page).
The application is able to detect that it is launched from a Live Tile, and can execute
custom logic as required.
kony
The Phone emulator runs on the Mac so we need to move the compiled code over.
On the Mac:
http://<windows
IP>:<jetty-port>/<app ID>r/s?type=iphone
25
kony
kony
In Kony Studio, the Jetty server will host up the generated mobile web site(s).
You can use the emulators OR physical devices to test the mobile web site(s).
Jetty unit testing URL is:
http://<dev_hostname_or_ip>:< jetty-port>/<app_name>/p
The Kony Jetty HTTP port number defaults to 8888, but may be modified in Ecllpse's Kony
settings. Go to:
Window -> Preferences -> Kony Dev Studio -> Embedded Server and change the
Jetty port number
You can also use Firefox or IE to browse the site. Firefox lets you change the user agent
so you can simlate the various device browsers.
26
kony' i
Whenever you crate a new application, if you're building for Android, then you have to set
a few things up(its optional).
>
Own
PutM
I.SaiDet/*
.rji:.ir.:
btUrtUuta-
( Uw ItKJMn Pre'unKf
Uilewt
tJtnBcrt
r
Rrtttvc * en ioM HtWi...
Ka
XA
kony
Objectives
Be able to run an app on the emulators as well as test it for the mobile web.
Concepts
Applications are built by creating forms (screens) and populating them with user
interface (Ul) elements, called widgets.
Applications (apps) can be built for a number of mobile platforms (channels) from one
specificatlon.
Procedure
AddaLabel:
Drag a Label onto the form (from the Basic Widgets sectlon of the Palette).
Set the Text property to "Helio World"
Copyright2012KQ
27
kony
mmmnv.K'\.*r*f>m<!'!-m>m'~r*rr
*inal
<JM.
^iN
%.Wknr
CBenemceDelMan
Mi
XOWfW
-.nw
CveH W ir UAJ
Hin H*iW tr cok Are
1, Me^*iMn*iSon; Un)
*". (
- u>m< uji-m
.1 Mrtojwne sm O cu-sn :
j^
28
kony
JDJXJ
na : irTnn:rz=^^^m^^mmam
Channels
i
>e*ctr>s r>yt trar i bto.3bef-v dt"B osnf^/ecr w>4 >e*: f tbttrS bufl ame.
Phorm MurdOuimH
Tjihi-tOwwt
r
O*1
MjWev.eb
v Photv
*? LWK!
15 0 "WC-3
- n1*-' *?<>
C O nJ
j, Ntr. *CP
C r?Ant*ad
Q: Trh (Tnu-
- *".' 6.0
*f Njvttvrry tOflnrtieW.m
P ItanTnirh
- "-' DF e.
Jtar*hrTT
0^-' (VflrtV.
Orf
r Brj
Vl*tX
"J.-oid
..:
r *, Mwret
Q:'' 00
v OertksWeb
5? |>Eju(.1>-.tjoW.iJS{U5)
P
'
*n*oe;
ueittiMa*Owe(
*f-'eri(aioo;
<> eK.De-.<.c9.
**n*tneof 9 P*Jferrnt of Mitre * Htnd V M*eU&tmt zm be Blta: w.i pon of ane ..0 <* rie-O.* *+ons u tekcted. ii^kJ **J *<*4**rte opcent we 4
'n ck ^ vw pUtVtns of mif>L^oMe Web er Mae4 <^^^
29
*.
Skins
kony
Skins are used to configure the look and feel of a widget when it Is rendered on the form in
an application.
Skins are created for each widget type allowing you to adjust things like:
The font
etc..
Every widget has a default look (i.e. when no skin is applied) that can't be changed.
Kony studio ships with many default skins that CAN be edited if necessary.
30
kony
Many widgets can display an image as part of the skin (e.g. Form backgrounds and
Buttons)
r
Many widgets can have more than one skin applied for the various "states" of the widget.
A Button can have a Normal and Focus skin. The Focus skin will be displayed when
the user touches the Button or puts the "cursor" on the Button.
A Segment (showing a list of data) can have a Normal, Focus AND Altrnate skin (to
apply to every OTHER row of data to help crate a visual effect of separating the rows)
It is VERY important to crate and use Focus skins. This becomes an absolute necessity
on non-touch devices.
Note: This includes the use of images. You'll need mages to represent the focus state as
well as the normal state
kony
Kony Skin Defaults let you specify common skins for widgets in different states (normal and
focus), across the application.
Q Ap*-atrl5 3 i C-
ftmHor
r Krld
L^
Copv
8HB
i e* kc* r* ea u
Q-,
Ctrf+C
Deiete
*"
Refresh
ffi
Refresfi Worfcspate
i :<e*ise -et Boette u:: K>Sk
! 'je.'!3o_-o>>.*-a<ii:Noa
Pubtti
BukJEARSe
J <nu
rtoi:NaQ
Prooerbes
ji M0C*e.-.fiocjWW:'S*r
Jl ^rfxx BMaciU! :!>*
* mMhIl.^MWi
App Men
0Ou** i^inttmatjooaiisbcint.lSn)...
#^ >/- c*lNm*l
U tibes
~e\Zfc
...
jl 1i. .*/.--.<;
f tVut3cn : itt*tt.\n
Import
ti^Ewmrt
Compare W.tti
31
XA
kony
Skin Defaults providesthe ability to give a uniform look and feel for the widgets across
various platforms.
Widgets in the application will default to skin set in Skin Defaults. The skin can be
overridden on that widget's skin properties
-'..
In i r* fcn
/i *:ji >r | >*Son
?*IMo&*rri
J ro5fcri:M*x
| l'.* l*we
fcltm- lllliP|
n:n i v* **n*
i Si^nnjtceMaSMP'NeSan
l 'Sksetefu!
HsSW"
\^p/
OKHHMWm
. r,^.amn>Nivtrin't9CP
, Sbi bstatynal
..
ilfcui
at CHM
>.- {vnmwf
appearance
iuiE.r
*
J
Skins View
kony
, HeoWorldSkins S3 | O. Emulators|
= n
Theme: |defauit
f\ Advertisement
'' GSSSB
I9
Button
+-VAdd__
S i btnFocus
IB-SS'' btnNormal
J E ,
id ,4
~3
1 Ll i < _
Refresh
-v
^L*J
~B vjjtj
Theme: default
\ Advertisement
'- Button
m -*, b.VB
B $' Calendar
* 'ti Q
5! S Calen X<***
B i Camera
IS Carne f F^
0 Chart_2D_3D
>
Chart_2D_3D
B |^j CheckBoxGroup
Ep vj ChedBoxGroup
S 'j ComboBox
B {H DataGnd
S kj ComboBox
S a DataGnd
E {^jForm
S {^j Form
0^ HBox
E^HBox
Cu HlmageStrip
B C WmageStrip2
zi
"\
Chart
Rename
:Chd ^Refresh"
' i Como -
B Hj Datat .jCopY
ff) 03 Form ~
n
._ ."S Clone Al
k HBox_
B Cu HlmageStrip
Si S HlmageStrip
B Cu Wmage5tnp2
I WmegeStrip2
32
Adding Skins
kony
Each skin needs a unique ame - unique for ALLobjects in the App.
Configure the various attributes.
Click Finish to save your work.
There always has to be a default skin defined if you're going to fork the skin.
/-. Hdk>Worid Slans 3 O Emulators
$j U t 8
Theme: |default
Ji Advertisement
iimiiiiw
jj
^'1
_-j v | X|
*_
fjy^
di
noa
i 81 Q|
Refresh
-- Chart_2D_30
ChedSoxGroup
BataGrtd
Form
AA
kony
r
r
Color
Transparency
Size
You can select fonts for individual platforms on Rich Client, Thin Client and Tablet
separately.
-T.rr-MVM5.--V.rt.
AJd^>..
'"i
ene ['y*
(N*M j-OT
Mtn ['-"
zl
j|
IM. .M.CS
f=-
"
33
AA
kony
5
W
-- - I
_i
"3 F
kkony6
Skins Files
ame
| Date modified
|Type
bgimages
8/28/2012 1:09 PM
customv.idgets
8/28/2012 10:54 AM
Re folder
diatogs
3/28/2012 10:41 AM
File folder
forms
8/23/2012 10:41 AM
Fe folder
jssrc
8/29/2012 4:33 PM
Rle folder
modules
8/28/2012 10:41 AM
Fe folder
resources
3/29/2012 4:33 PM
FSefoider
services
8/28/2012 10:41 AM
Fie folder
templa tes
8/28/2012 10:41 AM
Fe folder
8/28/2012 10:41 AM
File folder
File folder
i r^
web_modufe
__ .project
8/28/2012 4.11PM
PROJECT Fe
i bu**
8/29/2012 4:31 PM
PROPERTIES Fe
_bud
8/28/2012 10:41 AM
XMlFSe
fonrtcon
8/29/2012 3:54 PM
PROPERTIES Fe
8/29/2012 4:32PM
XMLFile
HelloWorldmapptngs
._. konyplucitns
3/29/2012 4:31 PM
XML Fe
g luajrtdge^jirtjnfij
j middeware
8/29/2012 7:49 PM
PROPERTIES File
8/29/2012 4:32 PM
PROPERTIES Fe
Lj projectprop
8/29/2012 4:17 PM
XML Re
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^b
34
r
Forking Skins
S. HeJGWoridSkre S|Q.BnutotDre|
-
J|. t $
kony
;--
-:;
^1
1i*. Adverbsement
r"
; B~
_^J _j_XJ
22(jO.Emiatars:
0 Cl Button
:::. i ,4
i * b3"t
pealen XDelete
Rename
1*
^g01^ Refresh
r~*
*|
Theme: default
_^J v| x|
(j Adve tisement
S S Comb "
S S, OataC .. Copy
ES O^Fonn~
-.
CurrentAppkabonTheme: [default
_^_
0 Gl Butto
6 b
i iancuis
" Clone A
Andr-,
*:! Bladberry
*; ni HImageStrip2
Q Windows Phooe
^ Server adetione
devices.
r
Cloning Skins
kony
Cloning Skins is a useful option when you want to replcate the forked skins for other device
type.
Cloning copies ALL the forked skins for one device type and creates one or more copies for
the selected target device types.
K^^Hi^^^^HiaTaTaTaTaHMaB
*|
Theme: default
riw
jjAdvertisement
5 %
Refresh
S^CalEB
$ i Camera
*"3 Chart_2D_30
6 [3j CheckBoxGroup
il' ComboBox
* 9 DataGrid
$ jsS Form
This exampie shows copying ALL the iPhone forked skins and creating forked BlackBerry
and Android skins.
"
35
Native Skins
-%
kony
Kony Studio also provides you the ability to use the nativeskins (skinsthat give the native
look to the widgets) on certain platforms.
r-
3
a
kony
To do this, you must select Image n the skin editor Style drop-down on the Background tab
mrr *"^
*.-
- I l|
All the images must be present in the Resources folder of the project. The IDE supports
PNG and JPEG formats for the images.
You can use the Browse option glven in the skin editor to plck your image.
Note: the image may be stretched depending on the layout scheme being used
36
"
-i*
kony
-.
.
1*1 s**
".
3ST
*~
e^
i
immvnmm-
Emtm
AHdacni
adamftan
__
^_
7
mtogeuR>.:|
-.
=^1
^^
i rc*i 1
"
"
37
AS
Themes
kony
Themes allow you to package the skins in a way that resemble a particular user interface
or branding for a particular set of users.
For example, all the Goldcustomers will see all the buttons n Golden Yellowcolor.
Themes allow you to personalize the look and feel of the application for the end users. For
example, the users can choose between a green theme or a blue theme.
You can define your own themes in Kony Studio or download themes from the network (a
specific URL) and use them in the application.
A theme, which consists of a set of skins, is represented as a file containing a JSON string.
The JSON string has the key-value pairs in which the key is skinid and the valu s JSON
string that represents the skin.
Every application should have a "default" theme (stored n the in the default theme file).
Deleting or overriding the contents of this file will lead to undesired behavior. KonyStudio
does not allow the developer to delete this theme. Allother user defined themes can be
deleted.
Themes View
kony
KonyOne Studio provides a default theme that has a set of skins defined for all the widgets
within an application.
The skins in this theme can be applied to widgets to get a different look and feel for the
widgets.
The Themes View is embedded in the Skins View. A drop-down list indicating the current
theme appears in the Skins View. you can see theme to which all the skins are associated
with.
I fea _i A
heme:
deault
~ Popup
=' RadioButtonGroup
RichTect
SooMBtt
Segment
default theme
*' StgnatureOpture
-vf Midei
CTab
K TbPane
';
TtrtArea
cff TortBox
K VBt
jS TrtleBV
"~
38
kony
KonyOne Studio also provides you to crate themes and associate skins with them.
When you crate a theme, it is created using the default theme as the base. All the skins
available in the default theme are copied to the created theme.
The IDE allows you to add, modify, rename, copy, fork, clone, and delete skins within a
theme.
KonyOne Platform provides a set of APIs that allow you to perform different actions with
themes.
Note: Any changes you make to the skins within a theme are limited only to that theme.
kony
1.
Theme: default
4L
q Advertisement
CS Button
ib Calendar
>
i New Theme ^k
M3!
MyTheme
Cancel
"
39
kony
Delete a Theme
>
When you delete a theme, you must be aware that all the skins associated with that theme
are also deleted.
>
Note: We can only delete themes that we have created manually. We cannot delete the
default theme available in the IDE.
A'
Theme APIs
kony
The theme APIs provided by KonyOne Platform have the following capabilities:
1. Defining new themes.
2. Applying the theme to the application or only for the current session.
3. Switching the application from one theme to another theme dynamically.
4. Deleting and loading the skins for memory efficiency.
5.
Important Considerations
When a skin is referred, the IDE searches for the skin in the order of precedence)
Current theme
Default theme.
40
jl/
kony
kony.theme.setCurrentTheme
This API allows you to apply a speclfied theme to the application at runtime.
kony.theme.createTheme
kony.theme.isThemePresent
This API allows you to check the existence of specific theme in the application.
kony.theme.getAIIThemes
kony.theme.getCurrentThemeData
This API returns the meta data of the current theme in the application.
kony.theme.getCurrentTheme
This API returns the current theme that Is applied to the application.
kony.theme.deleteTheme
This API allows you to delete a specified theme in the application programmatically.
Import/Export Theme
kony
You can import as well as export themes used in an application to re-use them across
different applications
In the Skins view, click on the export I import theme icons and you'll see the Import Export
window.
When exporting, Select the location click Wexf and select skins to be exported. Kony Studio
will use Theme.zip as the filename. Import is the reverse.
.
HatriMISfei
41
aa
kony
build - contains images copied in from properties in the app properties dialog
common - contains all the common resources, i.e., resources that are not platform
specific. This folder also has screen size specific folders:
Images240
images320
Images480
In the platform specific subfolders are the images specific to that platform.
Each of the platform specific subfolders can subfolders for specific device types and/or
screen sizes and/or screen resolutions.
42
XA
Subfolders in Resources
kony
Example; "resources/common/en_USf
Any resource specific to a platform should be added as below n the respective sub folder:
<locale_CountryCode>
Images320
Images240
Images240/<locale_ CountryCode>
Images320/<locale_ CountryCode>
Images480
Images480/<locale_ CountryCode>
Subfolders in Resources
kony
Any resource specific to a platform should be added as below in the respective sub folder:
small/<locale_CountryCode>
storm
storm/<locale_ CountryCode>
pearl3g
pear!3g/<locale_CountryCode>
43
1
Subfolders in Resources -Android
Anyresource specificto a Android rich client should be added as below in the respective
subfolder of "resources/mobilerichclient/android':
Possible vales for screensize are "small", "normal", "large" and "xlarge".
Example: "drawable-normal"
Resources specific to Resolution/screen-pixel-density should be added in "drawable<screen-pixel-density' subfolder. Possible vales for Resolutlon are "ldp!\ "mdpf,
"hdpf, "xhdpf and "nodpi'.
Example: "drawable-hdpi"
kony
screensize
orientation
'
Some Examples:
drawable-en-rUS-hdpi-large-land
drawable-land-en-rUS
44
'
44.
"
Subfolders in Resources
kony
Any resource specific to a tablet platform should be added as below in the respective sub
folder:
Tablet; "resources/tabletrichclient/"
Managing Resources
kony
c*
1. Creating copies of the exact file ame in the platform/device specific subfolders:
You'll specify that file ame in the various Kony Studio image dialogs.
The platform will search for that file in the following order:
The device specific subfolder
The platform subfolder
The common subfolder
In the various KonyStudio image dialogs, you'll specify the exact image to use for
each platform.
45
Image Dialogs
kony
Name:
Wm
Widget Type: [~
*!*. |
Mr*^<
Background
Stvie: 132
*
r Image-
i-
.11
na
"
'
3 '~ I
kony o
Only PNG and JPEG image types are supported by all platforms.
There are certain naming conventions that will ensure complete cross-platform support:
Only use lower case alphanumeric characters and underscore (and '@' for Phone)
You want to also provide a higher resolution image for the retina display.
In the image dialogs, select hello.png. The platform will build in and use the specified
im ages.
46
"
"
XA
Quick Preview
kony
Do you really need to compile the whole thing just to see how it looks on any given
platform? There MUST be a better way, right?
Yes! Quick Preview allows you to preview the current form n any emulator. Instantly!
You need NOT build the entire application to preview how your form would look on various
emulators.
"
47
kony
Before using the preview feature, you must do a full build (creates application build folders).
Once t's built, you'll then do a quick preview build.
rj.*y.y^s :* fe.* ,.
#^:3<5S?!:*
3ff^?^
I..,I....H
ln^
Choose Preview.
Unob move / resrze
X Dtete
firrdWidgel
i:
KxtArc.V
W Preview...
)
Alt4oubleC6ck
EdrtProcer-bes...
Double Ock
You choose the build platforms using the normal build screen.
kony
After the build, you can now view the preview on the emulator(s).
Right-click the emulator (don't double click) and choose Open in preview.
This is required ONLY to launch preview mode
: Helio'.'.'oild Skins *J
Emulators
Emulators
Android
K Mbile
sa t j
- -JTablet Hj Edit
y Ga(ff^ Open inpreview^^
j " Blackberry
) V4
3 V4S
3 V4.7
)f BB-9530
X BB-9500
3 V5.0
3 V6.0
4
Windows
Native
^ Window; Phone 7
X Windows Phone 6.5
X Windows Phone 6.0
O Web
A v Kiosk'Desktop
<tf Windows 7
Q Palm
48
A
kony1
Once the emulators are running, after making any changes to the form, you can directly go
to the emulators and see the changes.
rigH]Oa:52PM|
"
Original screen.
JA
kony
Building in Preview Mode will add a men tem to the app called Quick Preview.
It actually creates another lighter versin of the application which will only have the form
and its referenced code (skins etc.).
Open the browser on an emulator or device on the same network as your Kony Studio.
49
1
iPhone - Preview
kony
Running Preview mode on the iPhone is similarto running the app. You'll have to launch
the Preview mode app and this will let you see your preview screens
To run Preview mode, on your Mac:
Click Preview.
kony
Objectives
Be able to modify a Ul and render it on various devices without rebuilding the app
Concepts
Skins are used to configure the look and feel of a widget when it is rendered on the
Form n an application.
Procedure
Make it: transparent background, blue font, make it BIG (200%) and tallo.
For iPhone, make it a two color vertical gradient (light yellow to darker yellow), a
dark font (non-black), normal size (100%),and the border completely rounded.
For BlackBerry, make it a two color vertical split (use similar yellows as for
Phone),black font, sort of blq (150%), with no border.
50
"
XA
kon-i
Applythe skin to your label, save, preview build and check your work.
-
Add a button:
Crate a skin with an image (don't forget to put an image in your resources
folder).
Fork the skin for any device and use a different image for that device.
Apply the skin to your button, save, preview build and check your work.
,1
51
Objectives
kony
kony
Layout can be tuned by channel (Phone, Android Tablet, etc..) (and often more finely
grained than that).
1
52
XA
-
Widgets
kony
i Palsite
1ft Container Widgets
Container Widgets:
QHBox
Container,
StrollBox
widgets
_Zl Tab
Q TabPane
0!VBox
V Baoc Widgets
Button
'\'Calendar
\, CheckBoxGroup
Component Widgets
]_" ComboBox
S3] DataGrid
ImageZ
,b: Labe)
Componen
t widgets
Line
iV. Link
% ListBox
y Menultem
Button
TextBox
'
Label
RadioButtonGroup
1 RichText
- SMer
AA
Essentials of Sizing
kony
{H} M "
[F1fcrm ImsOtifLotitn
y
HOe. - hii<263STllWl
Di/tcn tjtr.JieOjrreMLeertien
iab*f - ib*G03171105
BullL'" - LtrieirUi
i Mcnu BurUm
l.ltnu CnU:ncT
A container instance's size is based on the Preferred Size of its children and the container's
own properties
53
Adding Widgets
a, ^"
kony
; ttrnHonie i ;
"
[ EJHdbWorkJ
[ *> Prevtew... !
.> Palette
>
% Contaer Widgets
Hefo World
1 Z Button 1
g Calendar
iv CheckBoxGroup
uyow
By default, the
horizontal size of a
L_
child in a Form is
Image2
La bel
Line
Link
jfjstfiox
=i Menultem
Men
Form
ai RadioButtonGroup
^ RichText
-0 Slider
tu TextArea2
V_ TextBox2
kony
The Width of each child is set to the width of the device's screen.
54
r
XA
'i '
kony
You can re-arrange and/or change position of the existing widgets by drag-and-dropping
them
BUT the Layout Manager will remove that space for you and by app runtime everything
is snug at the top
Run-time
Design-time
aifflS 9:43 PM
Lu
Space -
Tex:Box
No Space
HBox
kony
|Hj frmHBox U
drag.
a"d-drop
Drop Widgets into it, monitor the hlerarchy in the Outline View.
An HBox s empty (has a (0,0) Preferred Size) until you add children.
The Preferred Height of an HBox is the Preferred Height of the largest child.
"
55
kony
You can resize a Widget using one ofthe eightgrips. Grips are visible when the widget Is
selected.
F=J frmPage2 :
--
-e-
-O
EijfrmPagt:;
kony
When you drop in the first child widget, the layout manager sizes t to 40% of the HBox
width automatically.
=] frmHome
||=) frmHBox 23 j
"
1O Preview... J
. Palette
1> I
1* Container Widgets
Button
>fTJasi<: WrdgeT^.
Button
O Button
To&lefKtaT
|v"| CheckBoxGroup
^3 ComboBox
ul DataGrid
|y rmage2
ik Labe)
Line
- Link
56
Horizontal Stacking
kony
r
Label
TextBcx
Button
HBox Properties
x^
kony
An HBox child in a Form parent will take on the width of the screen (as we discussed).
"Use Widget size %" property alters this behavior, but this is an advanced property;
always use "true" for now
mmmmfmm
57
XA
kony
Bydefault, Widgets will be sized based on the percentage specified In the properties of
each child.
Design-time
Run-time
Label
TextSca
9Hffl 11:18PM
Label
Button
Button
The HBox's height will be based on the Preferred Height of the tallest widget.
In this example, both the TextBox and Button are the same height.
kony
Objectives:
Be able to crate a new Form with 3 widgets and configure t as the app startup Form
Concepts:
Container widgets control how component widgets are arranged in the Ul.
Precise layouts are determined at runtime and not during the layout phase in the IDE.
Procedure:
A Label
A TextBox
A Button
58
kony
TextBox
UL
Inside a Widget
kony
Top Margin
Border width
,
Top Padding
O)
'5
i
>|
Right
Right Padding |
Left Padding
Margin
Margin
t*
Content
*>
Botom P
adding
1 r
Preferred Width
59
4\
kony
"Transparent"
Border width
1 T0(iP0tl"5
'.
I
'
1
5
a.
"
"
Preferred Widlh
kony
Margin and Padding are controlled on a widget by widget based (including container
widgets).
BlrfHi Platluim
[j
|;w iwl
I,-
\**i,
C ^1.ll^i.Mt^
P TaXI
i*i,>m-m..i
il BHm
5 3 .wawanow
a; <
B'J
1: S i n r t . l C r M .
--
ag .,,...
a
F"3 =
..>..-:
O*.
o-'
D-r.^,
D
O*
*..
p
p
p
i
i
n.
J_
You can change individual settings...AND...apply them to some or all other devices.
Typically, you get it working for one device and then start appiying to other devices.
Use preview to check your work. http://developer.kony.com/updatesite
HH
60
r
4'
kony
lita
It |tg<|t,
lia* lam t
1-
Mmn
*my*i...
*m.ai..
am***..
J
Di ..-*,-.
....
IT"- voad
Mwe:"^! on* jw "e-rienfl rtt* " ft wj-ed i iwdfl S twr oei w KM Mim
1 >ImI
Specify % to ensure a uniform look & feel with one set of margins and paddings across the
other platforms.
"
kony
In the application context men, you can Replace or Copy margin/padding settings.
I-ilegal* Tr*tJP#tv
UvftdehiOKttvCwrOTl Wm
Cf*>
k~
i"-.'.,j '.
<
!=--
Oaw
'
=.-;
Easy way to perfect one platform and copy as starting point to the next.
61
XA
kony
When do I apply Margin and when do I apply Padding for widgets in containers?
Qgffle 11:09 PM
hbox with ridiculous padding:
widgets properly
with errors
Ihboxwhere widgets have margin:
hboxwhere widgetshave imposslblemargins:
margins of 22%
and 35% all the
way around
kony
You can request horizontal / vertical expansin of a widget within its parent.
Setting h/v expand to true will not affect the size of any other peer widgets within the parent.
iJJ"LJJlJ1JIJIJI"LJ-
62
Expansin Example
i:
! Button Text
Button Text
i. *
kony
Design-time
Run-time
'HJCl 4:19rM
.*bet
-.e^ax
HCquMOn
MEttpondOn
HtspjndOri
Htxpndcrri
Htoynaofl
Kony Studio
Here we have three HBoxes as part of a Form; each contains two 50% width Buttons.
For Buttons with Expand = faise, the size of the text controls the side of the content.
63
%A
Skinning
kony
ASkincan be appliedto a Widget to set border width, border color, background, ...
"Transparent" Margin
kony
Changing a skin MAY change the shape of an object which n turn MAYchange the layout.
Use of images or different border widths that are different for focus/non-focus state may
affect the layout.
Oh, and by the way, skins work with Containers, too, not just Components.
While working with layouts, skinning containers can help see your margin/padding effect.
64
kony
If you want to make something LOOK invisible but don't want the layout to change (when
you make it invisible) use transparent skins.
For example:
you have 3 buttons at the bottom of the form where you can click one to "vote": Button
1 says "yes", button 2 says "N/A" and button 3 says "no".
For some questlons, "N/A" is not valid so you want to hide that button but KEEP the
other 2 where they are at.
Making Button 2 invisible will not work on all platforms - button 3 will scoot over to fill
the gap.
Invisible button
r
V
kony
VBox
As the name mplies
In most cases, you can only embed a container within a container if you are changing the
stacking axis -
Correct:
Incorrect:
65
XA
VBox Sizing
kony
Width of HBox (by default) is set by Size(%) property of the HBox within the HBox's
parent (usually a Form)
*.'.
kony
In order to see properties in the Properties Pane for a widget you have to select it.
It is usually difficult to select an HBox widget from the layout directly
!^jumPage2 1
.
H)
Is easier to select your HBox from the Outline Pane
on the bottom left-hand crner of Kony Studio
i H Form - ftmPage7
a E HBox.hboxl5680706ooll057
O
Button - burtcnl568u706o61109
Label - Iabell56307066611077
Button - buttonl5o80706ooll081
| I Men Container
66
t 9
kony3C
ScrollBox Widget
ScrollBox widget by nature is a container widget, to place
form components in horizontal or vertical direction, except
TabPane.
kony
.i Palette
* Container Widgets
[HJForm
HBox
Purpose:
ScrollBox
DTab"
1^1 TabPane
vJVBox
Use cases:
67
"
AJ^
kony
Percent, specifies ifthe widgets must be laidout as per the percentage allocated size or as
per the preferred size. By default, the valu is set to be TRUE.
Name
Valu
General
id
scrollboxlli331872023
Visible
iPhonenje,Android:trije,Blacl;berr>Ttru
renderer
Layout
fake
_- Appearance
margin
Edit
padding
Edit
Siie ipfcels)
(448,50)
448
width
SO
(100,11)
width
100
height
11
it'ollDirection
show5<roiibars
poition
enableScrollByPa
-,-- Scroliing Events
onReachingBegm rtg
cnReachingEnd
BOX.P05mON_AS.NORWM
fake
Nct Defined
Not Defined
onPull
Not Defined
OflPtlSti
Not Defined
Fned Height
<L ccntsintrHti-iht J>
kony
Position is used to align the ScrollBox onto the form at header or footer or segheader or
segfooter position of the form.
Stie (%)
(100,11)
width
100
height
11
orientation
BOX.LAVOUT.HOREONTAL
icrcllDirTtinn
<LT jfifiwSrrollbars
C! position ^
enableScrcllByPage
Scrolng Events
onReachingBegining
cnReachingEnd
try>
BOX_POSmON_AS_NORMAL
fal
Nct Defined
Not Defined
onPuil
Not Defined
onPush
Not Defined
. FixedHeight
containerHeight
j- Skin
slcin
Skin Defaults
rightArrow
top Arrow
bottcm Arrow
68
kony
Objectives
Concepfs
Procedure
69
kony
Text Widgets
(Self Study)
kkony*
Label
Used for displaying text and as space buffers (no text).
Can be skinned to affect background, font color/size and border.
lfi.W4
Long Text: Specifies if the widget can allow text which has more than 1500 characters
Wrapping (iPhone only): Specifies ifthe word or characters must be moved to the next
Une when you reach the right margin.
Word: will wrap only on whole word boundaries
Char. will wrap at any character to fill right to edge of label boundary
70
Link
kony
The only difference between a Link and a Label, is that the Link exposes a click event
You can skin your link, but careful! If you make it NOT look like a link, user will not know
onclick: specifies what to do when the user cllcks the link. We'll cover this in a bit
TextBox
kony
Most devices offer littlecontrol over the look of the keyboard pop-up and when It pops up is
controlled by the device OS. iPhone is the exception
Keyboard type:
typcDefaut
Auto Capitaliza!en
Cise Button Required
Cise Button Text
Cese Button Text I18n Kev
typeUPl
typeNumberPed
typePhonePad
-E
71
XA
TextBox - Properties
kony
onDone: The event when the user has dismissed the keyboard or put focus on another
widget
onTextChange : allow you to write code to do something AS the user is typing (autosuggest
text, for example)
Acouple of interesting platform specific properties. (Note: refer to the Kony Widget User
Guide for detalls on all properties):
kony
Allthe Platforms, except J2ME and baslc xhtml versin, expose the onTextchange event in
which we can write the event for auto suggest feature.
The onTextChange function cali will have 2 parameters passed in (widget,
changedtext) :
Atlanta. GA IPKt
Atlanta. GA (FTY)
Atlantic. IA (AIO)
atl|
72
r
RichText
RichText control supports the HTMLtags to format text
The following tags are supported:
-
helio -.velromptoSSJH
training .
Cali xxx-xxx-xxxx (or support
post training.
<a> </a> - anchor text to display a link. Supports optional href attribute. href can be
URL based or can cali a method nternally.
<mg> </mg> - to display an image. Supports src attribute. src can be local image or a
URL based image. This tag is not supported in Phone.
<sub> </sub> - to display subscrlpt.
4
kony
RichText has an onClick property that is triggered when a user clicks on a link within the
text:
The function cali will have 3 parameters passed in (self, linktext, attributes):
If the user clicked on the first link ( one ) then the parameters would be set as:
self. would be frmMain.rtLinks, the name of the widget
Note: Use this widget only ifyou have small amounts text as it will consume lot of memory.
For large amounts of text use a browser widget.
r
r
73
TextArea
kony
Phone: the control will not grow In size, but scrollbar will appear iftyping goes beyond
control boundaries.
Android and BlackBerry: expands the size of the control to accommodate the amount
of text; the screen will expand if necessary.
Windows Mobile and Mobile Web: acts like a multi-line textbox. Itdoesn't grow in size
or have scrollbars, but the text will continu to scroll as you continu to type. However,
initial number of lines can be set using "No of Rows" property for Mobile Web.
TextArea is typically used to capture user comments or notes
Note: From a layout perspective, you can't control the initial size of the control It'll always
render the same size (height).
Button
i'
kony
All buttons have a normal and focus skin - focus when the button is "pressed" or selected
(for non-touch devices)
Images for buttons cause the buttons to become the size of the image - an important
reason to have seprate images for each device.
When images are used and the text set, the text is overlaid on the image - important for
localizaron
In BlackBerry, there is an option to set the Image to 3 part image (in forked skins)
Using this we can set 3 left middle and right pieces of a button .
W^.
T,^- IimlHr
:-..
*_*-
.i,-..,.
'
This is useful when the text is dynamic and you want to increase the size of a button
based on the text size
74
A'
Button
kony
name>.text
Buttons have an onClick event. The specified function cali can have 1 parameter passed
n (eventobject):
We'll cover how to write functions and respond to events in just a bit...
Note: If using images for buttons of odd shapes, make sure the background matches the
container background OR has transparency around it to let the background show through
kony
75
kony
mmmmmmmmm
kony
Debugging/Troubleshooting
Module - JavaScript
Dynamic Widgets
76
\'-
kony
Once we start writing code, we'll need to cover debugging and troubleshooting
Connecting to data.
r
-
r
-
r
77
kony
Good for sharing debug info - easy to send logs to other people.
" Good for controlling flow in development (using confirmation type - yes/no).
II
ic
kony
kony. print (<text to print>) function of Kony JS API can be used for placing
debug statements in the device's log.
kony.print("result table is
>"+result)
Many device SDK loggers In debug mode print a LOT of data to the log - best use
something easy to find, e.g. kony.print( "$$$$$$$$$$$$$$$$$$$$ "+debugData) .
78
kony
Kony default debug logging is controlled by the Build tab n the application properties
window.
debug - will print all the Kony platform's nternal debug statements - VERY verbose.
To remove print statements from the application, select the checkbox "Remove print
statements in custom modules".
3 Project Pro|
Project Properties
Editproject properties
Build: Idebug
Remove print statements in custom modules (Recommended setting for production relase)
Note: To avoid compilation issues please have the print statements in a single line.
Kony statements
Print statement
:iti--3i ti u
iti .,
mi
unto m
r ftniii) tailmnKi*t**twt
r
..(.. im.ii. mi hu; , lUf.fMWMaWatt >,* iinm >.!...
iilm ir;(ln)'t*i. !.-*..a
i,.,.i|,i ,.,!(.
79
Android Logging
kony
. gj
Mrtp
J-
MM..W
fe*
"MI
-;.ji .t
-i i'
1\U
.......
1'
-f-
AImom
<3>0
Log
Am
p.a
Mftugt
tj
QtaiMZi
..->
Sf.-ttl
>rra
J- 17 ott
;n
f**>d
!, - - t<mn>)T>.*Urii--lM#KHjU>ttiC*l>^w,'
ata i? o
35
lo -..!
-M1MU-
.'i*.
M-a I7rUJ..
JS
.
poftw^nuMuc*
rppvwMhwaMtA
hry
kmilutn
Imatf
X,
MB<MM
9KM>
Vl.aarl
' . - MU
IW
ItmMl
a miz.
ipliIMgWi^uIhm^
-txttfUNM
ttet-ci
m-Mihta.
.:
>Un4f
-a im&l.
J .--rr.
wajMi.'.
y-**-
A . . m^hmwr 9 f,
>
ftr
kony
Logs are given different tags like StandardLib, WindowsLib. You can crate filters to check
for only specific logs (like only custom logs).
Time
UaJ
Log Filter
+ - !0 S N
fcateRto)
pid lag
Message
06-0617:44:32332
749
WmdowiLib
06-0617:44:32532
749
WYndewsLib
106-0617:4432552
749
StandardLib
by pid:
06-0617:44:32.562
749
StandardLib
filledthesgment!!
byLogleve): |tDebug_
06-0517:4432562
D 749 LuaSegUt
06-0617:44i3-.5S2
749
WmdowsLib
! 06-0617:44:32.552
749
WindowsLib
06-0617:44:32592
749
tuaFcrm
Setting dattSetOataO
Enecuting themethod indei11
Displaymg theform(rmThree
Freeing theform!!!! frmtwe
06-0617:14:33.772
749
dalvfom
+& 1Loa.
(<(d m
by Log Tag:
StandardLib
ITI
|Cancel |
i!eustomlogsj!
pid
tag
Message
06-0617:4432322
749
StandardLib
06-0617:44:32.552
749
StandardLib
06-0617:4432362
749
StandardLib
Time
80
"
kony
BlackBerry
kony
BlackBerry debugging is done via the JDE tool for each JDE versin
With the BlackBerry simulator open, do the following to launch the debugger:
"
81
%A
Windows Mobile
kony
Running the Windows Phone (7 &7.5 emulators) automatically brings up the Kony logging
tool:
Windows Phone LogViewer
a'isa
kony
Filter the types of
Message
Platform
User
User
User
User
SSSSSSSSS5SSSSS$SSEEEEEEEEEEEEEElected
" :;::.
7/5/201112:49:34 PM
"-""APP INFO*""
SSSSSSSSSSSSSSSSSSEEEEEEEEEEEEEEEElected
APPINFO
{]
^SS^SW.^^^WFPf^CFFFFFFFfl^.^
jCAUsers\Pco Recr!'\ApPDai\Lo:ar\Wp7Logs\7\5\20in24B47PM.txt
| C:\Users\Pico RecfcUppData\Lcaf\Wp7Logs\Best5uyRemix7V5\2011249
locations
Cper F: 3ei
Restan Log
kony
The platform log statements AND the thin client logging are pushed to the middleware.log
file that can be found in your eclipse folder.
The log is a rolilng log spanning mltiple files where the latest logs are always found at
middleware.log (where middleware.log. 1 is the previous log and middleware.log.2 contains
data before that)
middleware.log tile is generated using log4j and the configuration file for the logger can be
found in the middleware-log4j.properties file (D:\Workspace\middleware\middlewarebootconfig\)
middlew3re-log4j - Notepad
Re
Edit Format
?&
^iDjxJ
View Hdp
logj. logger.com.kony=iNFO,filelog4j.logger.com.konylabs=DEBUG,fi le
~B
log4;j.appender.fi1e=org.apache.1og4j.Rol 1inFlieAppender
1oqj1.ajjpender .file. maxFi1 esi ze=10240KBl og4 i. appender .file. maxBackuplndex=5
liT:-iriWi^iirTM|L^iWfclIgiifct.7IR7Wit^Fi?l oa-i i. appender.file. threshold=debug
There is a LOT of data logged...make your print statements very unique and easy to find
82
kony
Result Table Returned from network Cali - these statements indcate the response
fetched from the middleware
You can also get Important request information such as user agent, referrer, browser
timestamp etc in the middleware.log. For example:
[requestID=949d27 3f-37ca-47d7-898 3-7fabe63d59d6
UA=Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_3 like Mac OS X; en-us)
kony
Nice if you want a quick confirmation to keep the flow going or to show debug statements ifyou
don't have access to debug tools (QAtester, for example).
You can either use the Alert action (in the Event Editor) or use the kony.ui.AlertAPI.
Typically, in code you'll keep it simple. For example:
kony.ui.Alert(
{
"message"
"alertType"
constants.ALERT_TYPE_ERROR,
"alertTitle"
"yesLabel"
"OK" ,
"noLabel"
"alertlcon"
"alertHandler"
},
{});
myone.png
nuil
OK
wmmmm
83
kony
"message"
"alertType"
constants.ALERT_TYPE_CONFIRMATION,
"alertTitle"
"yesLabel"
"OK" ,
"noLabel"
"Not-OK",
"alertlcon"
"myone.png",
"alertHandler"
}r
AlertHandlerFunction
My Alert Message !
{} ;
0K
kony
if (response == true) {
0n_0k_Click()
} else {
On_Not_Ok_Click()
}
03-29
Fren OK
Click
08-29 18
39 08 737
1094
ccm.crgn. . .
From OK
Click Onwards
08-29
39
797
1034
cera. crgn. . .
13 28
13
34
33
148
980
Olivarda
function On_Ok_Click() {
kony.print("From OK Click Onwards")
};
function On_Not_Ok_Click()
84
Inline Debugging
kony
We'll cover this in a bit when you're really getting into the code.
For now, using the Alerts and logs and get familiar with using them for your troubleshooting.
"
85
kony
Along with La, JavaScript support is available from Kony 5.0 for client side loglc
ECMA-262 has three versions and in kony environment JavaScript should be compliant
with ECMA v3.
Support for mltiple mobile device platforms such OS and Android allows you to get your
app to a wide range of users.
JavaScript may not be known for its object oriented properties, but t does support most of
the features required to be considered as an Object Oriented language.
It gives flexibility to import existing 3rd party frameworks, components inside Kony
K*
*i%
I.v*
h*
tote
JlSMm*!*!^^.
kony
**#
- , ,
*<.ml-.
0 - J
I.-.,!-..
Ir-
/?
V ltn-lartnB'
ti
,1
" /*
''
.\
The code modules do
SO -
"
i ^J
..... ci-jaJtes
code!
........
''ti>i.nEta^t&ab
the functlonality.
-:
-.'..7>
86
JavaScript - Exercise
kony
Objectives
Design a login page & cali function on click event of login button.
On unauthorized access start the counter and after three incorrect attempts exit the
app ( Not appllcable for SPA or Thin Client).
Concepts
Procedure
Write one function that will be hooked up to the onclick event of the Login button.
Your function will have to determine User ID as "Admin" and Password as "Password".
If the Login button was pressed, get the vales of the User ID and Password TextBoxes
and valdate. Also, you should clear out the text in the TextBoxes.
JavaScript - Exercise(cont)
XA
kony
lUser=frmLoginPage.tbxLogin.text;
lPassword=frmLoginPage.tbxPassword.text;
if(count==3)
{
kony.application.exit();
frmLoginPage.tbxLogin.text="";
frmLoginPage.tbxPassword.text="" ;
87
kony
>.
\A
kony
Following methods & properties of the JS Object are not supported by the JS objects that
are created and returned by Kony JS APIs.
Methods
toLocaleString
valueOf
hasOwnProperty
isPrototypeOf
Property
Constructor
Note : The user defined JS objects will still respond to the above methods and property but it
is recommended to not use these for the uniform codebase.
88
"
A*
JavaScript-String Library
kony
status
[boolean]
true - if the given input string contains any one of the characters in the specified list.
faise - Ifthere is an error in the input or if the given Input string does not contain any of
the specified input characters.
Examples:
"
4,
(inputstring):
returns a
i
'i
kony
verifies if only (and only) the specified set of characters is available In the given string and
returns a boolean value.
Example:
var inputstr = "abdcdADV";
var resultantstring =
kony.string.containsOnlyGivenChars(inputstr,charsArr); ->
resultantstring=true
resultantString=kony.string.containsOnlyGivenChars(inputstr,charsArr
) ;->resultantString=f alse
89
kkony*
kony. string. rep (s, n): returns a string where the string s is repeated n times
Example:
a = kony.string.rep("JS" , 4) -> a = "JS JS JS JS"
AJ^
kony
kony. string. trim(s): returns a string by trimming off the leading AND ending spaces
from string s
Example:
kony. string. trim("
Helio JS user
true]): returns a Boolean value (true/false) Indicating ifthe string sourcestring begins
with the string comparestring by following the optional specified rule of ignorecase
indicating if the check is case sensitive.
Examples:
kony. string. startsWith("Helio JS user", "helio") -> true
kony. string. startsWith( "Helio JS user", "helio", faise) -> faise
kony.string.startsWith("Helio JS user", "JS") > faise
90
r
r
kony
kony.string.endswith(sourcestring, comparestring,ignorecase[default
true]): returns a Boolean value (true/false) Indicating if the string sourcestring ends
with the string comparestring by following the optional specified rule of ignorecase
Indicating if the check is case sensitive.
Examples:
kony
boolean value , if the input value does not contain any of the specified characters in string
inputstring.
Example:
var a=kony.string.containsNoGivenChars("abdcdADV",
["|","-"]);
a=true
kony. string. isValidEmail (inputstring) : This API verifies if the inputstring is a valid
emall address and returns a boolean value.
has @
Examples:
var a=kony.string.isValidEmail("abcd@"));->faise
var a=kony.string.isValidEmail("abcd6abc.com") );->true
"
91
Tal
4'
kony
lESH
Table API
NA
MathAPI
String API
S kony.string.method namespace
OS API
S All date related APIs are removed from the kony.os namespace
kony.push. method
NetAPI
/ kony.net.method
NA
Timer API
S kony.timer.method
Phone API
kony.phone.method
Widget API
Widget
Base API
kony.method
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^B
92
kony
Basic API
kony.application.methods
Contact API
kony.contact.methods
Streaming API
kony.stream.method
Internationalization API
S kony.il8n.method
Theme API
kony.theme.method
Crypto API
kony.crypto.method
v'
kony.store.method
Datbase API
kony.db.method
kony.location.method
Note : Basic API is consist of most of the APIs like Badge, Appmenu, Application Event
API, Gesture API etc.
msmmmmmm
| frmOne
s ^ forms a)
&_ MyModule.js
i**
kony
r. Th.rdPartyJS.js E3
function checkNum(num)
* W mobile (1)
frmOne
3
-4
j, tablet (0)
1 desktop (0)
if(num<0)
{
? popups(0)
* tmplate; (0)
j m modules (2)
. %la(0
* S JS (2)
1
else
>j MyModule.js
\\ ThirdPartyJS.js-*
num= % +num;
{j web_module (0)
i r--criiirrf?l
;- frmOne
*j MyModule.js 7a
; ThirdPartyJS.js
function showO
\ 7
93
IA
kony
3rd party JavaScript functions can be used in kony application only ifthey are compliant to
ECMAScript 3 and not using any unsupported methods or properties as per kony
guideline.
94
r
r
XA
kony
Widgets can also be removed from the form hirerachy and these
changes reflect on the form when the form becomes visible.
Use Cases:
Look and feel of the forms can be changed dynamically based on the service
response or based on the user input etc.
In a flight booking scenario, fields can be created dynamically based on the
number of the passengers entered by the user.
kony
Browser
Label
Switch
Button
Line
Tab
Calendar
List Box
TabPane
Camera
Map
TextArea
CheckBoxGroup
Form Menultems
TextBox2
ComboBox
ObjectSelector3D
Video
DataGrid
PickerVew
Form2
RadioButtonGroup
Hbox
RichText
Hz Image Strip
ScrollBox
Image2
Segment2
Image Gallery
Slider
95
kony
,'alue
B L-3 General
/Id
" Nsegment210695377211
VjsVisible^ /true
'Trgi Nirdit
-paddina^'tdit
XA
kony
indica tor
enableDicbonary
faise
showProgressIndicator
true
progresslndica torColor
bounces
true
editStyle
SEGUI_EDiTING_STYLE_NOr
mEditag^^^
f searchCriteriaA
V^ea: :n= .
NotDefined
SEGU1_SEARCH_CRTTERIA STARTSWITH
'ene
layoutConf,
96
kony
Button
Hbox
TextBox2
ScrollBox
Form2
r
Creating Widgets Dynamically
kony
Example Button:
Defining the properties for Button
var btnBasic={id:"Onbutton", skin:"btnSkin",text:"Click Here"
onClick:onClickCallBck};
var btnLayout={containerWeight:100, padding:[5,5,5,5 ],
margin:[5,5,5,5 ] , displayText:true};
var btnPSP={externa1URL:http://www.konysolutions.com,
submitURL:http://www.konysolutions.com,glowEffect:true };
Creating a Button
sampleButton= new kony.ui.Button(btnBasic, btnLayout,
btnPSP);
97
i^
kony
Example TextBox2 :
Defining the properties for TextBox2
var txtBasic = {id:"textBoxl",placeholder:"enter text",
maxTextLength:20,isVisible:true};
var txtLayout = {hExpand:true,
widgetAlignment:constants.WIDGET_ALIGN_TOP_LEFT};
var txtPSP = {keyboardActionLabel:
constants.TEXTB0X_KEYB0ARD_LABEL_G00GLE};
Creating a TextBox
textBoxl = new kony.ui.TextBox2(txtBasic, txtLayout,
txtPSP);
kony
Example Hbox :
Defining the properties for Hbox
var basicConfBox = {id : "boxIdTest",
orientation:constants.BOX_LAYOUT_HORIZONTAL};
Creating a ScrollBox
boxTest = new kony.ui.Box(basicConfBox, layoutConfBox,
pspConfBox);
"
98
"
kony
Example ScrollBox :
Defining the properties for ScrollBox
var scrollBasic = {id :"scrollBox",
orientation:constants.BOX_LAYOUT_HORIZONTAL,};
Creating a ScrollBox
scrollBox = new kony.ui.ScrollBox(scrollBasic,
scrollLayout,scrollPSP);
kony
Example Form2 :
Defining the properties for Form2
var frmBasic = {id:"frm", addWidgets:addWidgetsCalBck};
var frmLayout
={paddingInPixel:faise, padding:[5,5,5,5]};
Creating a Form2
var frm =new kony.ui.Form2(frmBasic, frmLayout,
frmPSP);
addWidgets :An event callback invoked by the platform when the form is
accessed for first time after its construction.
99
-V*1
kony
15);
kony
boxl,
2)
100
kony
kony
101
Considerations
kony
Widgets when added to the form hierarchy should ensure that widget ID
(identifiers) is unique in the form.
Adding Widgets with duplcate IDs will result in undefined behavior and
platforms may throw widget error.
Adding the same widget to mltiple hierarchies is not allowed
Existing widgets created from the IDE (during the design time) in the
hirearchy cannot be reassigned / modified directly
egl:frml.labell = new kony.ui.label(..); // is incorrect and
may throw Widget error.
eg2:frml.labell = nuil// is incorrect and may throw Widget
error.
Exercise -
Dynamic Widgets
kony
Objectives
Be able to add widgets dynamically
Concepts:
Widgets can be created dynamically
Widgets can ne added and removed dynamically from the container widgets
such as Form, Hbox , Vbox, ScrollBox and TabPane etc.
Procedure
Crate a screen using IDE which asks input for "movie name" and
'number of
n the next
slide.
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^H
102
kony
darkknlghcrise
Name
Number
.^^^^B^B^^^^^BI^^^^^l^^^^B^^^Bpip^
^^^^^^^^^^^^^^^^H
Nirnc
^^^^^^^^^K^B^Ki
^^^^^^^^^^^^^^^H
I^^^^^^^^H^H^H
Confirm Booklng
SCREEN1
SCREEN 2
I-
103
kony
functions you can cali in JS code to interact with the native
few are:
Application APIs
Internationalization APIs
Network APIs
Cryptography APIs
Gesture APIs
Hybrid APIs
HTML5 APIs
^^^^^^^^^^^^^^^r^f^^f^^r^^^^^T^^^r^^rfj^H
kony
Many of the device features are protected on Android and you must give the app explicit
permissions to access those functions.
permissions
ACCESS_FINEJ_OCATION
permissions
_ 1 '1 C
l nrfM 1 *M1iHC\
i
--
> ..*rnM
t;MW.nl.lt*U
._
.-
104
kony
The Phone Services API provides hooks to the following native capabilities of the phone.
var to = [abc@fqh.com'];
var ce = ["abc@abc.com"];
"Helio";
sub, msgbody,
faise );
GeoLocation APIs
kony
The GeoLocation API defines a high-level interface to location information such as latitude
and longitude associated with the mobile device.
This API is designed to enable both one-shot position requests and repeated position
updates.
getcurrentposition API
kony.location.getCurrentPosition(successcallback, errorCallback,
positionOptions)
successcallback - Specifies the callback function that must be executed when the API cali
is successful. This callback has following syntax with location details passed as an argument
successCallback(position)
errorCallback (optional)- Specifies callback function that must be executed when API
cali fails. This callback has following syntax with error details passed as an argument
errorCallback(positionerror)
positionOptions (optional) - Using this parameter, the user can customize the retrieval of
the geolocation.
105
GeoLocation APIs
kony
watchposition API
kony. location.watc/PositionfsuccessCallbao/c, errorCallback,
positionOptions)
However watch operation contines to monitor the position of the device and invokes the
appropriate callback every time the position changes.
successcallback - Specifies the callback function that must be executed when the
API cali is successful. This callback has following syntax with location details passed as
an argument
successCallback(position)
errorCallback(positionError)
positionOptions (optional)- Using this parameter, the user can customize the
retrieval of the geolocation.
GeoLocation APIs
kony
clearwatch API
kony.location.clearWatch(watchID)
The watch process identified by the watchID argument Is mmedlately stopped and no
further callbacks are Invoked.
106
'
kony
The Contacts API provides the ability to view the PIM (Personal Information Manager)
datbase on the device.
newContact is a reference of the table that's created or "nuW if contact is not created.
inputTable is an array with all the required fields shown in the example below:
inputTable = [firstname:"John3",
phone:[[name:"mobile",
lastname:"Steve",
number:"99999999999"]],
email:[[name:"home", id:abc@yahoo.com],
[name:"work",
id:def@kony.com]],
postal:[[name:"home", street:"Raheja",
city:"hyderabad",state:"AP",
company:[[name:"work", company:
zipcode:"50 0 310"]],
"kony",
title:"architect"]]
firstname and phone fields are mandatory with at least one phone number n phone field.
kony
kony. contact. find(" *") returns the list of all the contacts available in the address book.
kony. contact. delete: deletes a contact from the address book.
107
XA
kony
Application Library
kony
There is only one method cali provided for Media Player functionality.
kony.application.exit()
Following enables you to set a mode for your application such as native, hybrid, and
wrapper.
108
AA
-
kony
kony. os. userAgent () - Returns a unique identifier for the device. This device ID is
used by Kony Middleware to dentify the device. For example, if this API is executed on
a BlackBerry 8100 device, the return value will be "rim/8100".
a/l
kony
kony.os.deviceInfo()
name: Specifies the name of the platform as Phone, iPad, BlackBerry, Windows Mobile,
Palm, Mobile Web, Android, Symbian, and J2ME etc.
model: Specifies the model number of the platform. For example 8900 etc. Not applicable
for Mobile Web.
versin: Specifies the versin of the platform in a string format Not applicable for Mobile
Web.
deviceWidth: The device width in pixeis Valid only on Native Apps channels and not
applicable for Mobile Web.
deviceHeight: The device height in pixeis Valid only on Native Apps channels and not
applicable for Mobile Web.
Provldes the Android API Level based on the SDK Versin. Example : SDK 1.5-3, SDK
1.6-4,etc.
109
Form/widget APIs
kony
formName.show()
<formName>.<widget ID>.<property>
"
Example:
XA
Dynamic Skinning
kony
A widget can have more than one skin defined (e.g. normal skin, focus skin, etc.).
Dynamic Skinning allows you to change the skin of a widget during runtime through code.
Reference the skin as an object, not a string.
For example: For a Phone Widget you want to display different skins for successful and
unsuccessful dial attempts. Here an example in code:
funfunction dynSkinning() {
if(frmHome.xTBX.text != "nuil") { frmHome.btnDynaSkin.skin = successkin;
110
AA
konyi%
You MUST ensure that skin exists for the widget in the IDE before the code is executed.
The following table llsts the widgets and platforms which support dynamic skinning:
Widget
Android/
Android BlackBerry
Phone W"ntlows'
Tablet
6.x
Form
Yes
HBox
Yes
VBox
Yes
Yes
Button
Yes
Yes
Yes
Yes
Yes
Yes
Yes
ComboBox
Yes
Yes
Yes
Yes
Yes
Image
Label
Yes
Yes
Calendar
CheckBoxGroup
Yes
Yes
Y(-s
Yes
Yes
Line
Yes
:
IE:
Yes
Yes
RadioButtonGroup
Yes
Rich Text
Yes
Yes
Yes
Yes
fes
Yes
Yes
TextArea
Yes
Yes
TextBox
Yes
Yes
ScrollBox
Ves
Yes
Signature
Vkle:
Yessupportec
on 6 x)
Yes
Copyright2012KonySo!u1ons,lnc. CONFIDENTIAL
221
XA
Preprocessor Statements
kony
There are times when you need to write code that applies to only a specific platform
You can use the kony.os.defineinfo() API, but the statement will be compiled for
every platform and be part of the code
if def is a compiler directive to selectively compile code only for a certain platform.
Syntax is: // #define <identifler>
Defines an identifier.
//#undef <identifier>
> Removes a defined identifier, or does nothing ifthe identifier is not defined.
// #ifdef <dentifiei>
Tests whether an identifier is defined, and parses the code block until either a #endif
or #else directive is reached.
// #fndef <identifier>
Tests whether an identifier is not defined, and parses the code block until either a
#endifox #e/se directive is reached.
111
AA
kony
// #else
Acode block executed when #ifdefor iifndef return faise. Code is parsed until a
#endif directive Is reached.
// #endif
Android
Eventobject
kony
When a function is called from a widget event, information is passed to the function about
that widget
For example, if I assign a function to a button onClick event, I will get passed in that button
object that was clicked
function whatsMyText(myButton){
When I hook that function up, the system passes me the event object:
tWwtrMlltwwr
Sdn>fu-tt.-< -.tM,r(
I I ru-me ..'ijii'.'.I
hj<* * - .
.^--t-
V,*
<dE -
-o,
112
XA
"
Exercise - Eventobject
kony
Objectives
" Pass a widget into a function as an eventobject
Concepts
The Phone Services API provides hooks to the native location services
When a function is called from a widget event, information is passed to the function
about that widget
Procedure
This exercise will extend the earlier exercise in which you created a login form
Write one function that will be hooked up to the onclick event of both the Login and
Help buttons. Your function will have to determine which button was pressed.
If the Login button was pressed, get the vales of the User ID and Password TextBoxes
and print them to the log. Also, you should clear out the text in the TextBoxes.
If the Help button was pressed, access the Geolocation services and print the result:
XA
kony
kony.location.getCurrentPosition(onGPSsuccess, onGPSerror);
function onGPSsuccess(position) {
kony.print("
Latitude:
kony.print("
Longitude:
kony.print("
>>Error code:
kony.print("
Message:
" + posError.code);
Run it on the Android emulator and check the log for your results
"
113
'i'
kony
With your app still running open a cmd window and enter these commands to set the
"current location" of the emulator:
telnet
locaihost 5554
Press the Help button again to see that the "current location" of the emulator has
changed.
D/StandardLib<
768>:
D/StandardLib<
D/StandardLib<
D/StandardLib<
D/StandardLib<
768>:
768>:
768>:
768):
D/GpsLocationProuider<
D/GpsLocationProuider<
D/UM FunctionC
D/UM Function<
D/UM Function<
D/StandardLibC
D/StandardLib<
768):
768):
768):
768):
768):
52): flLARM_WflKEUP
52): startNauigating
Non Synchronized Function.execute called.
Executing the La Function
Dispathcing the function
45.99989833333334,
D/StandardLib<
768):
>
"
kony
There are times when you need to store data on the device. For example:
LocalStorage APIs allow the users to store and retheve data in persistent store on the device.
The data stored using the LocalStorage APIs is accessible only from the cllent-side for Thin
Client platform.
"
kony.store.setltem API
kony. store. setItem(keyValue)
If this API raises an exception then the list associated with the object is left unchanged.
keyname - Specifies the key name for which the tem needs to be set.
Value - Specifies the value that must be set using the given key. This value can be a
number, string, Boolean, or an array.
Eg:
114
Store APIs
kony
kony.store.getltem API
kony. store, get tem (keyname)
This API returns a structured clone of the current value associated with the given key.
Ifthe given key does not exist in the list associated with the object then this method
returns nuil.
keyname - Specifies the key name from which the tem needs to be fetched.
kony.store.removeltem API
kony.store,removeitem(keyName)
If no tem with that key exists, the method does not perform any acton.
keyname - Specifies the key name for which the tem needs to be removed.
Store APIs
kony
kony.store.key API
kony.store.key(index)
This API returns the name of the nth key in the list.
If n s greater than the number of key/value pairs in the object, then this method returns
nuil.
index - Specifies the index for which the key name is to be returned.
This API allows you to empty the datbase by clearing all the key-value pairs.
115
kony
Objective:
Be able to utilize the Data Store API to store and retheve data to/from the persistent
store on the mobile device.
Concepts:
store APIs allow the users to store and retrieve data in persistent store on the device.
Procedure:
This exercise will add three buttons to our Login app: Save ID, Recall ID and Delete ID.
When the Save ID button is clicked, the vales in the TextBoxes should be saved to
When the Recall ID is clicked, then the vales should be read from persistent store and
After you have this working, then selectively enable and dlsable the buttons depending
on context. For example, Recall ID and DeleteID should be disabled unless something
is stored.
a'
. I *
kony
5554;!conyavdmap
116
WebSQL APIs
kony
The WebSQL APIs allow applications to store data in databases, that can be queried using
a variant of SQL.
The actual datbase used for storing the data and its visibility to other applications is
defined in the following table:
liSWBWSiffrBH
applications
Phone/iPad
SQLLite
No
Android/Android Tablet
SQLLite
No
Blackberry
SQLLite
Yes (SDCard)
Windows 6.x
SQL Server CE
Windows Phone
SQLServer
Symbian
SQLLite
No
SQLLite
Browser Implementation
Note: For BlackBerry, these API are supported only on 5.0 and above versions. SD Card
must be created to use the WebSQL APIs on a BlackBerry emulator.
'
XA
kony
This API allows you to open the specified versin of a particular datbase.
"1.0",
117
XA
kony
This API allows application to execute the specified transaction on the given datbase.
kony
kony.db.transaction API
function mySuccessCallback()
{
Business logic
118
?.'-.
kony
kony.db.readTransaction API
kony.db.readtransaction(dbaseObj ectld, TransactionCallback,
TransactionErrorCallback, Successcallback)
On invoking this API, it returns immediately and asynchronously reads the transaction.
kony
kony.db.readTransaction API
function mySuccessCallback()
{
Business logic
}
119
kony
This API allows you to execute a specified SQL statement on the given datbase.
On invoking this API, it returns immediately and asynchronously reads the transaction.
arguments (optional)- Specifies the arguments for executing the SQL statement.
Vales can be NULL, REAL, TEXT, BLOB or nuil to ignore this parameter.
''
'""-
"^
'"
"
kony
Jcony.db.executeSgl API
Usage:
kony. db. executesql (transactionld,
successCB,
errorCB);
kony.db.executesql (transactionld,
"Kony") ");
function errorCB(transactionld,
err)
120
kony
index)
resultset,
i);
Note: Use resultset. rows. length to know the length of a result set.
XA
When using the binding "?" placeholders, ensure that the number of binding
kony c
For example, the following statement can cause the datbase to be inconsistent:
var stmt3 = "insert into EMP_DETAILS vales (?, ?,?,?,?,?) ";
kony.db.executeSql(tx,stmt3,{'1', '2', '3 '},successcallback,errorCallback);
Nested datbase transactions are not supported across platforms. Avoid starting a
new transaction in the successcallback function of an existing transaction.
The error codes might vary between the platforms. This is due to the fact that
underiying SDKs do not expose all the errors that can be mapped to HTML5 WebSQL
Specification.
121
kony
We've hooked up code to a button's onclick event. Here are some other example of events:
Events triggered by the user like: clicking a button, selecting a value from a dropdown,
user clicks a men tem, the user changes the orientation of the device, etc.
So far we've only created action sequences of one action: invoke function
It's the Event Editor, that we use to define an Action Sequence for an event and we'll now
look at what we can do with this tool...
122
kony
Events are exposed on the property sheet in the Event section AND possibly n the
properties for specific device types
"Not Defined" means just that - the event has not been configured yet
Property:
Name
4
Sequence
Value
Code
Genera.
title
frmHome
None
renderer
headers
None
footers
None
enabledForldleTi neout
faise
type
FORM_TYPE_IMATIVE
Action Sequence
( Appearance
- Skin
* yJxvtT^
jr
NotDefined^C
NotDefined \
Not Defined
]
init
preShow
onHide
onDestroy
postShoirV
\.
Not Defined
Not Defined S
Edit^^-^
i-- iPhone~~"~-
kony
Existing
| OpenMw-g [Ato.
actions in
the flow
Managing
. Toim r,m
Naming a
Iniert beroic
ln;trt>tttr
Invokt MBvKt(AjyTichronoui!
the
actions:
Nvitjmtoorm Poptip
makes it
Add Mipping
global for
Show titn
-i :l Pr.procei (;::,
copy, add,
Add Ottmcfi
delete and
sequence
AddStvpptr
use
elsewhere.
move
Available
actions
123
XA
kony
Navigate to a form/Popup
Add Mapping
Show Alert
Add Snippet
Invoke Function
Invoke Sequence
Add Comment
Add Local Variable
124
a'
Mapping Editor-Overview
kony
The Mapping Editor is used to pass data from one object to another - a graphical way to
say "this = that" or the "Target' = "Source"
Mapping editor helps in reducing
the coding efforts
The Source and Target llsts are
context sensitive (based on how
Mapping Editor-Source
Global Variables
H8NKeys
Skins
and Target
kQfC
Global Variables
Note: i18n Keys appear only in the source because vales cannot be assigned to them once
they are defined.
^^^^^^^^-T^^^^^t^^^^T^^^^^^^^^^^^^^^M
125
When mapping a collection to another collection, map the parent objects first and
THEN map the Individual children.
Tabs are listed under form elements. Henee, you cannot map any data to a tab widget
using the Mapping editor.
Note: The Mapping Editor supports one-to-many mapping, that is, same element in the
source can be mapped to mltiple elements in the target.
kony
Objective:
Procedure:
The idea is that when a user clicks the Login button, we want to:
126
kony
g^n
XA
Expression Editor
kony
The Expression Editor is used whenever you need to assign vales to objects that can't be
done using a simple mapping (a = b).
The Expression Editorgives you access to all form objects, API methods, skins, etc.
I Qfc I
CompileI
127
ExpressionEditor
frmHome.btnDynaSkin.text =
n*,t,
+ 'ncHome.xIBX.C
.>vr. .- | ;
Clear |
* '.-:.
m.-.-i
HQHHBC
Expression window shows your
expression as you crate it.
Event Object
Variables
raiirr\-..<rri (-(Jatea
lrmHa*ntMfti2>nBfattS -
Finished expression:
Expression Editor
frmHome.btnDynaSkin.text * Content Assist is enabled in this text rea
128
r
Action - Expression Editor (cont.)
kony
If we look at our last exercise, we mapped our text from the textbox to the text on the label.
In the Mapping Editor we can do that by right clicking our Target and adding an expression:
r
Right-click the label's text property.
I "
a Bt Mrt
Cancel
I Clear j
. Compile I
telilla I
a V
Vaoautn
a ayJ(.i/il.n,;.. ,.:
2- u-.rr)., t
kony
Navigate to a Form/Popup
asease
r
Allthe forms and popups defined in the application are
listed in the dropdown.
129
kon3^
The Mapping editor associated with the navigation routine will be different than the
standalone Mapping action.
In the Mapping action, you only have access to the form itself.
In Navigation, the mapping Source will be the callingform and the mapping Target will be
the form being navigated to.
The limitation of the Mapping editor is that you do NOT have access to OTHER forms in
your project.
Access that data from the expression editor in the mapping action.
Store the data in a variable on the other form and retrieve the data from the variable.
A A
kon*1
affije 10:22 PM
helio, rm form A
form B
10:23 PM
We want to navigate to
form C AND show the
130
y',
kony
Here's the Mapping for the navigation to form C (from the button on form B):
-
..-*
a*
r
r
1/
kony
Forms stay in memory until explicitly removed (we'll talk about how to do that later).
To go "back" to a form, just navigate to it, it'll just re-show the form already in memory
Note that some devices have a hardware back button. Clicking that will also automatically
show the previous form.
Android, BB and WP7 have hooks you can use to control what happens.
Android
C^^_ onDeviccBack
MM.H_\TM
*m-3
in*m
i*
o.
__3^* Defined
onDeviceMenu
Not Defined
headerOVertap
faise
footerOverlap
faise
i fWitkwt,
1.
t_
r
r
Note: by adding "code" and doing nothing, you've effectivelydisabled that button. WP7 and
BB have seprate properties (Enable Back and Ignore Escape) ifthat is all you want to do.
r
131
kony
Objectives:
Be able to use the Expression Editor along with the Mapping Editor to pass data
between forms
Concepts:
The Expression Editor is used when you need to assign vales to objects that can't be
done using a simple mapping.
The Expression Editor gives you access to all Form objects, API methods, skins, etc
In the "Navigate to a Form/Popup" pane of the Event Editor the mapping source will be
the calling Form and the mapping target will be the destinatlon Form
kony
Procedure:
When the Login button is clicked, navigate to the second form, which should have a
label on it (identlfying it as Form Two) and a button.
When the button on Form Two is clicked, navigate to Form Three, which should have a
label and a button.
Set the text of the Form Three label to read: "<User ID> authenticated" , where <User
ID> is the value that was typed into the User ID TextBox on Form One. Assign a
custom skin to this label.
When the button on Form Three is clicked, navigate to Form One and clear out the
TextBoxes.
132
S5
frmThree.IblAuthentication.text =
1 ok |
Cancel
1 Clear | \
| Compile |
4
000000000000000
Select the below tems to build expression
WSSB 9:30 PM |
Enter your XYZ login credentlals
User ID:'
&BI]4B4:16PM
Password:
133
kony
Add Decisin
8; Evenl iditor
Define Action Sequence
I Action Sequence
+ Decisin :a==b
i/tme
_Alert
[2] Form/Pcpup
lkony
e *
This action item is used to execute small code pieces without defining a function in JS
FiWn^firi
1 .llmt faMI 1*i-hlrii -1 HH*lr.l -t*
aDC.at^cabe.ButciaMM -
ca~
Cnp4a
v.::
i- :.-
134
'
kony
Useful to match code to rendered widgets Qust like #if def in code)
"
_ -", TI'..fntwan
For more granular control (down to model number, for example), use the
kony.os .devicelnfo API cali
XA
Show Alert
kony
Define Alert -
Type: Serror
General
to the user
MeiiageType: constant
!nternationali:ation
General
"
^Message;
confirmation
C ^ e n t A ^ e n a h l e d i n , , - is te* ares
1 > 1
' Compile
la
Tille:
OK Label:
Android platform.
H[x]
135
Actions (cont.)
kony
Add Comment
This action item is used to provide a comment to document your action flow
Used to crate a local variables (String, number, Boolean) to use in your action
sequence
MaM
Define Columns
VMocIyyr twM
Dat
p mylocalColiection;'!
* FintName::trmg
SalT>pr Uia^j
iS* Addrewes::co!!ection
* Street"String
* city;:stiing
'* iiptode::itring
simple example
collection example
kony
Global Variables
Defined services
/ ScraperView
"*fcn applicationKey::string
jff glbLabe!Navigaticn::co.lection
Ix] glbPageCcunter;;number
'^33glbTotalPagecounter::number
to glbReviewCount::number
"tn glbSearchText::string
a? glbTb18ackHcme::collection
33 glbTblBackProductL5t::ccllection
'aglbsSearchbuttonClicked::boclean
Txj glbLblCategcry::string
Jp glbTempcataD::strng
L DataStore Keys
Refresh
it. srvBestBuyHome
.1, srvPrcductList
Edit/delete items
jj,, srvProduct6ySearch
'* srvProductDetai
Add
El
dt
Delete
Refresh
jJt srvPrcductReview
ebservke-scap services (0)
9 javaservices (0)
** composite services (0)
** scraper services(0)
jsonservices (0)
tmplate services(0)
** looping-connector services(0)
''; Global Event Sequences (0)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^H
136
r
Event Editor - Services View (cont.)
kony
Global Variables: They are used to store data across the application and are of two types:
Simple - Data (String, Number, Boolean) can be assigned.
Collection - This is a data set that has mltiple records. You can add as many columns
as you want to a collection and then add data to them.
m
Define Columns
Name: myCollection
Data
* P Cu5tomers::collection
r^ii
9 FirstName::string
* LastName::5trng
** Age::number
s rS1 Emai!s::collectcn
v* DisplayName::string
v* Email Address:: string
v* isPrimary;:boclean
r
Note: All the global variables defined here are accessible in the JS code modules but the
global variables defined in the JS code modules are not accessible from the Services
view.
XA
,
-i*
kony
Creating global variables in the Services ViewONLY tells the IDE how to display that
variable in the various editors
< Using the example Customers variable below, the following line of code will execute
jUStfine: Customers=[fred="A", wilma="B"]
" When using the editors, however, you won't have access to a "wilma" key since it
wasn't in the definition (never mindthe fact that now there actually IS a wilma key)
Define Columns Data I
* cS3 Customers::collection
FirstName;:string
9 LastName.:stiing
<* Age::number
i ceP Emails::collection
9 DsplayName::string
v* Emai!Address::string
9 hPtimary.:boolean
For maintenance, you knowthe "shape" of the data without having to paw through
someone's code to see how they set the data in that table
For access, you now can access the data through the editors making activities like
data mappings much easier or even possible
r
137
kony
Dafa Store keys: These are used to save data on to the mobile device persistently using
event editor. Data store keys can be defined only from Services Tab. Even data store keys
are of two types:
Note: The data stored in these keys are saved on the device using the device's native data
storage mechanism
Save data - assigning a value TO a key saves that data on the device (the data store
key is the Target)
Read data - assigning a value FROM a key reads that data from the device (the data
store key is the Source)
Clear data - assigning "" or nuil to a data store key, clears the data from the device
kony
Data Store keys can be used to save data to persistent storage using Event Editor.
Assigning data TO the data store keys triggers the data save
Data from variables (IName &
Target
FilterBy: All
Search:
W Variables
3 glbLengthmumber
cP IData:co)lection
p IName:strng
cfP IID:string
rff1 lDesig:string
m lName:string
I DataStore Keys
en gdsMyName-se5sion:string<->Variables.lName
cr? gdsMyDetail5:collection<->Variables,ID3ta:add
m lName-se5sion:5tring<->Vaoables.lData.lName
m l!D'Session:stnng<->Variable5.lData.lD
cd !Desig-se5sion:5tring<->Variables.IData.lDesig
ames.
138
AA
kony1 *
Data Store keys can also be used to read data from persistent storage using Event Editor.
Vxessing the data from the Data Store keys reads the data from device memory
HtiDy : Al
j '* *; ":
'
fH Ftn f<mO*t5*wttUyi
*
t*fcct
Mitm
< Common
,T1 >>wWfcvvl**"
-.
- ,rl*if
'>."
rn , b< k*MrboolMn
277
XA
Eventobject
kony
Many times an event will have some data associated with it.
For some Kony events, you'll get passed various pleces of information in your event
callback function.
A typical example is that you're passed the widget that raised the event. You can have one
function handle 3 widget click events simply by checking which widget raised the event
programmatically and coding accordingly.
This automatically generated parameter is called the eventobject and is exposed in the
event editor.
"
MHM.WtMl(M.
IwaC^Kt
iii|ii
'
139
XA
kony
Invoke Sequence
3B
Input parameters
Param name
Valu
$ Event Editor
Action Sequence
4
Alert
4 <<S true
{:] Function:returnStnng
Globalsequence: goHome
,J Snippet: frmHome.I...
j7i]Form:frmHome
XA
kony
It's pretty easy to get confused when trying to map more complex business loglc in the
event editor - especlally if you're using data, manipulating tables, etc..
UNTIL YOU BECOME A PRO... use the event editor for straightforward things - the types of
things we've done so far
Coding it allows you to match the series of steps and code the flow of events
sequentially.
It's best that you learn to master both techniques - you'll be able to determine exactly when
to use each technique.
Bottom line - if you find yourself getting all "wrapped around the axie" doing something in
the event editor you're probably doing something wrong OR doing it in code is better.
140
"
kony
Overview
kkony5^
ComboBox
ListBox
RadioButtonGroup
CheckBoxGroup
Slider
Picker
These widgets help us gather some user Inputs by selecting one or more of the available
options that are presented by this widgets.
They also have common methods and properties for getting and setting information.
141
ComboBox/ListBox - Overview
kony
A List Boxwidget allows you to select single or mltiple tems from a drop-down list.
For example:
Selecting all the mobiles that a user has from the list of all brands. (ListBox)
In the Normal state only the default selected item would be visible.
On selection, the selected item is displayed on the ComboBox/ListBox and the list Is
closed.
Note: For the ListBox, check the Mltipleproperty check box on the IDE to make multi
select. It s set as a single select by default.
kony
For the iPhone, use the View property to determine how these widgets get displayed.
J Omer
142
kony1*
Images of how all the other devices display the ComboBox widget:
Android collapsed
Sdssors
r
r
{J
S-wr^
Android expanded
Windows Mobile
Palm Pre
Rock
Rock
Rock
Paper
Scissors
Other
Pp#r
Scissors
Sduon
Other
Ottwr
235
* *
kony
The Phone, BB and J2ME allow you to choose the Image used for the dropdown indicator;
i.e. the arrow mark at the end of the combo box is customizable.
Use the Dropdown Image propertyto browse for the correct image
The dropdown image size vahes from platform to platform. For example:
iPhone 3 : 32 x32
Phone4 : 64 x 64
BB
: 10x10
When the size of the text is larger than the size of the ComboBox/ListBox:
-
The rest expand the widget height and the custom image will get stretched to fit
143
kony
CheckBoxGroup/RadioButtonGroup
kony
CheckBoxGroup allows you to make one or more selections when you have many choices.
When you select a check box, a check mark appears inside the check box to indcate the
selection.
[japple
Jorange
I>/1 banana
| Jklwl
RadioButtonGroup allows you to make one selection when you have many choices. When
you make a selection, a dot appears in the radio button to indcate your selection.
i Jverymuch
l J somewhat
144
selection.
n n uch
_^__
i*
listView
tableView:
faise
v'alje2
toggleView:
Value 3
onscreenwheel
"
145
X'
koni%
To poplate data to any of these widgets from the IDE use the Master Data property.
Checking the Use as test data in preview mode to ONLY use these vales during preview
With all selection widgets, both the Key and the Display Value are available for the selected
item(s)
XA
kony
Objectives:
Concepts:
'
A ComboBox widget allows you to select a single item from a drop-down list.
A List Box widget allows you to select single or mltiple tems from a drop-down
list.
CheckBoxGroup allows you to make one or more selections when you have many
cholees.
RadioButtonGroup allows you to make one selection when you have many
choices.
146
kony
Procedure:
-
SBDe 10:12 PM
Darkral
Snorlax
ComboBox
Plkachu
ListBox
RadioButtonGroup
L ;Groudon
CheckBoxGroup
l " ,'Wallmer
(".'Octlllery
[^jBulbasajr
1>f JCharmander
JSquirtle
293
A a
kony
In JS, we can poplate the selection widgets using the masterData property.
masterData takes sets of key-value pairs. For example:
myForm.myComboBox.masterData = [
["a",
"very much"],
["b",
"some what"],
["c",
"not so much"),
["d",
"not at all"]
seiectedKeys takes an JS table of keys and seiectedKey takes one item. For example:
myForm.myListBox.seiectedKeys = ( "b", "c" ]
myForm.myRadioButtonGroup.seiectedKey = "a"
Note:there are no update data methods. Reset masterData to show new/updated vales
147
kony
Use the seiectedKeyvaiues property if the widget was set as multi-select. It returns the
array of selected key-value pairs . If nothing is selected, the return value is nuil.
Use the seiectedKeyvaiue property ifthe widget was set as single select. It returns the
array of the selected key-value palr (singular) . If nothing s selected, the return value is
nuil.
Slider Widget
kony
Slider is a widget that you can use to select a value from a defined range of vales by
movlng an indicator in a horizontal fashion.
Set Mnimum and Mximum vales in the IDE (vales must be integers)
All slider value properties are read-only properties - can't set these vales in code
Slider widget is available on: iPhone, Android, Blackberry, Windows Phone 7 and Palm.
148
kony
The Slider's onSlide event is triggered with a change in the selected value. This event is
called for every valu change AS you are sliding.
Typical use is to update a label with the value. Use the widget parameter to know
which slider (if more than one) was changed
The onSelection event Is triggered when the selection is made. This event is called when
you have stopped sliding (ralse finger or stop presslng arrow keys)
function onSlideCallback(sliderObj)
Keep processing to a minimum in the onSlide event. Doing anything processor intensive
can make for a poor user experience
kony
149
kony
A PickerView widget uses a spinning wheel metaphor to display mltiple sets of vales and
allows you to select a single combination of vales.
You can select a single combination of vales by rotating the wheels and aligning the
desired row of vales with the selection indicator.
1HF
Ford
H
Suzuki
LHonda
uu=.
Green
2010
Blue .
2011
I Green
2009
Suzuki ! Blue
2010
Honda ] Black
2011
You can set the data through the IDE using the Master Data property.
kony
sa
'
I:
Currently, you can only use text for the display value (no images).
150
kony
Like other selection widgets, you set the data using the masterData property.
masterData takes sets of key-value pairs, for each row along with the width. For example:
[ [ "d", "Ford" ] , [ "c2", "Suzuk" ] , [ "c3", "Honda" ], ["c4", "Chevy"), ["c5". "BMW"], ["c6", "Kia"], 40 ],
[ ("y1", "2010"] , ["y2", "2011"] , [ "y3", "2012"], 30],
r
PickerView - Know What was Selected
kony
mm
Suzuki ]Green
Honda
Blue
Chevy JBlack
'2010
2011
2012
151
kkony.V-
To set the data for a specific component, use the pickerview. setComponentData method
componentlndex: is the component ndex you're setting the data for (starts with 1)
{ id:"picker",
[ ["yl","2009"],["y2","2010"],["y3","2011"],
[ ["mi","Jan"],
["m2"
40],
"Feb"],["m3","Mar"),["m4","Apr"], 60
] ],
isVisible:true,
seiectedKeys:["y2","mi"] };
|<ony*
widgetAlignment:constants.WIDGET_ALIGN_CENTER, hExpand:true,
containerWeight:99};
"2012"]));
152
r
r
"
componentlndex: Is the ndex (starting at 1) of the component you are setting the default
for
2);
Switch - Overview
kony
The Switch widget is identical to the Switch Control (on-off switch which is noncustomizable) in iPhone.
fo
OFF
The Switch widget gives you the flexibility to customize the text and the image of the switch
to match your requirements.
r
This widget is available only for iPhone, Palm and Advanced Thin Cllents
r
r
r
153
s*
kony
Left Text:Specifies the text to be displayed on the left portion of the Switch.
Right Text:Specifies the text to be displayed on the right portion of the Switch.
Right text
tSw
Wtntu>.P<*pti1in
Uyto feup /
W^j.
/
,[*1I"-iJf
**/+*>*
size .
!...'-- F;.-
es
S
jT
jS
*~~
a~
k-;\-*
containerWeight:99};
//Creating the Switch.
var swtch = new kony.ui.Switch( swtchBasic, swtchLayout,
{} )
154
4'
kony
onslide: This event is triggered when you slide the Switch and there is a change in the
selected value .
index =
index = i
swtch.selectedlndex
index =
swtch. selectedlndex
if(index == 1)
kony.print("on left side")
"
kony
Considerations:
Use a switch widget when you have a single question with 2 possibitles.
Typical usage Is as a switch: on/off, yes/no, 0/1. Typically sets the state of a value
Since this widget is not used across all platforms, you will need to use another widget
for those other platforms. Remember to turn render faise for the ones where you use
the switch.
- it's a NATIVE Phone look so definitely use It for iPhone. Using it on non-iPhone
advanced Thin Client platforms could look out of place to the user.
155
"!
kony
All platforms:
J2ME platform:
If you do not specify the focus skin, it is not possible to identify the traversal.
Thin Client:
The ondone event is not supported on the basic versin of thin client as the Java script
s not supported on browsers of basic devices. You'll need to trigger getting the
selected value some other way
kony
Objectives:
Concepts:
The Slider's onslide event is triggered with a change in the selected value. This
event is called for every value change AS you are sliding
Procedure:
PickerView configuration:
Have a bunch of vales in a 3 slot PickerView (car makes, colors and years).
156
kony
Slider configuration:
y 10:10 PM
]J-
Suzuki
P"!
Honda
Red
2009
Chevy
Green
2010
Button configuration:
157
kony
| Segment Widget
1 Debugging-Inline debugger
^^^| Module - BrowserWidget
Copyright2012KonySolutions, It c.
CONFIDENTIAL.
315
158
r
4'
Form - Overview
kony
Form is a visual rea which acts as the topmost container holding other widgets required
to display a basic application screen.
Form Is the starting point of an application.
Any number of widgets (Container, Basic, and Advanced) can be placed in a Form. But a
Height of the Form doesn't have a llmit and is determined by the number of widgets
present in the Form.
A widget placed directly n a Form always occupies the entire width of the Form.
Height of a widget is determined by Its content.
mmmmmm
O Applications 3
is
set
as
"Mark
kony
c,. Navigator
"
B G]2 TestApp
B forms (2)
as
B *Q mobile (2)
the application.
E-lfuHSOSP
,- frmHon-
\ desktop (0)
1 6 popups (0)
Copy
H Delete
Rename
Ctrl+C
Delete
F2
Mark as Start Up
Set Nature
! v/ webjnodule (0)
B < resources (2)
f Fork
; Refresh
F5
Only the form marked "Mark as startup" during the designtimeis loaded into memory
when the application is started.
" Other Formsgets loaded into memory ,when an Application gets loaded.
r
-
159
kony
0*
A Form s defined to have a Ufe cycle method that gets called at appropriate events. These
events will allow you to manage the application for better handiing of resources.
Property:
Name
Value
4 :.; General
2.
Init
3.
preShow
4.
postShow
5.
onHide
title
frmHome
None
renderer
Phone:true,Andrcid:tru...
header
Nene
footers
None
enabledForldleTimecut
faise
type
Appearance
6.
onDestroy
G Skin
* & Event
init
Nct Defined
preShow
postShow
Not Defined
Not Defined
onHide
Not Defined
onDestroy
cnOrientationChange
Not Defined
Edit.,.
kony
Application ininazed
Actions
-callsioivO
ve addWidgets()
160
kony
addWidgets
addWidgets callback event is invoked by the platform when the form is accessed for
first time after its construction. This function gets executed only once on in lifetime of
the form. If a destroyed form is accessed, the form is re-initialized and this callback s
once again invoked. This event is explicitly triggered for dynamic widget construction.
Ex :- Assume frmDynamicform is not yet initialized. Then the addWidgets lite cycle event
triggered for any of the following methods.
frmDynamic.labell
frmDynamic.title
frmDynamic.show
y\
kony
Init
Init is Invoked only once in the form's life cycle, when the form is ready with the
widgets hierarchy. This is called after the "addwidgets " method, and allows user for
the one time initializations. When form is destroyed and reused again, init gets called
as a part of form's lifecycle.
preShow
This event is triggered just before the form is visible on the screen.
This event is called even on device back or while navigating backto the form through
title bar navigation tems.
Note :- in case ofTC preShow and postShow will notget executed when navigating using
browser "back"
161
kony
postShow
postShow is triggered every time after the form is rendered on the device's screen.
During the execution of the network cali in this event, user cannot perform any action
on the form and a network Indicator is displayed.
This event can be used to display other forms (e.g. Interstitial screen) during service
calis
For example, here is where you'd cali the backend service to retrieve the data to be
shown on this form.
Gets called even on device back or while navigating back to the form through title bar
navigation tems.
onHide
This event is called when the form goes out of the visibllity.
>
XA
kony
Objective:
Be able to understand the execution flow of all the lifecycle events of a Form.
Concepts:
Initevent is triggered after the addWidgets event but before the preShow event.
The preshow event is triggered just before the Form is displayed when a
formName.show() or a "Navigate to Form/Popup" action is called.
The postshow event is triggered after the Form is displayed to the User.
Procedure:
162
I
I
r
kony
Now crate another form consisting of three buttons with text as "Go Back to Login",
"Destroy Login"
On click of "Go Back to Login" navigate back to Login form using formName.show()
method.
On click of "Destroy Login", destroy the Login form using formName.destroyO method and
navigate to it.
Now on launching the application, as the form is initialized first time, all events get
executed and you will see all the print statements.
On click of "Go Back to Login", only pre show and post show events of Login form gets
triggered.
On clickof "Destroy Login" all the events of Login form gets triggered as life cycle again
starts.
"
163
XA
Segment - Overview
kony
Segment acts as a predefined tmplate to poplate mltiple rows or records of similar type
of data at runtime (same as the iPhone table view)
Segments are typically used to show a list that can be:
tftr
Here is the form at
runtime.
Ccoy DVDFJye' trijWG
139.W
<-.-...mi .-
'
design time.
Dynt*m DVDW^*i
wthMO UpcioTvfrUon
fc5*n0vD*yw
Men
kony
Button
Image
Label
Line
Link
Rich Text
Phone
Box
Switch
ge applications
f Alarm Clock
72.00KB
1 Android keyboard
* 80.00KB
^P 0.00B
Browser
"
5.81MB
Calculator
4f
0.00B
Camera
336KB
H com.android.gesture.builder
If a button is used in a segment, you can have a seps rate onClick event for the button and
the for the segment.
328
164
"
mimBm^^^m
Segment - Orientation
kony
Segment as a layout allows widgets to be placed either vertically or honzontally using the
orientation property.
This property should be set before adding any widget to the segment.
Setting this property to BOX_LAYOUT_VERTICAL means:
A widget placed n this segment will always occupy the entire width available.
You can use an HBox widget if you need to allgn widgets honzontally
Segment with widgets aligned vertically
kony
Awidget placed nthis segment will always occupy the entire height available.
HBox widget cannot be placed Inside a segment in this orientation.
You can use an VBox widget ifyou need to align widgets vertically
Segment with widgets aligned horizontally
first Name
Last Name
details.
Employee ID
Designaren
Vertical
165
AA
Segment - Views
kony
The viewType property indicates how the segment widget should be rendered at runtime.
The viewType property can be set to table or page view
SEGUL VIEW_ TYPE_ TABLEVIEW:
Each populated row of the segment tmplate would be placed one after the other
vertically in a tabular format.
-:::^rv. 'lame
Acccun: L5l:-n:r
Accounts Overview
Checking 494
$2000.34
Segment at runtime
Checking 490
S400
Checking 495
1000.19
Savtngs 567
$4000
A'
kony
SEGUI_VIEW_TYPE_PAGEVIEW:
Each row can be accessed using the left or right swipe gesture on the segment rea.
Page indicators (optional) will be displayed at the end ofthe segment to display the
pagination.
Need Page Indicator: Specifies if the page indicator must be displayed when in a page
view.
PageOnDot Image: Specifiesthe imageto indcate that the page is currently being
viewed.
PageOffDot Image: Specifies the image to indcate that the page is notbeing viewed.
Note: No default dot Images are displayed if"Need Page Indicator" property is set to true
and other two Image properties are not provided.
166
; t
kony
On touch devices, right/left gesture on the current row rea will result in the
next/previous row of the segment respectively.
On non-touch devices, like Blackberry Bold, left/right click of the keypad/touch pad
provided will result in navigation to the prevlous/next row of the segment.
Accounts Overview
Checking 494
Accounts Overview
Checking 490
Checking 495
ka
kony
Apart from the earlier mentioned views , Segment also persiststhe following view Types:
SEGUI_VIEW_TYPE_COVERFLOW
SEGUI_VIEW_TYPE_STACK
SEGUI_VIEW_TYPE_LINER
SEGULVIEW_TYPE_ROTARY
SEGUI_VIEW_TYPE_INVERTED_ROTARY
ir Appearance
oriental.. BOX.LAYOUT.VERTICAL
margin Edit
padding Edit
Sire (pix( (448,200)
widtt 448
heigr 200
Size(%)
(100,45)
width 100
heigr 45
'
SEGUI_VIEW_TYPE^CYLINDER
showScn true
viewTyp. tMI&WlhAM-JMma
needPag true
wem 1
Platform
Valu
U\ Default (All)
SEGU.VIEW.TYPE.PAGVIEW
Phone
egulvie'.v.tvp.page'v'ie'.v
segu vie1,'.' type coverflow
Cancel
JC~
SEGU.vlEW.TYPE P.OTATORY
SEGU.V1EW.TVPE INVERTED ROTARV
167
kkony*
Select the Use as test data in previewmode option to use this configured data only for
preview mode
WAcouriB-ame.txt
I IbWccountHame.i lSiy
KAccountf3al.txt
1IjUccouiBalJlftey
Chedong-49-1
Norte
110
Hone
Checking-190
None
S1900.20
None
Chedong -B5
Hone
S1200.16
None
Savings567
None
1600
None
XA
a
*i%
kony
To set the data dynamically, we need to provide a set of key-value pairs for each "row" of
data.
The key should match the widget name and the data will be what is displayed by that
widget
For the example on the previous slide, our data might look like:
mySegData =
{biAccountName
{biAccountName
{biAccountName
{biAccountName
:
:
:
:
"Checking 494",
"Checking 490",
"Checking 495",
"Savings 567",
biAccountBa
biAccountBa
biAccountBa
biAccountBa
:
:
:
:
"$2000.34"},
"$400"},
"$1000.19"},
"$4000"}
Use the setData method of segment API to assign the data to the segment.
For example: myForm.mySegment. setData (mySegData)
The segment will then update to show this dataset (if on the current form)
The data corresponding to a widget will not be shown If its widget ID mapping is not part
of the assigned data.
168
kony
To do this, you must set up a widget data map that tells the segment which piece of
Also send a dataset to a Segment using other keys (not the widget ID)
<object Array> is a collection consisting of key-value pairs where the key is the
widget name and the value is the key in the dataset.
[{acct
{acct
{acct
{acct
"Checking 494",
"Checking 490",
"Checking 495",
"Savings 567" ,
bal
bal
bal
bal
:
:
:
:
"$2000.34"},
"$400"},
"$1000.19"},
"$4000"}]
We could now cali our setData method and the segment would know where to get each
piece of data and which widget to assign it to.
kony
Hidden columns of a segment allow you to store more data, for each row, than s displayed
n the segment
For example: you want to show the account name and balance but you also need to know
the account ID f the user selected that row but don't want to displaythat account ID to the
You have access to ALL the data (displayed and hidden) in the user selected row
user.
1 Define your segment as we've done before with the 2 labels for account and balance
For the selected row, you can now access account name and balance (both displayed
to the user) and accountiD, the hidden piece of data
169
kony
Open the dialog and add your hidden columns and identify their data type
Once done:
These defined hidden columns will be visible in Master Data property and can be
populated like any other column
You can also specify data for them using the segment's widgetDataMap property
I lidden Columns Cdilor
XLttftiGgMWnjn*
) Irpt
MtttB
(P1
f*
f"*
kony
Followingcode snippet sets the data for a segment dynamically along with the data for
hidden columns:
:
:
:
:
"Checking 494",
"Checking 490",
"Checking 495",
"Savings 567",
bal
bal
bal
bal
$2000. 34",
$400"
$1000
$4000
19"
,
acctID
"103'
acctID
"104
acctID
"105
acctID
"106
>r
},
'}
'}]
" Then map your data (not necessary if the data keys match the column ames):
myForm.mySegment.widgetDataMap={biAccountName:"acct",biAccountBa:"bal"}
Altematlvely hidden column value can be assigned to some widget in the next form
using expression editor.
Note: ifyou do everything through code, you don't need to set up the hidden columns. you
can access the data by the key(s) in the dataset
170
r
Segment - accessing the selected row
-i*
kony
The segment exposes these properties to retrieve the data from the selected row of the
segment:
x^
n.
selectedltems [ o ] : will returns the actual data of the selected row n the segment
along with the hidden data (if has). The returned data is an object.
cP
r
-i ^
In our example, if the user clicked on row showlng "Checking 490", then:
myForm.mySegment. selectedlndex
willbel.
"$400"
selectedData.acctID ->
"104"
Note: If we used the widget/hidden column ames (no widgetDataMap), then we'd access the
data with those keys.
i>
kony
You can access the segment's selected rowthrough the Mapping Editor
As a Source, the segment will make availableit's selecteditemsproperty
-.,._ 1
'
T'JZT'
^-_l
Shows
<?33~ r^i
selected vales
:E~
mapping the
segment's
to other labels
on the form
- M
":z:.~\
"
171
Segment - Skins
kony
widgetSkin
Specifies the skin to be applied to the entire SegmentedUI.
frmOne.segOne.widgetSkin= seg2Normal
rowSkin
'
This skin will be applied when the segment row is not focused/selected
You can set this skin value In code. For example (assuming I have created a segment
skin called "skSegmentNormal"):
myForm.mySegment.rowSkin = skSegmentNormal
mmm*m
'i
kony
rowFocusSkin
Determines the look and feel of the segment row that is focused/selected.
Important to provideto give user feedback when he/she selects a row (critical for nontouch devices to see which row is focused)
You can set this skin value in code. For example (assuming I have created a segment
skin called "skSegmentFocused"):
myForm.mySegment.rowFocusSkin = skSegmentFocused
172
kony
alternateRowSkin
Specifies the skin that is applied to every other row in the segment when not in focus.
You can set this skin value in code. For example (assuming I have created a segment
skin called "skSegmentAlternating"):
myForm.mySegment.alternateRowSkin = skSegmentAlternating
sectionHeaderSkin
This skin is applicable only when the Need section headers property of the segment Is
set to frue.
You can set this skin value in code. For example (assuming I have created a segment
skin called "skSegmentHeader"):
myForm.mySegment.sectionHeaderSkin = skSegmentHeader
kony
If we wanted to do this exercise ALLn the event editor, here's what we would have had to
do:
Type
prcductlD
text
IbIName
18key
IblPrtce.trt
lblPrice.18fce',
picture fame
None
SI 2.00
None
1001
teapct
None
S3959
None
1002
None
ares rug
None
S129J0
None
1003
None
cabinet know
Norte
SI.59
None
1004
None
-.-
None
S38.29
None
1005
None
prcductID.txt
productlD.il6k...
None
None
173
XA
-i*
kony
Objectives:
Concepts:
If the widget ames and data keys don't match, the widgetDataMap method can be
used to define a mapping from data to widget
Hidden columns of a Segment allow you to store more data in each row than are
displayed in the Segment, but you have access to all of the data
kony
Procedure:
In the form's preshow event cali a function that creates a local array with the product
data using keys called: "name" and "pnce". For example:
var segData =
Set your Segment's widgetDataMap property to map the keys ("name" and "price")
to the Label widget ames.
Note: Aslong as the Master Datahas the Preview data option checked, it'll NOT be used
when you compile and run.
174
*4
kony
1. Change the Array object to have a 3rdpiece of data "productID" and poplate those vales
with some unique numbers ("1001", "1002", etc).
2. Crate a new Form with 3 labels on it: IbIProductName, IbIProductPrice and IbIProductID.
3 In the Segment's onclick event, cali a function that sets the second Form's 3 Labels with
the data from the clicked row and then show that second Form (remember, use
formName.show())
nibJjJ^
alcture frame
1:02 AM
$12.00
lea poi
'rug
SBD 1:02AM
Jarea rug
$129.50
$129.50
cablnet knob
$1.59
jish sel
$88.29
Il003
Oh, and feel free to add a back button to the second form (use event editor)
kony
Note: don't delete your code, justdon't cali it. You'll want to be ableto hook your code back
up later on and be able to run it both ways (for the master data, for example, to turn that
"off", and set it in code, you only need to check the "use In Preview" option and it'll not be
used when you build).
Turn off yourcode in pre-show (thatset the data) and use Master Data.
It's important you know how to manage segments andtheir data BOTH ways. As we move
on into more advanced stuff, you'll see which technique makes sense for you.
Sftj]<3 1:07 AM
Jigure frame
tea uoi
$12.00
$39.99
$129.50
Eish_set_
175
kony
Kony Studio provides a Debugger to detect and diagnose runtime errors in applications.
Debugging Server is hosted through Kony IDE using Kony JS Debug perspective in
eclipse.
ADebugging Client will be embedded into each application during the build process.
When launching in Debug mode, this Debugging Client connects to the debugging server
using the IP address and port number configured with theapplication during the build
process.
Both Server and Client application shouldbe running on the same network for debugging to
work.
This design allows the developers to debug an application remotely running on a device as
well as on an emulator/simulator running locally.
176
kony
Kony Debugger can be used to control the execution of an application using the following
available options:
Examining the content of each variable during the application flow using the variables
view.
Note: Kony Debugger allows only one platform to connect to the Server at a time.
kony
Ensure that the following Kony Plugins are available in dropins/pluqins folder of the
eclipse:
'
"
org.keplerproject.ldt.debug.core.jar
org.keplerproject.ldt.debug.ui.jar
org.keplerproject.ldt.launcher.jar
While building an application for debugging, ensure to select the build mode as debuq
LU
Jtate;&JM
App Settorj; Najive App Splosh So-gen (Native App, SPA) Mobte Web Desl-top Web Push NoBficabon
"3
f"~ Remove pontstatements mcustoni modules {Recommended teltma for proaucOon relase)
Note: To avoid tompiation nsues please have the print statemenls n a mote Ime.
177
Jrs-
Run
Wndow
Hetp
11> - o 4
Kony I Hb 1New.configuratioo
Debug As
^Navigator
beb
OrgarWe Favontes...
9 EdcseAppkabon
5 JavaAjjpW
"L lavaApotcatan
1 HOSfc
' |locawst
A JUnit
jij JUrHPtug-iTest
.,'Kony Acrjiication
B <S KonAppkatwiAndiod)
I Showdebupoernetworkconvnurvcation consol
IP wvr^connojratJDn
#. Kony ApokabonPrione!
# 05& Framework
, RemteJava Appkahon
:tmatt!*dl.of liilems
I Cebjg |
Posa
Note : Incase of android Debugger Port should be changed to Jetty HTTP Port.
VL
Inline Debugger - Kony JS Debug (Android) kon-v
Once the Debugger is started then an application will be created with the name of the
Debug Configuration.
To view this application Click on
O *
UJ
*t ~ O - <4, *
Window -> Show View -> Other -> General -> Navigator -<Jg Kony JS Debug | Debug
Here the name is "New^configuration".
Kony
p
^
^
l*
^
lP
applicaticn.js
appskins.js
fimSegmentTet.js
frmShowDetails.js
konylibrary.js
segmentmodule.js8
Q startupjs*
^ segmentmodule.jsU i-.
-><>
var sec/daca
BS9tei
id:
),
"abe",
"001"
pnce:
r.air.e:
id:
i.
"22",
"def",
"002"
178
kony
2? Kony JS Debug | yi Debug | | Kony Lfj Resource
^ startup.jsS
S kony.appIcacior-.secAppli.cariorJ'Iode
1 var appCcnfig
appld:
"5egir.enr.3asi.cEx",
Disable Breakpoint
a. Tcggle Breakpoint
^ frmSegment
^ applicaticn.j:.
QrkShift-Q
Show Annotation
1 v'
re"
Preferences...
Breakpoint Properties...
frrr.5esrr.er.r.est.GlofcaIs O ;
frir.5r.cwDetaiIsGlobal3 () ;
136
kony.phone.dial(eventobject.text) ;
137};
kony
startup.js:
This is a platform generated file.
Invoke the global method ofeach form to initialize all the properties of a form.
This global method will be in form JS file.
init
c pre-appinit
post-appinit
Global Variables Initializations
179
kony:
- t^.K*~,K&Z _
0:,
I ~> I
^,~
4 ^ n -,,.11 -i
- ,_
, .
I... .
X,
Q
*-*r~--*
[ |
i.. . *
1. Debug View
(i]
2. Variables View
*m
3. Breakpoints View
4. Emulators View
El
5. Script Editor
6,Outline View
7. Consol View
SnJ.i .i mi.
8. Expressions view
...
/ 11 -
i iuicu- wr
5A
Inline Debugger - Debug Perspective (cont.) kon-i
Debug View:
This view allows you to manage the debugging of an application.
Step Controls, Resume, Suspend, Terminate options on this view can be used to
control the execution flow of the debugger.
>Debug a T
m
7* ; . =s.
,
j? jJvsScrptThrtad (Suspended)
_,.,...
= applnit [startup.js3:19]
Breakpoints View:
= thertiecaiiBackrtartup.js3-.22]
Breakpoints View can be used to view, modify or disable the breakpoints which are
added.
Breakpoints %
U
o Breakpoints
'<* s?
V \ lD | t - R
1* Variables
Valu
. *
stack frame.
4
>
tObject] (d=6)
params
[Function] (id=16)
constructor
launchmode
1
"'
180
4<%
Inline Debugger - Debug Perspective (cont.) kong.i
Script Editor:
This Editor is used to view the required application logia
Code will be debugged in this editor. Breakpoints can be added or removed using this.
Outline View.
This view displays the list of all the user-defined or platform generated functions within
a JS file which is opened and focused in Script Editor.
Consol View:
This view will list all the logs and Information related to debugging flow.
It will also display the print statements used by a developer in the application flow.
It will also list the stack trace incase of an exception during the application flow.
Emulator View:
XA
Expressions View:
"-"
t* * 0 * <, * * / *
"'
ft,1
* . * <& *
;.-.
*SBl'DDj
p ttjftupjs* n
Object] (idd)
C'Qi Emulators 8
.
-D|
4 . Emuldors
LBktesIolt(|i
Android
4 K f'tcbiie
*T3
fm3eijiKCi:Te3!;GlobaIa (j;
f mShowecsiiaSIctali |) ;
X GiluyTib
Device;
t: Badenj
181
kony
'I ** # I
The Step Into control (F5) of the Debug View allows you to step into the next method
call/line at the currently executing line of code.
The Step Over control (F6) allows to step over the next method cali (without entering it)
at the currently executing line of code.
The Step Return control (F7) allows to return from a method which has been stepped
into.
44
kon*i
Setting up an application for debugging onan Phone simulator needs following additional
steps:
Build the application that needs to be debugged with debug option for Phone platform
on Kony IDE.
On Mac machine, goto the folder where the iPhone plugin ofKony has beeninstalled.
Open a Terminal from this folder and navigate to your plugin folder (OS-GA-5.0).
Now pul the application codefrom Windows machine using extract.pl script as
follOWS:
Now build the application for simulator on Xcode and run the same by selecting
KDebug OS Device with some PhoneliPad simulator.
"
Stop
Scheme
182
r
Inline Debugger - Kony JS Debug (iPhone)
kon-\ *
Name can be
anything
>
-
r
Make sure the IP and Port
V.
%,
- , *'&JVSl*nKnmnet*t-.1/^nt<a4
r
J
183
AA
Inline Debugger - Kony JS Debug (iPhone) k *Y"*
Makesure navigatorview is part of IDE. Follow the steps belowto add navigator.
Wxow
Help
New Editor
Open Perspective
| QAppkatjorts
Custoftwe Perspective..,
Save Pspecbve As...
Reset Perspective...
ose Perspective
Cise Al Perspectoves
O Emulators
IEnterprise Explorer
EOuline
.Project Explorer
.Services
Navigation
kony
<
*. .project
ES 0
^ appkca&on.js
t?1 appsions.js
$* DetxjgMeglobaSseguences.js
<P ftmOne.jS
P tonytbrarv.js
i^Sampte.jS
(? st/jrtuD.is
JSSampleApp
stArtup.js
* Sanrte.js ti
. jcunction xys () 1
"Kolieata"
key3:
"RyderabBd"
"Pune",
key2:
for
{var k
in x)
emulator.
kcr.y.prir.t Ccev
)e -
"
Valu
*^i"
mi
-. =
Pnor*_Detxj9[Kan*Aortcanonrphone))
- # JavaScro(TrTead(SusptnorcO:f<
184
Carrler "=
kon*i *
11:32 AM
Start Debugging
Now debugging started. Use Step Into to see the result n xCode consol and enjoy.
r
Inline Debugger - Considerations
'
4
kony
Always ensure same code s running on the debugging server as well as on the application.
Once a debugging session s terminated, remove the respective instance from Debugtab
using following option by right-clicking on terminated instance and selecting: Termnate and
Remove
A terminated debugging session can also be relaunched from the Debug tab using
following option by right-clicking on terminated instance and selecting: Relaunch
If you get one of the following errors when starting a server:
"
Re-launch eclipseand start the debugging server. This is required as sometimes the port is
not closed even after terminating and closingthe debugging session.
185
kony
Objective
Be able to set breakpoints and use the inline debugger to Inspect JS code
Concepts
A breakpoint can be set n any JS file in the Navigator [Debug created application]
The vales of program variables can be Inspected in the Variables View in the Kony
Debug Perspective.
Procedure
Take the Segment exercise and try debugging it with the inline debugger
For this, you'll want to debug BOTH your own JS code and generated JS.
Play with examining simple data and complex collectlons (what is the segment's
selectedltem look like in the debugger?)
Get comfy with this tool! It'll be VERY handy as the exercises get more complex
186
kony
For example, to display the Terms & Conditions using the main .com website WITHIN an
application (instead of opening a native browser as a seprate app).
By using browser widget, the flow control still remains within the application. If native
browser is used to open a URL, then control is transferred to the native device.
The rendering capability of the browser widget is still the same as that of native device's
browser.
Each platform evokes its own rendering engine which generally is same as the default
browser of the platform.
The address bar is not visible when Browser widget is used. (In comparison, there is no
way to disable the address bar when launching the browser by using
kony.application.openURL(URL)).
v'
-i*
kony
Static content
x
Browser Dolo
Gcfc on column name to sort
** &$aa
<~ URL
Content
<bodp
-
<hi>MyfVstHeadfig<)*il>
<p>My firstparagraoh,<fp>
<ybody>
<Aitml>
187
-\ *
URL
r
3rowser Dota
Clickon column name to sort
C Content
URL:
i? URl
|http://finance.yahoo.corri/q
Method: jget
_]
Key
Value
goog
<*
'
iv ote
r
:- Dynamically set the static content using htmIString method. Bind the URL using
equestURLConfig method.
Copyright2012KonySolutions.lnc. CONFIDENTIAL
375
Browser Widget
kony
Browser widget can be used to crate a hybrid application wherein t acts as a main data
container of the application while menus and application title bars are displayed as native
components
Sulla 6:33 PM
Button
E-mail address*
Password*
Browser Widget-
App Men
188
Browser - Events
kony1
Sample Usage:
This event is triggered when there is a probiem in loading data with the requested URL.
function browserOnFailure() {
var
str
"Unable
to
load
the
URL"
kony.ui.Alert(
{
"message"
str,
"OK",
"yesLabel"
"Error",
"alertTitle"
constants.ALERT_TYPE_ERROR,
"alertType"
"myone.png",
"alertlcon"
i.i (
"noLabel"
nuil
"alertHandler"
377
Browser - Events
kony
onSuccess:
"message"
: str,
: "OK",
"yesLabel"
: "Info",
"alertTitle"
: ALERT_TYPE INFO,
"alertType"
: "myone.png".
"alertlcon"
: "",
"noLabel"
"alertHandler":
}-
nuil
{});
i^^^^^^R
189
kony
detectTeINumber:
Specifies if the browser widget supports the detection of phone numbers in the web
page and displays the phone numbers as clickable URLs.
Ifyou do not want the Browser to detect the phone numbers, set the value to faise. By
default, the value is true.
Availability - All platforms. On BB, default value is set based on the device constraints.
enableZoom :
Specifies if Zoom (ability to change the scale of the view rea) and Pan (ability to
change the content in the view rea by moving and sliding) must be enabled.
screenLevelWidget:
Specifies if the browser widget must occupy a major portion of the device screen.
kony
'
Though browser widget is slow to render, it has an advantage over the RichText widget in
terms of performance while rendering HTML contents.
If the input text has a lot of HTML tags, the browser widget can be used for better
performance to show the contents.
For example:
<h3>Message from ABC Corporation</h3> <pxfont color="red",
size="3"XB>***If you need to book or change flights on Swiss
Airlines, please cali ABC Corporation directly at 277-472-1891, so
that a Customer Service representative may assist you.***</B>
</fontxbr/xbr/>
If the input text does not contain full HTML tags and is limited to RichText and well
nested, the RichText widget must be used.
For example:
<b>Please note: fare rules are subjected to change </b>
190
kony
Similar to the native browser, it is possible to navigate between screens in the browser
-
For example:
frmHome.browserOne.goBack()
A*
Browser - Considerations
kony
The Browser widget uses a lot of initial device memory. The memory usage increases
in proportion to the number of images and static text rendered.
If there are mltiple instances ofthe Browser widget in the same application, there may
be issues related to sharing of information (cookies, for example).
You cannot have mltiple Browser widgets in a screen. As a guideline, its best not to
have more than two Browser widgets in an application.
Limitation: Browserwidgetdoes not change its orientation along with orientation of the
other widgets of the form.
191
kony
kkonyA'-
For every application, there are a lot of project level properties that determine how the app
will function.
Project properties:
Application level
Kony Server
Build
App Settings
Native App
Desktop Web
Push Notlfication
192
kony
Right-click the application for which you want to set properties and select properties
r
_^
1"
M . . . w : . % ^ , v m W ^
-_'-' 'J
- >
Openbcrwcc Dcfrrttion
ci*c
(A KD*fte
Mhtt
- !'"
" :-w
y cw
,/jfkua
- A,,;
>
OntX0*veiit"tL8i%Ji}etUtt'
***#>
1:::
!.-J
T'*"'"^-!
1 ^IriT
M| M||
*ii>*j
-.,..
M**
| t*
->WMnw
*>*<
**"**"
u i *nn
< Be . .
M M i :--
w*
^hWTlaVM
- A muiA. *M
-(*!.!
*****
Win
EMWMOm
"S>W [ H*M
:"ilw
"1
-,
-"
'.--.
"***-**"*
P*
<vM>*tr'>rl 1
** "cu
S.StaDcWfe
SX-^-h^r-*..
M| lili !<
un
1. -^/.'. T..IH-T,
nHIII
r ** n
c*
1/
Application Properties
kony
,-.,.,
JDJ.
Apphrntinn PioprrtH-'.
*>K.pon \o",
**."
)<ctSvDT^i Suid AppSewqi Sjsr.e * u+Svttr,fmv*w,3*) ***:web DelopWeb Vmtiiw'
rMrk-*ttve*SiGnTl
noni
Dn>^iJ*Unl
'wO**Vetf j or*-mnt
wtr>VieS
pou~min>
iwMm
xm-^iww
HotOetWd j tni-jfemt
HwrOefnM
AMf.
'-jtOe-M
l*t.Oined
twow'jywi
uxrvrvM
ttaMftmK
IMLVfad
UMtmaDo-drjrihrr: [""
<***;-i.e)9etWY: |~"
Reference action
| ^g I C**w
193
kony
saans
->
L_
OTU^>*T *CCWW NM'** !*^^I..AC>, t**J ***(. [**,Vtt !\*<*WiW
on what port
Set up web
context for app
and server (uses
"AppID" and
.UTtLnrIMa>m^
"middleware" as
default)
Enter basic
authentication
credentials f
required
(Applicable to
Native
applications only)
Build Properties
kony
2=E
Ajfiptir_aliun l'njfji-d
L_i
.**. lp*#TV."pUr>-JW>.*) **** OwtMpWO "*"***"*"'
Mfeerj
<
Debug or Relase
<
To remove print
statements
P &^>*>ttiSffepfl
BB and Windows
Mobile options
Select "Use MDS
for BlackBerry
Mobile Native
App" to enable
the device for
wireless
connectivity
194
r
-
I.T
kony
App setting allows to
enable application level
settings
,-
tfA^i*... |
Key:Unique identifer
"T""
Keyboard Type:Specifies
a keyboard type if display
option set is textbox
Default Value: Specified
the default value for each
key.
Cn.
toiOS
kony
a,"1 ,',"",-i
Afipln niiiin Piopurtmi
Q
: *rt)>rav= 'o.<W'jf^^tm^s,*Aop,iPA)\ ***,.o ZxseA *\ahtoCrfcMon
Colors for
}<
''eyiX'fllCM*':
">?':**
message
(foreground) and
screen (background)
Play a mp4 ,
ominanturuon(fi wconkj:|
m4v,avi,mov and
3^J
_J
_l
_l
mjpeg Video
while App loads
Images to show the
spiash screen
animation in both
Portrait and
SwtH*RkMI
Landscape Mode
195
A A
kony
Shortcut icn
for iphone,
fav icons for
Web
Browser and
title of the
app
Check if
HTML5
outputs will
access GPS
Select Phone
Format
Indicator to
highiight the
telephone
number
kony
3ZC
Applicolion Proponas
L3; *:*w
srooeoe*
*hwx?wiQ4i^-uch-<er^6lorinmerv. |
WebpnMi (t#*un-te);
1.9
|U
_J **H.-i , >.;,:
1
'
^j tMM * (p
j "Nef MMi
1"
|l
-*n.h1M0(p.):
Base Font
"3 p^UO^M}!
1"
jW.0w0:
I--
sizes for
~3 Mtt 1fr):
|
[U
iMMnMtM
^JNth^lp.),
1"
1"
~3 B"l*"v ?&)
Select
appropriate
si
various
categories of
browsers
196
kony
1.T--..1
AppUcobon Prapnrtipa
'<Jto*.StltT<T.(H.w*w. !FiJ,MBtilrlW)
[**%>Wrt> ISrf.M(*fc-l=n
twHuKn
r
-^>l'*V0't'>*0
>j)nOr W eU
MWKStnwDeu* S*A
JWmilr'ni..'^
J^J
Xe| Of|pw>;
|~
iMVt
A A
kony
H.T'V-l.m-1
Applirnlifin Pinpnfliii it
.w | A
HBfclw.i [TwcTw.gV
lT H ^ l M b M l M A VA
'I
though the
_J
siteminder.
Context ID is
used to set the
context path in
the URLof an
application
0"1
197
kony
Applir.fiiinn Piipcrtirr.
..ebi>cjr :'
_l
_l
from a URL in to
-applicaion.Click on *)
to add a row
kony
application
198
\A
kony
va.f-m.if
Alipln-.iliin I Top (!til 6
-
ttRniWT (ttMn.a):
Specify a
DfBJttto-**ii*TOlm-oe 1
MH i OW
default
downloading
Jmage that is
displayed
instead of blank
page
r
!.*
Uno*
kony
ananana
AipfniIhih PfOpQfhn
wt>t>o-r Pwo.-*): |~
width and
"3
'eWrwmnHtjt:
alignment can be
set
Enter a message
to be displayed to
the user if browser
199
Push Properties
kony
. jqj K
AfipliLdliunPlOpMtn
Function to
Atotuto" iun. Mr.p Uetak B. U
* Mm*itk<H*M**^S
be invoked
<
"when an
Push
notificaron
is rece ived
ll
kony
- -I.,-1
Applu ntmn Prurn-rlu-T.
'
Dmm ^JVsrrri
togo: |
toi i7 r/wn ka *.je** <* i*nr~ In Tus" ixv' ** *" **
200
kony
Bundle identifier is
application bundle
COTVOfXitrtOtZiarOM
Bundle versin is
eiVt*ae. [-os:
the versions of
application bundle
hrM
Qrrt**n.Saw*r?. |
if
Mh
*< EvuptMnaVfert
..
:-
fu
Soban Kjntonig
UM
P*fWr IVvBoTir
tWMftM
Un
trp^tOscaoof. i'ivT,oe
-eifert.Motw
Ub
laJIeJattOMM]
C**"* TtT!S)
i*" 3_canoM;> j"O
Ata
C-txW
kony
m.mw.m!m
Appilcaban Propoftias
MoMtWtfe
Camari f+m-fTfAndr)
VXPOrteti KreertJ
name
P tufOrrmfi
P >t\*I'jattr*
P tonn* tan
ntftiMteiw
TT*)et: (7: 3
r CJDM
I* Lerasccer*
P CaTkeUrajikree
P UM LtXajXJW PreVencc
r^r>r->*i<i wvw
T*e Mo>nj **rm*e<er ere rtt Id Vue'
OZM.P*jn><lJ*J9(T)jnj'
lC>3BJfVCJ0CMl
WRMT
'
te &_n*vKf_n wsw
KXSBjM :_>i**l
Af'tn i r Kcarn
urtvencAiT.Jwrcwr!
I
_J
Select the
appropriate
permissions
required for your
application
OA-iUcr IAT3
MIjtfMnDGgl
e?cjt.:cr_Ai>ci
too p*v* M9M30
201
kon ^*
Service Identifier
Pattern specifies a
regular expression with
which application will
be launched through
message or e-mail
SrnevttkMknlStlcM* J-.Ti^tjijv
i*rx M*ru leo uexl: | aootceuntet!
identifier pattern is
recognized , a popup
appears showing the
application to be
provided in Service
Men Item Label
|__f> iiJi_~<ij
Copyright2012KonySo!utions.lnc. CONFIDENTIAL
403
kony
b:
A|i|ilti:nlinn Pl,i|,i'llii.
*tvjiif>iatA>.j.A) WM-mt, :
3 *uttrnt\j*r'
We can set
Windows Views
horizontally next to
each other and
uses a long
horizontal canvas
202
I
r
.vm>-ii4e-Uj2J
Windows Phone
7.GuID enables to
__
as application icn
r
r
-
L3
Jkr*V.tlwn Knry Vt-vt-t I>'j fiulrt fti cntinpiS
Mango (7.5)
1 rhrflor*
Ke-neie:
the application
Se*.lMwJeleFw)e.
Select 3D Models
*e m tatu'
tn f*.,>
tVK*,r*i>nri>.
ro.CAP.carACTS
ID LaV MMJtyjVttlj
m_rj^_mR,Trrv_riJF4iCi'
!
_J
ID r..V WDWUi
m_ra."_mirn (ivi #
HJ_C*i'_H. I
-...,
r
-
203
> **
kony o
Application life cycle events are used to achieve a functionality for an application during the
initialization process.
Description
Customize Code
pJJijijij^rJJr,JijijHr,j^rJJ^r,jij^rJ^rJ^_
Spiash screen
No
pre-appinit
Yes
appinit
Application is initialized.
No
post-appinit
Yes
addWidgets
No
Init
Yes
preshow
Yes
Startup Form
No
postshow
Yes
a*
kony
Note: Events for pre-appinit and post-appinit can be configured separately for Tablets
and Desktop Web.
Initialization of defined Global Variables and Data store keys defined in the services
tab.
204
kon*<
Using global variables, data store keys, skins in pre-appinit event handier will result in
"nuil" as they are not yet initialized at this point.
["appMenuItemldl","Accounts",
"iconl.png",onClickClosurel];
var appMenuItem2 = ["appMenuItemId2",
"Payments",
"icon2.png", onClickClosure2];
var appMenu =
[appMenuIteml,
appMenuItem2];
Note: setAppMenu method should be called only once and must be set in this event
AA
k -i *
pre-appinit can be used to specify the events that need to be executed when the
onactive-. This sspecific to iPhone. This state occurs when there is an incoming
SMS, phone cali, or anything else that interrupts the automatic lockof the mobile
device.
oninactive-. This is specific to Phone. This state occurs when the application has
been idle for a specific time interval.
onforeground:: State which indicates that the application is active and running in
the foreground.
205
kony
Status: Indicates the status of the device. The different statuses are
^''"^*"
<'
All the global variables, data store keys, skins are accessible in the post-appinit event as
they are already initialized.
Following are some of the scenahos for which this event can be used:
Forc an update ofthe application from Market place by displaying a confirmation Alert
on versin check.
206
If the post-appinit function returns a Form, then that form will be used as startup
return frmPayments;
}
else
return frmServices;
}
For example: Retrieving lcale bundles from the server using a service cali
Anew Form can also be displayed In post-appinit to display an interstitial screen while
making a service cali. The sequence of events is:
207
"
..
kony
Objective
The IDE exposes two events for application initialization: pre-appinit and post-appinit
Ifthe post-appinitfunction returns a Form, then that Form will be used as startup
Procedure
'
Clicking either button will save, to the device, the name of the corresponding form
li yULB 6:PM
Exit
&|J)6:41PM
V 'fifflilJJ 6:PM
OR use the
kony.applica tion.exit()
javascript function to exit the
app
208
r
A'
kony
Remember, the Konyserver will retrieve the data from the "backend" source and pass it on
to the client.
r
r
Mobile Device
Kony Middleware
r
209
Data Connectors
kony
communlcates with an external data source using an XML data connector over the
HTTP protocol.
communicates with the external data source using SOAP interface. WSDL URL/file
is required to configure these services.
communicates with an external SAP Server using Custom SAP Connector over the
HTTP protocol and returns a response in JSON format.
XA
kony
connect the WebSphere MQ Server/Windows Server over the HTTP protocol and
returns a response in JSON format.
communicates with an external data source using JSON data connector over the
HTTP protocol and returns a response in JSON format.
210
XA
Service
kony
Service - an application component that represents the application's Interaction with the
The IDE provides out-of-box support for connecting to XML, JSON and SOAP services.
In case the external data source does not expose the services through these Interfaces, the
developer can build a custom Java service.
Every service must have a unique identification in the form of service ID.
r
Once individual services are defined, you can combine the services to crate a Composite
service.
This is helpful when data is made available through more than one type of service.
kony
Once the services are identified and created, they are bound together in the Service
Definition file.
The Service Definition file contains your service configurations for exchanging data with the
external data source.
Service Definition files are copied to the server so the Kony server can follow the definition
and exchange data with that external data source. Copying the file is called publishing the
services.
The Service definition file must be published to the server for your application to work.
Every time you add/remove/change anything for any service, you must republish the
service definition to the Kony server - the IDE does NOT provide a way to run services from
the app.
Note: Generally, services point to external sites and you must ensure that access to the
external site is enabled in your development machine. Similarly once the services are
placed on the server, you must ensure that access to the external sites is enabled
from the server.
vmmmmrm
-
'
211
kony
Identify the web service - we'll use a Fox News public RSS feed for our examples
XA
kony
Right click the application and in the "Open Service Definition" context men, select XML
" ' .'.<l..l.'lJ.'.TTP5?Wgflff>ffl!Tl
services and give It a name.
Edit
Navigate
Fe
Edit Navigate
Search
Project
Run
Window Help
f^lfrmTest
Search Services i |
y-' 9 R5Tful Services (1)
S ^ other (1)
^
Ctrl^c
Java Services
Delete
B. Librories 0}
JSON Services
F2
. _ * * . Refresh
Kony
X toa
Copy
Run
s$ SarnpieApp;XML 5ervice
E3 frmTest Uj
XDelete
Project
1 X iQa- |
[*j GP Kony JS Debug ? Debug j : : Kony [j^jRowurce
QAppkc... Zl '-- Navig... ^
Search
] JC^jvh
Cornposi te Services
Locping Services
FS
SAP Services
Siebe, Services
8 i. modd ***
"
f\ ./nb ,
- -
Manframe Services
212
kony
User ID / Password: Provide this information if the external web service requires form/basic
authentication.
URLprovider. Enter the URL Provider file name. URL Provider is a Java class that
manipulates the URL or the parameters of the URL for the external data source.
Timeout (in ms): Specifies the mximum time (in milli seconds) the service waits for a
response, before terminating the connection to the external data source.
Services
** X ti
SearchServices : |
e i3 RESTfulServices (1}
B $ other (I)
t> SelectedServices(0)
a. branes (0)
* DefineService
Service ID":
| be;tbu.search
URL*:
Jhttp://api. remix.bestbuy.c
ittpHefl
|get
-.v.. prc3'j:tr:>
Preprocessor Class:
Browse...
Browse...
Browse..,
Postprocessor Class:
Browse...
rtmeout (inms):
DCachabie
User ID: |
NTLMHost: |~~
Password:
IfnJMDomari: |
kony
Preprocessor: Acustom Java class deployed on the Kony server that is called before the
service cali Is made. The preprocessor can affect the inputs to the web service. Identify
the .jar name in this property.
Postprocessor: Acustom Java class deployed on the Kony server that s called after the
service cali is made. The postprocessor can affectthe outputs from the web service.
Identify the .jar name in this property.
Service.
* K a
Search Services: |
Define Service
Service ID":
| bestbuysearch
Http Method:
|gT
|hr^;//ap.rerri,x,bestiwv.cDm/vl/prrj^^
8 ^ other (l)
fit bestbuysearch
L_. Selected Services (0)
. liraries (i)
^Preprocessor Class:
jcom.kony.preprocessor.SamplePreProcessor
Browse.,.
postprocessorClass:.
Browse...
Browse...
Icom.konv.postprocessor.SamplePostProcessor
Browse...
Timeout (n ms):
Cachele
P Baste C MTLM
User ID:
MlMHost: |~~
Password;
HTLH Dornain: |
213
kony
Cachable: indicates whether the server response will be stored at the Konyserver cache or
not:
You can optionally pass the Cache Duration value (in seconds) which tells the
middleware to hold the results In the cache for the given duration.
If this service is Cachable and a service cali, for the same data, s made before the
specified time duration, the service response is fetched from the Cache.
| com.kony.preprocessor.SamplePreProcessor
Browse....
Browse...
Browse...
Postprocessor Class:
| com.kony.postprocessor.SamplePostProcessor 1Browse...
Timeout(mms}:
Cache Durstion (see):
Stive AuUienualiuii
? Basic C NTLM
User ID:
Password:
NTlMHost: f"
MTLMDomain: |
Response encodtng
xa
kony
Hffp Proxy: Configuring the proxysettings enables you to connect to the external services
from local machine through a proxy server. Enter the connection information here.
If passwords are used (the service password and/orthe password forthe proxy and/orthe
password for service basic authentication), then they will be encrypted in the service
definition file if the Encrypt passwords while generating servicedefinition file checkbox is
checked.
Cachable
Serve AuUienliLdlJuii
C Basic P NTIM
User ID:
Password:
MTLMHost: ||
MTLMDomain: |
214
Creating a Service
kony
Give service a name (Service ID), specify URL and provide HTTP method of service.
Click Get Response to test and view the results.
w
ja;.
Define Service
-v other (I)
GET
Http Method:
0 bestbuysearch
fil Setected Services (0)
LS m-. Libranes (l)
]bestbuysearch
Service ID":
SearchServices : \
zi
1Browse... 1
Preprocessor Ctass:
URL Provider Class:
1 Browse... 1
|b,..|
Postprocessor Class:
Browse... I
Timeout (ims):
CacheDuration(see): |
-
(* Basic (~ rTUM
User ID:
Password:
NTLMHost: |
(TLM Doriiain: J
Response encodmg:
j UTF--
"3
** Request/ Response
Reauest Response
__
Our Response
<?xrril^tYtesri*etlVef-7vl/xd/Mri_prettY
kony
r
r
FoxNews has many other feeds such as: latest, scitech, entertainment, health, etc.
We'll now need to crate the definition for that input parameter
* Define 5ervce
Service ID":
foxnews
|http://feds.nj3meM.corj.;foKne:vs/sne.vst>Tje
Http Method:
'--
215
kony
ID: a unique identifier for a parameter - this is what we'll use to reference this
parameter in our code.
Tesf Value: the value to be used to test the service within the Service Definition Tool.
This value is not the part of the final Service Definition file.
Scope: this identifies the source for the value of this parameter at runtime. You can
choose either:
session - t will be passed by the server (note: we'll talk about how to get that data
on the server soon).
Datatype: the type of the data. The datatypes are defined here and are used for
mapping appropriately in the Mapping editor.
Encode: set to true or faise. Specifies if the URL needs to be encoded for this
parameter or not.
kony
Add
Test Valu
wstype
worid
1Scope
1
Datatype
string
Encode | D scnptton
1
Request Response
Sconle
yProjress
ony5tudoConso!*
<channeT>
<desfliliJUi.^l L^LujHai.urt.-^.bkcHxj.'rYouDeade.</destriptx)
98-29-2012 05:06:49]
216
r
XML Web Service - Output Parameters
kony
Output parameters allow us to Identify which pieces of the returned dataset we want to
return to the calling device.
"
ONLY send the data that you need. Trimming the dataset saves bandwidth (sending over
the cell network) and processing time (device retrieving the dataset).
In our example, we'll return a serles of news articles. We don't want all the data so we'l
configure output parameters for:
kony
ID: The unique name that we use in our code to access this value.
Xpath: the Xpath expression for extracting the required data from the service results.
Scope : this identifies the source for the value of this parameter at runtime. You can
choose either:
response - to have the server send the data back to the calling device.
" session - to have the value stored in session on the Kony Server (can be used
now as an Input parameter for another cali).
Record ID: Groups data elements under the specified parameter as a record.
Collection ID: Groups data elements under the specified parameter as a collection.
Format Value: Standard for converting to the specified format: Number, Currency,
Date.
217
kony
By using the Formatcolumn of the Output Parameters tab, the format of the Output fields
can be set to: None, Currency, Number or Date.
Format Value column can be used to provide the conversin standard for the selected
format.
Example:
Suppose the response has date fields which must be converted to a different Date
format in the results. You can choose the Formatas Dafe and define a TargetFormat in
Format Value.
Request Response
<copynght>Copyrght 2012FOX News Network</c.opyright>
XJ
SrcFormal:
Results]
Test
I Scope
I XPath
|Wvv-MM-dd
| Datatype
//channel
strrng
item/tjoe
JFinshj Cancel |
strmg
channel
tem/link
string
channel
I-tone
item/descnpbon
strmg
channel
None
item/pubDate
strmg
channel
kony
In the output parameters section, identify those data elements you want to expose for the
application.
We'll use the title, publish date and description of each article.
Set up output parameters by writing the X-path (to fetch the vales) for each of these as
follows:
HttpHeaders InputParameters^ OutputParameters
Results]
Scope
IfsL
1 Datatype
! Collection ID
string
Reco..
item/iink
string
/channel \
/ channel \
None
link
dase
tem/descrtpbon
string
charmel
None
date
item/pubOate
string
\ channel /
None
dtate
item/dc:date
string
Ndxarir^/
Date
rjtte
item/rjrJe
None
None
MM-dd-yyyy
X_^
The News parameter is the basis for our collection of news articles.
Note: In this case, in our code, we will access the collection of results using "News" and
specific tems by "channel.title", for example. We'll see how this works in a bit...
218
"
kony
ccollection id=*channe|3>
rrfc?
-~
><desc>SJt;pSgt;Russian plice say they have identified the female suicide bomber whokilled an influential Muslim leader in
<date>Wed, 29 Aug 2012 10:44:12 GMT</date>
-><dcdate>0S-29-2012</dcdate>
</record >
<record>
<desc>Sit;pSgt;Amsterdam s Schiphol Airport has been evacuated after workersunearthed a suspected World War II bom
<date>Wed, 29 Aug 2012 03:17:07 GMT</date>
<dcdate>03-29-2012</dcdate >
</record >
<record >
r
-
kony
Both the response and the results can be formatted using the Format option.
- Response window (right-click to get the Format option)
Request Response
screen" href-7~d/styies/rss2fjj
<'xml-stylesheet type*
e'xml-styfesheet type=
<rss xmln5:content*Tit
<channel >
.O/moduies/content/" xmlnsdc1
<titie>FOXNews.cor
<link>httjr^/vww,fi.
<desCTipon3^px N
undo
c/Wt>
Report. You Deade. </desaipt
<language>en
<copynght>Copyn$|
<pubDate>Wed, 29lS
Network</copynght>
!4Gm</pubDate>
ilied HuritnleadermDagestan</b
30R6rR7OU/</Wt>
<dcdate>03-29-2012</("
-
</record>
<record>
[rmz_ryXr0/</iJnk>
<acuated after workers unearthed
</reccrd>
r
219
Publishing Services
kony
Before we can test our services in our app, we now need to publish our services definition
to our Kony server.
Genrate the services definition - this "packages" the services to be sent to the Kony
server.
Publishing the service - this puts it on the Kony server so your applicationcan cali it.
You'll need to do this every time you change anything about any service.
All services for the application are bundled for publishing.
Publishing Services
kony
Inour training setup, we have a local copy ofthe Kony server available.
We'll be publishing to that server so we can have everything running locally.
To start up the Kony server do the following:
Start memcached first but running the memcachedi .bat file located at:
C: \KonyOne\KonyOne-Server \memcached
This will open a blank command window - minimize it (closing itstops it running).
Start Tomcat (Kony server) by running the startup.bat file located at:
C: \KonyOne\KonyOne-Server\tomcat-6 . 0 . 29\instancel\bin
This will open up a command window that will be your system consol type screen
for the server.
Toshut down tomcat, just cise this window (no need to run the shutdown.bat file).
To restart, just run the startup.bat file again.
220
kony
Make sure all your definitions are saved and working properly.
Help
| |<k-J** J4I J
>Debug I " Kony
t
C-Newg... '
Dlickthis button
O
;
v:eb_modute(0)
,,_. Resource
P** ^
d
* resources (2)
- SftJimIJO;
Service*
a %other (2)
9
[ foxnews
UR1 :
| http://feeds.fb)oiews.crjm/fbxnev'/Sn
Http Method:
GET
-:
Preprocessor Class:
i_r SelectedSerI
*l
5 B. Libranes JI)
S H ebel (0)
+
Service ID":
bestbuysearch
fifr foxnews
ittj servicedef
[> (107 sap (0)
* Define Service
SearchServices: ]
+ . * 1)
ttL
* X a t
mainframe (0)
$ * java (0)
5 Sisn{0)
** SCTaper(0)
v* comoosite (0j
Jt>
kony
Jfll
l SOSO
(fjNeivApptatan
Open ServiceDefinirn
Copy
X Delete
Delete
Rename
F2
Refresh
F5
| RefreshWorkspace
>BuW
Change Development Language to la'
re-publish!
cune
Appkabon
Properties
221
kony
Objectives
Be able to specify Xpath output parameters in the Service Definition to get exactly the
data you want from the XML service.
Concepts
A Kony app can access external XML services through a Service Definition that resides
on the Kony Server.
Output parameters allow us to identify which pieces of the returned dataset we want to
return to the calling device.
Before we can test the services in our app, we must publish our services definition to
our Kony server.
Procedure
kony
Nowcrate an input parameter and insert your "variable" in the URL and provide a test
value.
- . :':
-*
:t-"''e
Ji'i^'n.Ve''-
fr****^** >'y*
Title
Description
Publish date
Check the Results tab to check your work (note: you only need to Get Response once
to get the data, now all your work figuring out your output parameters can be tested by
just checkingthe Results tab - that will always work on the latest result set).
222
kony
Find your application ID, look under services and you should see ypur service
definition.
Kony
Management
Con
Acolicat.ons
.."- SBmcleApp
...
Application: 5n.el.app
>
Service
>lo
Services
g] bestbursea.
"
223
kony
Synchronous services:
are invoked over the existing web protocols (http or https) when you have to wait for a
response to proceed further with the execution of the application.
blocks the user-interface and does not allow you to perform any other action while you
wait for a response.
are used when you do NOT have any long running tasks.
Asynchronous services:
are invoked over the existing web protocols (http or https) when you don't have to wait
for a response to proceed further with the application execution.
expects a response at a later point of time during application execution and can be
handled by defining a cali back.
does not block the user-interface there by allows you to perform other actions while
you wait for a response.
kony
The network APIs below are used for making synchronous/asynchronous calis from Kony
application to the Kony Middleware.
appmiddlewareinvoker
appmiddlewaresecureinvoker
appmiddlewareinvokerasync
appmiddlewaresecureinvokerasync or kony-net.invokeServiceAsync
kony.net.cancel
Note: All the above appmiddleware APIS are built OVer a net. invokeservice API.
These helper methods do some work "under the covers" such as sending some
additional parameters like metrics, channel, appid etc. to each service cali.
224
r
Network API - Overview
kony
You can see the definition of these "helper" methods in the application.js file that can be
found in the <workspace>/<app ID>/jssrc/<device>/generated folder.
Note: application.js file will be the same for all devices.
mJ2
" ^ *i |b.1c)C(1-ib. :..._: ^.I.i.-.
II
lili
'
-r.ccc: '
lili I I
..:
|] .
., t.MMPI 1
epp_:.--i:.?er"e::r - !"
ipp "enf i g . sel wt!|i i
I tcPCi.efla.*llMleieC-.c,t-.
ecc
cc-levicercrcexc
WSacfTl
B/WcPPfVl1
inc_*.larPK.PFp:[i twTftnfu.tOTIti
crccccFpcPB.pricTer -
p^cCccclg.PCpVerp,
cr.p'j:rri;:*;r.c.r.e_" :
":;".
cr.j _crecen'*f'.e. t
-r;.-",
.rtj,e.ie;-i :
r.-j
11
"
^.."K":
ir.pc-.tacn3,:-c.-.3iCtcr-!
UaUMta
nlaaVHtectUplunrlir
ir
<.GC_cFexu*:*r.ccpr.ec;ecn":
,:
i .:-..-,
pccrececc.
csSlcc
r
r
kony
to faise, the user can scroll through the Ul but cannot perform any actions. If this
is set to true than an network progress bar will be shown in Phone non native
applications.
r
r
Return Value:
result: It will return the JS Array object containing the data and up to 3 system
Vales: opstatus, erreode and errmsg.
r
225
kony
errcode will be returned if opstatus is non-0. This will contain one of the
following codes:
errmsg: will be returned if opstatus is non-0. This will contain the text error
message associated with the errcode
Note: For all middieware error code please refer "Application Server Error Codes" module
of Kony Server Installation guide.
HP
kony
Example:
var inputParams = {serviceID:"GetCustomerData", CustomerID:"KH04"}
myResult = appmiddlewareinvoker(inputParams, true, true)
if(myResult.opstatus != 0) {
//notify user that an error has occurred
}
else{
//code for processing the result
}
Remember, if the data returned is in the form of a collection, you'll access that collection as
myResult.<coiiection name> and individual data elements in the collection will be
accessed as myResult.<collection name>.<item name>
226
"
kony
completed.
Return value:
connHandie: a handle to the connection that can be used to cancel the network
call
kony
The callback function will fire when the service call is completed (whether it errors out or is
successful)
status: an integer value - indicating the status of service as soon as the service is
initiated till it is completed.
100 - network call initiated successfully
200 - network is in progress
300 - network call canceled - result will not be available and it is nuil.
400 - network call is finished (gets called in both success and failure scenarios actual state can be queried using opstatus in the result)
result: the service result if it is a success. Just like the synchronous calis, this will
return the JS Array object containing the data and up to 3 system vales: opstatus,
errcode and errmsg.
Note: The callback will be called 3 times for a successful call - once that will return
status=100, again for status=200 and then finally for status=400. Your code should
check for that 400 status and THEN process the results.
227
kony
Example:
var inputParams = {serviceID:"getupdates", userName:"user", password:"pwd" }
myAsyncConnectionHandle = appmiddiewareinvokerasync(inputParams, myCallback)
kony
Note: synchronous calis will have a platform specific cancellation provided by the platform
(platform to platform - it may vary)
Loading ... please stand by
228
XA
Event Editor
kony
These same methods can be invoked using the Event Editor as follows
Synchronous calis:
Even I. t lito r
Sequence
|n|*l
Code
DefineAcbonSequence
InvokeService (Syrxrronous)
+
B 3; ActionSequence
T BockUI
Secure
Open MappingEditor
Asynchronous calis:
JHl*!
HBHIBHHHH
Sequence
Code
SelectService: (None
"3
<.
Action Sequence
Ba.aBBMtBB.BB
ealtbacfc sequence
To change ALL your Service actions to either be Secure or not Secure, you can right-click
the application and in the popup men use:
Change/Replace property -> Make All Services Calis -> Secure or Unsecure
JA
Event Editor
kony
In event editor, response of the service is available in the expression editor from the next
action item for synchronous service invocation.
iT:rei.-.:!-.!-;;:.-,--
..-. .i..:.-
i ' :..
il :
_..
;,.; .;;., i .
.
-r*-...
i . >
:.-'
:": * -
"
r*pent+rremii+ti
229
XA
kony
In the case where the service URLs use the HTTPS protocol then you must ensure that the
certificate for these URLs are installed onto the keystore of the server.
This must be done for all the external URLs using the HTTPS protocol.
If the certificates are not installed, then you will get security validator exceptions once the
call to the service is invoked.
yahoo.com
which is ron by
(unknown)
Verifiedby. DigiCertInc
Your connection te this web site is encrypted to
preven! eavesdropping.
More Information...
kony
You can click on the More information button and follow the steps:
o U
Contri!
-Wdj
>m.in.
MA Aa
ina^a/arltAa.-
Oanwr
Tha-.iai4iu.rilp
V*4 br"
[>ynlU.
' , CkHhMi
lU-tiu.tdw,
lOmM
..-.,.
ITr r . :-
t*,tn rt*e pm p9 i
t-M- ""'-
Once the certificate is available, it must be placed at the keystore of the server
230
Network -
.konyA'-
Best Practices
For all the all services it is a best practice to check the opstatus value
If opstatus is zero, consider the service as a success
If opstatus is non zero, then it is a failure. The reason for the failure will be present in
errmsg in the results
If the service is a success, it is again best practice to check whether a particular key is
present or not in the service before mapping or reading the data from it.
For example:
results = appmiddlewareinvoker(inputParams, true,
true)
if(results-opstatus = 0) {
//service call failed.
service call is a
success
if (results.mycollection = nuil
&& results.mycollection.length > 0) {
myForm.mySegment.setData(results.mycollection)
}
}
-
"
231
kony
The first screen is with a combo box and a segment with a label.
Combo box should load with the listof news types, and that has been populated using the
Master Data property in the IDE:
Key
I18NKev
true
None
World
faise
None
Sports
rafee
None
Tech
fatee
None
Pobcs
rafee
None
Health
faise
None
Travel
fafee
None
Lifestyfe
fafee
None
Opinin
fafee
None
When you select a news type hit the service and poplate the segment with news titles.
XA
kony
Here is an example of the code behind the home screen's combo box ondone event:
function fetchNews
(coirioSoxSver-tCb^ecT.)
var r.ewsType
"opinin"];
(Ir.ewsType)
try
i
(err)
alert ("Error"--err)
232
XA
.
-i '
kony
There is similar code in the Results screen to take the selected news title and show the
frmNewsSummary.show ();
An example of how the selectedltems contains more than just what is displayed
the
Services Tab
kony
Don't forget - the Services View lists out all your defined services.
Input parameters
Output parameters
Parameter datatypes
Z Widget... -^.Sampl... 3
/Scrap...
..mmm
-A.
DataStore Keys
~_, bestbuysearch
~ik foxnews
^n
httpStatusCode [number}
'
i^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^B
233
kony
Let's review:
Let's say that you messed up the Xpath for an output parameter and you need to fix that
Re-publish.
Restart the app? NO! You don't need to, right? Unless something changed in your
code, you can just re-try that service in your app and it should now bhng the right data
back.
If you changed an output parameter name or added/removed vales then you will have
to change the app and re-launch.
kony
Incorrectly setting up the input parameters for your service call (forexample, the key is
"serviceID" and not "ServiceID" or "serviceid").
Trying to work with the results in code when the results are not there.
Immediately print out your results to the log or put a breakpoint.
VALDATE you're getting the right data back before trying to do any code
manipulating the results.
In your code, always put some IFcondition around the results checking if they are
there are not.
TYPOS...ugh!
Use code assist whenever possible.
Use your services tab to see the service definition input and output parameter
ames as you type in your code or work with the event editor.
Use logical widget ames and variable ames.
234
kony
Objectives
Be able to invoke services from your app
Be able to manage the output returned from a service call
Concepts
Services can be invoked from JS code (using the appmiddiewareinvokerasync
method) or from the Event Editor
r
-
The results will be a Array object where the keys are the output parameters specified in
the service definition
Procedure
- Second screen shows the title, publish date, linkand description of the
selected news item.
On the second screen, start out using a Label for both the title and description. After
you get it working, switch to a RichText widget to display the description
Use the debugger for this exercise!
ic
kony
ttarf.toi
l-f.bfj't
...
<<t.t-,~***fw
***" IwtZhtemtfM0***tHnt1^
^-'--'-'
After you get itworking in code, then achieve the same functionality using only the Event Editor.
235
kony
L^^H rjfihunging/Troubleshootlng
| Module - JavaScript
^^^^^^^^^l^^^lj^^^J^^^^^.^^,^^^,-^!^^!
236
kony
Introduction to
Application Components
XA
Copyright Information
i,kony*C
Copyright Information
This publication is n copyright. No part of this content may be copied, reproduced, or translated
in any form or mdium without the prior written consent of Kony Solutions Inc.
To obtain permission to reproduce the information (text or graphics) contained in this course
material for any purpose, submit the specifics of your request in writing to Kony via the e-mail
address training@konv.com
Module - Menus
kony
XA
-i*
kony
To interact with SAP system, Kony has provided SAP Java Connector
(JCO), which enables communication between SAP Server and Java
Applications.
BAPIs are defined as API methods of SAP business object types. BAPIs
are described and stored in the (BOR).
The Business Object Repository (BOR) is the object-oriented repository
in the R/3 System containing SAP business object types and SAP
interface types & other components, such as methods, attributes and
events.
kony
KonyOne Server
Connection
Management
l
18
"
Repository
Loader
c
*
ID
Service
Executor
0
Data Structure
Converter
0.
<
XA
kony
BAPI Class and Function Management: Loads BAPI Classes and their
respective operations. Class and functions are stored in the cache. BAPI
Functions are stored in function cache for performance. BAPI functions are
executed by passing appropriate input data.
Data Structure Converter: Basically converts the data received from device
to JCO data structure and JCO structures to data consumable by device.
44
.i *
kony
Steps to follow :
3. Right Click and Add SAP Server to crate SAP Server instance.
: Outline
i Enterprise Explorer 3
; SAP Serv
^ Siebel Se
,,,
, JMS/MQ Servers(0)
Vi urO
U*wN*h- 'I'-:
tW
U-"1*- Nvmi*.
Wl"l
MP Vene MtMi
Serv*. 1luul
-'-:
>
jww.tt
jd
i...-<:.
r,.:.,
""'*"
CMV.
.*.,...,,,
NO
IftfMft
oc
<M
XA
kony
*m MySecondSAP
EES MySecondSAP
Connect
& ALE(IDOCS)
Oeiete
r":;j myKOny5harfcrwrc-\i_.j
other (56)
$ other (56)
"
l75 ConnectorsExertise
IB IQ forms (6)
C5 popups (0)
webjnodule (0)
B"" resources (14)
H ^ xml (2)
51 -3j!> webservice-soap (2)
sieb
Di
i*
kony
13 w>vi/v.^.yuw
_L_ _:
BAFI.AMK.fiTlKTDt-iih
i/tfim
OtfUP
i-cr.iinTing Ctfnrrtt
y) MAX_Kgm
ApflkltK*. PlKfcnH
Auto-ID WrjrtrucluM
l*ni: Coenoentnti
l": .i-.LlH'qHliieiH:
selecting
Add to Selected.
ISJrtdtlJJil
Au-Jil Mnjyei'iii.-.
* UUJUMCJMn
irput -* :-n.
g) BAW..I..K
O) MAXJKWS
-
fnnI.qtH.inrn
i>miu.r.vi-. i
O BANKUST
* cap D-t savehpuca
Q nv\NIlfiltiiiirbur.,e*i*AiLijiiH'(uniL
Af
konyi%
APSrrvpf plrwrf
_!. _1
RVI.RANK.fMI KT Dmj*
. - MPSwvwi,
I..W
,__-rV.-m^MOhjr-tSrprwtn'y
| .Ar
$1 UMc_rntr
ik
C t Eifencdfjv1;Fuvnfint;:; ~^)J
i_
Unei(_ic)|epw'i
4 IW HA"* KTUS1
i-eoroCMW Llau |
IHxtfrv-rMfr c**i 1
[emfeZi|
1 Copyright 2012 Kony Solution
, Inc. CONFIDENTIAL
12
i'
kony* *
Provide Input parameters and click Execute to get the services results.
In this example our goal is to find the list of Banks in certain Country with
specific number of rows in count.
5> CommlantgunySAf ^ct>nr ttrmm .
'.Ar'..(...i.1-..rr.
B3 M.VKDnCJW
BHtWttnMMRMMilM
iwt PM sm W
--
dnV
f-r;ij.nw nm j
NnmMi qm I
13
SAP Service -
Configurations (cont.)
kony
* IPI_BAIIK_GETL15T Details
i i
SAP Server
SAPServers (1)
rtnte
H B RETURN
UJ MySecondSAP
Gr BustnessObject Repoatory
l 3 Remote Function (Modules
TYPE
irr- ALE(IDOCS)
@ ID
NUMBER
MESSAGE
Eg MySecondSAP (l)
Bank
Ht BAPI BANK GETUST
a. xo;
LOG.NO
LOG_MSG_NO
MESSAGEJ/1
MESSAGE_V2
MESSAGE.V3
MESSAG_V4
| Uakje
TYPE. IP,NLr-SER. MESSi
000
000000
(Ti dadamittto
<
BANK CTRY
| BANK KEr-
| BANK NAME
| CTTY
US
021000039
Otfcarc
US
043000261
Mellon Bank
Philadelphia
L!S
033000108
Chicago
US
083000315
US
113109673
NabonsBank
HOUStOn
US
121000353
New York
US
123123123
Gbbank
New York
US
123445673
US
234S673
Commerce Bank
PhdacteipkBa
US
123456780
PNC
Marlton
US
123456764
Chase Manahattan
New York
US
123456783
MekmBank
PhiaddpHa
US
123456789
FidelitvBsnk
Los Anodes
Nm York
- -
__
_|
AA
k-i *
SAPServer
^ ^
tlAPlJJAJIK_GtTDETAIL DctoU
lian*
CJ MySecondSAP
{Valu
- ~ B4I#:_AD0RESS
5) BANK_NAME
J) REGIN
f3> STREET
CITY
5) swiFT_ccce
EJ MySecondSAP(2)
L-1-Business Object Repository
3' Ooss-Appteabon Componenls
i^-Bank
O-Bank
Q>bat#;_group
* EAPI_BAt#I_GETDTAIL
5) POBK_CURAC
.-.j inputParams
@ BANKCOUNTR
5> BANKKEY
&BAf*,_NO
{$> POST_BAMC
5) password |
j) BANK_BRAMCH
S ADDR_N0
E 5 BANK_DETAD.
flB m a
021000089
Manhattan
(CREATJWTE. CREATOR,.,.
> CREATJJATE
FnMar1100:00:00 IST2005
> ADDR_l
Q> CREATOR
CS03184S
0 BANK_BRANCH | 1
>BANK.NAME [*:!'
J)SETHOO
,5) FORMATTTNG
5 6Ar*_DBTE
> BANKHO
S> CTTY
Q>TYPE
S 8At*_GR0UP
RETURN
G> ID
(5) POBK.OJRAC
g> P0ST_BANK i:-.
S> NUMBER
>MESSAGE
LOGJJO
LOG_MSG_NO
& MSSAGE_V1
>SSAGE_V2
^" B BAWJ)ETAIlS
Vw - CRIC -^^
* BAPIJArJKJXTUST
000
000000
15
kony
.7. UjJMjJrter
* 0 1
"
SAPSenllSAPP
j ,~ lormt i5j
4 k\ mobile 3)
[~]fc'ie.'.-.Srr. :Fc"'i!
[~].imSAPServiceTr'.lOnt
hmSh.rePo.nt
[J 1'mSnbetSenrice]
tblt (0)
.:
. .
Clier.^.inrj-E
ciier.t .taas-ac
elier.t-uaer-
ci;er.i.3r.;_r.;declie.iic. jyar.r-;:
clier.i.poawd*
clier.. trace-:
cHe=c.clier.c-:-::
cier.t.sr.c_qoF-:
* deifctopOj
T pepupt (0)
V iemplM*i(3j
* module--B)
C/ .vrb_modu. (0)
. Krvif.es (9j
.*; ,'.tb;nvice-10p (1)
tefv.cel (2]
BAPt.BANk.GETDETAH
> 3API.BANK.GETUST
O Censle
_ p.M7SAP.p.0(!,rt,f-."^>
V. npj.lj.jtitnai-l' ptcpfrtrr-,
evicnfH
Bbtll5,
r
-
XA
kony
Objectives:
r
To be able to pul the list of banks in certain country using SAP service.
..,,!
't.1;W
su^
1 US
Cri&inH tsts
K4*tonBnk
071000089
NraVork
0430002b t
PMedelph
2HC* O*3**08
Ur..wtB*rlt
rjooo,,.
Naboi.tBa.nk
U3i09Vn)
Chicago
Houston
rt......
kony
Concepts:
Configure the SAP Server instance in Enterprise Explorer.
Identify and add services from the exposed BAPI under BOR
Procedure:
E7
Add BAPI_BANK_GETLIST
B - Bank
ffl BAPI_BANK_GETUST
B
Ib (0)
kony
Let us assume , the following form layout is designed for puiling the list of
banks from SAP Server.
Outline 23 ;
grjr
i Enterprise Explorer!
IH i
tbxCity
H EJ HBox - hbxTwo
<5p TextBox2 - tbxCity
O
IblBankName
IblBanktXey
Button btnHJtSAPServices
B 3 Seoment2 -segSAPBanksts
IbIBankCity
S 3HBox - hbxThree
U Label - IbBantf-Jame
*t Label -IWBankKey
^
LabeJ - IWBankCitY
I Men Container
Menu
kony
BAPI_BANK_GETUST
Service_InputParam[ "serviceID" ]
Input Params
g)
<)
B
<J)
BANK.CTRY il
MAX^ROWS [numbe
password '_::
username [string]
"BAPI_BANK_GETLIST";
Service_InputParam["username"]
******
"
Service_InputParam[ "password" ]
******
"
Service_InputParam["BANK_CTRY"] = frmSAPServiceTestOne.tbxCity.text;
Service_InputParam["MAX_ROWS"] = 20;
BAPI_BANK_GETLIST =
10
kony
BAP1_BANK_GETUST
a _ j Input Params
function functionMapValues(status,
g)
Q)
BAPI_BANK_GETLIST)
{
var my_temp =
for
[];
BANK_CTRY ;.-
MAX_ROWSnumber]
password [stnngj
username [stnng]
. Output Params
a n BANKJJST IColledion)
BANK.CTRY Islnngl
$ BANK_KEY
<
S> BANK.NAME .
OTYIitnng]
my temp.push(
-
RETUP.N
"lblBnkName": BAPI_BANK_GETLIST["BANK_LIST"][il]["BANK_NAME' ],
"IblBankKey": BAPI_BANK_GETLIST["BANK_LIST"][il]["BANK_KEY"] ' 3 Segm*nt2 - segOne
"IbIBankCity": BAPI_BANK_GETLIST["BANK_LIST"][il]["CITY"]
}
4 *
Common
4 P maiteidfllamap iccllccticnl
4 A, Label - IblBankKey
4 9
Common
*>text ltnng
1= .I8n-.r3Ct.Ctnr.13l
na visible bcolean)
frmSAPServiceTestOne.segOne.setData(my temp);
4
.si
Label- lblBnkName
9 Common
4 .b. Label - IbIBankCity
};
** Common
B^SS.^.^381
kony
r
Cltibank
021000089
New York
MellonBank 043000261
k&Trust 0B30D010a
Philadelphia
Chicago
lu. 083000315
NationsBank 113109678
Houston
11
K*
kony
Image widget is a non-interactive widget that you can use to display a graphic from local or
remote source.
If you drag and drop the Image widget onto a Form, image occupies the complete available
width.
If you want to resize the Image widget in the horizontal direction, place an HBox on the
Form and drag and drop the Image inside the HBox and resize accordingly.
If you want to resize the Image widget inthe vertical direction, drag and drop the Image
inside the VBox and resize accordingly.
You can set the image URL or the name of the image inthe local resources folderin the
IDE under the data property in the properties pallet.
12
'
kony
Do not use any reserved words or keywords (Java or JavaScript) as the file ames for
the images.
"
From IDE:
kony
From Workspace:
Go to the application in the workspace and place the images under the
resources/common or specific platform folder.
We can have platform specific images; but their name should always be the same.
If you want to use platform specific images for screen resolutions of240, 320and 480,
you can use mages240, images320 and mages480 subfolders ofdifferent platform
folders. Otherwise, by default, the images placed inside subfolders under common
-
13
kony
image to fit in the Image Widget dimensions while it preserves its native aspect ratio.
This is the default option.
src : Specifies the location of the image to be displayed on the application screen.
You can specify an image from the resources folder or specify a URL of the image.
Example:
Local resources:
myForm.myImage.src = "imagel.png"
URL based:
myForm.myImage.src = "http://www.google.com/imagel.png"
kony
Raw Bytes : Returns the handle to the raw bytes (usually the image captured from the
camera).
Example: The following code snippet takesthe raw bytes from the image captured from the
camera and gives it to an image widget
function customHandler(cameraWidget)
myForm.mylmage.rawBytes = cameraWidget.rawBytes
>
14
r
r
kony
r
r
JA
.
A
kony
All images should be of same size; otherwise, it can cause layout issues.
selectedltem property that can be used to determine which image was selected.
15
information (URL or image file name) with a key value (e.g. [{img="bwmcar.png"> n
Note: You can pass more data intothe array_of_data image array. Like most other
selection widgets, you will have access to the "extra" data when you select an image.
Retrieve the selected data using the selectedltem (to return all the data for the selected
item) or selectedlndex (to return the index into the array_of_data array).
Exposes onSelection event that is invoked by the platform when an Image is selected in
ImageGallery.
preonciickjs and postonciickjs events specific only to Mobile Web (Advanced) and SPA
platform allows the developer to execute custom JavaScript function before & after the
onSelection callback of the ImageGallery is invoked.
{img="audi1.png"},
{img="audi2.png"},
{img="audia4.png"},
{img="audia6.png"},
{img="audia8-png"},
{img="bmw3.png"},
{img="bmw5.png"},
{img="bmw6.png"},
{img="bmw7.png"},
{img="lexusl.png"},
{img="lexus gs.png"},
{img="lexusis.png"},
{img="opell.png"},
{img="skodal.png"},
{img="toyotal.png"}],"img")
16
kkony*
Space Between Images: Specifies the space between the images in the Image Gallery.
tems per Row: Itemization in terms of number of rows can be configured for Mobile Web,
there by identifying the number of rows in which the images are supposed to be restricted.
Specified images can be aligned on top or bottom, using Navigation Bar Position.
Reference width/height: These are device independent Pixeis specified against 163 dpi.
Property: [~
Value
referenceWidth
referenceHeh
13 Skin
skin
Skin Defaults
focusSkin
Skin Defaults
l_t- Event
onSelection
Not Defined
i3 Mobile Web
preOndidcJS
-
postOndidS
itemsPerRow
"^2
avigationBarPositioi
SO-~-6ot
kony
It is used when we want to display scrollable imageslike a film-strip with some events
attached to it.
If the Images exceed the size of row, those will get arrow marks but won'tcome to the next
Une. All images should be of the same size to get a good look.
-
The images can be static (resources folder) or dynamic (URL Based). Supports the PNG
format.
For a better user experience, use only one Image strip in a page, henee notadvisable to
use more than one image strip in a form.
If the images are dynamic, it isbetter to use a placeholder image till the image gets
downloaded by using either (Image Shown when downloadable image is not available).
j
z~.
~
z..
17
If showArrows property is set to true, showConfig property will allow to configure arrows to
the left and right to indcate that there are more images and you can scroll through the
images.
Will scroll left/right off the screen with the focused image with a colored border around it.
selectedltem and selectedlndex are still used to know what was selected (including any
extra data set for each item).
kony
leftArrowlmage and rightArrowlmage allow you to configure the arrows for all platforms
except mobile web.
Both of these widgets (Image Gallery and Image Strip)share the following properties:
ImageWhenFailed
ImageWhileDownloading
18
kony
In this view the images are placed side by side and looks as if the images are placed in a
strip. You can scroll through the images and view the desired image.
HORIZONTAL_IMAGESTRIP_ VIEW_TYPE_SLOTVIEW:
In this view the images are displayed one at a time. The images change with the left or right
gesture.
This view is useful when you want to present a 360 degree view of an object (for example,
a car or device).
For Android platforms, if you select slotview, the following properties are enabled:
scrollDistance: Accepts a number (in density independent pixel) representing the touch
scroll distance to travel to consider for navigation between imaqes.
Both the Hz Image Strip and Image Gallery widgets support the following methods for
setting data.
"
19
'
kony
Objectives:
> Simlate animation by displaying a series of similar images in slotview display mode.
Concepts:
Retrieve the selected data using the selectedltem (to return all the data for the selected
item) or selectedlndex (to return the index).
Procedure:
.
A
kony
rfPL^ 7.7 ru
V^LaS,
20
r
r
i
A
kony
The Camera widget is used to invoke the native camera of the device.
The basic Properties like text, text i18n key, skin, alignment, expand etc. that are supported
for the Button are also supported for the Camera widget.
"
On invokingthe Camera widget, the native camera of the device s opened for capturing the
picture.
The standard camera features such as preview, save or discard for the captured picture are
device-specific.
Note: Native camera cannot be invoked using an API through the code. It can only be done
using the Camera widget as part of the Ul.
21
AA
kony
On pressing "Discard" button or the device back key, the application is returned to the
previous screen.
On successful capturing of the image, the captured data is returned to the application by
native camera.
"Use" and "Discard" naming may change from one platform to another.
kkony*
Once the image is captured, the device's camera will store the image in memory.
When using the Camera widget, the captured image is returned as an image handle.
This image handle, consisting of the raw content of the captured image, can be retrieved
using the rawBytes property of the Camera widget.
For example, to retrieve the captured rawbytes:
var capturedRawContent = myForm.myCamera.rawBytes
Once we have the handle to the data, the application can use it in variety of ways like
displaying the captured image to the user through image widget or send the image n an email.
Platform releases the reference to the image handle after the first use. Calling above code
snippet for second time will return a nuil.
The Camera widget is not applicable for Mobile Web.
Note: Add some value to "text" property for the widget to be visible.
22
kony
Do not make any costly operations like service calis during the upioad action event handiing
as the platform holds the camera resources till the event is complete.
Memory Optimization:
It is a best practice to store the image handle (rawBytes) to a local variable for memory
optimization.
Ifthe captured data has to be used globally, then store it on the device and use it
accordingly through localstorage APIs (kony.store.setltem & kony. store, getltem).
Captured data can also be stored in a global variable but we should ensure memory
optimizations. Memory of the global variable should be released immediately after its
usage.
Not clearing global variables results in high memory utilization which will in turn result in
bad performance of the application.
kkony*
The Camera options are controlled from native camera options (resolution, for example)
For a Blackberry device, capture an image always with the high resolution property
(setting) for better picture quality.
r
-
23
AA
kony
Here are a few examples of ways of using the rawBytes property through onCapture event.
Captured raw bytes can be assigned to an image widget using this function:
function imageTaken (camera)-{
var ICapturedData = camera.rawBytes
myForm.mylmageWidget.rawBytes = ICapturedData
}
Captured raw bytes can be used dynamically to set the background of a button with the
following function:
function imageTaken(camera){
var ICapturedData = camera.rawBytes
myForm.myButton.rawBytes = ICapturedData
}
Camera-APIs
kony
kony.convertToBase64
This API provides you the ability to convel rawbytes to a base64 encoded string.
Note: Base64 data can be sent as part of service call using String parameter and can
be converted to a JPEG/PNG image format using Java APIs.
kony.convertToRawBytes
24
"
Camera - Properties
kony
The orientation of the captured image can be set to: default, portrait or landscape.
Specifies if the camera must have an interface with the default Phone controls.
iPhone controls for a camera can be customized by setting this property to faise.
enableOverlay
camera is launched with capability of over-lay a Form Ul over the camera view.
If set to true, the Camera preview is overlaid on the form default is faise.
Available only on Phone, Pad, Android/Android Tablet, Windows Phone
Specifies how the captured image must be stored. This property is enabled when the
launchMode is overlayform for Android and Windows Phone 7.
kony
CAMERA_IMAGE_ACCESS_MODE_PUBLIC:
captured image is stored on the device as a Image and is accessible to all the applications on the
device. For example, the captured images are accessible in ImageGallery.
CAMERAJMAGE_ACCESS_MODE_PRIVATE:
captured image is stored as an Image on the device and will not be accessible to any other
application on the device and remain prvate to the application.
CAMERAJMAGE_ACCESS_MODE_INMEMORY:
captured camera image is stored in memory and is never written to the disk.
overlayConfig
overlayForm: Specifies the reference of the form to be rendered over the camera view.
referencelmageToCrop : Specifies the reference of the Image widget in the overlayForm which
guides the camera to crop the captured image to the referencelmage dimensions.
The above features can also be selected or unselected by usingthe custom settings men inthe
image capture screen.
r
r
25
XA
kony
Image Format:
The original size of the image is retained and has high resolution
This is the default property.
CAMERA_IMAGE_FORMAT_JPEG :
A Compression Level property is enabled after selecting this image type. Vales are
between 0 (no compression - highest quality) and 100 (lowest quality)
Note: The Image Type property is only supported for Phone and iPad. For rest of the
platforms, the data gets stored as raw content.
kony
Sometime you may want to store only portion of the image captured.
If set true enables you to crop the captured image manually. Default is faise.
26
kony
The rawbytes of the captured image are available to an application until the application
closes or until the rawbytes are manually deleted.
It is always advisable to relase the captured data after its usage. The captured raw data
can be released from memory using the reieaseRawBytes method.
rawBytes: Specifies the rawbytes of the captured image from the camera which are to
be released.
Note: Always do a "nuil" check on the raw bytes being passed to this method as releasing a
raw bytes which is already released results in exception.
If mltiple handles (variables pointing) to the same rawbytes exist, and if you relase the
rawbytes using any one of those handles, the other handles become obsolete.
If you store the rawbytes of the captured image in some location on the device by using the
kony.store.setltem API; and you call this method, the rawbytes are deleted from the disk or
n-memory, but the image stored in the specific location remains intact (you must delete the
stored image manually).
r
r
ikonyA
Both the Android and WP(mango) emulators don't provide a way to test the camera.
Select a jpg file that you'll use as your simulated camera image.
Once set up, the simulator will use that image for all camera shots.
Typical use of camera is to rotate it to take picture...play with this to see the results...
27
kony
Objective
Be able to retrieve the rawbytes from a Camera widget and use this data in an Image
widget
Concepts
The Camera widget is used to invoke the native camera of the device
The rawbytes of the captured image are available to an application until the application
closes or until the rawbytes are manually deleted
Procedure
Crate a one screen app with a camera widget and an image widget - configure the
camera widget with text and skin (optional)
On the camera click event, take the image and show it on the image widget (set the
rawbytes property)
28
kony
-i
r
r
Mapping Provider |
iPhone
Google Maps
Google Maps
BlackBerry Maps
Bing Maps
F7
Client)
H
Kuiared
Hospial Seflttfe
lnn*igale
M :-. It-:
IGooale
29
XA
kony
A location must be defined in code as a JS object and passed into the Map widget via the
locationData property. (can't be configured via the IDE).
Zoom (zoom in to magnify / get more detail, zoom out to expand the mapped rea).
Location Selection (display more info or call a function).
On OS, Android, and BlackBerry touch screen devices, users can interact with the map via
actions like:
Swipe to Pan.
On Blackberry non-touch devices, users can employ the trackball or track pad to Pan, and
the "+" and "-" icons or "i" and "o" keys respectively to Zoom In and Zoom Out.
---"
kony
Platforms like BlackBerry, Phone, and Android provide a native map widget which can be
launched using the openmaps API.
On platforms where a native map widget is not available, the Kony Map widget integrates
with Google Maps and displays the static image with zoom and pan controls.
30
kony
On non-touch devices, when the trackpad or trackball sets the map widget in focus,
you will not be able to move the focus away from the map to other widgets.
Ensure that there are no widgets requiring focus above the map.
For example, Labels, Images are fine, but a Button or TextBox would be inaccessible
once the map has focus, until the form is exited and reloaded.
No widgets of any kind can be placed below the Map on any BlackBerry device.
There is an interoperability probiem when trying to introduce a Kony widget below the
rendering of a native BB OS widget.
This limitation applies to the browser widget in BB OS as well.
Note: This limitation doesn't apply to footers placed below map widget.
kony
C3rrief
fSg)
ECotana, Dr
r
Google
i"
31
Go gk
kony
SoogMMipiAPtr.mtly
Sicjii Up loi Ihe Google Maps API
https://developers.aoogle.com/maps/docum
entation/android/mapkev
Note - You will need to do this for every Map widget in your projects.
kony
Screen Level Widget: Specifies ifthe widget must occupy a major portion of the screen.
Useful in scenarios where you have widgets like the Map that tend to occupy a major
portion of the screen.
widgetDataMapForCallout: The map must contain all widget data map referred across
mltiple templates, including the dynamic templates for each map location, if any.
32
L-kony^
Zoom Level: For Phone ,iPad and Android native apps, zoom level can be set using this
property. Zoom level can be set in code as follows:
r
myForm.myMap.zoomLevel=20
showZoomControl: (Boolean) This property can be used to enable native zoom capabilities
on Android and Android Tablet platforms.
Show Current Location: For iPhone & pad, Indicates the current location on map as a pin,
circle or none .
map_view_show^current_location_none
mapj/iew_showj_:urrent_location_as_pin
map_view_showjdurrent_location_as_circle
I
r
kony
Mode: Specifies the map viewing mode. Possible vales are Normal, Satellite, Hybrid,
Street, Polygon, Traffic, Terrain.
r
r
i
IOS
Yes
Windows PI,one7
Yes
Android
Yes
SPA
Yes
BlackBerry
Yes
Yes
Yes
Mobile Web
(Advanced)
Yes
Symbian
No
'<
I I Washington
DC
G3
r
r
33
kony
> If you are plotting points on the Map widget as part of a function called by some other
event, call formid.show after setting the widget's ocationData property
The required vales that need to be set for ocationData are:
Campus 1
My Collego Campus
meta: a table for Thin Client/iPhone marker data. Specify: color and abei.
particular location.
kony
Mltiple points may be plotted on the Map widget by creating an n-dimensional JS Objects
array of pinpoint settings for ocationData:
myForm.myMap.ocationData = [{lat:"43.47591",lon:"-80.53964" ,name:"Campus
1",desc:"My College Campus", image: "gpin.png", meta:{color:"green",
label:"C"}},
Mltiple points
plotted on a map
BEST
PRACTICE: Use
a distinct pin
image if
indicating the
user's current or
starting location
in relation to
other points on
the map
The information
popujrthat displays
in response to
selecting a pin
location
appearance of the
popup is controlled
by each mobile OS
vendor
34
kony
ocationData can contain more information other than the required vales.
desc:"desc2",
When a map point is clicked, the additional information provided is made available along
with all the data for that point.
"
kony
The onSelectionevent is fired when the user further clicks in the information popup that
appears when a pin is clicked.
The onPinClick An event callback that is invoked by the platform when a map pin is clicked
The ocationData JSObject for the pin that is clickedis returned as an argument for
this event.
> For example, call a function to open a form with detailed data for the selected location
or to provide turn-by-turn directions for a destination from this location.
r
r
r
35
A A
kon-i *
lat:locations[store]["lat"],
Ion:locations[store]["Ion"],
lat:
Ion
41.8771136
:
-87.6287982
name
namel
name:locations[store]["name"],
desc
descl
desc:locations[store]["desc"],
image : red.png
meta :{color="green",label="A"}
phone:locations[store]["phone"],
addr
image:"red.png",
phone
123
Sesame St.
212-555-1212
kony.print(temp Data);
>
>
locations is location data array for the pin that was selected. It includes the additional meta into
configured for this pin.
Note: The same data can be accessed through eventobject property in the event editor.
Mobile Maps-APIs
71
kony
map. navigateTo - This method allows you to navigate programmatically from one index
to other ndex in the given list of pins shown on the map.
lat:"43.47591",
lon:"-80.53964",
name:"Campus 1",
36
XA
A*
kony
This capability is not currently available for any Native Apps platforms or weaker Thin
Clients.
Define the plotted rea by seeding ocationData with a JS object of 3 or more pinpoints
and setting some platform specific properties:
w/* /
Secauaj
;Property; j
I valu
5
Lr- Genef al
map5-133065Q957
true
iPtione:tTue,Androic:tTije,Bac...
MAP_SOURC_NONJJATTVE
^__H
XA
kony
On BlackBerry platform (Versin 4.5 and above), you must ensure the following:
There is no focusable widget above the Map widget. This is because, on non-touch devices, when
the map widget is infocus, you will not be able to move the focus away from the map (thisis done to
ensure that the trackball movements will result in panning of the map).
The Map widget should be the last widget on the form. You must ensure this for a good user
experience.
The Map widget should be the last widget on the form. You must ensure thisfora good user
experience.
Find and replace the stringlocaihost in the same file rimpublic.property with your system ipaddress[use ipconfig in yourcommandprompt to find yoursystem ip-address].
-
Inthe simulator ensure that the "Network Mode" in "Mobile Network" settings is set to 2G or 3G
& 2G
Make sure the BlackBerry simulatoris not runningbefore starting the MDS.
37
XA
kony
Objectives
Be able to get input from Ul to use as an input parameter for the XML service.
Concepts
The Map widget renders a map using the service provided by the platform.
The locationdata property, which is defined as a table in code, is used to pass the Map
the data for the points to be mapped.
Procedure
The Best Buy Remix API has an XML service that returns store locations for a city.
http://api.remix.bestbuv.com/v1 /stores(citv=$citv)?apiKev=Skev
kony
Screen 1: have the ability to enter a city name and a button to click to trigger the
search for stores in that city.
Make sure that the map has an appropriate starting zoom level and make sure that the
data for each pin shows the name of the store and the store address.
tmgmameaitilaammmkm
38
"
r
p
Video Widget
kony
Video widget
..- Palette
>
Container Widgets
[3H]Form
___HBox
Purpose:
ScrollBox
Tab
QTabPane
T VBox
Use cases:
To play an advertisement
Basic Widgets
$ Advanced Widgets
*
Video
39
-i*
kony
Video widget can be rendered only for Mobile-Web and Hybrid based applications.
jpj
i--^-i
mp4
webm
Format
Source Uri
mp4
webm
ogv
ogv
\
\
0frmTwc ;_i
Hitf.T.kmgTcmVid.
0<
j O P.e,^,.. ] .
Properties K
Cancel
Property
IValue
Visible
tlue
Render
Data
Tt
Source
\
Villeo
^rnpJ I http://www.youtube.c..._Jj
Appearance
Alignment
middle-center
Expand (Applicable to Mobile 1 .hfctrue, vt.false)
Margin (%)
Edit
Padding'%)
Edit
Location
(1.51)
AA
kony
By code,
frmScreenVid. videoPlan . source
"
40
"
r
-
r
-
Men Options
kony
The App Men - created n the project properties and acts like a central navigation
men lor the application.
On any form you can enable/disable the App Men through the form's ShowApp Leve!
Men property.
ForAndroid and Blackberry, if BOTH App and Fotm Menus are turned on, then you'll see
fhe tems in the men together n their native formar
41
XA
App Men
kony
The Application Men (App Men) contains features that apply to the application as a
whole, rather than to a specific application form.
The app men acts like central navigation for the whole app.
For example - for a mobile banking application, the application features can include
Accounts, Payments, Transfers, ATM Locations, and Services, placed under App Men as
illustrated in the image below:
I..J
12:46 PM
Br-r,
01/05/2009
WNnisraHKoan juroion.Kx
01/05/2O09
-52.00
01/OS/2009
BILL
-300 00
150.00
01*472009
BU PAVMENT Jn03 06SS* 2443
01/0372009
OUUm .
-30O0 00
App
01*2/2009
OTHER 0ECREASE
Men
J*n 02 06 O
01/02/2009
70 04
2Q
kony>r
Right-click the project (in Applications window) and select App Men:
_JD|X]
Application Features
ConfigureAppkabon Features. Click on columnname to sort
tdit llnifnrm ilpecrtic itnpeft.es
FooisSkJn:
"3
"3
No Skin
kJMteem,
<.ytMr
(7 i* -,-.
Mobile
Ti te
[ Icn
| Render | i!3nKey
iphon... None
Event
MotDefined
'
_J
CZ
<x
"1
o, |
_tJ
Fintsh
Cancel
42
kony
Format: PNG
as :
Dynamic Menus
kony
You can manage the app menu dynamically with the following methods of kony.application
namespace:
createAppMenu: creates the app menu - must be called n the application pre-appinit.
Syntax: kony.application.createAppMenu(appMenuId,appMenu,skinID,
onFocusskiniD) where:
43
kony
setcurrentAppMenu: uses the unique identifier which represents the App Menu and
sets it as current app menu.
Syntax: kony.application.setcurrentAppMenu( appMenuId ) where:
appMenuid: ID of the menu item to be set as current menu.
getcurrentAppMenu: returns the unique identifier of the current app menu that is set
through setcurrentAppMenu.
Syntax: kony .application. getcurrentAppMenu () Where:
> method returns appMenuid as string. Incase of app menu is not set, nu//is returned.
Note: all function calis on menu click events can have a signature of:
function onClickClosure(appmenuID, appmenuTitle)
kony
pkk33
Max Size
Max tems
Overflow Menu
Image
Icons
Shown
tems to "More"
Formats
(pixeis)
iPhone
50x32
Yes
PNG
Android
105x32
Yes
PNG
Blackberry
Not Used
10
No
PNG
WP7
32x32
Yes
PNG
Thin Client
32x32
Yes
PNG
Symbian
NA
Yes
PNG
SPA
32x32
Yes
PNG
I
1
Note: There is no such recommended size for app menu con. Symbian platform scales
down the app con and fits into an oval background.
"
Note: Menu tems displayed on clicking "more" menu item are always displayed without
icons on Android, Symbian and Windows 7 platforms.
1
1
44
r
Slide 88
I could not find the below mentioned details such as max item shown , max sizes icn in the
documentation. Please check the doc once if its available or not then put it as TBD nd update
TrainingContentPreparation-Clarifications-Dependencies.xls
Pavan Kutnar Kurella, 9/10/2012
'
1
1
Form Menu
Each form has a built in menu and the Menultem widget is used poplate menu tems to
that menu.
Type: Set to ok, back or exit. ok is the default for all devices and back and exit map to
the J2ME devices' phone buttons.
onclick: Used to define the action sequence for the menu item.
Render. Specifies which devices/platforms to show this item - typical to turn off on OS.
Context Menu
kony
A Context menu for a widget can only be defined through code and can be activated on the
Ul by clicking on an item for a prolonged time (extended press).
Context Menus are only supported for Blackberry and Android platforms.
icn: an image resource (Supported only Blackberry JDE 6.0 and above)
separator:
Note: Android platform does not support icn and submenu - set to nuil.
45
'
aa
-
kony
Following is the sample code snippet for adding a context menu for Android platform:
-
myForm.myButton.contextMenu = [["menul","Add",null,loadAccount,nullJ,
["menu2","Delete",null,deleteAccount,null]]
Following is the sample code snippet for adding a context menu for Blackberry platform:
myForm.myButton.contextMenu =
["menul","Add","icon.png",loadAccount,{separator = true]]
["menu2","Delete","icon2-png",deleteAccount,[separator = true]]]
,1ftMp.,1.
IM.M
.<
mj
kony
Platform
App Menu
Form Menu
Context Menu
iPhone
Yes
No
No
Android
Yes
Yes
Yes
Blackberry
Yes
Yes
Yes
WP7
Yes
No
No
Thin Client
Yes
No
No
Symbian
Yes
Yes
No
SPA
Yes
No
No
Alternatively, popup with Segment can be used to display form/context Menu for an
application. Aspecificbutton on the form can be rendered to crate the popup menu.
This alternative approach can be used to display menu in thin client (Basic and BJS) to
avoid scrolling issues.
r
r
46
XA
Menu - Considerations
, .V
kony
On Mobile Web platforms, if you add more than four App Menu tems, the menu tems
beyond the fourth App Menu item are grouped under the Menu item More
In Mobile Web (Advanced) versions, the App Menu is displayed at the bottom of the
screen and is visible even when you scroll the form.
In Mobile Web (Basic and BJS) platforms, the App Menu is available at the bottom of
the form and you must scroll to the bottom of the form to see the App Menu.
Note: For better Ul, app menu should be designed consdering the content present n
the forms for these devices.
Normal or focus skin properties set for the app menu tems doesn't get applied for iPhone,
Blackberry and Android.
The text describing the app menu icons are always in a lowercase in Windows 7 platform.
For thin client applications, only the icons in the list are clickable and not the text.
iPhone and Windows 7 platform doesn't support form menu tems. So render the menu
tems added for a form to faise for these platforms.
On BlackBerry and J2ME platforms, App Menu is also supported on a Popup.
Exercise - Menus
kony
Objective
Be able to use the three types of menus (App, Form and Context) in an application.
Concepts
The Application Menu (App Menu) contains features that apply to the application as a
whole, rather than to a specific application Form.
Each Form has a built in menu and the Menultem widget is used poplate menu tems
to that menu.
A Context menu for a widget can only be defined through code and can be activated on
the Ul by clicking on an item for a prolonged time (extended press).
Procedure
3 options allowing you to navigate home, to screen 2 and to screen 3 (call them
whatever you want).
This app menu should be available only on the home screen and on screen 2 - no
conlinued...
47
XA
item go "home".
kony
0n screens 2 and 3, also add a form level menu item. On screen 3, make that menu
On screen 2, add a button and add a context menu with 2 tems. One context menu
item will go "home" and one will go to screen 3. Actually clicking the button will display
an alert (to make sure you actvate the context menu and not the click event).
Note: context menu is only available on Android and BlackBerry. What happens on
Han*- Srr*n
ConteilManu
'-
i#
kony
48
TabPane - Overview
kony
TabPane - Views
kony
[tab
fSaoBefrv:
Windows Phone:
WnMobfc 6.x:
Android:
tabvie,',
Palm Pre:
|tabview
J3ne:
jtabview
Symbian:
]tabview
d
d
d
Mobile Web:
jtabview
SPA:
Itabview
zl
|fWsh|
49
"
TabPane - collapsibleview
kony
The Tab widget's name and image are displayed as a clickable header occupying the entire
screen length.
Clicking the header will cause the contents of the Tab to expand or collapse.
r
Tab 1 header -
Tab 1 contents
Click to expand
or collapse
Irkony^
If you select this view, the following additional properties are enabled:
Active Tabs:Specifies the Tabs that will be shown as active. By default, Tabs that you
specify in this property are shown expanded.
Expanded Image: Specifies the image that must be displayed when the Tab is
expanded. Something like: O
Collapsible Image:Specifies the image that must be displayed when the Tab is
collapsed. Something like: w
Image Position: Specifies the position of the image on the Tab. The image can be
aligned to the right (default) or left side of the Tab.
Tab Name Alignment: Specifies the content alignment of the Tab Name. The Name can
be aligned to the left (default), center, or right side of the Tab.
Toggle Tabs: Specifies whether the content of a tab will still be displayed ifyou clickon
some other tab.
Ensure not to keep the same alignments for Image position and Tab Name alignment
properties as it will result in overlapping of image with text.
50
A*
TabPane - tabview
kony
Using this view, the Tabs will show one at a time with the
tab titles shown across the top.
Using skins, you can configure the tabs to have the look you
want.
You can view only one tab widget at a time. To view the
content of another Tab widget, you must select that Tab
widget.
Allthe tabs will be placed at the top of the screen.
es
_*tflDl43 11:48 AM
Ht Wekom. Iti K
[_
.__
kony>c
Using this view, the Tab widgets are placed on seprate pages.
There is the "dot" indicator showing what Tab you are on.
Indication of the number of tabs and the present tab is mentioned at the bottom of the
I
swipe
51
AA
k*<
Used to support Windows Phone 7 Standard panoramic view for a home screen.
The complete content of the active tab is shown initially in this view.
Navigation is similar to iPhone where you swipe left/right to navigate between tabs.
You can specify an image that will span the entire width of all the tabs side by side.
mHHBHMB
9m999999^^K.9999^9^.9999W
ij^L-^l
i^L^^B
kony
Panorama Image:
The image size should be between 800 x 480 and 800 x 1024 pixeis (height x
width) to ensure good performance, minimal load time and no scaling.
Space above tabs is 173 pixeis is displaying the panorama title, the rest of the
image is behind the tabs (so if your tab skin is transparent, you'll see the whole
image).
Panorama Title:
Specifies the title image that must be placed over the Panorama Image.
If both Panorama Title and Panorama Title Image are provided, then the text
specified is placed next to the Panorama TitleImage.
52
AA
On non-touch devices which have a navigation key, the following are applicable:
You can navigate within the TabPane using only the down key.
If you press the down key, the focus shifts to the next widget in the Tab.
If you press the down key while you are on the last widget in the Tab, you are taken to
the top most widget in the Tab.
If you press the right or the left arrow keys, you move to next or previous Tabs.
Tab cycling is supported (i.e., if you are on the last Tab and you press the right arrow,
you move to the first Tab).
For example, if a button of Tab2 is in focus, and you navigate to Tab1, when you
navigate back to Tab2, that button will still be in focus and not the first item in the
Tab.
Always consider the experience on non-touch devices ifthey are in your target outputs.
TabPane -Skinning
kony
A tab widget can be in active, focus and inactive states in terms of Ul representation. So
TabPane widget supports following three skin properties:
Active: This property specifies the skin that gets applied to a Tab widget which is in
active state.
Active Focus: This property specifies the skin that gets applied to a Tab widget which is
in focus state. This skin property typically gets applicable to non-touch devices where
focusing of a widget plays a significant role in Ul representation.
InActive:This property specifies the skin that gets applied to a Tab widget which is in
inactive state.
All these skins can also be applied dynamically using the following code snippet:
formld.tabPaneWidgetld.inactiveSkin = sklnactive
formld.tabPaneWidgetld.activeSkin = skActive
formld.tabPaneWidgetld.activeFocusSkin = skActiveFocus
53
XA
TabPane - Properties
kony
You can set the active tab with the Active Tab property in the IDE.
You can also set this in javascript with the following code snippet:
myForm. myTabPane. activeTabs = 2
If you've selected collapsibleview, then you can optionally set more than one tab as active
using the Active Tabs property.
al
For example:
Tabs List:
TabCar
tabfe
myForm.myTabPane.activeTabs = {2,3}
Active Tac*
TabHome
.~J
nsh
Cancel
r
aa^
TabPane Event
kony
onTabClick
This event is available only when the view of the TabPane is set to collapsibleview.
This event is triggered when you click a Tab to collapse or expand it.
The function you specify can have this signature:
onTabClick (tabPane, tablndex) where:
"
Following code snippet of implementing the above callback will ensure functionality
achieved using "toggle tabs" property:
function onTabClickCalIBack (tabPane, tablndex) {
tabPane.activeTabs = {tablndex};
}
54
kony
preOnclickJS
postOnclickJS
This event allows you to execute custom JavaScript function after onTabClickCalIBack
function is executed.
Note: These callback function must exist in a JavaScript file under project>module>js
folder
kony
This event is triggered when a Tab is accessed for the first time.
This is triggered only once in Tab life cycle.
You specify functions/action sequences for each Tab.
This event can be used to initialize the static content of the widgets present inside the Tab.
55
XA
-
Considerations
-V
kony
For Blackberry, avoid using long content or more widgets above the TabPane widgets.
Otherwise, it results in bad user interface like jumping while scrolling the page. To avoid it,
set the widgets above the TabPane widget as non-scrollable using the blackberry platform
specific Fixed tems from Topproperty on the form. This will ensure the number of tems as
non-scrollable.
Dynamic access to the widgets on a Tab requires specifying the TabPane container.
For example, if my form (myForm) has a TabPane (myTabPane) that has a certain Tab with
a label (IbIMyLabel), then accessing that label's text property is done as follows:
To avoid jumping effect on BlackBerry and J2ME, we suggest that you not to place lengthy
textual content above the tab bar while you switch the Tabs.
kony
56
AA
Calendar - Overview
kony
The Calendar widget is used as a user friendly way to select the date.
Generally, Calendar widget appears as a label with a small calendar icn and displays the
date or the date format specified by developer.
'USAD 2:41 pm
t e
dd/mm/yyyy
Android
Monday, September 3,
2012
TT"
-;-
Sep
03
Set
Calendar - Appearance
* 1
2012 1
Cancel
kony
Blackberry
: BlackBerry
I i^Bi
dd/mm/yyyy
Select Date:
3 Sep 2010
] Done j
iPhone
Carrier "5"
2:48 PM
I
dd/mm/yyyy
B-
57
"
Calendar-Appearance (cont.)
kony
Mobile Web
Windows 7
Calendar - Properties
i**
kony
Date Format:
MM/dd/yyyy, MM/dd/yy
Dafe:
This property can be used to specify the default date to be displayed on the Calendar
widget.
Date Component property can also be used to set a date(24th May 2011 04:30:55)
using code as follows:
frmCalander.calendar1.dateComponents = [24,05,2011,04,30,55];
An array object with six elements in [dd, mm, yyyy.hh, mm, ss] format should be
assigned to dateComponents property.
58
XA
kony
Date components property can also be used to retrieve the selected date by user as
follows:
Day, month and year of the selected date can be retrieved using following properties:
var IDay = myForm.myCalendar.day
var lMonth = myForm.myCalendar.month
var lYear = myForm.myCalendar.year
kony
Mobile Web BJS: The available views are normal, collapse and inline.
Before Collapse
j show |
1/1/1950
After Collapse
1/1/1951)
| show ]
1/1/1950
Januory
1 Joriuoiy
*i|l950
1950 -
| Done | [ Cancel
Cancel Button skin and Done Button Skin properties can be provided on selecting view as
"collapse".
59
XA
kony
Properties and Ul look andfeel remain same as Mobile Web BJS for list box onscreen and
list box collapsible views.
Additionally Placeholder, titleOnPopup, and weekdays properties can be specified for list box
Popup View.
September2010
S
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
r
r
Calendar- onSelection
[pise
kony
The onSelection event will be fired once the User has selected a Date in the Calendar.
Following code snippet implements the above callback . Itwill ensure that user enters only
valid date.
function onSelectionCallBck(calendar)
{
60
ikony*4
Wheel Calendar with mode as only Date (Phone only) and Grid Calendar:
myForm.myCalendar.validEndDate = "mm/dd/yyyy"
myForm.myCalendar.validStartDate = "mm/dd/yyyy"
Note: The order of the digits entered in the above code snippet is not dependent on the
display format. You can only enter the date in the dd/mm/yyyy format.
A{
kony
On setting this property, the calendar widget appearance will be similar to the
appearance of the calendar on the underiying platform.
\^.9999999999999999999999999999999999M
Bid
zl'
San Defaults
gridCdGdecttdSlan:
E>jn Defaults
_d
grldCeTocusSUri:
Skin Defaults
zi\
d
yidCelTodaySIan:
Sten Defaults
z\
Stan Defaults
gridCdEnscbveDflysSkri:
z
E.TOJ.... | X
Sta Defaults
leftNavigabofiImage:
Brame... | * \
Stan Defaults
ancArttonSUfu
Stan Defaults
zl
z
v almWKkerriSeJectabte
OK
Canoa
61
Calendar-Clear API
kony
calendar .clear method can be used to clear the date set in a calendar.
On using this API, the calendar widget will display the selected format.
*
Dafe property will return nuil after using this method until the next user selection on the
Calendar widget.
Syntax: calendar.clear(myform.calendar);
If you clear the date set in the calendar using calendar.clearQ API, the calendar label will
display the value set in the "Format" field and the date will be reset to nuil.
xa
kony
skin specifies the skin to be used to represent the enabled or disabled dates.
enable specifies the boolean value that indicates if the dates listed must be enabled or
disabled.
myform.calendar1.setEnabied( {{28,05,2012},{04,07,2012},{25,12,2012}},
skinl,
faise)
62
A'
kony
calendar.setEnabieAii method can be used to enable all the dates that fall between the
enabieRangeof Dates method allows you to enable/disable the range of dates that fall
between the startdate and enddate and disables/enables the rest of the dates.
"
Usage :Calendar.enableRangeOfDates([07,04,2012],[21,04,2012],skin:"si",true);
kony
calendar.setDateskin method can be used to set the skin and control the look and feel of
each cell in calendar.
skin specifies the skin to be used to represent the enabled or disabled dates.
63
Line - Overview
kony
%M<M 7:32 PM
VarlosvW
V Une
Inside hbox
'
kony
The Phone widget is a Button widget that is hardwired into the kony.phone.dial method.
The Phone widget also has an Image property that can be used to set the image outside of
a skin.
In some devices there may be an alert warning user about leaving the application
and switching to the dialer application.
When the Phone widget is clicked, ALLthe specified text will be sent to the dialer - there is
no event to change the value.
Chars like "+" or"(" or ")" appear on the widget text and will be passed on to the dialer app
on the device.
64
\A
kony
as an image
lu
flfflje 10:53 AM
/B^
kony
Phone widget properties are accessible in code and via the event editor.
To set text dynamically which is the phone number use the text property just like a label.
Considerations:
Unlike other platforms (for example Android, BlackBerry etc.) you will not be able to
simlate a Phone widget behavior on an J2ME emulator.
Use a link widget with the click event calling the phone.dial method
Note: advantage is that you can dial something other than the link text - unlike the
widget.
"
In some devices, like OS, you can have the OS automatically identify phone numbers
in text and provide the click to call automatically (example, the Browser widget with the
detect TeINumber property set to true).
65
JA
kony
1 Hybrid Application
1 Module-Services (contd.)
1 JSON Service
Module - Internationalization
66
HTML5 - Overview
kony
HTML5 is the latest standard from W3C defining markup for the browsers.
Represents a significant leap on the previous markup standards of HTML4 and XHTML.
Broadly HTML5 family comprises of:
HTML5 Markup
CSS 3 Specification
JS Libraries
67
r
r
HTML5 - Features
kony
Local Storage
Web Storage
Geolocation
Multimedia
Canvas API
2D Drawing API
Web Workers
Server-Sent Events
Event Source pattern to maintain the
Web Sockets
New bidirectional protocol over
HTTP
Communications
SVG
Motion Sensors
Accelerometer, Gyroscope,
Magnetometer
Touch Events
CCS 3 Basic
Touchstart, touchend,
touchmove,
touchcancel
CSS 3 Transforms 3D
Scale3D, translate3D, perspective,
rounded corners
matrix
backface
CSS 3 Transitions
CSS 3 Animations
Animated with keyrames
CSS 3 Transforms 2D
Viewport Definition
XMLHttpRequest
Notification API
Debugging
2.0
CORS
Cross origin resource sharing, or
File API
WiFi
request
Indexed DB
Overview of SPA
kony
ASingle Page Application (SPA) represents a special type of the web applications
In SPA, all the application screens are expressed as a JavaScript model/CSS (unlike JSP,
ASPX in a typical Mobile Web application).
JavaScript model/CSS are downloaded to the client-side with the first page download and
resides on the client for the lifetime of the session.
Each form and its widget hierarchyis represented as a JSON object. This model is then
populated at runtime with the data that drives construction of the resulting DOM.
The application requires server interaction only for data retrieval
Supports only HTML5 compliant browsers. If the Browser does not support the HTML 5
then it will fall back to the XHTML or BJS or Adv.
68
AA
kony
BlackBerry 6.0 and 7.0 (Touch Devices) and Non Touch HTML5 6.0
kon-i%
SPA
CONFIDENTIAL
138
69
4'
kony
Application Code
JSP/JS/CSS Logic
Services/Data Connectors
Mobile Browser
Enterprise
Application Code
-
JS/CSS/Loglc
Services/Data Connectors
Enterprise
Mobile Browser
kkony.V-
Allows for cross-session and single-session local data storage with Web
SQL.
Allows for new input types suchas number, range, e-mail, URL, data picker,
color and many more.
r
r
Elements
and more.
elements
in.
Browser must support one of the supported formats of each and the source
media must be available.
70
CSS3 2D & 3D
kony
Transformations -
CSS-targeted media
queries
Allows for dynamic gradients rather than static images and image UX effects
Corners, Shadows
CSS Selectors
Essentially these are rules that can be applied to specific widgets when they
satisfy a certain condition.
CSS Transitions
Allows for sizing the background images when applied to container elements
like form, box, pop-up etc.
kony
HTML5-capable browser
Third-party JavaScript
mobile-optimized widgets
Geolocation APIs,
LocalStorage APIs, WebSQL
Mobile browser is now able to lcate user withpermission granted for one or
mltiple sessions.
APIs
History APIs
71
r
r
kkony.Y-
Ability to launch the app in full view mode in iPhone (by using "Add to Home screen"
option).
kony
Application is packaged
>
i*
war
i r
Device Detection
(Check if orowser
Suppc>rt SPA)
can
72
kony
All the JS files content is copied to one file i.e app.js and can be found at <wor/cspace>/n/eft
apps/<app name>/spaandriod/appjs/.
Each form will be converted into a JSON object and added in the app.js file
At the run time, in the production, the browser will cache the app.js along with the other java
script libraries.
The konymanifestfile lists all the files that are to be cached
The kony.manifestt'e will be available in the production and not in the local environment
The SPA application will check the time stamp and versin present in the konymanifest and
will download the new versin only if there is a change.
kony
Since browser implementation of JavaScript is single threaded, all the network calis must
be asynchronous i.e kony.net.invokeServiceAsync.
For writing any SPA specific code using preprocessor (ifdef) statements, use the
preprocessor keys in eventeditor.
73
Debugging SPA
kony
Using FireFox add-on's FireBug and UserAgentSwitcher we can see all the pnnts in the
consol.
i
4-
iij^W^BB
-.
w^"^
MM^.^MMM.
lj-;
'1
<"
MalM
<
<h
( M . MM
L* MM M M
M* ; M l-*i *f> M> MnWi
RSS
kony
Objectives
-
All the Ul gets generated on the client side in case of SPA application whereasthe
same happens on the server fortraditional mobile web application.
Procedure
' Remember the fox news exercise we have created. Nowbuildthis exercise for Mobile
web including SPA platform.
You will observe thatthe Ul is getting generated onthe server as even for simple
screen navigation from form 2 to form 3 it involves a network call.
r
74
kon'1 *
Nowchange the user agent of the Firefox browser to pointto iPhone 4 user agent. Use
"User Agent Switcher" add on installed on your Firefox.
Now again access the fox news application. As we have changed the user agent, SPA
application will be sent to browser.
Test the entire flow of the fox news application again. Now you will observe that the Ul
is getting generated on the Client.
Assignment
kony
I 10 18.82:8888SPA.
-S, Kony
*
<'.
Kony
Empowetmg Everywhere
75
r
Hybrid Application
kony
But unlike native applications, entire layout rendering is done through the UlWebView
(iPhone), WebView (Android) or BrowserField (BlackBerry) instead of the native SDK
widgets.
The hybrid mode, enables the developer to take full advantage of the native features
without loosing the comfort of having an HTML5 compliant application.
Hybrid application CANNOT utilize native Ul widgets such as Title Bar, Application Menu,
ListView, TableView, Searchbar, native animations and so on.
The native SDK is invoked only for native devicefeatures like GPS ,Camera, Contacts,
As the application runs inside the native shell, it savailable as natively deployable package
(.app, .apk, .cod and so on) and can be distributed through app stores.
r
r
76
, '4
kony
Go to native context :o
invoke native device
features / perform
native operations
SPA (HTMLS7CSS/JS)
executetum tioninspaconlext
Go lo SPA context to
All the coding guidelines of creating a SPA application are applicable to hybrid application
as well.
kony
Youcan crate hybrid application using regular forms (Native forms). The build process
ensures that they are converted to Static forms (i.e. SPA based forms).
All the native , static and dynamic forms are converted to JS.
You can use the following two APIs in a hybrid application to share the data between SPA
context and native context.
kony.hybrid.executeFunctionlnNativeContext
("functionName",paramsList)
1
77
kony
4'
kony
kony.hybrid.executeFunctionlnNativeContext ("nativeFunction",
paramsList)
This API provides the ability to send data from the SPA context to native context.
; nativeFunction - Specifies the function that needs to be executed
"
Usage -
kony.hybrid.executFunctionlnNativeContext("sampleNativeFunction",
{"Surya",true,{"ATL", "Permanent"}});
// Business Logic
}
78
XA
kony
kony.hybrid.executeFunctionlnSPAcontext
kony.hybrid.executeFunctionlnSPAcontext("spaFunction",
paramsList)
This API provides the ability to send data from the native context to SPA context.
Usage kony.hybrid.executeFunctionlnSPAcontext("spafunthree",{"mahesh
",2012,faise});
function spafunthree(name, birthYear, isValid)
{
// Business Logic
}
J4
kony
Here is a simple hybrid applicationwith a single form showcasing the build steps and API
usage.
~ Kony - WrapperJSExenise/fonns/inDUe/hinllativeJd - KonyOne Studio
File Edit Navigate Search Project Run Wicbw Hete"
i-
| <i | / | 9 411
__ I a Kony .,_,Resource
'HAppt.... Z ' tr.Navig..
WrapperJSExerase
13 forms (!)
Ei M mobile (1)
frmNative
J tablet (0)
v desktop (0)
Q popups (0)
*.. templates (0)
<.. modules(2)
f/ web_module (0}
resources (2)
-_. services(0)
Assume string concatenation is only possible in Native context. Let us pass "Helio" and
"World" as two strings to the native context, which concatenates the string and updated
string it sent back to the SPA context.
79
kony
function callNativeContext(){
kony.hybrid.executeFunctionlnNativeContext("nativeFunction",
{"Helio",
"World"});
}
function nativeFunction(datal, data2){
var concatData= datal + " " + data2
kony.hybrid.executeFunctionlnSPAcontext("backToSPA",
{concatData});
}
function backToSPA(msg){
frmNative.lblNative.text = msg;
frmNative.show();
}
Native context function is used only for achieving the functionality (concatenating the
strings) and passing the control and data back to SPA context.
Since hybrid application is created as a native binary, you will notice that Native
channel and Mixed Mode build options are disabled on selecting hybrid channel
4 L
kony
app
h7 (o Hybrid
1* J Phor*.
W
Android
W v- IJiadcbory .O andabovei
Cf Mreed
I-
' iPhone
l~ Q. Android
IBlackberry 6.0 andabove
Mutually Exclusive
aii
r ; iPhone _fe|
T Android J|j
r
g Mango(7.5)
160
80
kony
Code is converted to SPA structure during that buiidtime just ike a SPA application build
process:
Computer NewVrjJume (G:) Kony5 - KonyOne - KonySampleWorkSpace temp - WrapperJSExercise - jsoutput Indude m brary
Share with
Bum
New folder
Date modified
Type
js
8/29/2012 3:51 PM
Fe folder
jsvvrapper
8/29/20123:51PM
File folder
spaandroidvvrapper
8/29/2012 3:51 PM
File folder
spacss
8/29/2012 3:51 PM
Filefoder
. themes
8/29/2012 3:51 PM
Fe folder
fi frmftotrve.xml
8/29/20123:51PM
SafanDocument
,_ htrrrfkeys. properties
3/29/2012 3:51 PM
PROPERTIES Fue
_ rmnifVspafiies.properties
8/29/2012 3:51 PM
PROPERTIES File
H Settings.properties.xrnl
8/29/2012 3:51 PM
SararDocument
j WrapperJSExeroseapplication.xm.
8/29/20123:51PM
SafanDocument
5KB
^, WrapperJSExeraseglobalsequences.xrnJ
8/29/2012 3:51 PM
Safan Document
1KB
Name
*.
kony
..riiCarrier 9
5:18 PM
"i
Mello Woild
Ensure that Android SDK is 2.3 or above and iPhone is 4 and above
81
kony
Mixed Mode application is a versin of the native application where some forms of the
application are rendered in the WebViewwhile others are rendered using the native SDK
Native - These forms are rendered inthe native context using the native layout and
components.
Static- These forms are rendered using native web view. All the HTMLAJS/CSS
required for the form will be packaged STATICALLY along with deployable binary (just
like SPA).
Dynamic - These forms are also rendered using the web view by loading the URL of
the form dynamically.
The advantage of Mixed Mode application over Hybrid application is the possibility of
utilizing all the native Ul widgets (in the Native forms).
82
"
XA
kony
(Native)
execute
natjvecontext
+
executemtccont ?xt
TC
execiAfpwispaca/itext
:-
HTML5/JS/CSS
Native Forms
Device
For native and static forms, the context resides on the device. But for the dynamic forms,
the execution context resides on the server.
You can use the following three APIs in a Mixed Mode application to share the data
between the three different contexts.
kony.hybrid.executeFunctionlnNativeContext("functionName",params
List})
kony.hybrid.executeFunctionlnSPAcontext("functionName",paramsLis
t)
To pass the data to the SPAcontext (browserwidget context wrapped inside native
shell)
kony.hybrid.executeFunctionlnTCContext("functionName",paramsList
)
To pass the data to the thin client context (forms which are loaded from a URL)
83
r
r
X-
kony
Here is a simple Mixed Mode application with three forms (one each for native, static and
dynamic) showcasing the build steps and API usage.
i-,-
;-.-
sffi x
Kony ._,RSOurce
-
153
- K mobe(3)
t[| frmDvnamic
v
frniNative
^3 frmStaec
& tablet(0)
...
\"/
web_module (0)
i resources (2)
_ services (0)
r
Simple Mixed Mode Application (cont.)
kony
Here is the code to reach Dynamic form from Native or Static form:
function callDynamicForm(invokerlden){
var dataToDynamic = "Helio from " + invokerlden;
kony.hybrid.executeFunctionlnTCContext("passDataToDynamic",
{dataToDynamic};)
}
c ~
,,_.,
~~i
I (including
84
XA
kony
Similarly, here is the code to reach Static form from Native or Dynamic form:
function callStaticForm(invokerlden){
var dataToStatic = "Helio from " + invokerlden;
kony.hybrid.executeFunctionlnSPAcontext!"passDataToStatic",
{dataToStatic};)
}
function passDataToStatic(inputData){
frmStatic.lblStatic.text = inputData;
frmStatic.showf);
referenced function
kony
Finally, the code to reach Native form from Static or Dynamic for:
function callNativeForm(invokerlden){
var dataToNative =
kony.hybrid.executeFunctionlnNativeContext("passDataToNative",
{dataToNative});
function passDataToNative(inputData) {
85
r
r
-i
kony
Since Mixed Mode applicalion is created as a native binary, you will notice that Native app
channel and Hybrid build options are disabled on selecting hybrid channel.
r
Phones - Mixed Channel
rd
Phone
"^v
p ti
w
Hxed
.Phone
Android
p
w
Mutually Exclusive
Phones - Native App Channel
All
Phone j
r O1 android f|]
Mango(7.5)
"
kony
Ifthe Mixed Mode application consists of dynamic forms, we must provide the server details
where the dynamicforms are hosted (as a war file similar to a thin client application).
-Jfll.il
Application Properties
Q"
.^^^.i^y^^^^^.B^^^^i^Qs ;tohveApp.Sph5aema.Vt)v^
Shortcut icons
Browse | Oear |
Browse
Oear I
r
GcnwaliBa^l^tsiAppMcrMr^e
Folowng detafe w*be used to forma URL, wUd ts used fbr dynarmc forrosn rmxedmode.
If itis local testing, Jettyweb containers IPand port can be given. However, the IP and port
86
Build
kony
Share with
Bum
Name -
^wfolder
jDate mofied
android
8/29/2012 4:40 PM
| Type
1-
Fuefolder
js
8/29/2012 4:40 PM
File folder
jshybrid
8/29/2012 4:40 PM
Refolder
spaandroidmixed
8/29/2012 4:40 PM
Filefolder
spacss
8/29/2012 4:40 PM
Fe folder
themes
8/29/2012 4:40 PM
Re folder
(3 frrnDynamic.xml
8/29/2012 4:40 PM
Safan Document
50 KB
*frmNative.xrrJ
8/29/2012 4:40PM
Sarar Document
50 KB
50 KB
i frmStatic.xml
8/29/2012 4:40 W
Sarar Document
^ htmftreys.properbes
8/29/2012 4:40 PM
PROPERTIES File
j? minifyspafiles.pToperbes
(*] WxtJSExerdseappicabon.xrrtl
[^jMixedJSExerasegiobalsequences.xml
j**j Setbngs.properbes.xml
8/29/2012 4:40 PM
8/29/2012 4:40 PM
8/29/2012 4:40 PM
8/29/2012 4:40 PM
PROPERTIES Re
Safan Document
Sarar Document
Safan Document
1KB
25 KB
5KB
1KB
2KB
i^J^^^^^^^^^^?^^^K^^^i^^^^^^^^^^^^M
kony
0otoDyn4m.c
GotoN*tiw
Gola itMc
Since the execution context of different forms is different, the logs also have to be picked
from different places!
87
kony
For Native and Static forms, the logs are printed in the Native consol. Here is the output in
Android:
-
I/Web Console(
874): kony.hybrid.executeFunctionlnNativeContext
< at file:///andr
id_asset/web/jslib/konycore.js:55
I/Web Consol)
874):
invoked internal.
executeFunctionlnNativeContext at file://
/android_asset/web/jslib/konycore.js:55
D/KonyHybridJSInterface(
874): executeFunctionlnNativeContext()::
methodName=pa
D/VM Function(
874):
D/VM Functionf
D/VM Function(
I/Web Consol)
874): kony.hybrid.executeFunctionlnNativeContext -
>
at file:///androi
d_asset/web/jslib/konycore.js:55
D/WindowsLib(
XA
The logs for dynamic forms are printed in the middleware.log (similar to thin client
application)
09 Jan 2012/15:57:22 DEBUG common.KHttpServletRequestWrapper Param Name:hybridparams Param value:["Helio from Static"]
88
kony
Though it is possible to invoke the respective contexts for data sharing, itcan lead to
performance issues as the application size grows.
It is recommended to have an entire functional module to be web-based or native module.
For example, the forms in the payment module can be marked as Static, while the forms in
the Remote Check Deposit modules can be marked as Native.
These modules should be independent pieces of functionality and have clear entry and exit
points.
kony
Objectives
Concepts
One single application can be created using Forms of different nature (Native, Static
and Dynamic) in which Ul can be created either using native widgets or HTML5 Ul
Components.
Procedure
Crate a New Application with three Forms. Set nature of one Form to native, another
one to Static and third one to Dynamic.
89
'
kony*
r
-
r
r
kony
For SOAP Web Services, we'll provide a WSDLand then pick/configure the services we
want to connect to
The National Weather service has a publicweb service. On their home page
<w.v
" *
'
""
T, ' mL
"
m m
"~
QM
=f*W
i
--
-*!.
IM
X1
Erwrt
-J
r
90
XA
kony
Right click on Web Services and select Add Web Service WSDL and give the WSDL URL
and click on OK.
$'SoapSile:W-b-erace(SOP)l>Miori 3
Services
wl
Search Services: \
"J
E=JZ
*
kony
Right-clickthe service you want (LatLonListZipCode in our example) and select Add
to add
that definition.
*; SoapSarrujple;Web Service(SOAP) Defrttjor. U ;
Service*
Define Srvice
'
Search Services: |
B WebServices(1)
GmLatLonst
0
0
9
0
| LatLonListZipCode
JRL*;
| http://grapical,v.eather.go ^/xml/SOAP_5.
oap Action:
| WealherServiees
r CornerPanls
9
.erviceID":
| hito:-' griptvcal.'.'.eather.go
7xml,,D'.VMgt
BroiTOe,..
*reprocessof Class:
JRL Provider Class:
Browse...
GmTimeSeries
LatLonstCityNames
3a ta Provider Class:
Browse...
LarionLstijrie
LatLonL.stSquare
sOS(processor Class:
| Browse...
0 LaJjrtr^tSufeorKP^-v^
nmeout [.ms):
3 Cachable
ff &MK C NTLM
w
fC)H>oeriLalLoriijst
eV Librarles (0)
User ID: [
NTLMHost: |
Pass.vord:
rm.MDomam: j
_d
Response encodiny:
esportse
1Get Response
91
"
kony
parameter
In the Request rea, we can look for how that value is entered:
lequest
Response
<soapenv:Body>
<jidLal-c^st2icodesoapenv:encodingSt>le=Titcp://5clieinas. wnisoap.org/soap/encodHig/*>
<zipCodeUstOTlns;ck\'mU'http://graphical.weather. gov/xml/DWMLoen/sdremaWML.xsd'K5i:type'd'ATnl:iipCodeListT\Pe'>'<^!ipCodeList>
</ndf:Latt.on-islZcCode>
</soapenv:Body>
</soapenv;Envelope >
In this case we can see the ? Indicating that it needs a value there
To test this we can replace the "?" with "98033", save it and click the Get Response button
We can then see results in Response rea and the value are 47.6727.--122.18
Enter that into Google maps and you see that zip code on the map
r
r
kony
Now that we know what data to put there, we can crate an Input Parameter with a test
value and use that:
Add
ID
| Testvabe
.apcode^
lequest
98033
Response
<soapenv:Envelope xmJrB:ndf-Titlp://graphic.v.-eather.gov/xrf
I Datatype
strng
|P
Encode
Desaiption
true
'
xrfrB;soape-^ttp./,KrWfw^
xrfns-xs
<soapenv:Header/>
<swpenv:Body>
<r>vdfUatLorUst2jpCode sc>ape;eTKDdingStyle->.ttp://.Kher^
<zirX:ode|jst>mlris:dwml-Tittp://'grarjhial.weatrier.gov
:,'ndf:LatLonList2ipCode>
</5-oaper.v:Sodv >
</soapenv;Envelope >
Request,Response
92
kony
The final step is to configure our Output Parameter to retrieve the data we want
In this case it's buried with other data so we'll have to parse ourresult string in codeto get
the actual vales
~"~-^
Results
Test
ID
| XPath
Lationg
1Scope
/AstLatLooOut
response
| Datatype
j CoBecton... | Record ID
string
1Format
None
Our results (click Get Response button and then the Results tab)
Http Headers Input Parameters "Output Parameterf Resiits
^Va^erT/sdTeiria/^
kony
Make sure all your definitions are saved and working properly
Seardi Services : |
.__ SharePomt 5ervers (0)
3 WeatherSerMces
0 CwnerPomts
0 Gmi.BtLoni.ist
0 GmlTiroeSeneS
*
LatLor4.statti.ame5
S LatLonstUne
9 LanonstSquare
0 LattonListSubgrid
0 LatLonLoLZipCode
0 tOFDgen
> tJDFDgenSyDay
0
troFDaenBiOovLatloriit
tC^DoenLatLonUst
a. Librarles (0)
93
kony
Objective
Concepts
For SOAP Web Services, a WSDL is provided and then the desired services can be
selected and configured.
Procedure
You'll need 2 points to anchor the rectangle. For example you can use:
33.870416,-87.703857 as the upper left crner
31.709476,-84.957275 as the lower right crner
continued...
kony
- Use "CityTown" for the ptype in the service call and limit your results to something like
20.
Crate a small one screen app that has a "go" Button to call your service and listthe
resulting vales in a segment.
' Request/Response
Request
Response:
<soapenv:Envelopexmlns:msr=*htup://msrmaps,com/n xmlnsiSOi
<soapenv:Header/>
<soapenv:Body>
< msr :Ge tPlaces tlnRect >
<msr:upperleft>
<msr:Lon>-87.703357</msr:Lon>
<msr:Lat> 33.870416 </msr!at>
</msr:upper.eft>
<msr:lowernght>
<msr:Lon>-84.957275</msr:Lon>
<msr:Lat >31.709476 </msr: Lat >
</'msr:.o-.vernght>
<msr:ptype >CityTown</rrisr: ptype >
<msr:MaxItems> 10</rr.sr:MaxItems >
< /msr GetPIacestlnRect >
</soapenv:Body>
</soapenv:Envelope>
94
* i
kony
JSON Service
kony
A JSON service communicates with an external data source using JSON data connector
JSON Object is always represented by{ } in JSON response, whereas, JSON array s
represented by [ ] in JSON response.
Important Considerations
95
"
yA
kony
// - Selects elements in the document from the current element that match the
Here's the website we'll use as an example which takes a city name and returns the details:
http://ws.aeonames.org/searchJSON?a=Orlando
JA
kony
To crate a new JSON service, Go to json present under services in your application and
right-click and select JSON Services.
._. )1M-rt,.ac0.ww,ilrlf-aw
'
5 LTJ5 JsonApp
E LJforms (0)
E ES popups (0)
E lC templates (0)
m, modules (!)
I
-
'
'
i^itoevid
_d
ftVMM 0m
.r. v
:_- OMl
ty ,.\ieb_module (0)
E m resources (2)
E -*. services (0)
WKttmm -
E ' xml(0)
rwsui [n ril
...
1
1
1
1
1
1
ruM^H)
W sap (O)
siebel (0)
ffi / ) mainframe (0)
~D
Na W
shhwa |
D
O
* too,
"! ten Refresh
'ntttnitv.ifr lj _.-:e-. .
nao* i"mw .*>vr} fi..
* RFQ*rM/kome
r
r
96
kony
vXii
Search Services : j
Vabdconfigura on.
Id":
R. Ubraries (0}
| SearcrforOty
URL": | http://vi,s.9eciames.rjfg/searchJSON?qOriando|
Group: |
(?)
OK
Cancel
kony
tmmtm lm
|SM>vOb
_) i-n ^t pfryj-j v iwiiiiimiiH
i- ::
I
..
RUTU tanas tu
*
'-
tmatvtxt
.._-....
Q pj-
d
I'!
I_l
..
-.,...
l~--l
I--.-1
l
Duc
1 i w r* PrlUM
--*..:
'-"--' |
KMHi .- -. ; :-'.
IHUIB
|ir*i
xl
Our Results
97
H
i
kony
'
Define an input parameter named "cityName" and test the service by configuring a value
-
Ort
e Sanio*
\ :*,-. -.:
[K:f!**.Qe<r4rvt a s:ttmd^JO* K
ID
)fcV*^
Test Valu
dtyName
Iscope
I Datar/pe
request
Orlando
string
1-1
Corresponding results:
ftequcstj.Re.tpotise'
Request; Response
geonames : [
'countryCode': US",
'counyl lame": United States',
': y,
"fcIName": 'aty, vtlaoe,...",
"fcode': "PPLA2",
'fcodeName': "seat of a second-order administra uve divisin",
'geonameld": -4167H7,
Tat": 23.5333355,
Ing": -81.3792365.
"name': 'Orlando',
"popufaBon': 233300,
kony
Include following as part ofcity details: cityName, State, Country, latitude, longitude,
population, geoNameld.
Test the results:
*esn"B
^dd
ihtvMdntetorr
1Boif.o.
ts^Lflunt
r.VfCri
/tyetwm,
uivflm
MM
'espolie
J :*Uii}>e
lUKta..
vms
'Wne
rnrn~v
iwm
ww
**r?
...;..
Hw*
sima
CWLo
'tone
yOH
SUtC
ilrvfiw:
-;-:-.
ttkJtny
mjnirytMne
rrywn*
atituJc
Mmr
ttonr
oiv.r
Itig
uyGJ
Nor-C
krtg
n*Ww
mg
raryM
tnw
lwjuU'j-j-i
uuuUativi
eiivv:
l*ny
otCbI
'..-*
3tor**mtl
Q-tV-tentiC
resera
(T*ig
cM.<K
tttne
-.-.7-,-t.-
IlUOT
at*K*JrftiCount
Corresponding results:
-**".
llitPwjnrM iueutnviw
ratertar. s-'ctKar"
lr.HJ.
.41*71*7.
r
r
98
-*4
kony
Right-click the service i.e searchForCity and select Add to add that definition to Selected
Services.
' "JsonApp:KON Service tefiniton 3
'^"J)rW^:-rSOKSvDefinibon S3
Search Services ; |
Search Services: |
B i^RESTM Services (1)
E -S Pther (1)
0 Ey27iwaw
:e h_L.^.I
HE- Ubraries {0)
i^JEdit
X Dte te
Genrate the service definition for SOAP services is similar to XML services
11
Composite Services
kony
If you need to execute two or moreservices at the same time, then you can achieve that by
creating Composite Services.
Using Composite Services, you can combine two or more services web services, XML
services, or Java services.
For creating a Composite Service, you just haveto selectthe services from the existing
services that need to be combined together. You do NOT have to define the input and
output parameters as they are already defined!
There are two ways in which the composite services can be invoked:
Sequential: Indicates that the services will be invoked in the order you specify. Also, the
output of one service becomes an inputto the next service.
Concurrent Indicates that the services are invoked independent of each other.
Invoking and execution ofone service does not affect the execution of otherservices.
You can crate more than one composite service for your application
99
kony
; Lj5 Corripo5iteServ.icexercise
uu
i* !3forms (1)
*i*modules (0)
O webjnodUa (0)
S
resources (1)
* Fi ebel (0)
ffiO mainframe (0)
SI * java (0)
* * BBBSBBB
** loopng (0)
Click on Crate
kony
-IX
J.iri,*-.HTV-.liS.,'
0m-Ctr_.VJe-.
(i-V<it:t--je!ieiVLrt:_ij,--!tjytE.:n
JJ
r
r
100
AA
kony
The created composite service appears under the CompositeServices pane as shown
Below.
. CimposteSw*,ase:ConpoHi_ Service DefirtDcn _3
- Composite Service
1l__I.I
Total: 1
;- yeB'i*evei-f^tBuyStaesLiXat>orii::SeaAient^
oelGtyService
oelSett^yStorelixatioris
I v Oeste1
| , . |
| XDtele |
1
1
1
1
You can also specify the Post-processor name for the selected composite service
Once you are done with creating the service, you can follow the same way of generating
the service definition file.
Since the services are being run on the server, you must configure your services to store
those outputs/inputs in session.
Here's an example:
I will crate a composite service to first convert my lat/long to a cityand then call the
second service to find stores around that city.
101
AA
Search Services : |
X -il
w Define Service
E,ervio-ID":
URL":
http://ivhere.yari
Htto Method:
GET
TbelDffeMBrriarxfatory
-3 <efp other(2)
# _oeQeblBjr&IoreLocations
Qi)
'reprocessor Class:
URL Provider Oess:
sv orane.
ata Provider Class:
session.
Timeout (nms):
J Cachable
Basic f~ NTLM
User ID:
Pas-Trvord:
imMHost: |
^ M Dorna
r
Composite Services - Sequential configuration kon'C*
Seardi Services: f
RESTfU Services (2)
B __- SelectedServices(2)
a Mher 2)
Http Method:
Preprocessor Class:
9 getCityService
B
Libraries (0)
Data Provider Class:
Postprocessor Class:
Tmeout m ms):
D Cachable
P Bask r MTLM
User ID:
fJTLMHost: [~~
102
'O
H get-learBvBestBuyStoresLocaborts::Sequenhal
getCityService
getBestBuyStoreLocab'ons
kony
Objective
Using Composite Services, you can combine two or more services web services, XML
services, or Java services.
There are two ways in which the composite services can be invoked:
Sequential: Indicates that the services will be invoked inthe order you specify.
Also, the output of one service becomes an input to the next service.
Concurrent: Indicates that the services are invoked independent of each other.
Invoking and execution of one servicedoes not affect the execution of other
services.
When creating sequential composite services, typically the outputs from one service
feed the inputs for the next service.
Procedure
103
kony
http://where.vahooapis.com/aeocode?a=<lat>.+<lonq>&aflaqs=R&appid=d0vJmk9c25
DYTZ1YWhNcHqxJmQ9WVdrOVNrURaV3hQTkdVbWNHbzlNelUxTXpRd01 UWXkmc
z1 ib25zdW1 lcnNIY3JldCZ4PTII
Hook them up so you can pass in lat/long and get the store locations
Test in a simple app - ok to hardcode inputs and print outputs to log
Note: make sure you use valid lat/long to get stores, if you use vales that represent a
city with no stores, you'll get no stores returned
r
-
r
r
104
Internationalization - Overview
kony
I18n supportfor an application has to be defined at the time of developing the application
Internationalization - Implementation
kony
118n for applications is supported by placing text and their associated keys in resource
bundles that are loaded into the application.
Widgets'text is not hard-coded in the application. Instead localized keys are retrieved
dynamically.
Region-dependent data such as dates and currencies, appear in formats that confirm
to the end user's regin and language.
For example, we can add a key called currency and its Unicode value for each lcale
will be placed in their respective resource bundles.
105
A A
kony
When a Konyapp launches, one of the first things to happen is the device's lcale settings
are checked.
In order to display the correct vales, the developer must load the resource bundle
corresponding to that lcale.
-
When the resource bundle for a specific lcale is not available, then the application rolls
back to the default lcale (specified n Configure Internationalization).
Your Job, as a developer is to:
kony
Aresource bundle is a properties file that contains all the 118n Keys along with their vales.
-
Example:
r
r
106
aa
Internationalization - Table
kony
~ior
UMEj
il8n
|r-_-5
| fi_CA
J*J*_
EtiVtd
..vd:
Matae^Mw.:
errwran
tvHngr.
i ogr>m.
m de f mvwn
| egn tn
11
'*:.;
f r
/mporf 118n
k*
-.'
---ri
'
.
Export 118n
. r
,*
mm
Before you use the 118n data, you should add the content intothe application
You can add i18n content into the application in two ways:
1.
_j
kony
You can add 118n keys one after the other manually
We can use the import option to browse to a properties file and load the resource
bundle.
Note: You can add 118n keys only after you configure the locales
107
XA
kony
After adding the 118n Keys into the application, configure the 118n Key for all the widgets in
the application.
Below we are assigning 118n key for a label
^iojxj
z*-.
Property: [
l*_'None
Sltx0.ogin
\ Valu
Name
-
Search: |
VtxtPwd
Genera!
id
IblUserld
is Viable
true
renderer
B __r
( text
Label\
Vjextil8nKey
Nong^/
E. _- Appearance
.vidgetAfignment
| ... J
'iVIDGET_AL]GN_CEUTER
conten^gnroent COtTH-'JT_.ALIGN_MIDDLE
wrapping
S
horizontal
vertical
WIDGET_TEXT_WORD_W
margin
Edkt
padding
Edit
Se (pixeis)
(448,26)
.Yidth
448
<\
Internationalization -API's
kony
18n APIs allow you to perform operations on the i18n Keys programmatically, rather than
from the IDE.
Use them to:
108
kony
kony.iWn.getCurrentLocale
This API returns the lcale (string) that is currently being used by the application to
poplate the localized data.
This lcale might be different than the system lcale. The lcale follows the format
language_Country.
var lcale = kony.il8n.getCurrentLocale();
kony.H8n.getSupportedLocales:
This API provides you the ability to retrieve a list of all the supported locales of the
device.
kony
kony.H8n.getCurrentDeviceLocale:
This API provides you the ability to fetch the current lcale of the device
kony.i18n.sResourceBundlePresent
This API checks if a resource bundle exists for a given lcale or not
109
&.
kony
kony.H8n.isLocaleSupportedByDevice:
This API provides you the ability to view whether a lcale is supported by a device or
not.
kony.H8n.getLocalizedString:
This API returns the localized string that corresponds to the specified i18n Key
var currentLocales = kony.il8n.getLocalizedString("1");
kony.H8n.deleteResourceBundle:
This API allows you to delete an existing resource bundle. If a resource bundle does
not exist, the API does not perform any operation.
"
2p
kony
kony.H8n.setDefaultLocaleAsync
This API allows you to set the specified lcale as the default lcale for the application
kony.il8n.setDefaultLocaleAsync(localeName, onSuccessCallback,
onFailureCalIback, info)
localename : Specifies the lcale that must be set as the default lcale of the
application.
onFailureCalIback: onfailure callback will be called by the platform if the lcale is not
set successfully.
onFailureCalIback(errCode, errMsg){
//code }
r
110
kony
info (Optional):
"info" is basically a user data where in the application developers will pass it to the
async API's and the platform returns this info object to the corresponding async
callback.
This parameter is helpful for developers to remember the context when the
methods are called in asynchronous fashion.
kony.H8n.setCurrentLocaleAsync:
This API allows you to set the specified lcale as the current lcale for the application.If
the lcale is not supported by the device junk characters will be displayed.
kony.il8n.setCurrentLocaleAsync(localeName, onSuccessCallback,
onFailureCalIback, info)
kony
kony.H8n.setResourceBundle:
This API allows you to set the specified resource bundle for a given lcale
If the specified lcale has a resource bundle already set, it is overridden with the given
resource bundle.
You must set the resource bundle for a given lcale to have internationalization support
for that lcale.
If no resource bundle has been set previously, this API will crate a new resource
bundle.
inputArray: Specifies the resource bundle that needs to be set for the given lcale
lcale: Specifies the lcale for which the resource bundle needs to be set
For example:
Kony.il8n.setResourceBundle({labell:"First Name",labe12:"Last
Name"},"en_US")
'
111
'
*4
kony
kony.iWn.updateResourceBundle:
This API allows you to append new key value pairs to the given resource bundle for a
specified lcale.
The key-value pairs you provide will be appended at the end of the resource bundle
If no resource bundle exists for the specified lcale, a new resource bundle is created.
updateResourceBundle( inputArray,
lcale) where:
inputArray-. Specifies the set of key value pairs that needs to added to the
resource bundle.
lcale: Specifies the lcale for which the resource bundle needs to be updated
with the given vales.
For example, to add the new key "Iabel3" with a value of "Middle Name" to the US
English bundle:
il8n.updateResourceBundle({labe13:"Middle Name"},
XA
Exercise - Internationalization
kony
Objective
Concepts
I18n for applications is supported by placing text and their associated keys in resource
bundles that are loaded into the application.
A resource bundle is a properties file that contains all the 118n Keys along with their
vales.
"
Procedure
SZZM
application
Configure Inlemationalization
il
hame
select Internationalization
112
XA
kony
Add 3 buttons to a form, leave the text as the default "Button" but set the 118N key to
one of the keys you've created above (the 3 buttons use all 3 keys)
In the application properties, configure the pre-appinit event to do the following (use the
snippet action or write a function):
Crate 3 local Javascript tables as resource bundles: one for Germn, one for
Spanish and one for English. For example:
var englishContent = {fname:"First Name",lname:"Last
Name",cont:"Continu"}
Note: you can make up or transate your text to crate your resource bundles for
the other languages
Check to see what lcale is currently running on the device
Based on the device lcale, load up the appropriate resource bundle. For example:
kony.il8n.setResourceBundle(englishContent,"en_US")
In Settings, go to Lcale & Text and change the lcale to whatever you want
kony
In Settings, go to Applications -> Manage Applications. Select your app - you can now
exit the app (Note: or put an exit button/menu item on your app to call
kony.application.exit()
initfnatiOfultiitionEiitfdM
Note: Since you didn't configure for all languages, setting the device to one of those languages
will cause the kony .il8n.getCurrentLocale( )method to return the default lcale
(set in App properties)
113
kony
.. Palette
jt Container Widgets
o Basic Widgets
Advanced Widgets
Windows Mobile 6 .
tf Deprecated Widgets
{0 Custom Widgets
< customDatePkker
';' myTwitterUnk
$*! dISlkle
"
114
XA
kony
4.
kony
c *
You need to have the third-party JS library consisting of implemented functionalities for the
expected custom widget.
Steps to follow :
1.
2.
0 Applications
- Navigator
i ^ SampleCustomWidgetApp
[Q forms (0)
Q| mobile (0)
\) tablet(0)
| desktop (0)
App Menu
Ser/ices...
Skin Defaults
.ntemationalzaton(18n)...
B>
Themes(Skins)...
Utilities
t\
Custom Librarles...
Custom Fcnts...
f/ webjncdule (0)
Internationali:ation(18n)...
EL
. Jjj popups(0)
* templates(0)
resources (2)
(2
"ir
Import }
Custom Widgets...
Export
Import Files^-P
115
XA
kony
Select the From Directory to identify the source directory where the thirdparty library files to be imported are located.
Provide the Into Folder location where the third-party library files should be
imported to.
Filo system
LJ
tj? mpleCurtom.Vidoet-pp
U091
J
Unchtte
medula
us
resources
build
de-iHop
rnebilerich client
mcb.letriindit.rit
t#bletri<hlient
C^^thtidpjrtyviidgeti
toMdM
kony
File system
EZ
* [ Browse-,
cr- Sencha
J ,
SenchaLib
"
Browse...
Options
\_^
Ftnish
^y
Cancel
116
kony
After the successful import, the Custom Widget library will be available
thirdpartywidgets folder as shown below.
under
* (f5 SampleCustomWidgetApp
IjT) forms (0)
;. 1J3 popups (0)
* templates (0)
.... modules (0)
^y webjmodule (0)
At
m resources (4)
build (0)
m common (0)
v desktop (0)
H mobilerichcient (2)
jB "iJHijetKiifijujffi)
{(_} sencha-touch.css
kony
KonyOne defines an interface that must be implemented by all Custom Widgets. This
interface is referred to as a widget wrapper. The wrapper:
The developer can make use of the modelChange call to make changes to the
Custom Widget state programmatically.
117
i.kony*
function modelChange(widgetModel,
propertyValue)
propertyChanged,
Using the modelChange function any changes to the widget properties are
updated both in the Kony widget model and the widget itself.
The widgetModel is a hash map containing key-value pairs of the properties and
its corresponding vales.
propertyChanged is the key of the property being changed
propertyValue is the new value of the property
44
kony
Custom Widget JS file can be created either in the application itself or outside the
application and can be imported.
Creating n Application: Switch to Navigator view and go to the widget wrapper folder in
the application as shown below.
le
4 \- SampleCustomWidgetApp
to bgimages
(5? customwidgets
i5 dialogs
to forms
jr:rc
modules
s to resources
to build
u common
Lir desktop
& 18n
. &
mobilerichclient
i>- mobilethinclient
-
ur- tabletrichclient
k._ tabletthinclient
4 ,_- thirdpartywidgets
,_ - SenchaLib
& widgetwrapperj
118
kony
Right click on widgetwrapper folder and select New and then click on Other as shown
below.
9j\ B^|
4} l3 SampleCustomWidgetApp
to bgimages
Lr customwidgets
dialogs
C_^_NewJ^>
to forms
jssrc
Golnto
to rnodules
d &
'
Ccp-
Kony Application
i:,
Project...
resources
e- build
Example...
Otherl/)
Ctrl+N
common
to desktop
Delete
il8n
Move...
moblerichclient
_
Rename...
L3 mobilethinclient
tabletrichclient
^ Import...
tabletthinclient
^^
r- thirdpartywidgets
t_r Senchab
c<_r^widgetwrapptP^5
>
Refresh
VIIHX
&+
kony
Expand General and select Folder and then click on Next as shown below.
Select a wiznrd
Crate a new folder resource
Wi:ards:
& Class
G Interface
: JavaProject
_ Foldei
'i_i Project
Untitled Text File
CVS
to Java
<Eack
119
kon-*
Give some name to folder, lets say Folder name as DatePicker and the folder
specification should be
<Workspace>/<App_Name>/resources/thirdpartywicigets/widgetwrapper
nter or select the parent folder
SampteCustomWidgetApp/reiources/thirrJpartj-vvidgets/widgetvvapper
- tabletthinclient
^"widgetwrppj
servcl
templates
themes
w eb_.mo dule
( SampleDynamic Themes
UP SampleDynamicWirjgets
t~ ScrapeMeExercise
t_r ScraperAppExerc.se
-
P^
foldername:Vgat.eP'Ckcr^y
, Advenced >> 1
(2)
<Bc't
(J
Fimsh
J^|
Canee
i^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^B
kony
1=1
1B % |
s) \$ SampleCustomWidgetApp
i_r- bgimages
i^- customwidgets
lt dialogs
&
forms
& jssrc
& modules
L^' resources
build
common
desktop
i- 13n
mobilerichclient
mobilethnclient
i3 tabletrichclient
L_r tabletthinclient
4 l3 thirdpartywidgets
i_r- SenchaLib
j 3- widcietvvrapp-r
^DatePicker )
120
kony
Right click on DatePicker folder and select New and then click on Other as shown below.
*\B%\9
4 Iczi SampleCustomWidgetApp
bgimages
i customwidgets
l3 dialogs
forms
>- jssrc
-
modules
!3 Kony Application
Golnto
4 13 resources
Project-
L- build
BPcommon
B desktop
Example...
c0py
<^QtherS^>
p.n.
CtrkN
3 ilSn
& mobilerichclient
* Detete
i- mobilethinclient
Move...
Qfr tabletrichclient
Rename...
tabletthinclient
d fe thirdpartywidgets ii Import...
i_r- SenchaLib
^ Export...
4 [^w]rlg*hn_c^
C2^DatePkk^
Refrh
3 - services
Validar.
- tmplate!
kony
Expand General and select File and then click on Next as shown below.
Select a wizard
Crate a new file resource
Wizards:
Class
<> Interface
C Fifi ~^
__ Folder
l_j Project
Untitled Text File
e-cvs
1 L>. Java
<-~
LJ
'
UM
~">
| )
Cancel
'"
121
"
kony
Give some name to file, lets say file name as tp-sencha-calendar.js and the file
specification should be
<Workspace>/<App_Name>/resources/thirdpartywidgets/widgetwrapper/DatePicker
nter o select the parent folder.
Samp eCustomWidgetApp/reiources/thirdparty,i/tdgets/widgetwrappe
/DatePicker
build
, _;- common
.__
desktop
(13 n
mobilerichclient
mobilethinclient
tabletrichclient
tabletthinclient
| / thirdpartyv.idgets
SenchaLib
witfjienvrflpp_er
(^DatePickerN
tirvn->
File nar
ne.Qp-sencha-calendar.js }
[ .dvanced >> |
f
(J
L_Li_ik_J
Fmish
) 1 c-"
kony
Q Applications ..Navigator *3
1 m%\
4 \z? SampleCustomWidgetApp
13 bgimages
i- customwidgets
Q| dialogs
J3- foims
mi jssrc
lt- modules
4 L3 resources
mt build
L_f- common
desktop
l-r 18n
iz? mobilerichclient
^
mobilethinclient
tabletrichclient
i>. tabletthinclient
4 3 thirdpartywidgets
mt SenchaLib
4 m9 widgetwrapper
4 ,___.- DatePicker
C^^tp-sencha- :alendarjT^5
S& services
122
kony
*/
if(datepicker.datepicker) {
datepicker.datepicker = {};
}
datepicker.datePicker[widgetModel['id']] = new
Ext.DatePicker({useTitles:true>);
kony
= date.getDate();
dt = (dt<10)
? '0'+dt : dt;
"date", viewDateStr);
});
).
modelChange : function(widgetModel, propertyChanged, propertyValue)
{
widgetModel["date"] = propertyValue;
10);
123
"
kony
1, dt),
faise);
AA
kony
Ifthe JS file was created outside of Kony Studio, we will need to import it to the application
in the same way we did for a third party except Into Folder location should be
<Workspace>/<App_Name>/resources/thlrdpartywidgets/widgetwrapper
{3Applications V.
C Navigator
"^ 13 \
'4Ji
* f_js SampleCustomWidgetApp
a |3 forms (0)
l mobile(0)
J tablet (0)
f desktop (0)
fjj popups (0)
*_' templates (0)
App Menu
Internationalization(il8n)
Skin Defaults
j^
Services
Internationalization(18n)...
:.
Themes(Skins)...
Utilities
(y web_module (0)
: resources (2)
-*, services (0)
^5
Import^/
1:
Export
i.
f
Custom Librarles...
Custom Fonts...
Custom Widgets...
i Cjmport FileTT>
124
-
.* CQ SampleCustomWidgetApp
10 forms (0)
Eny popups(0)
templates (0)
i modules (0)
{y web_module (0)
4) -m resources (5)
v desktop (0)
| mobilerichclient (2)
OB mobilethinclient (0)
J tabletrichclient (0)
4 tabletthinclient (0)
s (3- thirdpartywidgets (3)
d & wjdflfifawwww* ni
-'jLr DatePicker (1)
tp-sencha-calendar.js^
Lr-^eTJiuLiL (3J-
kony
1. Right click the application name (in Application view) and select Intgrate Third Party.
2.
Q Applications
- Navig
J^ SampleCustomWidgetApp
IQ forms (1)
a tQ mobile(1)
frmHome
-J tablet (0)
v desktop(0)
^J popups (0)
* templates(0)
Utilities
_ modules (0)
resources (3)
y Import
<3nageCustom WidgetsTT^
125
'
4'
kony
Click on New...
Provide the Custom Widget library name i.e SenchaLib and press OK
I.
I hit potje Hoia lo crtotr u-.n librify. Ihrt libr*ty ttn br Hrttxted for cuitcm widget.
Stietl PliHo-m
SPA
Im"m
of library
SenchaLib
CL
o>=
U>
Cancel
r
fm>ih
Cmcd
kony
Custom Widget library files would be displayed in Manage Custom Widget Librahes dialog.
Click on Next
SdcitPUjtform SPA
Widget Library
7Sprt,vii.je!-. SenchiL*nthi-lejuih-itibuji
1 1h-u^rt,'Alli^p,,5<KlMl*,vt34^Kh*-uch.CM
Emish
Cincel
126
XA
kony
Provide the name of the object defined in Custom Widget JS file as shown below.
Select the library i.e SenchaLib and select only required files from the library (in order).
by clicking on lj__j
VA Piofwrt)
WuB Prpt,
PiPpTrt-,1u<na
Vjh* Type
DttjuHV,
<D
',i tp-sencha-calendar.js 3
ftaropiflrnOs ! -^*-^
datePicker:
T-
......
'.-
nuil,
Mm Ha spcahc te CuOwn wigrt
/*
wicic^r^^i:.:
initializeWidget
:_.:. ......
function
l~SI'
44
kony
Matching item;:
El tp-sencha-calendar.js
L_r SampleCustomWidgetApp/resources/thirdpartywidgets/widgetwrapper/DatePicker
i^~jT
127
kony
In the SPA Property and Default Property tabs we can crate properties that can be set
by a developer at design time in Kony Studio. The default value will be used if no other
value is provided by the developer.
In the example below, date is the custom property for the Custom Widget.
Name:
ibatepicker
Platform:
SPA
SPAProperty
Default Property
Property Name
Value Type
date
String
SPA
v j thirdpartywidgetsVc
7 <} third partywidgetsXc
Selected Files
{gthirdpartywidgets\gc
;.J thrdpartywdgets\gc
'
kony
Widget Name
Widget Library
datepicker
SenchaLib
128
XA
kony
The added Custom Widget can now further be used in the current application, as a new Ul
element by the developer to implement fore-sighted functionality of the widget in the
application.
r frmHome
Propertie j
v home .
-^ CWidget Serv
Property:
[O P '
Nme
VahM
<y>Advanced Wi_
Sue (piwb)
(448,24)
v^idlh
448
he<ght
24
Siie(S)
a00.5)
height
HHM
Considerations
kony
JS based Custom Widgets are only usable in SPA & Desktop Web channel.
A Custom Widget cannot be used as a container widget such as HBox, VBox, etc.
The
widget
"id" properly
should
be
unique,
so
it
is
recommended
to
use
modelChange function must be present in the Custom Widget JS file (but can be empty).
The value of a custom widget property cannot be a function. Invoking functions based on
the Custom Widget events can only be done through code.
Quick preview does not work for Custom Widgets
The render property for a Custom Widget lists all channels, but only SPA and Desktop Web
are applicable for Custom Widgets.
129
r
r
kkony.v-
Crate a form using the Double Slider jQuery widget as shown below
Crate two labels and update the vales whenever the user adjusts the Double Slider
Widget.
Crate two buttons with text "Disable Slider" and "Enable Slider" and configure them to
enable or disable the slider.
SO
S500
Two Buttons
130
XA
kony
Procedure:
Right click on the application name and select Import > Import Files...
j *t- Import
_**,'
Export
'..
Debug A:
C,
Validate
Team
Compare With
lnternationalizaton(18n)...
Services...
Themes(Skins)...
Custom Libraries...
Custom Fonts...
CustomWidgets...
Import Files...
Lcate the Jquerybrary folder (provided by your instructor) and select it in the
"From Directory" field. Set "Into folder" to
DoubleSlider/resources/thirdpartywidgets and click Finish.
Fromdirectory: C:\Users\KH203\DesWopVlqueryLibrary
J - JqueryLibrary
DoubleSlider/reSources/thirdpartywidgetS
kony
Go to thirdpartywidgets present under resources and make sure that you have jQuery
folder in it as shown below.
_. resources (417)
II build (0)
3 common (0)
* desktop (0)
l mobilerichclient (2)
Crate a folder "CustomJsFiles" in your machine and place an empty javascript file
with
the
name
DoubleSlide.js
in
it.
Import
DoubleSlide.js
into
thirdpartywidgets/widgetwrapper as shown below.
Fromdirectory; C:\Users\KH203\Desktop\CustomJSFiles
J|Gj} CustomJSFiles
FilterTypes...
Into tolden
[2 B DoubleSlide.js
Select A
DoubleSlide/resources/thirdpartywidgets'v/idgerwrapper
131
kony
Crate a dlSlide object in DoubleSlide.js and implement the following methods i.e
initializeWidget, modelChange , disableSlider and enableSlider in it as shown below.
dlSlide = {
initializeWidget : function(parentNode, widgetModel)
{
var
slide='<div class="demo">'+
1<p>'
'<div id="'+widgetModel['id']+'"></div>' +
</div>'
priceValues=[0,500] ;
~
true,
min:
0,
max:
500,
vales:
[ 0, 500
],
>%
kony
if(priceValues[0]!=ui.vales[0]){
consol.log("Minimum value changed");
priceValues[0]=ui.vales[0]
dlSlide.modelChange(widgetModel, priceProperties[0],
ui.values[0] )
}
else{
});
},
132
XA
-i*
kony
->" + propertyChanged);
->" + propertyValue);
setKnyLabelsMinMax(propertyChanged,propertyValue)
),
disableSlider : function(sliderlD){
consol.log("CstWdgtDbSlideFn ID is " + sliderID);
$(
r#'+sliderID+''
).slider("disable");
},
enableSlider : function(sliderID){
consol.log("CstWdgtDbSlideFn ID is
$( '#'+sliderID+''
" + sliderID);
).slider("enable");
kony
Ja Import
<: ':.
Cj?
Export
Click on New and give the library name as jQuery and click on OK as shown
below.
VpKttMcm
SPA
..
jghUHn.l.tMi}
1 Pkrtitntn*mfif l*i*r,.
yt
LVX*
Click on Next
133
r
r
kony
Widget Library
Give the name as dlSlide, platform as SPA and library as jQuery . Select the required
js files from the library and add DoubleSlide.js in "Select files specific to Custom
Dri-uiPiopwr,
Prepw1yh>r>
Vpfc-iT.p.
Drf.UPV.k-,
iipip.dpprt/H.a$tf' ....;."'.:
"
kony
Crate a form with the name frmHome and add Custom Widget dlSlide, label and
buttons.
Button
W Advanced Wi...
Mnimum Pnce Selected i (
*
-
_5,AdvertHetnent
Windows Mo...
~^-
, Signatur eCapt_
Q 05&Androi... o
:* 2D/3D Chwt
Video
9 Deptecated W... O
Image
1
;...:>-.,,..
\j Cuslcm Widg... i
dlSlide
134
kony
Crate sliding.js under modules and implement the below functions and assign
disableSlide function to DisableSlider button and enableSlide function to Enable Slider
button.
function setKnyLabelsMinMax(propertyChanged,propertyValue){
if(propertyChanged=="MinimumValue"){
frmHome.IbIMin.text="Minimum Price Selected :" tpropertyValue;
}else{
frmHome.IbIMax.text="Mximum Price Selected :" +propertyValue;
>
}
function disableSlide(){
dlSlide.disableSlider("customDoubleSlider")
}
function enableSlide(){
dlSlide.enableSlider("customDoubleSlider")
>
135