basicjs-turkce/63-temel-sayfayi-parcalara-bolme.htm at main · bug7a/basicjs-turkce · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
<!DOCTYPE html>
<html>
    <head>

        <title>Sayfayı Parçalara Bölme</title>

        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- DIŞARIDAN YÜKLENEN KÜTÜPHANE DOSYALARI -->
        <link rel="stylesheet" type="text/css" href="kutuphane/basic.css">
        <script src="kutuphane/basic.js" type="text/javascript" charset="utf-8"></script>

        <style>

            body {
                overflow: hidden;
            }

        </style>

        <script>

        /*

        - Her uygulama, bir veya daha fazla sayfadan oluşur. Ve bu sayfaları da,
        tasarımına göre kutulara bölerek, nesneleri daha kolay ve işlevsel yerleştirebiliriz.

        - Siz, sayfalarınıza istediğiniz isimleri verebilirsiniz,

        Ben, kısa olması ve baktığımda katmanları hızlı bir şekilde anlamak için,
        şu şekilde isimlendiriyorum.

        - Başlangıç sayfası; a0 ve diğer sayfalar; a1, a2, a3 ...
        - Bir sayfanın içindeki bölümler; b1, b2, b3 ...
        - Eğer bölümlerin de bölünmesi gerekirse; c1, c2, c3 ...

        a0: Başlangıç sayfası
        a1: Kullanıcı listesi
        a2: Mesajlaşma sayfası
        a3: Ayarlar sayfası

        Böylece, örneğin; a1.b2.c1.lblContent diye bir nesne var ise,
        bu etiket nesnesinin; birinci sayfanın, ikinci bölümünün,
        ilk parçasında olduğunu isminden görebilirim.

        */

        var APP_ORIGINAL_WIDTH = 450
        var APP_MAX_WIDTH = 450
        var APP_B1_HEIGHT = 100
        var APP_B3_HEIGHT = 150

        // a0: Başlangıç sayfası
        // a1: Sayfa 1
        var a0, a1

        // Sık kullanılan nesnelere verilen kısa isimler.
        var title
        var content

        // ÖZEL FONKSİYONLAR

        // İlk çalışan fonksiyon.
        var start = function() {

            page.fit(APP_ORIGINAL_WIDTH, APP_MAX_WIDTH)

            // NESNE: BAŞLANGIÇ SAYFASI ***

            // NESNE: Başlangıç sayfası
            a0 = cbox(0, 0, APP_ORIGINAL_WIDTH, page.height)
            that.color = basic.ACTION2_COLOR
            that.center("left")

            a0.btnStart = cbtn()
            that.text = "Sayfa'yı Göster"
            that.width = 200
            that.minimal = 1
            that.color = "white"
            that.center()
            that.onClick(function(self) {
                a0.visible = 0
                a1.visible = 1
            })


            // NESNE: SAYFA 1 ***

            // NESNE: Sayfa 1
            a1 = cbox(0, 0, APP_ORIGINAL_WIDTH, page.height)
            that.color = "black"
            that.center()
            a1.visible = 0

            // NESNE: Üst bölüm
            a1.b1 = cbox(0, 0, a1.width, APP_B1_HEIGHT)
            that.color = "lightgray"

            // NESNE: Üst bölümde bir geri butonu
            a1.b1.imgBack = cimg(20, 0, 30, 30)
            that.load("resimler/63/back.png")
            that.center("top")
            that.opacity = 0.65
            that.onClick(function(self) {
                a0.visible = 1
                a1.visible = 0
            })

            // NESNE: Üst bölüm içinde bir nesne
            a1.b1.lblTitle = clbl(0, 0, "auto", "auto")
            that.text = "a1.b1.lblTitle"
            that.onResize(function(self){
                self.center()
            })
            // İsmi, kısa olarak kullanacağım.
            title = a1.b1.lblTitle

            // NESNE: Orta bölüm
            a1.b2 = cbox()
            that.width = a1.width
            that.height = a1.height - APP_B1_HEIGHT - APP_B3_HEIGHT
            that.top = APP_B1_HEIGHT
            that.color = basic.ACTION2_COLOR
            that.scrollY = 1

            // NESNE: Orta bölümde bir nesne
            a1.b2.lblContent = clbl(20, 20, 250, 30)
            that.text = "a1.b2.lblContent"
            that.textColor = "white"

            // NESNE: Orta bölüm içinde bir alt bölüm
            a1.b2.c1 = cbox(0, 0, APP_ORIGINAL_WIDTH - 40, 150)
            that.color = "white"
            that.left = 20
            that.top = 300

            // NESNE: Alt bölüm içinde bir nesne
            a1.b2.c1.lblContent = clbl(0, 0, "auto", "auto")
            that.text = "a1.b2.c1.lblContent"
            that.textColor = "black"
            that.onResize(function(self) {
                self.center()
            })
            // İsmi, kısa olarak kullanacağım.
            content = a1.b2.c1.lblContent

            // NESNE: Orta bölüm içinde başka bir alt bölüm
            a1.b2.c2 = cbox(0, 0, APP_ORIGINAL_WIDTH - 40, 150)
            that.color = "white"
            that.left = 20
            that.top = page.height + 100

            // NESNE: Alt bölüm içinde bir nesne
            a1.b2.c2.lblContent = clbl(0, 0, "auto", "auto")
            that.text = "a1.b2.c2.lblContent"
            that.textColor = "black"
            that.onResize(function(self) {
                self.center()
            })

            // NESNE: Alt bölüm
            a1.b3 = cbox()
            that.width = a1.width
            that.height = 150
            that.color = "lightgray"
            that.bottom = 0

            // NESNE: Alt bölüm içinde bir nesne
            a1.b3.lblTitle = clbl()
            that.text = "a1.b3.lblTitle"
            that.width = "auto"
            that.onResize(function(self){
                self.center()
            })

            page.onResize(pageResized)

        }

        // DİĞER FONKSİYONLAR

        var pageResized = function() {

            page.fit(APP_ORIGINAL_WIDTH, APP_MAX_WIDTH)

            // Başlangıç sayfası
            a0.height = page.height
            a0.center("left")
            // Sayfa yüksekliği değiştiği için, butonu yeniden ortala.
            a0.btnStart.center()

            // Sayfa 1
            a1.height = page.height
            a1.center("left")
            // Orta bölümün yüksekliği değişir.
            a1.b2.height = a1.height - APP_B1_HEIGHT - APP_B3_HEIGHT

        }

        </script>

    </head>
    <body>

        <!-- HTML içeriği -->

    </body>
</html>