Skip to content

Commit feac3a2

Browse files
S4ndykS4ndyk
committed
Add fixes and translations to part 13
1 parent f64eb91 commit feac3a2

3 files changed

Lines changed: 192 additions & 4 deletions

File tree

‎data/part-13/1-graphical-user-interfaces.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ A test library called [TestFX] (https://github.com/TestFX/TestFX/wiki) is used i
4545
</text-box>
4646

4747
<!-- <text-box variant='hint' name='Tarvittavat oikeudet macOS:lla tehtävien testeihin'> -->
48-
<text-box variant='hint' name='Required Rights on macOS for Exercise Tests''>
48+
<text-box variant='hint' name='Required Rights on macOS for Exercise Tests'>
4949

5050
<!-- Tämän osan tehtävissä osa testeistä odottaa, että tmcbeans saa vapaasti liikuttaa kursoria näytöllä. macOS-käyttöjärjestelmällä (Apple-tietokoneet) tähän tarvitsee antaa erikseen tmcbeansille oikeus. Täältä löytyy ohjeet, miten oikeus myönnetään: [macOS ohjeet](/macos-ohjeet) -->
5151

@@ -108,6 +108,8 @@ When the launch method is called, the method of the Application class creates a
108108

109109
<!-- Luo tehtäväpohjassa olevaan luokkaan graafinen käyttöliittymä, jonka otsikkona on "Sovellukseni". Sovelluksen tulee käynnistyä kun main-metodi suoritetaan. -->
110110

111+
Create a GUI app with the title "My first application". The App shou start when main method is executed
112+
111113
</programming-exercise>
112114

113115

‎data/part-13/4-launch-parameters.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ When the `main` method of the class above is executed, the user interface define
9191

9292
The application can also be provided run-time parameters as part of the `launch` method. In addition to the lauched class, the `launch` method can be provided an unlimited number of strings that can be used as part of the launch. These strings are available during the application's launch via the `getParameters` method call.
9393

94-
The `getParameters ()` method returns a [Parameters] (https://docs.oracle.com/javase/8/javafx/api/javafx/application/Application.Parameters.html) type object whose method `getNamed` can access a hash table containing key-value pairs. The key-value pairs are given to the launch method in the form `--key = value`. In the example below, the title is made up of two parameters: `organization` and `course`.
94+
The `getParameters` method returns a [Parameters] (https://docs.oracle.com/javase/8/javafx/api/javafx/application/Application.Parameters.html) type object whose method `getNamed` can access a hash table containing key-value pairs. The key-value pairs are given to the launch method in the form `--key = value`. In the example below, the title is made up of two parameters: `organization` and `course`.
9595

9696
<!-- ```java
9797
package sovellus;

‎data/part-13/5-multiple-views.md‎

Lines changed: 188 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -225,7 +225,7 @@ Sometimes one wants an application to have a permanent view whose parts are swap
225225

226226
In the example below, there is a application which contains a main menu and an area with variable content. When pressing the buttons on the main menu the the content of the content area changes.
227227

228-
228+
<!--
229229
```java
230230
package application;
231231
@@ -300,6 +300,82 @@ public class ExampleApplication extends Application {
300300
}
301301
}
302302
```
303+
-->
304+
305+
```java
306+
package application;
307+
308+
import javafx.application.Application;
309+
import javafx.geometry.Insets;
310+
import javafx.geometry.Pos;
311+
import javafx.scene.Scene;
312+
import javafx.scene.control.Button;
313+
import javafx.scene.control.Label;
314+
import javafx.scene.layout.BorderPane;
315+
import javafx.scene.layout.HBox;
316+
import javafx.scene.layout.StackPane;
317+
import javafx.stage.Stage;
318+
319+
public class ExampleApplication extends Application {
320+
321+
@Override
322+
public void start(Stage window) throws Exception {
323+
324+
// 1. Create main layout
325+
BorderPane layout = new BorderPane();
326+
327+
// 1.1. Create menu for main layout
328+
HBox menu = new HBox();
329+
menu.setPadding(new Insets(20, 20, 20, 20));
330+
menu.setSpacing(10);
331+
332+
// 1.2. Create buttons for menu
333+
Button first = new Button("First");
334+
Button second = new Button("Second");
335+
336+
// 1.3. Add buttons to menu
337+
menu.getChildren().addAll(first, second);
338+
339+
layout.setTop(menu);
340+
341+
342+
// 2. Add subviews and add them to the menu buttons
343+
// 2.1. Create subview layout
344+
StackPane firstLayout = createView("First view");
345+
StackPane secondLayout = createView("Second view");
346+
347+
// 2.2. Add subviews to button. Pressing the buttons will change the view
348+
first.setOnAction((event) -> layout.setCenter(firstLayout));
349+
second.setOnAction((event) -> asettelu.setCenter(secondLayout));
350+
351+
// 2.3. Set initial view
352+
layout.setCenter(firstLayout);
353+
354+
355+
// 3. Create main scene with layout
356+
Scene scene = new Scene(asettelu);
357+
358+
359+
// 4. Show the main scene
360+
window.setScene(scene);
361+
window.show();
362+
}
363+
364+
private StackPane createView(String text) {
365+
366+
StackPane layout = new StackPane();
367+
layout.setPrefSize(300, 180);
368+
layout.getChildren().add(new Label(text));
369+
layout.setAlignment(Pos.CENTER);
370+
371+
return layout;
372+
}
373+
374+
public static void main(String[] args) {
375+
launch(ExampleApplication.class);
376+
}
377+
}
378+
```
303379

304380

305381
<!-- Sovellus toimii seuraavalla tavalla: -->
@@ -359,9 +435,13 @@ public interface PersonWarehouse {
359435

360436
When implementing a user interface a good starting point is drawing the interface followed bt adding appropriate user interface components to the user interface. When saving persons to a database we need a field for name, a field for social security number and a button for adding the person. In addition we'll also create
361437

438+
<!--
362439
Käytetään käyttöliittymän asetteluun `GridPane`-asettelijaa. Rivejä käyttöliittymässä on 3, sarakkeita 2. Lisätään tapahtumien käsittelytoiminnallisuus myöhemmin. Käyttöliittymän alustusmetodi näyttää seuraavalta.
440+
-->
363441

442+
Lets use `GridPane` class for the layout. There are 3 rows and 2 columns in the user interface. We'll add the event handling later. The initialization method is as follows:
364443

444+
<!--
365445
```java
366446
@Override
367447
public void start(Stage ikkuna) {
@@ -391,13 +471,50 @@ public void start(Stage ikkuna) {
391471
ikkuna.show();
392472
}
393473
```
474+
-->
475+
476+
```java
477+
@Override
478+
public void start(Stage window) {
479+
480+
Label nameText = new Label("Name: ");
481+
TextField nameField = new TextField();
482+
Label secText = new Label("Social security number: ");
483+
TextField secField = new TextField();
484+
485+
Button addButton = new Button("Add person!");
394486

487+
GridPane components = new GridPane();
488+
components.add(nameText, 0, 0);
489+
components.add(nameField, 1, 0);
490+
components.add(secText, 0, 1);
491+
components.add(secField, 1, 1);
492+
components.add(addButton, 1, 2);
493+
494+
// Add some style to the ui
495+
components.setHgap(10);
496+
components.setVgap(10);
497+
components.setPadding(new Insets(10, 10, 10, 10));
498+
499+
Scene scene = new Scene(components);
500+
501+
window.setScene(scene);
502+
window.show();
503+
}
504+
```
505+
<!--
395506
<img src="../img/material/gui-lisaa-henkilo.png" alt="Kaksi tekstikenttää sekä nappi, jossa on teksti 'Kopioi'."/>
507+
--->
396508

509+
<img src="../img/material/gui-lisaa-henkilo.png" alt="Two text fields and a button"/>
397510

511+
<!--
398512
Luodaan seuraavaksi ohjelmaan ActionEvent-rajapinnan toteuttava olio, joka lisää kenttien arvot Henkilovarasto-rajapinnalle.
513+
-->
399514

515+
Next lets add an object that implements the ActionEvent interface that adds field values to PersonWarehouse interface.
400516

517+
<!--
401518
```java
402519
@Override
403520
public void start(Stage ikkuna) {
@@ -409,10 +526,27 @@ public void start(Stage ikkuna) {
409526
// ...
410527
}
411528
```
529+
-->
530+
531+
```java
532+
@Override
533+
public void start(Stage window) {
534+
// ...
535+
536+
addButton.setOnAction((event) -> {
537+
warehouse.talleta(new Person(nameText.getText(), secText.getText());
538+
});
539+
// ...
540+
}
541+
```
412542

543+
<!--
413544
Mutta. Mistä saamme konkreettisen Henkilovarasto-olion? Se luodaan esimerkiksi start-metodin alussa. Alla annettuna koko sovelluksen runko.
545+
-->
414546

547+
But where do we get the actual PersonWarehouse-object? It is created at the beginning of the start method. Below is the code in whole.
415548

549+
<!--
416550
```java
417551
// pakkaus
418552

@@ -465,7 +599,59 @@ public class HenkiloSovellus extends Application {
465599
}
466600
}
467601
```
602+
-->
603+
604+
```java
605+
606+
import javafx.application.Application;
607+
import javafx.geometry.Insets;
608+
import javafx.scene.Scene;
609+
import javafx.scene.control.Button;
610+
import javafx.scene.control.Label;
611+
import javafx.scene.control.TextField;
612+
import javafx.scene.layout.GridPane;
613+
import javafx.stage.Stage;
614+
615+
public class PersonApp extends Application {
616+
617+
@Override
618+
public void start(Stage window) {
619+
PersonWarehouse warehouse = new MyPersonWarehouse();
620+
621+
Label nameText = new Label("Name: ");
622+
TextField nameField = new TextField();
623+
Label secText = new Label("Social security number: ");
624+
TextField secField = new TextField();
625+
626+
Button addButton = new Button("Add person!");
468627

628+
addButton.setOnAction((event) -> {
629+
warehouse.talleta(new Person(nameText.getText(), secText.getText());
630+
});
631+
632+
GridPane components = new GridPane();
633+
components.add(nameText, 0, 0);
634+
components.add(nameField, 1, 0);
635+
components.add(secText, 0, 1);
636+
components.add(secField, 1, 1);
637+
components.add(addButton, 1, 2);
638+
639+
// Add some style to the ui
640+
components.setHgap(10);
641+
components.setVgap(10);
642+
components.setPadding(new Insets(10, 10, 10, 10));
643+
644+
Scene scene = new Scene(components);
645+
646+
window.setScene(scene);
647+
window.show();
648+
}
649+
650+
public static void main(String[] args) {
651+
launch(PersonApp.class);
652+
}
653+
}
654+
```
469655

470656
## A slightly larger application: Vocabulary practice
471657

@@ -541,7 +727,7 @@ public class Dictionary {
541727
this.words = new ArrayList<>();
542728
this.translations = new HashMap<>();
543729

544-
lisaa("sana", "word");
730+
add("sana", "word");
545731
}
546732

547733
public String get(String word) {

0 commit comments

Comments
 (0)