diff --git a/src/javafx/fxmllogo/README.md b/src/diverse/fxmllogo/README.md similarity index 100% rename from src/javafx/fxmllogo/README.md rename to src/diverse/fxmllogo/README.md diff --git a/src/javafx/fxmllogo/ccno_logo.png b/src/diverse/fxmllogo/ccno_logo.png similarity index 100% rename from src/javafx/fxmllogo/ccno_logo.png rename to src/diverse/fxmllogo/ccno_logo.png diff --git a/src/javafx/fxmllogo/color-picker.png b/src/diverse/fxmllogo/color-picker.png similarity index 100% rename from src/javafx/fxmllogo/color-picker.png rename to src/diverse/fxmllogo/color-picker.png diff --git a/src/javafx/fxmllogo/font-picker.png b/src/diverse/fxmllogo/font-picker.png similarity index 100% rename from src/javafx/fxmllogo/font-picker.png rename to src/diverse/fxmllogo/font-picker.png diff --git a/src/javafx/fxmllogo/fxml-editor-with-preview-pane.png b/src/diverse/fxmllogo/fxml-editor-with-preview-pane.png similarity index 100% rename from src/javafx/fxmllogo/fxml-editor-with-preview-pane.png rename to src/diverse/fxmllogo/fxml-editor-with-preview-pane.png diff --git a/src/diverse/fxmllogo/fxmllogo.md b/src/diverse/fxmllogo/fxmllogo.md new file mode 100644 index 0000000000..180339cfdb --- /dev/null +++ b/src/diverse/fxmllogo/fxmllogo.md @@ -0,0 +1,300 @@ +--- +title: "JavaFX: Logo med FXML" +author: Hallvard Trætteberg +level: 1 +language: nb +--- + + +# Introduksjon {.intro} + +En viktig del av det å lage app-er er å utforme skjerminnholdet, dvs. alt app-en +inneholder av grafikk, knapper, lister, osv. Formålet til denne leksjonen er å +lære hvordan du kan bruke **FXML** for å lage skjerminnhold, og **to måter** å +lage slikt innhold. I tillegg skal du lære hvordan du får app-en til å laste inn +og vise frem innholdet i FXML-filer. App-en er ikke så komplisert, den skal bare +vise frem logoene til Kodeklubben og NTNU (eller andre logoer, hvis du ønsker +det): + +| Kodeklubben | NTNU | +|:--------:|:---------:| +| Kodeklubbens logo | NTNU logo | + +I leksjonen [Hello world](../helloworld/helloworld.html) lærte du om hvordan du +kan lage en app som viste et vindu med et tekst-objekt (av type **Text**). Da +skrev du Java-kode som _laget_ tekst-objektet, _satte grafiske egenskaper_ for +tekst-objektet og _la det til_ app-vinduet. Slik kode kan fort bli lang og +uoversiktlig, og det kan være vanskelig å skrive kode som har ønsket effekt og +se for seg hvordan skjerminnholdet vil bli seende ut. + +For å gjøre arbeidet med skjerminnhold enklere, så finnes det en egen kode-type +kalt **FXML** for å lage skjerminnhold. FXML ligner på HTML ved at det bruker +XML-elementer, f.eks. ` ... ` og attributter, f.eks. +`fill="blue"` for å beskrive innholdet. Når en skal lage FXML-filer, kan en +enten redigere FXML som tekst i en egen FXML-editor eller bruke en egen +tegne-app som leser og skriver FXML-filer. Vi skal se på begge disse teknikkene +i denne leksjonen. + + +# Steg 1: Opprette app-pakke, app-klasse og FXML-fil {.activity} + +- [ ] Lag først en ny app-pakke og app-klasse som forklart i [Hello + world-leksjonen](../helloworld/helloworld.html). Bruk **fxmllogo** som navn på + pakken og **FxmlLogoApp** som navn på app-klassen. + +- [ ] Høyreklikk på **fxmllogo**-pakken og velg `New > Other...` så du får opp + en liste med såkalte _veivisere_ (eng: _wizards_). Vi skal bruke den som heter + **New FXML Document**. Det enkleste er å skrive inn 'fx' i søkefeltet, for å + snevre inn utvalget: + + ![Bilde av hvordan velge new FXML dokument](new-fxml-document.png "New FXML document") + + Trykk `Next` for å velge veiviseren. Du vil da få opp følgende skjema: + + ![Bilde av neste steg av veiviseren](new-fxml-file-wizard.png "New FXML file") + + Fyll inn `FxmlLogoApp` og trykk `Finish`. Du vil da få opp en FXML-editor med + den nye FXML-fila: + + ![Bilde av FXML-editoren med den nye FXML fila](initial-FxmlLogoApp.fxml.png "Initial FxmlLogoApp.fxml") + +- [ ] Denne FXML-en gir bare et tomt panel (av typen **AnchorPane**), så for å + få noe å jobbe med, så trenger vi Rediger teksten slik at den blir som følger: + +```xml + + + + + + + + + + + + + + +``` + + FXML-editoren har samme type kode-komplettering som Java-editoren. Når du + f.eks. har skrevet inn `` + + (Hvis du ikke bruker kode-kompletteringsfunksjonen, så må du skrive inn + import-setningen selv.) Tilsvarende kan du bruke kode-komplettering på + attributt-navnene **layoutX**, **layoutY**, **width**, **height**, **fill** + osv. + +- [ ] Mens du redigerer FXML-koden, så kan det være kjekt å se hvordan innholdet + vil bli seende ut, når det lastes inn og vises frem. Eclipse har et eget panel + kalt **JavaFX preview** som hele tiden laster inn FXML-koden du redigerer og + viser frem innholdet. Dette åpnes ved å velge `Window > Show View...` og så + finne panelet i lista. Bruk søkefeltet for å filtrere lista (skriv 'pre', så + panelet blir enklere å finne. + + ![Bilde av hvordan forhåndsvise FXML](fxml-editor-with-preview-pane.png "FXML-editor med preview-panel") + + Som du ser så inneholder FXML-fila allerede mange av de grafiske elementene + som trengs for å lage begge logoene, men ikke alle. Din jobb blir å justere på + FXML-koden, så logoene blir omtrent som vist øverst i denne leksjonen. + +## Litt om FXML + +Du har kanskje kjent igjen mange av ordene i FXML-fila fra Java-koden du skrev i +[Hello world-leksjonen](../helloworld/helloworld.html), og det er ikke +tilfeldig. Enkelt sagt så tilsvarer elementnavnene i FXML-koden (ordet etter `<` +og ` +``` + +Noen typer objekter, f.eks. paneler (typene **Pane**, **HBox**, **VBox** og +**AnchorPane**), _inneholder_ andre objekter. I Java-koden må en legge den ene +til **children**-lista til den andre, mens en i FXML legger det ene elementet +inni det andre: + +```java +Pane pane = new Pane(); +Circle circle = new Circle(); +... +pane.getChildren().add(circle); +``` + +```xml + + + +``` + + +# Steg 2: Åpne og redigere FXML-fil med SceneBuilder {.activity} + +Det går greit å bruke FXML-editoren for enkel redigering (eller mer kompliserte +ting, når en får erfaring), men det finnes et enklere alternativ, nemlig en +grafisk editor kalt **SceneBuilder**. En kan faktisk åpne og redigere FXML-fila +direkte i JavaFX Scene Builder (ofte bare kalt SceneBuilder), siden den bruker +FXML som lagringsformat. + +- [ ] Høyreklikk på FXML-fila og velg `Open with SceneBuilder` + + ![Bilde av hvordan åpne SceneBuilder](open-with-scenebuilder.png "Åpne med SceneBuilder") + + Hvis du har installer SceneBuilder riktig, så skal du etter litt venting få + opp følgende + + ![Bilde av SceneBuilder appen](scene-builder-FxmlLogoApp-1.png "FxmlLogoApp.fxml åpnet med SceneBuilder") + + Som du ser så inneholder panelet i midten de samme grafiske elementene som + JavaFX Preview-panelet. Her kan du imidlertid _redigere_ på dem, ved å velge, + dra og slippe, som i vanlige tegneprogrammer. + + Nederst til venstre ser du trestrukturen av objekter, med et panel + (**AnchorPane**) som inneholder et rektangel (**Rectangle**), en sirkel + (**Circle**) og to tekst-objekter (**Text**). + + Øverst til venstre ser du en kategorisert liste med elementer som kan dras og + slippes inn i redigeringspanelet i midten. I figuren vises bare såkalte + **Containers**, som inneholder andre elementer, men (hvis du scroller) lenger + ned finner du bl.a. **Controls** (interaktive elementer) og **Shapes** + (grafiske elementer). Prøv å finne **Line**-typen og dra og slipp den litt til + høyre for det svarte rektangelet. Hvis du vil endre på hvordan streken ser ut, + så kan du redigere ulike _egenskaper_ i panelet til høyre. Prøv f.eks. å gjøre + streken tykkere (**Stroke Width** = 10), endre fargen til grønn (**Stroke** = + #569900) og enden til avrundet (**Stroke Line Cap** = **ROUND**). Da skal det + se omtrent slik ut: + + ![Bilde av den nye linja i SceneBuilder](scene-builder-FxmlLogoApp-2.png "FxmlLogoApp.fxml åpnet med SceneBuilder") + + Dette er omtrent de grafiske elementen du trenger for å lage Kodeklubben- og + NTNU-logoene. Prøv å bruke redigeringsmulighetene til å få tegningen til å bli + seende omtrent slik ut: + + ![Bilde av de to nye logoene](scene-builder-FxmlLogoApp-3.png "Logoer redigert med SceneBuilder") + + Her er noen tips om nyttige redigeringsfunksjoner som du kan bruke for å få + laget og redigert grafikken: + + * Du kan raskt lage en kopi (duplisere) et element med `Edit > Duplicate` + + * Du kan runde av hjørnene på et rektangel ved å endre **Arc Height** og **Arc + Width** + + * Når du klikker på **Stroke**- og **Fill**-egenskapene, så kommer det opp et + nytt vindu med mulighet til å velge farge på flere måter (se under til + venstre) + + * Tilsvarende kan du stille inn navn og størrelsen på font-en til + tekst-objekter ved å klikke på **Font**-egenskapen (se under til høyre) + + | Valg av farge | Valg av font | + |:-------------:|:------------:| + |![Bilde av fargevelgeren](color-picker.png)|![Bilde av fontvelgeren](font-picker.png)| + + Spesielt fin-innstillingen av plassering og dimensjoner kan være vanskelig. + Nede til høyre i SceneBuilder-vinduet finner du egenskaper med kategorien + **Layout**, bl.a. koordinater og størrelse. Akkurat hvilke egenskaper du kan + endre avhenger av hvilket grafisk element som er valgt. I figuren under ser du + hva som kan endre på et rektangel. + + | Layout-egenskaper | | + |:-------------:|------------| + |![Bilde av layout egenskapene](layout-properties.png) | Det er egentlig disse egenskapene du endrer, når du velger, drar og slipper de grafiske elementene og de små hjørne-boksene. Ved å redigere tallene, så kan du styre dem helt presist.| + + +# Steg 3: Få appen til å vise frem innholdet i FXML-fila {.activity} + +Det siste trinnet i denne leksjonen er å få app-en til å vise frem det grafiske +innholdet i app-vinduet. For å få dette til må du redigere koden i app-klassen +din, som du laget i trinn én og heter **FxmlLogoApp**. + +- [ ] Husk å lagre FXML-fila i SceneBuilder før du går tilbake til Eclipse. + +- [ ] Klikk i FXML-editoren. Den skal da vise frem det nye innholdet, som er + resultatet av all redigeringen du gjorde i SceneBuilder. + +- [ ] Det er greit å gjøre endringer rett i FXML-koden i editor. Når du går + tilbake til SceneBuilder, så sjekk om du ser de samme endringene der. Hvis + ikke så må du kanskje lukke den og åpne den igjen med `Open with + SceneBuilder`. + +- [ ] Velg editoren med **FxmlLogoApp**-klassen i (eller åpne den ved å + dobbel-klikke på **FxmlLogoApp.java**) og rediger slik at du får følgende + kode: + + ```java + package fxmllogoapp; + + import java.io.IOException; + + import javafx.application.Application; + import javafx.fxml.FXMLLoader; + import javafx.scene.Scene; + import javafx.scene.layout.Pane; + import javafx.stage.Stage; + + public class FxmlLogoApp extends Application { + + public void start(Stage primaryStage) throws IOException { + FXMLLoader fxmlLoader = new FXMLLoader(FxmlLogoApp.class.getResource("FxmlLogoApp.fxml")); + Pane root = fxmlLoader.load(); + primaryStage.setScene(new Scene(root)); + primaryStage.show(); + } + + public static void main(String[] args) { + launch(FxmlLogoApp.class, args); + } + } + ``` + +Trikset her er å lage et **FXMLLoader**-objekt (første linje i start-metoden, +og be denne laste inn FXML-fila med load-metoden (andre linje). + +- [ ] Kjør app-en ved å høyre-klikke på fila eller i editoren og velge `Run as > + Java Application`. Da skal det (etter litt venting) dukke opp et vindu som + dette: + + ![Bilde av appen som kjører](run-FxmlLogoApp-as-java-application.png) + + +# Hva har du lært? + ++ lage en FXML-fil med Eclipse sin veiviser + ++ redigere FXML i Eclipse sin FXML-editor. + ++ se forhåndsvisning av FXML-innholdet i JavaFX Preview-panelet + ++ åpne FXML-fila i JavaFX Scene Builder med `Open with SceneBuilder` + ++ legge nye elementer til FXML-fila ved å dra og slippe fra SceneBuilder sin + paletten + ++ redigere grafiske egenskaper i SceneBuilder + ++ skrive app-kode som laster inn og viser frem FXML-fila i et app-vindu + +I leksjonen KalkulatorFX (to be continued) vil du lære hvordan du kan koble +FXML-koden til Java-koden og gjøre app-en levende (interaktiv)! diff --git a/src/javafx/fxmllogo/initial-FxmlLogoApp.fxml.png b/src/diverse/fxmllogo/initial-FxmlLogoApp.fxml.png similarity index 100% rename from src/javafx/fxmllogo/initial-FxmlLogoApp.fxml.png rename to src/diverse/fxmllogo/initial-FxmlLogoApp.fxml.png diff --git a/src/javafx/fxmllogo/layout-properties.png b/src/diverse/fxmllogo/layout-properties.png similarity index 100% rename from src/javafx/fxmllogo/layout-properties.png rename to src/diverse/fxmllogo/layout-properties.png diff --git a/src/javafx/fxmllogo/lesson.yml b/src/diverse/fxmllogo/lesson.yml similarity index 100% rename from src/javafx/fxmllogo/lesson.yml rename to src/diverse/fxmllogo/lesson.yml diff --git a/src/javafx/fxmllogo/logo2_ntnu_u-slagord.gif b/src/diverse/fxmllogo/logo2_ntnu_u-slagord.gif similarity index 100% rename from src/javafx/fxmllogo/logo2_ntnu_u-slagord.gif rename to src/diverse/fxmllogo/logo2_ntnu_u-slagord.gif diff --git a/src/javafx/fxmllogo/new-fxml-document.png b/src/diverse/fxmllogo/new-fxml-document.png similarity index 100% rename from src/javafx/fxmllogo/new-fxml-document.png rename to src/diverse/fxmllogo/new-fxml-document.png diff --git a/src/javafx/fxmllogo/new-fxml-file-wizard.png b/src/diverse/fxmllogo/new-fxml-file-wizard.png similarity index 100% rename from src/javafx/fxmllogo/new-fxml-file-wizard.png rename to src/diverse/fxmllogo/new-fxml-file-wizard.png diff --git a/src/javafx/fxmllogo/open-with-scenebuilder.png b/src/diverse/fxmllogo/open-with-scenebuilder.png similarity index 100% rename from src/javafx/fxmllogo/open-with-scenebuilder.png rename to src/diverse/fxmllogo/open-with-scenebuilder.png diff --git a/src/javafx/fxmllogo/run-FxmlLogoApp-as-java-application.png b/src/diverse/fxmllogo/run-FxmlLogoApp-as-java-application.png similarity index 100% rename from src/javafx/fxmllogo/run-FxmlLogoApp-as-java-application.png rename to src/diverse/fxmllogo/run-FxmlLogoApp-as-java-application.png diff --git a/src/javafx/fxmllogo/scene-builder-FxmlLogoApp-1.png b/src/diverse/fxmllogo/scene-builder-FxmlLogoApp-1.png similarity index 100% rename from src/javafx/fxmllogo/scene-builder-FxmlLogoApp-1.png rename to src/diverse/fxmllogo/scene-builder-FxmlLogoApp-1.png diff --git a/src/javafx/fxmllogo/scene-builder-FxmlLogoApp-2.png b/src/diverse/fxmllogo/scene-builder-FxmlLogoApp-2.png similarity index 100% rename from src/javafx/fxmllogo/scene-builder-FxmlLogoApp-2.png rename to src/diverse/fxmllogo/scene-builder-FxmlLogoApp-2.png diff --git a/src/javafx/fxmllogo/scene-builder-FxmlLogoApp-3.png b/src/diverse/fxmllogo/scene-builder-FxmlLogoApp-3.png similarity index 100% rename from src/javafx/fxmllogo/scene-builder-FxmlLogoApp-3.png rename to src/diverse/fxmllogo/scene-builder-FxmlLogoApp-3.png diff --git a/src/swift/hei_verden/app_informasjon.png b/src/diverse/hei_verden/app_informasjon.png similarity index 100% rename from src/swift/hei_verden/app_informasjon.png rename to src/diverse/hei_verden/app_informasjon.png diff --git a/src/swift/hei_verden/change_label.png b/src/diverse/hei_verden/change_label.png similarity index 100% rename from src/swift/hei_verden/change_label.png rename to src/diverse/hei_verden/change_label.png diff --git a/src/swift/hei_verden/drag_label.png b/src/diverse/hei_verden/drag_label.png similarity index 100% rename from src/swift/hei_verden/drag_label.png rename to src/diverse/hei_verden/drag_label.png diff --git a/src/diverse/hei_verden/hei_verden.md b/src/diverse/hei_verden/hei_verden.md new file mode 100755 index 0000000000..4a1e85c5e8 --- /dev/null +++ b/src/diverse/hei_verden/hei_verden.md @@ -0,0 +1,208 @@ +--- +title: "Swift: Hei verden" +level: 1 +author: Andreas Amundsen +language: nb +--- + + +# Introduksjon {.intro} + +Swift er et programmeringsspråk laget av Apple og er etterfølgeren til +Objective-C. Med Swift kan du lage apper for iOS og OSX. For å gjennomføre dette +kurset trenger du en Mac, og helst en iPhone/iPad/iPod å teste ut appen på :) + +I dag skal vi lage vår første app, nemlig en Hei Verden-app! Det er en kjent og +kjær tradisjon at det første programmet man skriver i et nytt +programmeringsspråk skriver "Hei Verden!" til skjermen. + +![Bilde av appen som skriver "Hei Verden!"](hei_verden.png) + + +# Steg 1: Sette opp Xcode {.activity} + +Xcode er Apples utviklingsverktøy, og vi skal bruke det til å skrive appen. Last +ned nyeste versjon Xcode fra Mac App Store, og sørg for at du har en Apple-ID +(merk. dette programmet er gratis). Vi skal starte med å sette opp et nytt +prosjekt. + +## Xcode 7 Beta vs Xcode 6 {.protip} + +I denne øvelsen er skjermbildene og instruksjonene for Xcode 7 beta, men det +skal fungere helt likt på Xcode 6. + +## Sjekkliste {.check} + +- [ ] Åpne Xcode ved å holde `cmd + mellomrom` og søk etter **Xcode**. + Alternativt kan du søke etter Xcode med forstørrelsesglass-ikonet øverst i + høyre hjørne. + +- [ ] Du blir møtt med et vindu som lar deg gjøre en rekke ting. Du kan enten + starte et nytt prosjekt, leke deg rundt i **Playground** eller se på og + endre et eksisterende prosjekt. + + ![Bilde av åpningskjermen til Xcode](intro_skjerm.png) + +- [ ] Trykk på **Create a New Xcode project**. + +- [ ] En ny skjerm skal vises som lar deg velge et rammeverk for appen. Vi skal + velge **Single View Application**, som gir oss et bra utgangspunkt for vår + egen Hei Verden-app siden denne trenger bare ett skjermbilde. + + ![Bilde av hvordan opprette ett nytt prosjekt](lag_prosjekt.png) + +- [ ] Trykker du på **Next** blir du tatt til en skjerm hvor du må fylle inn + litt informasjon. I **Product Name** kan du navngi appen din (vi skal + kalle vår *Hei Verden!*). **Organization Name** og **Organization + Identifier** er det ikke så viktig med nå, du kan bare la den være som den + er :) **Language** skal settes til Swift, mens **Devices** skal settes til + iPhone. + + ![Bilde av informasjonen om app'en](app_informasjon.png) + +- [ ] Lagre applikasjonen ved å trykke **next**, og deretter **create** (hvor du + velger hvor prosjektet lagres). + + +# Steg 2: Tekst på skjermen ved bruk av en tekstetikett {.activity} + +Vi skal nå legge til en tekstetikett for å så endre teksten i `Main.storyboard`. + +## Sjekkliste {.check} + +- [ ] Trykk på `Main.storyboard` på venstre side av skjermen. + +- [ ] Zoom ut til du ser en firkantet skjerm. Dette representerer skjermen til + enheten. Nederst i høyre hjørne av Xcode skal det være en boks, med fire + kanpper på øverste rad. Vi skal velge det tredje ikonet, som ligner en + hjemknapp. Nede i boksen vil det være et søkefelt. Der skal vi søke etter + `Label`. + +- [ ] Dra en `Label` til `Main.storyboard`, og legg den helt øverst i venstre + hjørne av det store kvadratet. Du må muligens dobbeltklikke på + `Main.storyboard` før du får lov til å dra `Label` dit. Dobbeltklikk på + `Label`, da dette lar oss endre teksten. Som tradisjonsrike skriver vi + *Hei verden!*, men det er helt opp til deg hva du vil skrive! :) + + ![Bilde av teksten som skrives til skjermen](drag_label.png) + +- [ ] Nå skal vi kjøre appen for å teste at alt fungerer. Vi gjør dette ved å + trykke på den svarte pilen (playknappen) øverst i venstre hjørne. + Alternativt kan du trykke `cmd + r`. + +- [ ] Det skal nå kjøres en simulator, og teksten *Hei verden!* skal dukke opp. + + +# Steg 3: Få en knapp til å skrive noe til skjermen {.activity} + +Vi skal nå sørge for at ved å trykke på en knapp, vil `Label` endre seg. For å +kunne følge med på denne delen av kurset er det anbefalt med noe tidligere +kunnskap om grunnleggende programmering. + +## Sjekkliste {.check} + +- [ ] Om du vil spare på den første appen du lagde kan du gjerne lage et nytt + Xcode-prosjekt før du går videre. Gjenta i såfall stegene 1 og 2 og sjekk + at alt fungerer som det skal. + +- [ ] I tillegg til å dra inn en `Label` i `Main.Storyboard`, skal vi legge til + en `Button`. En `Button` kan vi trykke på og kjøre kode knyttet til + knappen. Du legger til en `Button` på samme måte som du gjorde med + `Label`. + +- [ ] Ha `Main.Storyboard` i Xcode vinduet valgt, og trykk på de to sirklene + øverst i høyre hjørne i Xcode. Vinduet som dukker opp til venstre viser + koden knyttet til en `ViewController`, som er den som kontrollerer hvordan + app-skjermen oppfører seg. Det er her selve kodingen foregår. + +- [ ] Venstreklikk på `Button` i `Main.Storyboard`. Hold **ctrl** nede mens du + venstreklikker og dra mot høyre. Dra streken til linjen over der det står + `override func didReceiveMemoryWarning()`. Endre `Connection` til å være + en `Action`, og gi den navnet `knapp`. + +- [ ] Venstreklikk på `Label` i `Main.Storyboard`. Hold **ctrl** nede, + venstreklikk og dra streken til mellom `override func viewDidLoad()` og + `class ViewController: UIViewController {`. `Connection` lar du være + `Outlet`, og sett navn til `etikett`. + + ![Bilde av koden for å få en knapp til å endre teksten](label_connection.png) + +## Slippe streken på riktig sted i koden {.protip} + +Det er viktig å slippe strekene eksakt som det står i de to stegene over! Disse +kobler elementene i `Main.storyboard` til koden din. + +## Sjekkliste {.check} + +- [ ] Vi skal nå begynne å kode litt! Det er anbefalt med noe tidligere + programmeringserfaring her. + +- [ ] Vi har nå laget to såkalte `Connections`. Den ene er `@IBOutlet weak var + etikett: UILabel!`, som refererer til `Label` i `Main.Storyboard`. Den + andre er `@IBAction func knapp(sender: AnyObject) { }` + +- [ ] Tanken er at et klikk på knappen skal endre teksten til `Label`. + Variabelen `etikett` er koblet til `Label`. Vi kan derfor få teksten til å + endre seg ved å skrive + + ``` + etikett.text = "Knappen sier: Hei!" + ``` + + mellom `{` og `}` der du slapp knappen i koden (`func knapp`). + +- [ ] Kjør appen som du lærte i Steg 2 ved å enten klikke på den svarte pilen + øverst i hjørnet eller trykke `cmd + r`. + +- [ ] Klikk på knappen og observer hva som skjer! Endret `Label` seg til teksten + du skrev i `etikett.text = "Knappen sier: Hei!"`? Hvis etiketten ikke + viser hele `Knappen sier: Hei!"`, må du endre størrelsen på `Label`. + Klarer du å gjøre det selv? + + ![Bilde av den ferdige koden som endrer teksten](change_label.png) + +## Utfordring - Variabler {.challenge} + +Prøv å definer en variabel nedenfor `@IBOutlet weak var etikett: UILabel!`, og +sett den til å være ditt navn. Klarer du å få `Label` til å vise verdien av +variabelen ved å endre `etikett.text`? + + +# Steg 4: Få input fra tekstfelt {.activity} + +Nå skal vi legge inn et tekstfelt i appen, så vi kan ta det brukeren skriver i +tekstfeltet og vise det i `Label`. + +## Sjekkliste {.check} + +- [ ] I dette steget kan du godt fortsette på appen vi jobbet med i Steg 3. Å + implementere tekstfeltfunksjonalitet er veldig likt som i steget over. + +- [ ] Begynn med å søke etter `Text Field` på samme sted hvor du har søkt etter + `Label`og `Button`. Dra så `Text Field` inn i `Main.Storyboard`. + +- [ ] Lag en `Connection` som du gjorde i Steg 3 og opprett den på linjen under + `@IBOutlet weak var etikett: UILabel!`. Det eneste du skal endre er navnet + på tekstfeltet. Bruk `tekstfelt`. + +- [ ] I `@IBAction func knapp(sender: AnyObject) { }` kan du bytte ut + `etikett.text = "Knappen sier: Hei!"` med `etikett.text = tekstfelt.text`. + Det brukeren skriver i inn i tekstfeltet er tilgjengelig i + `text`-egenskapen til tekstfeltet, og vi henter ut denne informasjonen når + vi trykker på knappen. + + ![Bilde av en boks som tar inn tekst](textfield_input.png) + +## Utfordring - Kan du lage din egen versjon? {.challenge} + +Nå som du har lært det grunnleggende, hvorfor ikke lage en app som har flere +knapper og tekstfelt? Kanskje du kan få den til å fortelle en morsom historie +basert på ord brukeren skriver inn? Vis gjerne appen til bekjente og be om +tilbakemeldinger! + +## Noen spørsmål? {.protip} + +Har du noen spørsmål angående Xcode, Swift eller ris/ros for dette kurset, send +meg gjerne en mail til andreas.amundsen123@gmail.com! + +Jeg tar gjerne i mot tips til ideer til fremtidige kurs! diff --git a/src/swift/hei_verden/hei_verden.png b/src/diverse/hei_verden/hei_verden.png similarity index 100% rename from src/swift/hei_verden/hei_verden.png rename to src/diverse/hei_verden/hei_verden.png diff --git a/src/swift/hei_verden/intro_skjerm.png b/src/diverse/hei_verden/intro_skjerm.png similarity index 100% rename from src/swift/hei_verden/intro_skjerm.png rename to src/diverse/hei_verden/intro_skjerm.png diff --git a/src/swift/hei_verden/label_connection.png b/src/diverse/hei_verden/label_connection.png similarity index 100% rename from src/swift/hei_verden/label_connection.png rename to src/diverse/hei_verden/label_connection.png diff --git a/src/swift/hei_verden/lag_prosjekt.png b/src/diverse/hei_verden/lag_prosjekt.png similarity index 100% rename from src/swift/hei_verden/lag_prosjekt.png rename to src/diverse/hei_verden/lag_prosjekt.png diff --git a/src/swift/hei_verden/lesson.yml b/src/diverse/hei_verden/lesson.yml similarity index 100% rename from src/swift/hei_verden/lesson.yml rename to src/diverse/hei_verden/lesson.yml diff --git a/src/swift/hei_verden/start_skjerm.png b/src/diverse/hei_verden/start_skjerm.png similarity index 100% rename from src/swift/hei_verden/start_skjerm.png rename to src/diverse/hei_verden/start_skjerm.png diff --git a/src/swift/hei_verden/textfield_input.png b/src/diverse/hei_verden/textfield_input.png similarity index 100% rename from src/swift/hei_verden/textfield_input.png rename to src/diverse/hei_verden/textfield_input.png diff --git a/src/javafx/helloworld/README.md b/src/diverse/helloworld/README.md similarity index 100% rename from src/javafx/helloworld/README.md rename to src/diverse/helloworld/README.md diff --git a/src/javafx/helloworld/code-completion1.png b/src/diverse/helloworld/code-completion1.png similarity index 100% rename from src/javafx/helloworld/code-completion1.png rename to src/diverse/helloworld/code-completion1.png diff --git a/src/javafx/helloworld/code-completion2.png b/src/diverse/helloworld/code-completion2.png similarity index 100% rename from src/javafx/helloworld/code-completion2.png rename to src/diverse/helloworld/code-completion2.png diff --git a/src/javafx/helloworld/etter-new-java-class.png b/src/diverse/helloworld/etter-new-java-class.png similarity index 100% rename from src/javafx/helloworld/etter-new-java-class.png rename to src/diverse/helloworld/etter-new-java-class.png diff --git a/src/javafx/helloworld/etter-new-java-package.png b/src/diverse/helloworld/etter-new-java-package.png similarity index 100% rename from src/javafx/helloworld/etter-new-java-package.png rename to src/diverse/helloworld/etter-new-java-package.png diff --git a/src/javafx/helloworld/etter-new-java-project.png b/src/diverse/helloworld/etter-new-java-project.png similarity index 100% rename from src/javafx/helloworld/etter-new-java-project.png rename to src/diverse/helloworld/etter-new-java-project.png diff --git a/src/javafx/helloworld/hello-world-app.png b/src/diverse/helloworld/hello-world-app.png similarity index 100% rename from src/javafx/helloworld/hello-world-app.png rename to src/diverse/helloworld/hello-world-app.png diff --git a/src/diverse/helloworld/helloworld.md b/src/diverse/helloworld/helloworld.md new file mode 100644 index 0000000000..989fa47c90 --- /dev/null +++ b/src/diverse/helloworld/helloworld.md @@ -0,0 +1,282 @@ +--- +title: "JavaFX: Hello world" +author: Hallvard Trætteberg +level: 1 +language: nb +--- + + +# Introduksjon {.intro} + +Formålet til denne leksjonen er å lære hvordan man får satt opp et Java-prosjekt +i Eclipse og kjørt et JavaFX-program. I tillegg skal du lære litt om +sammenhengen mellom JavaFX-koden og innholdet i app-vinduet en får opp. + + +# Steg 1: Sette opp Java-prosjekt, og lage app-mappe og app-klasse {.activity} + +Eclipse strukturerer koden i såkalt prosjekter. Vanligvis har en ett +Java-prosjekt for hver app en lager, men hvis en for det meste lager små app-er, +så er det greit å samle dem i ett Java-prosjekt. Da blir det mindre arbeid med +oppsett. + +Et prosjekt er enkelt sagt en mappe med innhold/oppsett tilpasset typen app en +skal lage. Først og fremst handler det om å velge programmeringsspråk, så når du +skal lage en ny app med JavaFX, så må du lage et _Java-prosjekt_. Du vil da få +en mappe med flere under-mapper, og en av disse heter `src` og vil inneholde all +koden din. For at de ikke skal bli for uoversiktlig, spesielt hvis du har flere +app-er i samme prosjekt, så bør du så lage en Java-mappe for app-en din. Når det +er gjort så kan lage Java-filen for app-en din! + +## Sjekkliste {.check} + +- [ ] Lag et nytt Java-prosjekt ved å velge `File > New > Java Project` (altså + `New > Java Project` fra `File`-menyen). Du vil da få opp et skjema hvor du + bl.a. kan fylle inn navnet på prosjektet. Skriv `kodeklubben` eller et annet + passende navn. Merk at du bør holde deg til de engelske bokstavene a-z og A-Z, + ellers får du lett problemer siden. De andre innstillingene lar du være. + + ![Bilde av skjema for nytt java prosjekt](new-java-project.png "Skjema for New Java Project") + + I `Package Explorer`-panelet vil du se at det dukker opp en mappe med navnet + du valgte. Inne mappa vil du ha en `src`-mappe og en mappe som heter `JRE + System Library [JavaSE-1.8]`. `src`-mappe er der du legger koden din, mens + `JRE System Library [JavaSE-1.8]` viser at prosjektet er satt for å bruke Java + 8, som vi trenger for å bruke JavaFX. Skjermutklippet under viser omtrent + hvordan det vil bli seende ut. + + ![Bilde av package explorer panelet](etter-new-java-project.png "Etter New Java Project") + +- [ ] Lag en ny Java-_mappe_ for app-en i denne leksjonen. Java kaller slike + mapper for _pakker_, men du kan tenke på dem som mapper. Pass først på at du + har valgt (klikket på) riktig Java-prosjekt i `Package Exporer`-panelet. Velg + så `File > New > Package` eller ikonet som ser ut som en pakke med et + pluss-tegn i hjørnet. Alternativt kan du høyre-klikke på src-mappa og velge + `New > Package`. + + Du vil da få opp et skjema hvor du kan skrive inn hvilken kode-mappe (`Source + Folder`) som pakken skal puttes i og pakke-navnet. Kode-mappen skal være + `kodeklubben/src` (eller prosjektnavnet du skrev inn tidligere etterfulgt av + `/src`. Pakkenavn inneholder som regel bare små bokstaver, altså bokstaven + a-z. Derfor kan du kalle mappa `helloworld`. + + ![Bilde av oppretting av ny java pakke](new-java-package.png "New Java Package") + + Skjermutklippet under viser omtrent hvordan det vil bli seende ut. + + ![Bilde etter opprettelsen av ny java pakke](etter-new-java-package.png "Etter New Java Package") + +- [ ] Lag en ny Java-klasse (Java-filer kalles _klasser_) ved å høyre-klikke på + `helloworld`-pakka du nettopp lagde og velge `New > Class`. + + ![Bilde av menyen for ny Java klasse](new-java-class-menuitem.png "Meny for New Java Class") + + Du vil da få opp et skjema hvor kode-mappa og pakken allerede er fylt inn, + mens navnet (`Name`) må fylles inn. Klassenavn starter alltid med stor + forbokstav, og hvert delord som navnet består av, begynner også med stor + forbokstav. Så når vi nå skal lage en app vi kaller Hello World-app, så blir + navnet klassenavnet `HelloWorldApp`. + + ![Bilde av den nye java klassen](new-java-class.png "New Java Class") + + Skjermutklippet under viser omtrent hvordan det vil bli seende ut. + + ![Bilde etter den nye java klassen](etter-new-java-class.png "Etter New Java Class") + + +# Steg 2: Skrive og kjøre HelloWorldApp-klassen {.activity} + +En Hello World-app er ment å være den enkleste app-en en kan tenke seg som viser +Hello World på skjermen. F.eks. slik som dette: + +![Bilde av den nye Hello World appen](hello-world-app.png "Hello World-appen") + +En slik app må inneholde følgende elementer: + +- [ ] Den må bygge på `Application`-klassen (i pakken `javafx.application`) ved + at du skriver `extends Application` i klassedefinisjonen. Uten det, er klassen + rett og slett ikke en app-klasse. + +- [ ] Den **må** inneholde en metode (Java-funksjoner kalles _metoder_) kalt + `start` som lager og putter skjermbilde-elementene inn i app-vinduet (som den + får som argument). + +- [ ] Den _kan_ inneholde en `init`-metode som typisk brukes for å initialisere + variabler i app-en. Koden under har ikke en slik metode. + +- [ ] Oppstartsfunksjonen `main`, som kjøres når klassen din startes som et + program, må kalle `launch`-metoden med klassen din som argument. Når du kjører + koden vil følgende skje: + + * App-en din vil bli laget. App-en vil være et **HelloWorldApp**-`objekt`, + også kalt en _instans_ av **HelloWorldApp**-klassen. + + * `init`-metoden vil bli kalt (hvis du har en, og det har ikke koden vår) + + * App-vinduet vil bli laget (automatisk av JavaFX, ikke av vår kode) + + * start-metoden blir kalt med app-vinduet som argument (det er derfor det står + `(Stage primaryStage)` bak start-navnet) + +Her er den nødvendige koden, med kommentarer: + +```java +// klassen ligger i pakken helloworld, og +// det må stemme med package-deklarasjonen +package helloworld; + +// med en import-setning, så slipper en å skrive hele navnet på klassene vi bruker +// vi har like godt en import-setning for hver av klassene vi bruker +import javafx.application.Application; +import javafx.scene.Scene; +import javafx.scene.layout.Pane; +import javafx.scene.text.Font; +import javafx.scene.text.Text; +import javafx.stage.Stage; + +// bygg på Application-klassen med extends +// det er det som gjør at vår klasse kan fungere som en JavaFX-app +public class HelloWorldApp extends Application { + + // her er metoden som kalles med app-vinduet + // den tar inn app-vinduet som argument + public void start(Stage primaryStage) { + // vi lager oss det grafiske tekst-objektet, av typen Text + Text helloWorldText = new Text("Hello world"); + // så sier vi hvor i vindet den skal plasseres, x- og y-posisjon + helloWorldText.setLayoutX(10); + helloWorldText.setLayoutY(50); + // vi lager oss et font-objekt, av typen Font + Font font = Font.font("Arial", 36); + // og setter den som teksten font + helloWorldText.setFont(font); + + // vi mnå også lage et panel, av typen Pane + Pane root = new Pane(); + // vi setter ønsket størrelse, bredde og høyde + root.setPrefWidth(300); + root.setPrefHeight(200); + // og putter teksten inni + root.getChildren().add(helloWorldText); + + // til slutt legges panelet inn i app-vinduet + primaryStage.setScene(new Scene(root)); + // og vises frem + primaryStage.show(); + } + + // dette er den egentlig oppstartsmetoden + public static void main(String[] args) { + // kall den innebygde funksjonen launch, med app-klassen vår som argument + launch(HelloWorldApp.class, args); + } +} +``` + +## Sjekkliste {.check} + +- [ ] Skriv inn koden over, ved å kopiere og lime inn linjene i din egen + **HelloWorldApp.java**-fil. Legg merke til at ulike ord får ulik farge. + Innebygde Java-nøkkelord som `package`, `class`, `extends` og `new` blir + lilla, variabler er brune, tekst-verdier er blå osv. Dette hjelper oss å + skjønne hvordan Eclipse har forstått koden. Hvis mye av koden plutselig blir + blå, så har vi kanskje glemt en " som avslutter en tekst-verdi. + +- [ ] Kjør koden ved å høyreklikke på fila eller i editoren og velge + `Run as > Java Application`. Du skal da få opp følgende vindu: + + ![Bilde av appen som sier "Hello world"](hello-world-app.png "Hello World-appen") + +- [ ] Lek litt med koden over. Prøv f.eks. å endre verdiene som styrer teksten + (`new Text(...)`), plassering (`setLayoutX(...)` og `setLayoutY(...)`), + skriftstypen (`Font.font(...)`), og vindusstørrelsen (`setPrefWidth(...)` + og `setPrefHeight(...)`): + + * Skriv inn en annen tekst, f.eks. navnet ditt. + + * Endre posisjonen slik at teksten kommer lenger ned og til høyre ved å øke + `layoutX`- og `layoutY`-verdiene. + + * Finn en annen skriftstype du liker og se hva som skjer når du velger en + kjempestor font. Hva må du endre for å unngå at toppen av teksten kuttes? + + * Velg en kjempestor font og skriv en laaaaang tekst. Øk vindusstørrelsen så + hele teksten fortsatt vises. + + * Deklarer en variabel **windowHeight** med `int windowHeight = ...;` (bytt ut + ... med et tall) og prøv å lage en formel som beregner y-posisjonen du + setter med `setLayoutX(...)`, slik at teksten havner pent i bunnen av + vinduet. + +- [ ] Legg merke til at det er ulike måter å sette ulike verdier på: + + * Teksten settes direkte når en lager **Text**-objektet med `new Text(...)` + + * De fleste verdier settes med egen metoder som begynner med `set` + + * Skriftstypen settes også når den lages, men den lages med funksjonen + (`Font.font(...)`) og ikke med `new Font(...)`. + + +# Steg 3: Bruke kode-kompletteringsfunksjonen i Eclipse {.activity} + +Eclipse inneholder mange nyttige funksjoner for å gjøre koding mer effektivt. +Eclipse kjenner til alt Java har av muligheter, og kan både _foreslå_ kode du +kan skrive og _rette_ enkle feil i koden. + +- [ ] Eclipse holder rede på hvilke navn (på variabler, klasser og pakker) som + gjelder hvor og kan foreslå alternativer basert på hva du har skrevet inn. Lag + en ny linje under der skriftstypen settes med `setFont(...)`. Skriv inn + begynnelsen på variablen for Text-objektet f.eks. `hello`. Så holder du nede + ctrl-tasten og trykker mellomrom. Eclipse vil da vise en liste over alle navn + som begynner med **hello**: + + ![Bilde av listen over alle navn som begynner med "hello"](code-completion1.png "Komplettering av navn") + +Her ser du at Eclipse foreslår et variabelnavn (**helloWorldText**), et +pakkenavn (**helloworld**) og et klassenavn (**HelloWorldApp**). Hvis du velger +**helloWorldText**, så legges denne teksten inn. Denne funksjonen kalles +_kode-komplettering_ (eng: _code completion_) og gjør det bl.a. greit å bruke +lange navn på variabler, klasser og pakker. + +- [ ] Eclipse vet hvilke verdier du kan sette for ulike typer grafiske objekter + og kan hjelpe deg å skrive (og lære) dem. Skriv et punktum (`.`) etter + **helloWorldText**-navnet. Eclipse vil automatisk aktivere + kode-kompletteringsfunksjonen og vise en liste over alle metodene til + **Text**-objektet. Hvis du skriver inn `setF` så vil Eclipse begrense lista + til metodene som begynner med nettopp **setF**: + + ![Bilde av alle metodene som begynner med setF](code-completion2.png "Komplettering av metodenavn") + +Der finner du bl.a. **setFill** og **setFont**. **fill** og **font** kalles +_egenskaper_ (eng: _properties_) og i Java setter du slike egenskaper med +metoder som har **set** foran egenskapsnavnet. + +Argument-typen viser hva slags verdi du må gi inn. F.eks. tar **setFill** et +argument av typen **Paint** (egentlig **javafx.scene.paint.Paint**). Velg +setFill fra lista og skriv inn `Color.BLUE`. Igjen ser du at Eclipse foreslår +navn tilsvarende det du har skrevet. + +- [ ] Kjør app-en din igjen, så ser du effekten av kallet til setFill-metoden. + + +# Hva har du lært? + ++ lage nye Java-prosjekter med `New > Java Project` + ++ lage nye Java-pakker med `New > Package` + ++ lage nye Java-klasser med `New > Class` + ++ hva en klasse må ha av kode for å bli en app-klasse + ++ kjøre app-klassen som en Java-applikasjone + ++ hvordan plassere en tekst i et vindu + ++ hvordan endre verdier for plassering, skriftstype, farge og vindusstørrelse + ++ hvordan bruke kode-kompletteringsfunksjonen + +I leksjonen [FXML-logo](../fxmllogo/fxmllogo.html) vil du lære hvordan lage +skjerminnhold med FXML og tegne med JavaFX Scene Builder. diff --git a/src/javafx/helloworld/lesson.yml b/src/diverse/helloworld/lesson.yml similarity index 100% rename from src/javafx/helloworld/lesson.yml rename to src/diverse/helloworld/lesson.yml diff --git a/src/javafx/helloworld/new-java-class-menuitem.png b/src/diverse/helloworld/new-java-class-menuitem.png similarity index 100% rename from src/javafx/helloworld/new-java-class-menuitem.png rename to src/diverse/helloworld/new-java-class-menuitem.png diff --git a/src/javafx/helloworld/new-java-class.png b/src/diverse/helloworld/new-java-class.png similarity index 100% rename from src/javafx/helloworld/new-java-class.png rename to src/diverse/helloworld/new-java-class.png diff --git a/src/javafx/helloworld/new-java-package.png b/src/diverse/helloworld/new-java-package.png similarity index 100% rename from src/javafx/helloworld/new-java-package.png rename to src/diverse/helloworld/new-java-package.png diff --git a/src/javafx/helloworld/new-java-project.png b/src/diverse/helloworld/new-java-project.png similarity index 100% rename from src/javafx/helloworld/new-java-project.png rename to src/diverse/helloworld/new-java-project.png diff --git a/src/javafx/images/eclipse-workbench-layout.png b/src/diverse/images/eclipse-workbench-layout.png similarity index 100% rename from src/javafx/images/eclipse-workbench-layout.png rename to src/diverse/images/eclipse-workbench-layout.png diff --git a/src/unity/rull-en-ball/lesson.yml b/src/diverse/rull-en-ball/lesson.yml similarity index 100% rename from src/unity/rull-en-ball/lesson.yml rename to src/diverse/rull-en-ball/lesson.yml diff --git a/src/diverse/rull-en-ball/rull-en-ball.md b/src/diverse/rull-en-ball/rull-en-ball.md new file mode 100644 index 0000000000..a5e4590b9f --- /dev/null +++ b/src/diverse/rull-en-ball/rull-en-ball.md @@ -0,0 +1,502 @@ +--- +title: "Unity: Rull-en-ball" +level: 1 +author: Oversatt fra [unity3d.com](https://unity3d.com/learn/tutorials/projects/roll-ball-tutorial) +translator: Bjørn Fjukstad +language: nb +--- + + +# Rull-en-ball {.intro} + +Denne uka skal vi lage vårt første spill! Spillet går ut på å være en ball og +samle inn kuber for å få poeng. Spillet er over når man har samlet inn alle +kubene. + +Denne oppgaven tar utgangspunkt i [Roll-a-Ball på Unity sine +sider](http://unity3d.com/learn/tutorials/projects/roll-ball-tutorial). Titlene +i denne oppgaven er lenket direkte til videoene på Unity sine sider der det er +aktuelt. Du finner også lenker til alle videoene på +[unity3d.com/learn/tutorials/projects/roll-ball-tutorial](http://unity3d.com/learn/tutorials/projects/roll-ball-tutorial). + + +# Steg 1: Omgivelser og spilleren {.activity} + +## [Introduksjon](http://unity3d.com/learn/tutorials/projects/roll-a-ball/introduction?playlist=17141) + +Bildet nedenfor viser hvordan spillet ser ut når man er ferdig! I denne oppgaven +lærer vi litt enkel fysikk, hvordan vi kan flytte spillobjekter med tastaturet, +og kollisjon mellom objekter. + +![Bilde av det ferdige spillet](rull-en-ball.png) + +## [Oppsett av spillet](http://unity3d.com/learn/tutorials/projects/roll-a-ball/set-up?playlist=17141) {.check} + +- [ ] Start med å lage et nytt 3D-prosjekt. + +- [ ] Lagre Scenen, __File > Save Scene__, legg den i en ny mappe + `Assets/_Scenes` og kall den `Minigame`. + +- [ ] Lag brettet vi skal spille på. Dette er et 3D-plan. Du finner den i + hierarkiet under __Create > 3D Objekt > Plane__. Kall dette objektet `Ground`. + +- [ ] Flytt brettet til origo, `(0, 0, 0)`, ved å trykke på tannhjulet i + Transform-komponenten og velge __Reset__. + +- [ ] Skru av Grid-lines på Scenen. Dette finner du under __Gizmos > Show + Grid__. + +- [ ] Lag bakken litt større. Dette kan du gjøre med å dra på pilene eller + skrive det manuelt inn på høyresida. Vi setter Scale til `2` på `x`, `1` på + `y` og `2` på `z`. + +- [ ] Lag en spiller! Fra hierarkiet __Create > 3D Object > Sphere__ og gi den + navnet `Player`. Tilbakestill posisjonen på samme måte som vi gjorde med + planet. + +- [ ] Flytt ballen opp `0.5` enhet slik at vi får den til å ligge på planet. + Husk at ballen er 1 høy og 1 bred. Husk at det er y-posisjonen vi endrer med + `0.5`. + +- [ ] La oss bytte farge på brettet. Vi lager en ny mappe i Assets-mappa vår og + gir den navnet `Materials`. Velg denne mappa og lag et nytt material og kall + den `Background`. Endre farge ved å trykke på den hvite boksen til høyre for + `Albedo`-feltet og velg en fin blåfarge. Du kan bruke RGB-verdien `(0, 32, + 64)`. + +- [ ] Lag brettet blått ved å dra `Background`-materialet til brettet i Scenen. + +- [ ] For å få bedre lys i spillet kan vi endre rotasjonen på lyset i hierarkiet + vårt. Endre rotasjon på y-aksen til `60`. + +## [Bevege spilleren](http://unity3d.com/learn/tutorials/projects/roll-a-ball/moving-the-player?playlist=17141) {.check} + +- [ ] Siden vi vil at ballen skal rulle rundt på brettet, kollidere i vegger og + treffe forskjellige objekter for å samle poeng trenger vi litt fysikk. Dette + får vi ved å legge til en Rigidbody-komponent på `Player`-objektet. Trykk på + __Add Component__ når du har valgt spilleren og velg __Physics > Rigidbody__. + +- [ ] Lag en ny mappe `Assets/Scripts` og et nytt C#-script som vi kaller + `PlayerController`. Koden vi skal legge inn der er det best å skrive selv. + + Siden noen av dere jobber hjemmefra legger vi inn hele kodesnutten under. Ikke + kopier den, men skriv inn alle linjene! + + __PlayerController.cs__ + ```csharp + using UnityEngine; + using System.Collections; + + public class PlayerController : MonoBehaviour { + + public float speed = 10.0f; + + private Rigidbody rb; + + void Start () + { + rb = GetComponent(); + } + + void FixedUpdate () + { + float moveHorizontal = Input.GetAxis ("Horizontal"); + float moveVertical = Input.GetAxis ("Vertical"); + + Vector3 movement = new Vector3 (moveHorizontal, 0.0f, moveVertical); + + rb.AddForce (movement * speed); + } + } + + ``` + +- [ ] Siden vi vil at scriptet skal styre ballen må vi dra det inn på + `Player`-objektet. + +## Test spillet {.flag} + +__Klikk på Play-knappen øverst i Unity-editoren.__ + +- Trykk på piltastene, flytter ballen seg? + +- Hva skjer hvis du prøver å styre med tastene WASD? + + +# Steg 2: Kamera og spilleområde {.activity} + +## [ Flytte kameraet](http://unity3d.com/learn/tutorials/projects/roll-a-ball/moving-the-camera?playlist=17141) {.check} + +- [ ] Flytt først kameraet opp 10 enheter (på y-aksen) og vipp det ned med 45 + grader (x-aksen). + +- [ ] Flytt kameraet til et *barn* av `Player`-objektet, dette vil gjøre at + kameraet følger etter spilleren. Et *barn* er et programmeringsbegrep som + betyr at noe er *under* noe annet, f.eks. en undermappe. Du gjør kameraet til + et *barn* av `Player`-objektet ved å dra det og slippe det på + `Player`-objektet i hierarkiet. Se at kameraet (nesten) flytter seg med + spilleren. + +- [ ] Test spillet og se hva som skjer. + +- [ ] Siden ikke alt gikk etter planen må vi lage et script for å flytte + kameraet. Flytt kameraet tilbake ut av `Player`-objektet slik at det ikke + snurrer rundt lengre. + +- [ ] Lag et nytt C#-script som du kaller `CameraController` og legg til koden: + + __CameraController.cs__ + ```csharp + using UnityEngine; + using System.Collections; + + public class CameraController : MonoBehaviour { + + public GameObject player; + + private Vector3 offset; + + void Start () + { + offset = transform.position - player.transform.position; + } + + void LateUpdate () + { + transform.position = player.transform.position + offset; + } + } + + ``` + +- [ ] Dra scriptet over til kameraet og med kameraet valgt dra `Player`-objektet + til Player-referansen på høyresida. + +## Test spillet {.flag} + +__Klikk på Play-knappen øverst i Unity-editoren.__ + +- Flytt ballen og se at kameraet følger etter den. + +## [Sette opp spilleområdet](http://unity3d.com/learn/tutorials/projects/roll-a-ball/setting-up-the-play-area?playlist=17141) {.check} + +- [ ] La oss lage noen vegger! Lag et nytt tomt objekt som du kaller `Walls`. + __Create > Create Empty__. Dette blir en mappe for alle veggene. Tilbakestill + posisjonen til Walls til `(0, 0, 0)`. + +- [ ] Lag første vegg. __Create > 3D Object > Cube__ og tilbakestill posisjonen + til denne. Sjekk at ballen havner oppi denne kuben. Legg denne som et barn av + Walls og kall den `West Wall`. + +- [ ] Lag veggen lang og tynn. Under Scale setter vi `0.5`, `2` og `20.5`. + +- [ ] Flytt veggen til siden ved å sette `x` til `-10`. + +- [ ] Dupliser veggen vi har og kall den `East Wall`. Endre x-posisjon til `10` + og se at den kommer på plass. + +- [ ] Dupliser `East Wall` og kall den `North Wall`. Tilbakestill posisjonen og + sett scale til `20.5`, `2`, `0.5`. Sett posisjon på z-aksen til `10` for å se + at den kommer på riktig plass. + +- [ ] Dipliser `North Wall` og kall den `South Wall`. Sett posisjon på z-aksen + til `-10`. + +## Test spillet {.flag} + +__Klikk på Play-knappen øverst i Unity-editoren.__ + +- Prøv spillet og se at veggene er på plass. + + +# Steg 3: Samle objekter og poeng {.activity} + +## [Lag objekter vi kan samle inn](http://unity3d.com/learn/tutorials/projects/roll-a-ball/creating-collectables?playlist=17141) {.check} + +- [ ] Lag en kube vi kan samle inn. __Create > 3D Object > Cube__ og kall den + `Pick Up`. Tilbakestill posisjonen og se at ballen havner inni denne kuben. + +- [ ] Deaktiver `Player`-objektet. + +- [ ] Flytt opp kuben med 0.5 enheter og sett scale til 0.5 i alle aksene. La + oss tippe den litt over. Endre rotasjon til 45 på alle aksene. + +- [ ] La oss få kuben til å snurre litt for å tiltrekke oppmerksomhet. + +- [ ] Lag et nytt C#-script og kall det `Rotator`. Legg til koden: + + __Rotator.cs__ + ```csharp + + using UnityEngine; + using System.Collections; + + public class Rotator : MonoBehaviour { + + void Update () + { + transform.Rotate (new Vector3 (15, 30, 45) * Time.deltaTime); + } + } + + ``` + +- [ ] Start spillet og se at kuben snurrer rundt. Husk å legge til scriptet i + `Pick Up`-objektet. + +- [ ] Siden vi trenger mange kuber må vi gjøre `Pick Up`-objektet om til en + *Prefab*. En Prefab er en slags skisse for hvordan et spillobjekt skal se ut + og oppføre seg. + +- [ ] Lag en ny mappe og kall den `Prefabs`. Dra `Pick Up`-objektet inn i denne + mappa. + +- [ ] Lag en nytt tomt objekt for å organisere objektene våre. Kall dette `Pick + Ups` og legg `Pick Up` til her. + +- [ ] Endre synsvinkel til rett over spillebrettet og lag 10 nye kuber ved å + duplisere `Pick Up`-objektet vi har. Legg kubene rundt omkring på brettet. + +- [ ] Start spillet og se at alle kubene snurrer. + +- [ ] La oss endre fargen på kubene! Dupliser `Background`-materialet og kall + det `Pick Up`. velg en fin gulfarge under Albedo og dra den ned på `Pick + Up`-prefaben. + +## Test spillet {.flag} + +__Klikk på Play-knappen øverst i Unity-editoren.__ + +- Start spillet og se at alle kubene er gule og snurrer rundt! + +## [Samle inn objekter](http://unity3d.com/learn/tutorials/projects/roll-a-ball/collecting-pick-up-objects?playlist=17141) {.check} + +- [ ] Vis spilleren igjen. + +- [ ] Legg merke til at `Player`-objektet har en Sphere Collider-komponent. + Denne skal vi bruke til å sjekke kollisjon mot `Pick Up`-objektene. + +- [ ] Åpne `PlayerController`-scriptet igjen og legg til funksjonen under i + PlayerController-klassen: + + ```csharp + void OnTriggerEnter(Collider other) + { + if (other.gameObject.CompareTag ("Pick Up")) + { + other.gameObject.SetActive (false); + } + } + ``` + +- [ ] Velg `Pick Up`-prefaben og legg til en ny **Tag** vi kaller `Pick Up`. Det + er veldig viktig at den heter `Pick Up`. __Husk store bokstaver på P og U!__ + +- [ ] Prøv spillet og se hva som skjer. + +- [ ] For å hindre at Unity lager en kollisjon mellom ballen og kubene må vi + krysse for __Is trigger?__ på `Box Collider`-komponenten til `Pick + Up`-prefaben. Dette gjør at Unity registrerer at de to objektene har + kollidert, men den flytter ikke på noen av objektene. + +- [ ] Test spillet og se at alt er som det skal! + +- [ ] (BONUS) For å gjøre en liten optimisering kan vi legge til en + Rigidbody-komponent til kubene. Prøv å spille spillet nå. Se at alle kubene + faller gjennom gulvet. Dette er fordi vi har satt en `Trigger-collider` til + kubene. Sett __Is Kinematic__ for å fikse dette. Les mer om dette på + [tutorialen](http://unity3d.com/learn/tutorials/projects/roll-a-ball/collecting-pick-up-objects?playlist=17141). + +## [Vis poengscore](http://unity3d.com/learn/tutorials/projects/roll-a-ball/displaying-text?playlist=17141) {.check} + +- [ ] Vi trenger noen variabler for å holde styr på hvor mange objekter vi har + samlet inn. + +- [ ] Åpne `PlayerController` og endre det til å være som følger: + + __PlayerController.cs__ + ```csharp + using UnityEngine; + using System.Collections; + + public class PlayerController : MonoBehaviour { + + public float speed; + + private Rigidbody rb; + public int count; // Ny linje + + void Start () + { + rb = GetComponent(); + count = 0; // Ny linje + } + + void FixedUpdate () + { + float moveHorizontal = Input.GetAxis ("Horizontal"); + float moveVertical = Input.GetAxis ("Vertical"); + + Vector3 movement = new Vector3 (moveHorizontal, 0.0f, moveVertical); + + rb.AddForce (movement * speed); + } + + void OnTriggerEnter(Collider other) + { + if (other.gameObject.CompareTag("Pick Up")) + { + other.gameObject.SetActive (false); + count = count + 1; // Ny linje + } + } + + } + ``` + +- [ ] Sjekk at `count` endres når vi treffer kubene. + +- [ ] Vi trenger noe på skjermen som viser poengene våre. Under hierarkiet, lag + et nytt `Text`-objekt (__Create > UI > Text__). Gi objektet navnet + `CountText`. + +- [ ] Endre farge på teksten til hvit og endre posisjon til `(0, 0, 0)`. + Størrelsen til CountText skal være 160 bred og 30 høy. Endre teksten som står + der til `Count Text`. + +- [ ] Flytt teksten øverst til venstre. Trykk på firkanten inne i Rect Transform og + velg __top left__ mens du holder inne __shift__ og __alt__. + +- [ ] Endre Pos X og Pos Y til `10` og `-10`. + +- [ ] Nå vil vi endre denne teksten med `PlayerController`-scriptet. Åpne det + opp og endre det til: + + __PlayerController.cs__ + ```csharp + using UnityEngine; + using UnityEngine.UI; // Ny linje + using System.Collections; + + public class PlayerController : MonoBehaviour { + + public float speed; + public Text countText; // Ny linje + + private Rigidbody rb; + private int count; + + void Start () + { + rb = GetComponent(); + count = 0; + SetCountText (); // Ny linje + } + + void FixedUpdate () + { + float moveHorizontal = Input.GetAxis ("Horizontal"); + float moveVertical = Input.GetAxis ("Vertical"); + + Vector3 movement = new Vector3 (moveHorizontal, 0.0f, moveVertical); + + rb.AddForce (movement * speed); + } + + void OnTriggerEnter(Collider other) + { + if (other.gameObject.CompareTag("Pick Up")) + { + other.gameObject.SetActive (false); + count = count + 1; + SetCountText (); // Ny linje + } + } + + void SetCountText () // Ny linje + { // Ny linje + countText.text = "Count: " + count.ToString (); // Ny linje + } // Ny linje + } + ``` + +- [ ] Dra CountText inn i Count Text-referansen til `Player`-objektet. + +- [ ] Lagre og test spillet! + +- [ ] Lag et nytt UI Text-ojekt og kall det Win Text. Lag teksten hvit, sett + skriftstørrelse til 24 og sett den sentrert i midten. Sett teksten til å være + `Win Text` og flytt den litt opp. Pos X skal være 0 og pos Y skal være 10. + +- [ ] Lagre og gå tilbake til `PlayerController`-scriptet. + +- [ ] Lag en ny variabel `winText`, initialiser den i `Start` og endre den i + `SetCountText`. Når du har kodet ferdig skal det se slik ut: + + __PlayerController.cs__ + ```csharp + using UnityEngine; + using UnityEngine.UI; + using System.Collections; + + public class PlayerController : MonoBehaviour { + + public float speed; + public Text countText; + public Text winText; // Ny linje + + private Rigidbody rb; + private int count; + + void Start () + { + rb = GetComponent(); + count = 0; + SetCountText (); + winText.text = ""; // Ny linje + } + + void FixedUpdate () + { + float moveHorizontal = Input.GetAxis ("Horizontal"); + float moveVertical = Input.GetAxis ("Vertical"); + + Vector3 movement = new Vector3 (moveHorizontal, 0.0f, moveVertical); + + rb.AddForce (movement * speed); + } + + void OnTriggerEnter(Collider other) + { + if (other.gameObject.CompareTag("Pick Up")) + { + other.gameObject.SetActive (false); + count = count + 1; + SetCountText (); + } + } + + void SetCountText () + { + countText.text = "Count: " + count.ToString (); + if (count >= 12) // Ny linje + { // Ny linje + winText.text = "You Win!"; // Ny linje + } // Ny linje + } + } + ``` + +## Test spillet {.flag} + +__Klikk på Play-knappen øverst i Unity-editoren.__ + +- Prøv spillet og se hvor fort du klarer å samle inn alle kubene! + +## Utfordring 1: Bygg spillet slik at du kan dele det med vennene dine {.challenge} + +Akkurat nå er det jo kun du som kan spille spillet ditt. I [denne +videoen](http://unity3d.com/learn/tutorials/projects/roll-a-ball/building?playlist=17141) +vises det hvordan man kan bygge spillet til forskjellige platformer, for +eksempel Windows eller Mac. Se om du klarer å bygge det slik at du kan dele det +med vennene dine! diff --git a/src/unity/rull-en-ball/rull-en-ball.png b/src/diverse/rull-en-ball/rull-en-ball.png similarity index 100% rename from src/unity/rull-en-ball/rull-en-ball.png rename to src/diverse/rull-en-ball/rull-en-ball.png diff --git a/src/javafx/src/fxmllogoapp/FxmlLogoApp.fxml b/src/diverse/src/fxmllogoapp/FxmlLogoApp.fxml similarity index 100% rename from src/javafx/src/fxmllogoapp/FxmlLogoApp.fxml rename to src/diverse/src/fxmllogoapp/FxmlLogoApp.fxml diff --git a/src/javafx/src/fxmllogoapp/FxmlLogoApp.java b/src/diverse/src/fxmllogoapp/FxmlLogoApp.java similarity index 100% rename from src/javafx/src/fxmllogoapp/FxmlLogoApp.java rename to src/diverse/src/fxmllogoapp/FxmlLogoApp.java diff --git a/src/javafx/src/helloworld/HelloWorldApp.java b/src/diverse/src/helloworld/HelloWorldApp.java similarity index 100% rename from src/javafx/src/helloworld/HelloWorldApp.java rename to src/diverse/src/helloworld/HelloWorldApp.java diff --git a/src/javafx/.project b/src/javafx/.project deleted file mode 100644 index aa1b13d956..0000000000 --- a/src/javafx/.project +++ /dev/null @@ -1,17 +0,0 @@ - - - javafx - - - - - - org.eclipse.jdt.core.javabuilder - - - - - - org.eclipse.jdt.core.javanature - - diff --git a/src/javafx/.classpath b/unpublished/javafx/.classpath similarity index 100% rename from src/javafx/.classpath rename to unpublished/javafx/.classpath diff --git a/src/javafx/.gitignore b/unpublished/javafx/.gitignore similarity index 100% rename from src/javafx/.gitignore rename to unpublished/javafx/.gitignore diff --git a/src/javafx/.settings/org.eclipse.jdt.core.prefs b/unpublished/javafx/.settings/org.eclipse.jdt.core.prefs similarity index 100% rename from src/javafx/.settings/org.eclipse.jdt.core.prefs rename to unpublished/javafx/.settings/org.eclipse.jdt.core.prefs diff --git a/src/javafx/README.md b/unpublished/javafx/README.md similarity index 100% rename from src/javafx/README.md rename to unpublished/javafx/README.md diff --git a/src/javafx/course.yml b/unpublished/javafx/course.yml similarity index 100% rename from src/javafx/course.yml rename to unpublished/javafx/course.yml diff --git a/unpublished/javafx/fxmllogo/README.md b/unpublished/javafx/fxmllogo/README.md new file mode 100644 index 0000000000..15b305efb0 --- /dev/null +++ b/unpublished/javafx/fxmllogo/README.md @@ -0,0 +1,65 @@ +--- +title: "Lærerveiledning - Logo med FXML" +author: Susanne Rynning Seip +language: nb +--- + +# Om oppgaven {.activity} + +Formålet til denne oppgaven er for elevene å lære hvordan de kan bruke **FXML** for å lage skjerminnhold, og **to måter** å lage slikt innhold. I tillegg vil elevene lære hvordan de får app-en til å laste inn og vise frem innholdet i FXML-filer. + +## Oppgaven passer til: {.check} + + __Fag__: IT1, IT2, Programmering + +__Anbefalte trinn__: 8. trinn - VG3 + +__Tema__: JavaFX, FXML + +__Tidsbruk__: Dobbelttime + +## Kompetansemål {.challenge} + +- [ ] __Programmering, 10. trinn:__ bruke flere programmeringsspråk, deriblant minst ett som er tekstbasert + +- [ ] __Programmering, 10. trinn:__ planlegge og skape et digitalt produkt og vurdere dette med tanke på brukervennlighet + +- [ ] __IT1, VG2:__ planlegge og implementere brukergrensesnitt + +- [ ] __IT2, VG3:__ lage objektorienterte programmer som benytter klasser med metoder + +- [ ] __IT2, VG3:__ generalisere løsninger, lage gjenbrukbar programkode og benytte eksisterende kode i nye programmer + +## Forslag til læringsmål {.challenge} + +- [ ] Elevene kan lage en FXML-fil og redigere den i Eclipse. + +- [ ] Elevene kan bruke SceneBuilder til å legge nye elementer til FXML-filen og redigere grafiske egenskaper. + +- [ ] Elevene kan skrive app-kode som laster inn og viser frem FXML-filen i et app-vindu. + +## Forslag til vurderingskriterier {.challenge} + +Oppgaven er grunnleggende, og kan ikke brukes alene for vurdering av kompetansemålet. + +## Forutsetninger og utstyr {.challenge} + +- [ ] __Forutsetninger__: Oppgaven er en introduksjon til FXML og krever ingen forkunnskaper eller erfaring, men vi anbefaler å ha gjort oppgaven [Hello world](../helloworld/helloworld.html){target=_blank} først. Det er også en fordel å kunne engelsk. + +- [ ] __Utstyr__: Datamaskin med Eclipse og SceneBuilder installert. + +## Fremgangsmåte + +Her kommer tips, erfaring og utfordringer til de ulike stegene i den faktiske +oppgaven. [Klikk her for å se oppgaveteksten.](../fxmllogo/fxmllogo.html){target=_blank} + +_Vi har dessverre ikke noen tips, erfaringer eller utfordringer tilknyttet denne +oppgaven enda._ + +## Variasjoner {.challenge} + +- [ ] _Vi har dessverre ikke noen variasjoner tilknyttet denne oppgaven enda._ + +## Eksterne ressurser {.challenge} + +- [ ] Foreløpig ingen eksterne ressurser ... diff --git a/unpublished/javafx/fxmllogo/ccno_logo.png b/unpublished/javafx/fxmllogo/ccno_logo.png new file mode 100644 index 0000000000..998593f951 Binary files /dev/null and b/unpublished/javafx/fxmllogo/ccno_logo.png differ diff --git a/unpublished/javafx/fxmllogo/color-picker.png b/unpublished/javafx/fxmllogo/color-picker.png new file mode 100644 index 0000000000..f3d478a1e6 Binary files /dev/null and b/unpublished/javafx/fxmllogo/color-picker.png differ diff --git a/unpublished/javafx/fxmllogo/font-picker.png b/unpublished/javafx/fxmllogo/font-picker.png new file mode 100644 index 0000000000..e3300fa55a Binary files /dev/null and b/unpublished/javafx/fxmllogo/font-picker.png differ diff --git a/unpublished/javafx/fxmllogo/fxml-editor-with-preview-pane.png b/unpublished/javafx/fxmllogo/fxml-editor-with-preview-pane.png new file mode 100644 index 0000000000..034fb8fac1 Binary files /dev/null and b/unpublished/javafx/fxmllogo/fxml-editor-with-preview-pane.png differ diff --git a/src/javafx/fxmllogo/fxmllogo.md b/unpublished/javafx/fxmllogo/fxmllogo.md similarity index 100% rename from src/javafx/fxmllogo/fxmllogo.md rename to unpublished/javafx/fxmllogo/fxmllogo.md diff --git a/unpublished/javafx/fxmllogo/initial-FxmlLogoApp.fxml.png b/unpublished/javafx/fxmllogo/initial-FxmlLogoApp.fxml.png new file mode 100644 index 0000000000..942a5c3861 Binary files /dev/null and b/unpublished/javafx/fxmllogo/initial-FxmlLogoApp.fxml.png differ diff --git a/unpublished/javafx/fxmllogo/layout-properties.png b/unpublished/javafx/fxmllogo/layout-properties.png new file mode 100644 index 0000000000..aa01e006aa Binary files /dev/null and b/unpublished/javafx/fxmllogo/layout-properties.png differ diff --git a/unpublished/javafx/fxmllogo/lesson.yml b/unpublished/javafx/fxmllogo/lesson.yml new file mode 100644 index 0000000000..851d0c4da6 --- /dev/null +++ b/unpublished/javafx/fxmllogo/lesson.yml @@ -0,0 +1,5 @@ +level: 1 +tags: + topic: [text_based, app] + subject: [programming] + grade: [junior, senior] diff --git a/unpublished/javafx/fxmllogo/logo2_ntnu_u-slagord.gif b/unpublished/javafx/fxmllogo/logo2_ntnu_u-slagord.gif new file mode 100644 index 0000000000..439cbe9ac8 Binary files /dev/null and b/unpublished/javafx/fxmllogo/logo2_ntnu_u-slagord.gif differ diff --git a/unpublished/javafx/fxmllogo/new-fxml-document.png b/unpublished/javafx/fxmllogo/new-fxml-document.png new file mode 100644 index 0000000000..7437f9dd0f Binary files /dev/null and b/unpublished/javafx/fxmllogo/new-fxml-document.png differ diff --git a/unpublished/javafx/fxmllogo/new-fxml-file-wizard.png b/unpublished/javafx/fxmllogo/new-fxml-file-wizard.png new file mode 100644 index 0000000000..ccf8b76ee0 Binary files /dev/null and b/unpublished/javafx/fxmllogo/new-fxml-file-wizard.png differ diff --git a/unpublished/javafx/fxmllogo/open-with-scenebuilder.png b/unpublished/javafx/fxmllogo/open-with-scenebuilder.png new file mode 100644 index 0000000000..0a6bca87ce Binary files /dev/null and b/unpublished/javafx/fxmllogo/open-with-scenebuilder.png differ diff --git a/unpublished/javafx/fxmllogo/run-FxmlLogoApp-as-java-application.png b/unpublished/javafx/fxmllogo/run-FxmlLogoApp-as-java-application.png new file mode 100644 index 0000000000..b6d4772539 Binary files /dev/null and b/unpublished/javafx/fxmllogo/run-FxmlLogoApp-as-java-application.png differ diff --git a/unpublished/javafx/fxmllogo/scene-builder-FxmlLogoApp-1.png b/unpublished/javafx/fxmllogo/scene-builder-FxmlLogoApp-1.png new file mode 100644 index 0000000000..8c1375cd5d Binary files /dev/null and b/unpublished/javafx/fxmllogo/scene-builder-FxmlLogoApp-1.png differ diff --git a/unpublished/javafx/fxmllogo/scene-builder-FxmlLogoApp-2.png b/unpublished/javafx/fxmllogo/scene-builder-FxmlLogoApp-2.png new file mode 100644 index 0000000000..17bfb1ab0d Binary files /dev/null and b/unpublished/javafx/fxmllogo/scene-builder-FxmlLogoApp-2.png differ diff --git a/unpublished/javafx/fxmllogo/scene-builder-FxmlLogoApp-3.png b/unpublished/javafx/fxmllogo/scene-builder-FxmlLogoApp-3.png new file mode 100644 index 0000000000..aad4389d7f Binary files /dev/null and b/unpublished/javafx/fxmllogo/scene-builder-FxmlLogoApp-3.png differ diff --git a/unpublished/javafx/helloworld/README.md b/unpublished/javafx/helloworld/README.md new file mode 100644 index 0000000000..a58801a762 --- /dev/null +++ b/unpublished/javafx/helloworld/README.md @@ -0,0 +1,67 @@ +--- +title: "Lærerveiledning - Hello world" +author: Susanne Rynning Seip +language: nb +--- + +# Om oppgaven {.activity} + +Formålet med denne oppgaven er for elevene å lære hvordan man får satt opp et Java-prosjekt +i Eclipse og kjørt et JavaFX-program. I tillegg skal elevene lære litt om +sammenhengen mellom JavaFX-koden og innholdet i app-vinduet man får opp. + +## Oppgaven passer til: {.check} + + __Fag__: IT1, IT2, Programmering + +__Anbefalte trinn__: 8. trinn - VG3 + +__Tema__: JavaFX + +__Tidsbruk__: Dobbelttime + +## Kompetansemål {.challenge} + +- [ ] __Programmering, 10. trinn:__ bruke flere programmeringsspråk, deriblant minst ett som er tekstbasert + +- [ ] __Programmering, 10. trinn:__ planlegge og skape et digitalt produkt og vurdere dette med tanke på brukervennlighet + +- [ ] __IT1, VG2:__ planlegge og implementere brukergrensesnitt + +- [ ] __IT2, VG3:__ lage objektorienterte programmer som benytter klasser med metoder + +- [ ] __IT2, VG3:__ generalisere løsninger, lage gjenbrukbar programkode og benytte eksisterende kode i nye programmer + +## Forslag til læringsmål {.challenge} + +- [ ] Elevene kan lage Java-prosjekt, Java-pakker og Java-klasser i Eclipse. + +- [ ] Elevene kan skrive kode for å gjøre en klasse til en app-klasse og kjøre den som en Java-applikasjon. + +- [ ] Elevene kan plassere tekst i et vindu og endre verdier for plassering, skriftstype, farge og vindusstørrelse. + +## Forslag til vurderingskriterier {.challenge} + +Oppgaven er grunnleggende, og kan ikke brukes alene for vurdering av kompetansemålet. + +## Forutsetninger og utstyr {.challenge} + +- [ ] __Forutsetninger__: Oppgaven er en introduksjon til JavaFX og krever ingen forkunnskaper eller erfaring, men det er en fordel å kunne engelsk. + +- [ ] __Utstyr__: Datamaskin med Eclipse installert. + +## Fremgangsmåte + +Her kommer tips, erfaring og utfordringer til de ulike stegene i den faktiske +oppgaven. [Klikk her for å se oppgaveteksten.](../helloworld/helloworld.html){target=_blank} + +_Vi har dessverre ikke noen tips, erfaringer eller utfordringer tilknyttet denne +oppgaven enda._ + +## Variasjoner {.challenge} + +- [ ] _Vi har dessverre ikke noen variasjoner tilknyttet denne oppgaven enda._ + +## Eksterne ressurser {.challenge} + +- [ ] Foreløpig ingen eksterne ressurser ... diff --git a/unpublished/javafx/helloworld/code-completion1.png b/unpublished/javafx/helloworld/code-completion1.png new file mode 100644 index 0000000000..efc9215a7b Binary files /dev/null and b/unpublished/javafx/helloworld/code-completion1.png differ diff --git a/unpublished/javafx/helloworld/code-completion2.png b/unpublished/javafx/helloworld/code-completion2.png new file mode 100644 index 0000000000..6e3e1166d3 Binary files /dev/null and b/unpublished/javafx/helloworld/code-completion2.png differ diff --git a/unpublished/javafx/helloworld/etter-new-java-class.png b/unpublished/javafx/helloworld/etter-new-java-class.png new file mode 100644 index 0000000000..91eab9b6f7 Binary files /dev/null and b/unpublished/javafx/helloworld/etter-new-java-class.png differ diff --git a/unpublished/javafx/helloworld/etter-new-java-package.png b/unpublished/javafx/helloworld/etter-new-java-package.png new file mode 100644 index 0000000000..bbfa6b4c37 Binary files /dev/null and b/unpublished/javafx/helloworld/etter-new-java-package.png differ diff --git a/unpublished/javafx/helloworld/etter-new-java-project.png b/unpublished/javafx/helloworld/etter-new-java-project.png new file mode 100644 index 0000000000..43826ee599 Binary files /dev/null and b/unpublished/javafx/helloworld/etter-new-java-project.png differ diff --git a/unpublished/javafx/helloworld/hello-world-app.png b/unpublished/javafx/helloworld/hello-world-app.png new file mode 100644 index 0000000000..cfbdbe846f Binary files /dev/null and b/unpublished/javafx/helloworld/hello-world-app.png differ diff --git a/src/javafx/helloworld/helloworld.md b/unpublished/javafx/helloworld/helloworld.md similarity index 100% rename from src/javafx/helloworld/helloworld.md rename to unpublished/javafx/helloworld/helloworld.md diff --git a/unpublished/javafx/helloworld/lesson.yml b/unpublished/javafx/helloworld/lesson.yml new file mode 100644 index 0000000000..851d0c4da6 --- /dev/null +++ b/unpublished/javafx/helloworld/lesson.yml @@ -0,0 +1,5 @@ +level: 1 +tags: + topic: [text_based, app] + subject: [programming] + grade: [junior, senior] diff --git a/unpublished/javafx/helloworld/new-java-class-menuitem.png b/unpublished/javafx/helloworld/new-java-class-menuitem.png new file mode 100644 index 0000000000..19acafdac7 Binary files /dev/null and b/unpublished/javafx/helloworld/new-java-class-menuitem.png differ diff --git a/unpublished/javafx/helloworld/new-java-class.png b/unpublished/javafx/helloworld/new-java-class.png new file mode 100644 index 0000000000..72dfb23347 Binary files /dev/null and b/unpublished/javafx/helloworld/new-java-class.png differ diff --git a/unpublished/javafx/helloworld/new-java-package.png b/unpublished/javafx/helloworld/new-java-package.png new file mode 100644 index 0000000000..84bc29b595 Binary files /dev/null and b/unpublished/javafx/helloworld/new-java-package.png differ diff --git a/unpublished/javafx/helloworld/new-java-project.png b/unpublished/javafx/helloworld/new-java-project.png new file mode 100644 index 0000000000..2bbd127a5e Binary files /dev/null and b/unpublished/javafx/helloworld/new-java-project.png differ diff --git a/unpublished/javafx/images/eclipse-workbench-layout.png b/unpublished/javafx/images/eclipse-workbench-layout.png new file mode 100644 index 0000000000..464deae526 Binary files /dev/null and b/unpublished/javafx/images/eclipse-workbench-layout.png differ diff --git a/src/javafx/index.md b/unpublished/javafx/index.md similarity index 100% rename from src/javafx/index.md rename to unpublished/javafx/index.md diff --git a/unpublished/javafx/index_da.md b/unpublished/javafx/index_da.md deleted file mode 100644 index 354bdbe0a6..0000000000 --- a/unpublished/javafx/index_da.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Java FX -language: da ---- - -Java er et objektorientert programmeringsspråk, og dette kurset krever forkunnskaper og erfaring med -tekstbasert programmering fra tidligere. For eksempel ved å gjennomføre Kodeklubbens kurs i Python og/eller -Processing. Java FX er et sett av biblioteker til Java som gjør det enklere å lage grafikk og teste programmer. - -[Her finner du en wiki om objektorientert programmering i Java fra NTNU](https://www.ntnu.no/wiki/display/tdt4100/Faginnhold) diff --git a/src/javafx/index_en.md b/unpublished/javafx/index_en.md similarity index 100% rename from src/javafx/index_en.md rename to unpublished/javafx/index_en.md diff --git a/src/javafx/index_nn.md b/unpublished/javafx/index_nn.md similarity index 100% rename from src/javafx/index_nn.md rename to unpublished/javafx/index_nn.md diff --git a/unpublished/javafx/index_sv.md b/unpublished/javafx/index_sv.md deleted file mode 100644 index 0b53257181..0000000000 --- a/unpublished/javafx/index_sv.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Java FX -language: sv ---- - -Java er et objektorientert programmeringsspråk, og dette kurset krever forkunnskaper og erfaring med -tekstbasert programmering fra tidligere. For eksempel ved å gjennomføre Kodeklubbens kurs i Python og/eller -Processing. Java FX er et sett av biblioteker til Java som gjør det enklere å lage grafikk og teste programmer. - -[Her finner du en wiki om objektorientert programmering i Java fra NTNU](https://www.ntnu.no/wiki/display/tdt4100/Faginnhold) diff --git a/src/javafx/logo-black.png b/unpublished/javafx/logo-black.png similarity index 100% rename from src/javafx/logo-black.png rename to unpublished/javafx/logo-black.png diff --git a/src/javafx/logo-white.png b/unpublished/javafx/logo-white.png similarity index 100% rename from src/javafx/logo-white.png rename to unpublished/javafx/logo-white.png diff --git a/unpublished/javafx/src/fxmllogoapp/FxmlLogoApp.fxml b/unpublished/javafx/src/fxmllogoapp/FxmlLogoApp.fxml new file mode 100644 index 0000000000..6a67f9a542 --- /dev/null +++ b/unpublished/javafx/src/fxmllogoapp/FxmlLogoApp.fxml @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/unpublished/javafx/src/fxmllogoapp/FxmlLogoApp.java b/unpublished/javafx/src/fxmllogoapp/FxmlLogoApp.java new file mode 100644 index 0000000000..00b5c38e91 --- /dev/null +++ b/unpublished/javafx/src/fxmllogoapp/FxmlLogoApp.java @@ -0,0 +1,23 @@ +package fxmllogoapp; + +import java.io.IOException; + +import javafx.application.Application; +import javafx.fxml.FXMLLoader; +import javafx.scene.Scene; +import javafx.scene.layout.Pane; +import javafx.stage.Stage; + +public class FxmlLogoApp extends Application { + + public void start(Stage primaryStage) throws IOException { + FXMLLoader fxmlLoader = new FXMLLoader(FxmlLogoApp.class.getResource("FxmlLogoApp.fxml")); + Pane root = fxmlLoader.load(); + primaryStage.setScene(new Scene(root)); + primaryStage.show(); + } + + public static void main(String[] args) { + launch(FxmlLogoApp.class, args); + } +} diff --git a/unpublished/javafx/src/helloworld/HelloWorldApp.java b/unpublished/javafx/src/helloworld/HelloWorldApp.java new file mode 100644 index 0000000000..8eeeb2159f --- /dev/null +++ b/unpublished/javafx/src/helloworld/HelloWorldApp.java @@ -0,0 +1,32 @@ +package helloworld; + +import javafx.application.Application; +import javafx.scene.Scene; +import javafx.scene.layout.Pane; +import javafx.scene.paint.Color; +import javafx.scene.text.Font; +import javafx.scene.text.Text; +import javafx.stage.Stage; + +public class HelloWorldApp extends Application { + + public void start(Stage primaryStage) { + Text helloWorldText = new Text("Hello world"); + helloWorldText.setLayoutX(10); + helloWorldText.setLayoutY(50); + Font font = Font.font("Arial", 36); + helloWorldText.setFont(font); + helloWorldText.setFill(Color.BLUE); + + Pane root = new Pane(helloWorldText); + root.setPrefWidth(300); + root.setPrefHeight(300); + + primaryStage.setScene(new Scene(root)); + primaryStage.show(); + } + + public static void main(String[] args) { + launch(HelloWorldApp.class, args); + } +} diff --git a/src/swift/course.yml b/unpublished/swift/course.yml similarity index 100% rename from src/swift/course.yml rename to unpublished/swift/course.yml diff --git a/unpublished/swift/hei_verden/app_informasjon.png b/unpublished/swift/hei_verden/app_informasjon.png new file mode 100755 index 0000000000..3245880979 Binary files /dev/null and b/unpublished/swift/hei_verden/app_informasjon.png differ diff --git a/unpublished/swift/hei_verden/change_label.png b/unpublished/swift/hei_verden/change_label.png new file mode 100755 index 0000000000..a4f350840c Binary files /dev/null and b/unpublished/swift/hei_verden/change_label.png differ diff --git a/unpublished/swift/hei_verden/drag_label.png b/unpublished/swift/hei_verden/drag_label.png new file mode 100755 index 0000000000..ca1f0a97ce Binary files /dev/null and b/unpublished/swift/hei_verden/drag_label.png differ diff --git a/src/swift/hei_verden/hei_verden.md b/unpublished/swift/hei_verden/hei_verden.md similarity index 100% rename from src/swift/hei_verden/hei_verden.md rename to unpublished/swift/hei_verden/hei_verden.md diff --git a/unpublished/swift/hei_verden/hei_verden.png b/unpublished/swift/hei_verden/hei_verden.png new file mode 100755 index 0000000000..6fbfba094e Binary files /dev/null and b/unpublished/swift/hei_verden/hei_verden.png differ diff --git a/unpublished/swift/hei_verden/intro_skjerm.png b/unpublished/swift/hei_verden/intro_skjerm.png new file mode 100755 index 0000000000..7073739f20 Binary files /dev/null and b/unpublished/swift/hei_verden/intro_skjerm.png differ diff --git a/unpublished/swift/hei_verden/label_connection.png b/unpublished/swift/hei_verden/label_connection.png new file mode 100755 index 0000000000..9e4a232a2a Binary files /dev/null and b/unpublished/swift/hei_verden/label_connection.png differ diff --git a/unpublished/swift/hei_verden/lag_prosjekt.png b/unpublished/swift/hei_verden/lag_prosjekt.png new file mode 100755 index 0000000000..cd5db540f9 Binary files /dev/null and b/unpublished/swift/hei_verden/lag_prosjekt.png differ diff --git a/unpublished/swift/hei_verden/lesson.yml b/unpublished/swift/hei_verden/lesson.yml new file mode 100644 index 0000000000..d7164adffb --- /dev/null +++ b/unpublished/swift/hei_verden/lesson.yml @@ -0,0 +1 @@ +level: 1 diff --git a/unpublished/swift/hei_verden/start_skjerm.png b/unpublished/swift/hei_verden/start_skjerm.png new file mode 100755 index 0000000000..85c5702ff6 Binary files /dev/null and b/unpublished/swift/hei_verden/start_skjerm.png differ diff --git a/unpublished/swift/hei_verden/textfield_input.png b/unpublished/swift/hei_verden/textfield_input.png new file mode 100755 index 0000000000..7f9c979472 Binary files /dev/null and b/unpublished/swift/hei_verden/textfield_input.png differ diff --git a/src/swift/index.md b/unpublished/swift/index.md similarity index 100% rename from src/swift/index.md rename to unpublished/swift/index.md diff --git a/unpublished/swift/index_da.md b/unpublished/swift/index_da.md deleted file mode 100644 index 9004811997..0000000000 --- a/unpublished/swift/index_da.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -title: Swift -language: da ---- diff --git a/src/swift/index_en.md b/unpublished/swift/index_en.md similarity index 100% rename from src/swift/index_en.md rename to unpublished/swift/index_en.md diff --git a/src/swift/index_nn.md b/unpublished/swift/index_nn.md similarity index 100% rename from src/swift/index_nn.md rename to unpublished/swift/index_nn.md diff --git a/unpublished/swift/index_sv.md b/unpublished/swift/index_sv.md deleted file mode 100644 index a207d18f2b..0000000000 --- a/unpublished/swift/index_sv.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -title: Swift -language: sv ---- diff --git a/src/swift/logo-black.png b/unpublished/swift/logo-black.png similarity index 100% rename from src/swift/logo-black.png rename to unpublished/swift/logo-black.png diff --git a/src/swift/logo-white.png b/unpublished/swift/logo-white.png similarity index 100% rename from src/swift/logo-white.png rename to unpublished/swift/logo-white.png diff --git a/src/unity/README.md b/unpublished/unity/README.md similarity index 100% rename from src/unity/README.md rename to unpublished/unity/README.md diff --git a/src/unity/course.yml b/unpublished/unity/course.yml similarity index 100% rename from src/unity/course.yml rename to unpublished/unity/course.yml diff --git a/src/unity/index.md b/unpublished/unity/index.md similarity index 100% rename from src/unity/index.md rename to unpublished/unity/index.md diff --git a/unpublished/unity/index_da.md b/unpublished/unity/index_da.md deleted file mode 100644 index a8a25cb870..0000000000 --- a/unpublished/unity/index_da.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Unity -language: da ---- - -Disse oppgavene baserer seg på tutorials fra Unity sine sider: -[http://unity3d.com/learn/tutorials](). - -Vi jobber med å få oversatt flere av disse. Kodeklubben i Tromsø har noen -ressurser tilgjengelig her: [http://kodeklubben-tromso.github.io/unity/](). diff --git a/src/unity/index_en.md b/unpublished/unity/index_en.md similarity index 100% rename from src/unity/index_en.md rename to unpublished/unity/index_en.md diff --git a/src/unity/index_nn.md b/unpublished/unity/index_nn.md similarity index 100% rename from src/unity/index_nn.md rename to unpublished/unity/index_nn.md diff --git a/unpublished/unity/index_sv.md b/unpublished/unity/index_sv.md deleted file mode 100644 index f8397824f6..0000000000 --- a/unpublished/unity/index_sv.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Unity -language: sv ---- - -Disse oppgavene baserer seg på tutorials fra Unity sine sider: -[http://unity3d.com/learn/tutorials](). - -Vi jobber med å få oversatt flere av disse. Kodeklubben i Tromsø har noen -ressurser tilgjengelig her: [http://kodeklubben-tromso.github.io/unity/](). diff --git a/src/unity/logo-black.png b/unpublished/unity/logo-black.png similarity index 100% rename from src/unity/logo-black.png rename to unpublished/unity/logo-black.png diff --git a/src/unity/logo-white.png b/unpublished/unity/logo-white.png similarity index 100% rename from src/unity/logo-white.png rename to unpublished/unity/logo-white.png diff --git a/unpublished/unity/rull-en-ball/lesson.yml b/unpublished/unity/rull-en-ball/lesson.yml new file mode 100644 index 0000000000..d7164adffb --- /dev/null +++ b/unpublished/unity/rull-en-ball/lesson.yml @@ -0,0 +1 @@ +level: 1 diff --git a/src/unity/rull-en-ball/rull-en-ball.md b/unpublished/unity/rull-en-ball/rull-en-ball.md similarity index 100% rename from src/unity/rull-en-ball/rull-en-ball.md rename to unpublished/unity/rull-en-ball/rull-en-ball.md diff --git a/unpublished/unity/rull-en-ball/rull-en-ball.png b/unpublished/unity/rull-en-ball/rull-en-ball.png new file mode 100644 index 0000000000..5519e0c635 Binary files /dev/null and b/unpublished/unity/rull-en-ball/rull-en-ball.png differ