ABAP is called as world’s first business programming language!!!!!!
Don’t raise your eyebrow its true 😉
In simple words it’s because the way it’s designed. Keeping in mind each and every small syntax which would be required by business.
In college I used to do time pass making games in java, C, C++ 😉 no doubt all of you must have tried it.
But have you ever thought of making it in ABAP !
I know if you are a Developer you will say “man, leave it ABAP don’t have that flexible UI or syntax which can help in making games”
Ya. That’s true but brother of ABAP -> webdynpro for ABAP can be of good help
Do you Remember the drag and drop functionality in Webdynpro for abap ??
If not let me tell you: Webdynpro for ABAP has provided some cool UI elements to support drag and drop.
So in today’s article we will design a game using these UI elements.
So our motive is it to develop something like blow
Into -> 😉 
But to be focused let’s use normal numbers 1 to 15. And one blank image (in between 9 and 6 you can see it)
The webdynpro component is already created. So you can use the Download link provided below to download the nugget file. ( you need to use saplink program which is created by the Gr8 Thomus jung and team to upload it in your system : Download saplink )
Once you upload the webdynpro component you need to upload 16 images.
1- 15 numbers images and one blank image.
Go to webdynpro component ZT_RAJ_GAME ( which will be automatically created in your system once you import the nugget ) and upload these images one by one as MIME objects.
Make sure you give them the same name as I gave to reuse the code.
1.JPG, 2.JPG and so on…and give the blank image as number 16.JPG
So…. Try out your hands on the puzzle game 😉
If you are willing to know how I created or want to learn about how drag and drop works read it below else use your girlfriends’ image and impress her 😉
When you work with drag and drop functionality . Keep the following in your mind
-
Drop Target area: it’s the area where I want to drop my image
(in our case it’s the adjacent 4 images which are allowed to be dropped in the empty box.
If you see the image below Jennifer’s image its 12 , 6 , 9 and 14 which are allowed to be dragged)
- Only one box is allowed to be used as DROPAREA at a time.
If you see the below layout: where I have created 16 DROPTARGETS
Each one will contain one image in it.
Let’s talk about context.
Its quite stright forward.The GAME node will contain the name of the images which needs to be mapped with each block. In beginning the images should be distributed randomly :
Block1 : 1
BLOCK2 : 12
BLOCK3: 11
So on…
So you can use random function in beginning to create initial view for the end user.
Another Node ENABLE is created to allow the images/(16 drop targets we created in the layout)
To be drag handled.
It means images around the empty box.
To understand it better see the below table.
In here let’s say if BOX: 22 is empty which are the other images that are allowed to be dragged?
Answer is becoming easy
Same column 12, 32 (minus one and plus one in the row)
Same row 21, 23 (minus one and plus one in the column)
| 11 |
12 |
13 |
14 |
| 21 |
22 |
23 |
24 |
| 31 |
32 |
33 |
34 |
| 41 |
42 |
43 |
44 |
Same logic is implemented in WDDOMODIFYVIEW method.
Where we find which are the blocks/images are allowed to be drag handled and we set its properties respectively in the ENABLE node.
method ONACTIONDROPIT .
data : node_game TYPE REF TO if_wd_context_node.
data : lv_size type i.
data : lv_img_name TYPE string.
data : lv_atri_name type string.
data : lv_tab_count(2) type c.
data : lv_src(2) type c.
data : lv_des(2) type c.
TYPES : BEGIN OF s_num_tab,
num(2) type c,
end OF s_num_tab.
data : it_num_tab type STANDARD TABLE OF s_num_tab.
data : wa_num_tab TYPE s_num_tab.
data : wa_num16 TYPE s_num_tab.
data : wa_num TYPE s_num_tab.
FIELD-SYMBOLS : <wa_num> TYPE s_num_tab.
FIELD-SYMBOLS : <wa_num16> TYPE s_num_tab.
move zcl_game_helper=>it_num_tab to it_num_tab.
node_game = wd_context->get_child_node( ‘GAME’ ).
read TABLE it_num_tab INTO wa_num index data.
move wa_num-num to lv_src.
loop at it_num_tab into wa_num_tab.
if wa_num_tab-num eq ’16’.
MOVE lv_src to wa_num_tab-num.
MODIFY it_num_tab INDEX sy-tabix from wa_num_tab.
CONTINUE.
endif.
ENDLOOP.
read TABLE it_num_tab INTO wa_num index data.
move wa_num-num to lv_src.
move ’16’ to wa_num-num.
MODIFY it_num_tab from wa_num INDEX data.
move it_num_tab to ZCL_GAME_HELPER=>it_num_tab.
loop at it_num_tab into wa_num_tab.
move sy-tabix to lv_tab_count.
CONDENSE lv_tab_count.
CONCATENATE wa_num_tab-num ‘.JPG’ into lv_img_name.
CONCATENATE ‘BLOCK’ lv_tab_count into lv_atri_name.
node_game->set_attribute( EXPORTING
value = lv_img_name name = lv_atri_name ).
ENDLOOP.
wd_context->set_attribute( name = ‘DATA’ value = data ).
endmethod.
method WDDOMODIFYVIEW .
data : node_enable TYPE REF
TO if_wd_context_node.
data : lv_size type i.
data : lv_img_name TYPE string.
data : lv_atri_name type string.
data : lv_tab_count(2) type c.
data : lv_src(2) type c.
data : lv_des(2) type c.
TYPES : BEGIN
OF s_num_tab,
num(2) type c,
end OF s_num_tab.
data : it_num_tab type STANDARD TABLE OF s_num_tab.
data : it_ref_tab type STANDARD TABLE OF s_num_tab.
data : wa_ref_tab TYPE s_num_tab.
data : wa_num16 TYPE s_num_tab.
data : wa_num TYPE s_num_tab.
data : enb_val(2) type c.
data : index type i.
data : from type i.
data : name type string.
data : to type i.
data : ind(2) type c.
data : diff type i.
node_enable = wd_context->get_child_node( name = ‘ENABLE’).
wa_ref_tab-num = ’11’.
append wa_ref_tab to it_ref_tab.
wa_ref_tab-num = ’12’.
append wa_ref_tab to it_ref_tab.
wa_ref_tab-num = ’13’.
append wa_ref_tab to it_ref_tab.
wa_ref_tab-num = ’14’.
append wa_ref_tab to it_ref_tab.
wa_ref_tab-num = ’21’.
append wa_ref_tab to it_ref_tab.
wa_ref_tab-num = ’22’.
append wa_ref_tab to it_ref_tab.
wa_ref_tab-num = ’23’.
append wa_ref_tab to it_ref_tab.
wa_ref_tab-num = ’24’.
append wa_ref_tab to it_ref_tab.
wa_ref_tab-num = ’31’.
append wa_ref_tab to it_ref_tab.
wa_ref_tab-num = ’32’.
append wa_ref_tab to it_ref_tab.
wa_ref_tab-num = ’33’.
append wa_ref_tab to it_ref_tab.
wa_ref_tab-num = ’34’.
append wa_ref_tab to it_ref_tab.
wa_ref_tab-num = ’41’.
append wa_ref_tab to it_ref_tab.
wa_ref_tab-num = ’42’.
append wa_ref_tab to it_ref_tab.
wa_ref_tab-num = ’43’.
append wa_ref_tab to it_ref_tab.
wa_ref_tab-num = ’44’.
append wa_ref_tab to it_ref_tab.
move zcl_game_helper=>it_num_tab to it_num_tab.
read
TABLE it_num_tab into wa_num WITH
TABLE
KEY num = ’16’.
index = sy-tabix.
read
TABLE it_ref_tab into wa_ref_tab index
index.
enb_val = wa_ref_tab-num.
do
16
TIMES.
index = sy-index.
WRITE
index
to ind no-ZERO.
CONCATENATE
‘IMG_’ ind INTO name.
node_enable->set_attribute( name = name value = SPACE ).
ENDDO.
loop
at it_ref_tab INTO wa_ref_tab.
index = sy-tabix.
if wa_ref_tab-num+0(1) eq enb_val+0(1).
diff = wa_ref_tab-num+1(1) – enb_val+1(1).
if diff EQ
1
or diff EQ –1
or diff EQ
0.
WRITE
index
to ind no-ZERO.
CONCATENATE
‘IMG_’ ind INTO name.
node_enable->set_attribute( name = name value = ‘X’ ).
endif.
endif.
if wa_ref_tab-num+1(1) eq enb_val+1(1).
diff = wa_ref_tab-num+0(1) – enb_val+0(1).
if diff EQ
1
or diff EQ –1
or diff EQ
0.
WRITE
index
to ind no-ZERO.
CONCATENATE
‘IMG_’ ind INTO name.
node_enable->set_attribute( name = name value = ‘X’ ).
endif.
endif.
ENDLOOP.
endmethod.
And here is your 1 hour of hard work:
Have fun!!!!
