ITS Screen Kurulumu
- ITS Servis Oluşturmak
- ITS Service`i publish et.
- SICF => Servis Linki oluştur.
- Servisin etkinleştirilmesi ve çalıştırılması
- Önceden oluşturulan CSS dosyasını ekle SE80 =>
- Kullanacağım screenlerin html templatelerini create edeceğim.
- Servis üzerinden ekranı test et.
- DEVINCLUDE_GENERIC oluşturma
- Sonuç
1- SE80 => ITS Servis Create
2 - ITS Service`i publish et.
3- SICF => Servis Linki oluştur.
Aşağıdaki ekranda bu dataları gireceğiz. CSS dosyası için MOBILETABLET.css dosyasını ekleyeceğim SE80`den. Büyük harfle yazıyorsan büyük harfle dosyanın adı olacak. Diğer alanlarında önemi var fakat burada değinmeyeceğim.
Aşağıda oturum açma verisini test için default kendi userımı verdim. Normalde boş bırakılmalıdır.
Aşağıdaki işleyici ben kurmadım. Bu sistemde kuruluydu. Sıfırdan kurulum için mutlaka yaratılmalıdır. Fakat bilmiyorum nasıl yaratıldığını, ihtiyacım olduğunda öğrenirim:)
4 - Servisin etkinleştirilmesi ve çalıştırılması
5 - Önceden oluşturulan CSS dosyasını ekle SE80 =>
/*----------------------------------*/
/* GENERAL PAGE */
/*----------------------------------*/
@import url("../ALV_GRID.CSS");
.MobileUserArea, input {
font-family:arial;
font-size:100%;
}
.MobileUserArea, textarea {
font-family:arial;
font-size:100%;
}
/* --- MOBILE BODY -----------------*/
.MobileBody {
margin: 0px;
padding: 0px;
border-width: 0px;
background-color:#D9E5F2;
}
/* --- MOBILE SCREEN ---------------*/
.MobileScreen {
width:125%;
padding:50px;
margin:0px;
border:0px;
}
/*----------------------------------*/
/* Main Areas of Mobile Screen */
/*----------------------------------*/
/* --- CUA AREA --------------------*/
.MobileCuaArea {
width:100%;
background-color:#D9E5F2;
padding:0px;
margin:0px;
border-bottom-style:solid;
border-bottom-width:2px;
border-bottom-color:#B3C3CF;
}
/* --- USER AREA -------------------*/
.MobileUserArea {
table-layout:fixed;
width:100%;
zoom: 100%;
overflow-x:auto;
overflow-y:auto;
}
/* ---------------------------------*/
/* CUA AREA ELEMENTS */
/*----------------------------------*/
/* --- MESSAGE ---------------------*/
.MobileMessageScreen {
width:100%;
background-color:#F5F9FC;
padding:0px;
margin:0px;
border-style:solid;
border-color:#C40026;
border-top-width:0px;
border-left-width:0px;
border-right-width:0px;
border-bottom-width:2px;
}
.MobileMessageLine {
}
/* --- MESSAGE ---------------------*/
.MobileMessageLogo {
vertical-align:middle;
padding-left:3px;
padding-right:3px;
}
/* --- TITLE -----------------------*/
.MobileWindowTitle {
font-weight:bold;
font-size:1.0em;
padding-left:7px;
overflow:hidden;
white-space:nowrap;
}
/* --- LOGO im Header --------------*/
.MobileHeaderLogo {
background-color:#D9E5F2;
vertical-align:middle;
height:16px;
border:0px;
padding-left:3px;
}
/* --- Include Frame ---------------*/
.MobileIncludeFrame {
}
/* --- Basic Row -------------------*/
.MobileRow {
margin-bottom:10px;
white-space:nowrap;
vertical-align:middle;
}
/* ---------------------------------*/
/* DYNPRO ELEMENTE */
/*----------------------------------*/
/* --- SUBSCREENS ------------------*/
.MobileSubScreen {
table-layout:fixed;
width:100%;
padding:0px;
margin:0px;
border:0px;
}
/* --- STEPLOOPS -------------------*/
.MobileStepLoop {
table-layout:fixed;
width:100%;
padding:0px;
margin:0px;
border:0px;
}
/* --- FRAME -----------------------*/
.MobileFrame {
width:100%;
height:100%;
table-layout:fixed;
background-color:#D9E5F2;
padding:0px;
margin:0px;
}
.MobileFrameHeader {
width:100%;
background-color:#A3C1E4;
font-weight:bold;
padding:0px;
margin:0px;
border:0px;
}
.MobileFrameHidden {
width:100%;
}
/* --- ACTIVE BUTTON ---------------*/
.MobileButton {
width:200%;
height:35px;
font-weight: 300;
}
/* --- DISABLED BUTTON -------------*/
.MobileButtonDisabled {
width:100%;
}
/* --- EDIT FIELD ------------------*/
.MobileEdit {
width:100%;
height:20px;
}
.MobileEditMultiline {
}
.MobileEditMultilineDisabled {
}
.MobileEditMultilineHighlighted {
color:blue;
}
.MobileEditMultilineHighlightedDisabled {
color:blue;
}
.MobileEditMultilineRequired {
border-color:blue;
}
.MobileEditMultilineRequiredHighlighted {
border-color:blue;
color:blue;
}
.MobileEditDisabled {
width:200%;
height:20px;
border-style:solid;
border-color:#808080;
border-width:1px;
color:black;
background-color:#F5F9FC;
}
/* required */
.MobileEditRequired {
width:100%;
height: 20px;
border-color:blue;
}
.MobileEditRequiredDisabled {
width:100%;
border-style:solid;
border-color:#808080;
border-width:1px;
background-color:#F5F9FC;
}
/* required + highlighted */
.MobileEditRequiredHighlighted {
width:100%;
border-color:blue;
color:blue;
}
.MobileEditRequiredHighlightedDisabled {
width:100%;
border-style:solid;
border-color:#808080;
border-width:1px;
color:blue;
background-color:#F5F9FC;
}
/* highlighlighted */
.MobileEditHighlighted {
width:100%;
color:blue;
}
.MobileEditHighlightedDisabled {
width:100%;
border-style:solid;
border-color:#808080;
border-width:1px;
color:blue;
background-color:#F5F9FC;
}
/* --- F4 BUTTON -------------------*/
.MobileF4Button {
width:1em;
}
.MobileF4ButtonDisabled {
width:1em;
}
/* --- SEARCHELP BUTTONS -----------*/
.MobileSearchhelpButton_Search {
}
.MobileSearchhelpButton_SearchDisabled {
}
.MobileSearchhelpButton_Cancel {
}
.MobileSearchhelpButton_Options {
}
.MobileSearchhelpButton_Selection {
}
.MobileSearchhelpButton_Sort {
}
.MobileSearchhelpButton {
}
/* --- SEARCHELP EDIT FIELD --------*/
.MobileSearchhelpEdit {
}
.MobileSearchHelpBody {
}
.MobileSearchHelpScreen {
}
.MobileSearchHelpUserArea {
}
.MobileSearchHelpSortingRow {
background-color: #f2e1af;
}
.MobileSearchHelpRow {
}
.MobileSearchHelpRow2 {
background-color: #D9E5F2;
}
.MobileSearchHelpFindResults {
}
.MobileSearchHelpMessageLine {
color: red; font-weight: bold;
}
/* --- F4 HELP FIELD ---------------*/
.MobileF4 {
}
.MobileF4Disabled {
}
/* required */
.MobileF4Required {
border-color: blue;
}
.MobileF4RequiredDisabled {
border-color: blue;
}
/* required + highlighted */
.MobileF4RequiredHighlighted {
border-color:blue;
color:blue;
}
.MobileF4RequiredHighlightedDisabled {
border-color:blue;
color:blue;
}
/* highlighlighted */
.MobileF4Highlighted {
color:blue;
}
.MobileF4HighlightedDisabled {
color:blue;
}
/* --- PASSWORD --------------------*/
.MobilePassword {
width:100%;
}
.MobilePasswordDisabled {
width:100%;
}
/* highlighted */
.MobilePasswordHighlighted {
width:100%;
color:blue;
}
.MobilePasswordHighlightedDisabled {
width:100%;
color:blue;
}
/* --- LABEL FIELD -----------------*/
.MobileLabel {
width:100%;
white-space:nowrap;
}
.MobileLabelHighlighted {
width:100%;
white-space:nowrap;
color:blue;
}
/* --- RADIOBOX --------------------*/
.MobileRadioButton {
vertical-align:middle;
}
.MobileRadioLabel {
white-space:nowrap;
}
/* --- CHECKBOX --------------------*/
.MobileCheck {
width:200%;
height:40px;
border-style:solid;
border-color:#808080;
border-width:1px;
color:black;
}
.MobileCheckLabel {
white-space:nowrap;
}
/* --- LISTBOX ---------------------*/
.MobileListboxRequiredHighlighted {
width:100%;
border-color:blue;
color:blue;
}
.MobileListboxRequiredHighlightedDisabled {
width:100%;
border-color:blue;
color:blue;
}
.MobileListboxRequired {
width:100%;
border-color:blue;
}
.MobileListboxRequiredDisabled {
width:100%;
border-color:blue;
}
.MobileListboxHighlighted {
width:100%;
color:blue;
}
.MobileListboxHighlightedDisabled {
width:100%;
color:blue;
}
.MobileListbox {
width:100%;
}
.MobileListboxDisabled {
width:100%;
}
/* ---------------------------------*/
/* SYSTEM MESSAGE / MAIL */
/*----------------------------------*/
.MobileSysList {
width:90%;
table-layout:fixed;
background-color:#D9E5F2;
padding:0px;
margin:0px;
border:2px;
border-color:#B3C3CF;
border-style:solid;
}
.MobileSysListTitle {
width:100%;
background-color:#A3C1E4;
font-weight:bold;
}
6 - Kullanacağım screenlerin html templatelerini create edeceğim. Sırada zcd0003 screenı için template generate edeceğim.
7 - Servis üzerinden ekranı test et.
8 - DEVINCLUDE_GENERIC oluşturma
Ekran istediğimiz gibi olmadı. Yeni bir HTML create yaratıp DEVINCLUDE_GENERIC oluşturuyoruz. İçerisi şu şekilde olursa ekranı fitleyecektir.
Publish ettikten sonra SICF`ten bu html template`i servise eklemeliyiz.
9 - Sonuç
Servisi tekrar çalıştırdığımızda sayfamız ekrana tam oturacaktır.
