Programmalıq injiniringge kirisiw / 6-ameliy PI_K

6-ámeliy sabaq. Prototiplew hám islep shıǵıw ortalıǵın ornatıw. Python ushın kinter (Standart grafikalıq paydalanıwshı interfeysi jıynaǵı). JavaFX (kóp qabatlı paydalanıwshı interfeysi hám interaktiv programmalardı jaratıw).

Jumıstıń maqseti

Bul ámeliy jumıstıń maqseti studentlerge programmalıq támiynattı islep shıǵıw ortalıǵın ornatıw hám konfiguraciyalaw, sonday-aq Python tilinde Tkinter arqalı hám Java tilinde JavaFX arqalı grafikalıq paydalanıwshı interfeysin jaratıw kónlikpelerin úyretiw bolıp tabıladı. Jumıstıń nátiyjesinde studentler Eclipse IDE ortalıǵın ornatıw hám konfiguraciyalaw, sonday-aq Tkinter hám JavaFX járdeminde interfeysti prototiplew kónlikpelerin iyeleydi.

Ámeliy bólim

Prototiplew hám programmalıq támiynat islep shıǵıw ortalıǵı (IDE)

Programmalıq támiynattı prototiplew - bul dáslepki basqıshta programmalıq támiynat óniminiń modelin jaratıw processi. Prototip - bul tiykarǵı funkciyalardı ámelge asıratuǵın hám boljawlı sistemanıń qanday isleytuǵınlıǵın kórsetiw ushın islengen dáslepki modeli. Programmalıq támiynat prototipleri paydalanıwshı interfeysin, funkciyalardı hám ulıwma jumıs islew logikasın qáliplestiriw jolların izlew ushın qollanıladı.

Programmalıq támiynattı islep shıǵıw ortalıǵı (IDE - Integrated Development Environment) - bul kod jazıw, redaktorlaw, kompilyaciyalaw, debugging hám testlew proccesslerin qolaylastıratuǵın kompleksli baǵdarlama. IDE islep shıǵıwshılardıń jumısın ańsatlastırıw hám programmalıq támiynat islep shıǵıw processi waqtın qısqartıw ushın bir qansha qurallardı jıynaǵın usınadı.

Programmalıq támiynat prototiplewinde IDE tómendegi maqsetler ushın qollanıladı:

Tez prototipler jaratıw hám tekseriw

Kodtı avtomat túrde tamamlaw arqalı islep shıǵıw processi tezligin arttırıw

Qáteliklerdi tabıw hám saplastırıw ushın debug quralların usınıw

Programmalıq tárep hám interfeys arasındaǵı baylanıstı támiyinlew

Python ushın Tkinter - Standart grafikalıq paydalanıwshı interfeysi jıynaǵı

Tkinter (Tk interface) - bul Python programmalastırıw tilinde grafikalıq paydalanıwshı interfeysin (GUI) jaratıw ushın qollanılatuǵın standart kitapxana. Ol Python ornatılǵan waqıtta avtomatikalıq túrde qosıladı hám ańsat isleydi.

Tkinter ornatıw hám konfiguraciyalaw

Python-dı ornatqanda Tkinter avtomatikalıq túrde qosıladı. Tkinter-di ornatıw statusın tekseriw ushın tómendegi komandanı terminal yamasa komanda qatarında orınlaw mumkin:

import tkinter tkinter._test()

Eger Tkinter durıs ornatılǵan bolsa, kishi test aynası ashıladı.

Tkinter-diń tiykarǵı elementleri

Tkinter-diń tiykarǵı elementleri:

Window (Tk) - Tkinter aplikaciyasınıń tiykarǵı aynası

Frame - konteyner widjeti

Label - tekst yamasa súwretlerdi kórsetiw ushın qollanılatuǵın widjet

Button - basıw mumkin bolǵan knopka

Entry - bir qatarlı tekst kirgiziw maydanı

Text - kóp qatarlı tekst kirgiziw maydanı

Checkbutton - tańlaw/tańlamaw opciyasın usınatuǵın widjet

Radiobutton - bir neshe opciyadan birewdi tańlaw ushın qollanılatuǵın widjet

Listbox - tańlaw ushın elementler dizimin usınatuǵın widjet

Menu - menyu jaratıw ushın qollanılatuǵın widjet

Canvas - súwret sızıw yamasa grafikalıq elementlerdi jaratıw ushın qollanılatuǵın widjet

Ápiway Tkinter aplikaciyasın jaratıw

Python-da Tkinter qollanıp ápiway aplikaciya jaratıw ushın tómendegi basqıshlardı orınlaw kerek:

import tkinter as tk

# Tiykarǵı aynanı jaratıw root = tk.Tk()

root.title("Birinshi Tkinter Aplikaciyası") root.geometry("400x300") # Ayna ólshemin belgilew

# Label qosıw

label = tk.Label(root, text="Sálem, Tkinter!", font=("Arial",

16))

label.pack(pady=20)

# Button qosıw

def button_clicked(): label.config(text="Knopka basıldı!")

button = tk.Button(root, text="Basıń", command=button_clicked) button.pack(pady=10)

#Entry (tekst kirgiziw maydanı) qosıw entry = tk.Entry(root, width=30) entry.pack(pady=10)

#Aplikaciyani iske túsiriw root.mainloop()

Tkinter Layout Menedjerler

Tkinter-de widjitlerdi jaylastırıw ushın úsh túrli layout menedjeri qollanıladı:

1.pack() - widjitlerdi avtomat túrde jaylastırıw

2.grid() - widjitlerdi setka túrinde jaylastırıw

3.place() - widjitlerdi koordinatalar boyınsha jaylastırıw

Mısal ushın grid() qollanıw:

import tkinter as tk

root = tk.Tk()

root.title("Grid Layout Mısalı")

# Birinshi qatardaǵı widjitler

tk.Label(root, text="Atıńız:").grid(row=0, column=0, padx=5, pady=5)

tk.Entry(root).grid(row=0, column=1, padx=5, pady=5)

# Ekinshi qatardaǵı widjitler

tk.Label(root, text="Familiyańız:").grid(row=1, column=0, padx=5, pady=5)

tk.Entry(root).grid(row=1, column=1, padx=5, pady=5)

# Úshinshi qatardaǵı knopka

tk.Button(root, text="Jiberiw").grid(row=2, column=0, columnspan=2, pady=10)

root.mainloop()

JavaFX - Kóp qabatlı paydalanıwshı interfeysi hám interaktiv programmalardı jaratıw ushın framework

JavaFX - bul Java tilinde grafikalıq paydalanıwshı interfeysin (GUI) jaratıw ushın qollanılatuǵın framework. JavaFX tiykarǵı maqseti - kóp platformalı, jańa áwlad grafikalıq aplikaciyaların jaratıw bolıp tabıladı, hám ol Swing frameworkin almastırdı.

JavaFX ornatıw hám konfiguraciyalaw

Java 8-den Java 10-ǵa shekem JavaFX JDK (Java Development Kit) quramına kiritiligen edi. Java 11-den baslap, JavaFX standart quramnan ajıratıldı hám ózinshe ornatıw talap etiledi.

JavaFX-ti ornatıw adımları:

1.JavaFX SDK-nı https://gluonhq.com/products/javafx/ saytınan júklep alıw

2.Alınǵan SDK-nı kompyuterde qálegenińizshe papkaǵa shıǵarıw

3.Islep shıǵıw ortalıǵında (IDE) JavaFX kitapxanasın qosıw

3.2.JavaFX-tiń tiykarǵı elementleri

JavaFX-tiń tiykarǵı elementleri:

Stage - JavaFX aplikaciyasınıń tiykarǵı aynası

Scene - Stage ishindegi konteyner

Pane - Nodlardı jaylastırıw ushın konteyner

Label - tekst kórsetiw ushın

Button - knopka

TextField - bir qatarlı tekst kirgiziw maydanı

TextArea - kóp qatarlı tekst kirgiziw maydanı

CheckBox - tańlaw/tańlamaw opciyası

RadioButton - bir neshe opciyadan birewin tańlaw ushın

ListView - elementler dizimin kórsetiw ushın

TableView - maǵlıwmatlardı keste túrinde kórsetiw ushın

Menu - menyu jaratıw ushın

Canvas - grafikalıq elementlerdi sızıw ushın

Ápiway JavaFX aplikaciyasın jaratıw

Java-da JavaFX qollanıp ápiway aplikaciya jaratıw ushın tómendegi basqıshlardı orınlaw kerek:

import javafx.application.Application; import javafx.scene.Scene;

import javafx.scene.control.Button; import javafx.scene.control.Label; import javafx.scene.layout.VBox; import javafx.stage.Stage;

public class BirinshiJavaFXApp extends Application {

@Override

public void start(Stage primaryStage) {

// Label jaratıw

Label label = new Label("Sálem, JavaFX!"); label.setStyle("-fx-font-size: 16px;");

// Button jaratıw

Button button = new Button("Basıń"); button.setOnAction(e -> label.setText("Knopka

basıldı!"));

// VBox konteyner jaratıw

VBox root = new VBox(10); // 10 piksel aralıq root.getChildren().addAll(label, button); root.setStyle("-fx-padding: 20px;");

// Scene jaratıw

Scene scene = new Scene(root, 300, 200);

// Stage konfiguraciyalaw hám kórsetiw primaryStage.setTitle("Birinshi JavaFX Aplikaciyası"); primaryStage.setScene(scene);

primaryStage.show();

}

public static void main(String[] args) { launch(args);

}

}

JavaFX Layout Menedjerler

JavaFX-te widjitlerdi jaylastırıw ushın túrli layout konteynerler qollanıladı:

1.HBox - widjitlerdi gorizontal baǵıtta jaylastırıw

2.VBox - widjitlerdi vertikal baǵıtta jaylastırıw

3.BorderPane - widjitlerdi top, bottom, left, right, center poziciyalarında jaylastırıw

4.GridPane - widjitlerdi setka túrinde jaylastırıw

5.FlowPane - widjitlerdi qatarlar túrinde jaylastırıw (qatardan shıǵıp ketse, kelesi qatarǵa ótedi)

6.AnchorPane - widjitlerdi konteyner shegaralarına baylanıstırıp jaylastırıw

GridPane layout mısalı:

import javafx.application.Application; import javafx.geometry.Insets;

import javafx.scene.Scene;

import javafx.scene.control.Button; import javafx.scene.control.Label; import javafx.scene.control.TextField; import javafx.scene.layout.GridPane; import javafx.stage.Stage;

public class GridPaneMisali extends Application {

@Override

//Birinshi qatardaǵı widjitler grid.add(new Label("Atıńız:"), 0, 0); grid.add(new TextField(), 1, 0);

//Ekinshi qatardaǵı widjitler grid.add(new Label("Familiyańız:"), 0, 1); grid.add(new TextField(), 1, 1);

//Úshinshi qatardaǵı knopka

Button button = new Button("Jiberiw"); GridPane.setColumnSpan(button, 2); grid.add(button, 0, 2);

// Scene jaratıw

Scene scene = new Scene(grid, 300, 150);

// Stage konfiguraciyalaw hám kórsetiw primaryStage.setTitle("GridPane Mısalı"); primaryStage.setScene(scene); primaryStage.show();

}

public static void main(String[] args) { launch(args);

}

}

Eclipse IDE ornatıw hám konfiguraciyalaw

Eclipse - bul Java tilinde programmalıq támiynat islep shıǵıw ushın kóbinese qollanılatuǵın ashıq kodlı IDE. Eclipse-tiń funkciyaları plugin-ler arqalı keńeytiliwi múmkin, bul onı hárbir islep shıǵıwshınıń talabı hám qálegenine sáykes konfiguraciyalawǵa múmkinshilik beredi.

Eclipse ornatıw

Eclipse-ti ornatıw adımları:

1.Eclipse-tiń rásmiy veb-saytınan (https://www.eclipse.org/downloads/) eń sońǵı versiyasın júklep alıw

2.Júklep alınǵan fayl arqalı Eclipse ornatıwshısın iske túsiriw

3."Eclipse IDE for Java Developers" opciyasın tańlaw

4.Ornatıw ushın qálegen papkanı tańlaw

5.Ornatıw processiniń tamamlanıwın kútiw

Eclipse-ti konfiguraciyalaw

Eclipse-ti JDK hám JavaFX menen islew ushın konfiguraciyalaw basqıshları:

1. JDK-nı konfiguraciyalaw:

oWindow -> Preferences -> Java -> Installed JREs

o"Add" túymesin basıw

o"Standard VM" opciyasın tańlaw hám "Next" basıw

oJDK ornatılǵan papkanı kórsetiw

o"Finish" basıw

oJDK-nı tańlap, "Apply and Close" basıw

2.JavaFX-ti konfiguraciyalaw:

oWindows -> Preferences -> Java -> BuildPath -> User Libraries

o"New" túymesin basıw

oKitapxana atın "JavaFX" dep jazıw

o"OK" basıw

o"Add External JARs" basıw

oJavaFX SDK jaylasqan papkanı ashıw hám "lib" papkasınan barlıq

JAR faylların tańlaw

o "Open" túymesin basıw

o"Apply and Close" basıw

4.3.Eclipse-te jańa Java proektin jaratıw

Eclipse-te jańa Java proektin jaratıw basqıshları:

1.File -> New -> Java Project

2.Proekt atın jazıw

3."Use an execution environment JRE" opciyasın tańlaw

4."Finish" basıw

4.4.Eclipse-te jańa JavaFX proektin jaratıw

Eclipse-te jańa JavaFX proektin jaratıw basqıshları:

1.File -> New -> Java Project

2.Proekt atın jazıw

3."Finish" basıw

4.Proektke oń túymeni basıp, Properties tańlaw

5.Java Build Path -> Libraries -> Classpath -> Add Library -> User Library

6.JavaFX kitapxanasın tańlaw

7."Apply and Close" basıw

JavaFX proektin durıs iske túsiriw ushın VM argumentlerin qosıw kerek:

1. Run -> Run Configurations

2.Proektti tańlaw

3.Arguments qosımshasına ótiw

4.VM arguments maydanına tómendegilerdi qosıw:

5.--module-path "/path/to/javafx-sdk/lib" --add- modules javafx.controls,javafx.fxml

6."Apply" basıw

Ámeliy tapsırmalar

Tapsırma 1: Eclipse IDE-ni ornatıw hám konfiguraciyalaw

Eclipse IDE-ni óz kompyuterińizge ornatıń hám onı Java hám JavaFX menen islew ushın konfiguraciyalań.

Tómendegi adımlardı orınlań:

1.Eclipse-tiń eń sońǵı versiyasın júklep alıń

2.Eclipse-ti ornatıń

3.JDK-nı Eclipse-te konfiguraciyalań

4.JavaFX-ti Eclipse-te konfiguraciyalaw

5.Jańa Java proektin jaratıń hám "Hello, World!" aplikaciyasın iske túsiriń

Jumıstı orınlawdıń proccessin screenshot-lar menen dokumentlestiriń.

Tapsırma 2: Python ushın Tkinter qollanıp grafikalıq interfeys jaratıw

Python hám Tkinter qollanıp kishi registraciya formasın jaratıń.

Tómendegi talaplarǵa sáykes bolıwı kerek:

1.Forma tómendegi maydanlardı óz ishine alıwı kerek: o Atı (tekst maydanı)

o Familiyası (tekst maydanı) o Email (tekst maydanı)

o Jası (sandı tańlaw) o Jınısı (radiobutton)

o Maǵlıwmatlardı saqlaw ushın belgilew maydanı (checkbox) o "Registraciya" knopkası

2."Registraciya" knopkası basılǵanda, kirgizilgen maǵlıwmatlar tekserilip,

ekranda kórsetiliw kerek

3.Grid layout-tı qollanıń

4.Interfeysti kórkem qılıw ushın túrli stillerdi qollanıń (túsler, shriftler, t.b.)

Jumıstı orınlaw nátiyjesinde Tkinter qollanıp jaratılǵan aplikaciyalardıń screenshot-ların hám kod faylın tapsırıń.

Tapsırma 3: JavaFX qollanıp grafikalıq interfeys jaratıw

Java hám JavaFX qollanıp kishi telefon kitapshasın (kontaktlar dizimin) jaratıń.

Tómendegi funkciyalardı ámelge asırıń:

1.Jańa kontakt qosıw forması: o Atı (TextField)

o Familiyası (TextField)

o Telefon nomeri (TextField) o Email (TextField)

o "Saqlaw" knopkası

2.Kontaktlar dizimin kórsetiw ushın TableView qollanıń

3.Jańa kontakttı qosıw ushın menyu jaratıń

4.Kontakttı óshiriw múmkinshiligin qosıń

5.Túrli layout konteynerlerdi qollanıń (BorderPane, GridPane, HBox, VBox)

Jumıstı orınlaw nátiyjesinde JavaFX qollanıp jaratılǵan aplikaciyalardıń screenshot-ların hám kod faylların tapsırıń.

Tapsırmanı tabıslı orınlaw ushın qosımsha keńesler:

Scene Builder quraların qollaw arqalı JavaFX interfeysin jaratıw muddetlerin qısqartıwıńız múmkin

CSS faylların qollanıp, interfeysti jaqsı kóriniw menen támiyinleń

Kontaktlardı diskke saqlaw funkciyasın qosıń

Eclipse-tiń debugging qurallarlın qollanıw arqalı aplikaciyańızdaǵı qáteliklerdi tekseriń