Beruflich Dokumente
Kultur Dokumente
Table of Contents
Getting started guide .......................................................................................................................................1
Table of Contents .............................................................................................................................................3
Components .....................................................................................................................................................5
Introduction......................................................................................................................................................6
NAD SERVER .....................................................................................................................................................7
Overview of the NAD work area.......................................................................................................................8
Exercise 1: Building a home page .....................................................................................................................9
jQuery Mobile.................................................................................................................................................14
Exercise 2: Basic functionality of NAD ...........................................................................................................16
HTML5 ............................................................................................................................................................20
Exercise 3 using HTML5 library in NAD ..........................................................................................................21
Exercise 4: Create an application class ...........................................................................................................26
Exercise 5: Creating a form in the designer ...................................................................................................29
NAD Application Flow.....................................................................................................................................33
Components
Introduction
Overall architecture:
NAD SERVER
1.2
1.3
1.4
10
1.5
1.6 stateless)
11
1.7
1.8
12
1.9
13
jQuery Mobile
14
jQuery has long been one of the most popular javascript libraries for developing RIA Web pages.
Since jQuery primarily was designed for desktop browsers it doesn't have good support for
mobile web apps.
jQuery Mobile is a new project. It is a framework built on top of jQuery that handles the user
interface on all popular mobile devices.
15
2.2
16
2.3
17
2.4
18
2.5
Click the header again, select the style tab and press
the custom button.
Add background: orange; Save and activate, then
preview.
The same custom functionality is also provided for
attributes.
2.6
19
HTML5
HTML5 (HyperText Markup Language 5) is the fifth revision of the HTML standard, the standard
used to structure and present content on the WWW (World Wide Web). The HTML standard was
conceived in 1990 and the previous revision (HTML4) came in 1997. HTML5 is a standard that is
still under development. W3C (World Wide Web Consortium) are hoping for that specification to
be completed in 2014.
Nevertheless, the HTML5 started to become very widespread. This is possible because most of
the major browsers today support a lot of HTML5 and especially on mobile devices. In addition,
Adobe is moving towards HTML5 (they have now a jQuery mobile plugin for Dreamweaver) and
Microsoft supports no plugins (including its own Silverlight) in the new IE10 for windows 8, which
also has extensive HTML5 support. There was great debate among developers about flash vs.
HTML5 and Silverlight only a few months ago this debate no longer exist (with a few
exceptions).
The last and perhaps the main reason is that one can get almost equivalent native functionality
on most mobile OS by using HTML5. Write once, run anywhere
20
21
3.2
3.3
22
3.4
3.5
23
3.6
3.7
24
3.8
Add # Start in the href attribute and add datadirection data-icon and data transition.
Test the solution and try out different icons.
We have now created a navigable application. Next we'll
review the posting of Forms but first we need some server
logic.
25
4.2
26
4.3
4.4
27
4.5
4.6
case event_id.
when 'SEARCH_CONN'.
call method search_conn( ).
endcase.
Activate the class. This is all the server coding that is
needed to access backend data from the application.
28
5.2
29
5.3
5.4
30
5.5
5.6
31
5.7
32
33
6.2
Find the Data List plugin and move this over to the
content div.
34
6.3
6.4
35
6.5
6.6
36
6.7
6.8
37
6.9
6.10
38
6.11
6.12
39
Neptune Plugins
In the application you just created, already Data Select and Data
List plugins where used.
In the next task the Data Loop plugin, which is a very powerful
component, will be used. This makes it possible to loop on an
internal table and add all desired HTML5 elements for each row.
40
Exercise 7: Dataloop
7.1
7.2
41
7.3
Give the first header an attribute: class = ui-liheading and the other ui-li-desc
Do the same with the first menu item. Add some
labels.
7.4
42
7.5
7.6
43
7.7
Press the button class builder ". Edit the class and
go to the attributes tab. Add the following:
GV_CARRID2 - S_CARR_ID
IT_SPFLI2 - /NEPTUNE/SPFLI_TAB
WA_SPFLI2 - /NEPTUNE/SPFLI
7.8
44
7.9
45
7.10
7.11
46
7.12
7.13
47
7.14
7.15
48
7.16
7.17
49
7.18
7.19
50
7.20
7.21
51
7.22
7.23
52
7.24
53
8.2
54
8.3
8.4
55
8.5
8.6
56
8.7
8.9
57
8.10
8.11
58
59
60
9.2
61
9.3
9.4
62
9.5
Public
GV_BOOKID
Public
GV_SBOOK
Public
GV_BOOK_HEADER
9.6
Type
Type
Type
Public
TY_BOOKINGS
S_BOOK_ID
SBOOK
Type
STRING
63
9.7
9.8
64
9.10
9.11
65
9.12
9.13
66
9.14
data: wa_sbook
lv_count
lv_amount
type sbook,
type i,
type string.
* Get Smoker
call method server->api_selection_get_multiple
exporting
key
= 'Smoker'
changing
range = ir_smoker.
* Get Class
call method server->api_selection_get_multiple
exporting
key
= 'flightClass'
changing
range = ir_class.
* Get Carrid
call method server->api_selection_get_multiple
exporting
key
= 'selCarridBook'
changing
range = ir_carrid.
* Get Data - Max 1000 rows
select *
from sbook
67
68
9.15
* Get Class
call method server->api_selection_get_multiple
exporting
key
= 'flightClass'
changing
range = ir_class.
read table ir_class into wa_class index 1.
gv_sbook-class = wa_class-low.
9.16
69
9.17
9.18
70
9.19
9.20
71
9.21
9.22
72
73