Introduktionskurs: Webbapplikationer i inbyggda system (IoT)

[Al_Bundy]

Jag har faktiskt inte kunnat läsa ditt senaste PM.
Ok. Återkom till tråden så ska jag hjälpa dig

[Al_Bundy]

Som har sagts av många så lägger man INTE in en export till en hemkatalog i etc profile. Det är som att be om problem tyvärr!

Håller med, reagerade på det redan innan nån annan öppet opponerat sig, men orkade inte skriva. Nu känner jag mig manad, när inte A.b. vill medge att det finns betydligt bättre sätt att sköta just den punkten.

Det finns ett bra sätt och det är att

sudo apt-get install openjdk-8-jdk

Men jag gillar hellre att ladda ner tarbalfilen.

[danielr112]

Oavsett om du gillar eller gör det bör informationen här vara korrekt här. De flesta vill använda de inbyggda verktygen istället för att manuellt introducera problem genom att länka publikt till hemkataloger. Tyvärr.det är inget mot dig utan handlar om att för att slippa problem bör man hålla sig till korrekt sätt att göra vissa saker

[Al_Bundy]

Vad var det som var o-korrekt?

[danielr112]

Att du delar ut din hemkatalog globalt. Det funkar inte för andra användare kommer inte åt den. Helt enkelt fel förfarande från starten.

[Al_Bundy]

Jaha, Du menar så. Jag är inte linuxexpert eller liknande. Jag utgår bara från att i dagens läge så har alla sin egen lilla dator de sitter på. Inte som år 2000 där man hade så kallade användare.

[ToPNoTCH]

Ett förslag:
Synpunkter på kursen borde vara i en annan tråd.
På så vis hålles denna ren och kan användas på ett vettigt sätt även för nytillkomna intressenter.

Som det blir nu blir den sönderhackad

[SeniorLemuren]

Om det är direkta fel som läres ut så måste de ju rimligen komma fram i denna tråd, annars finns det ju en uppenbar risk att läsarna missar väsentlig information.

[säter]

Helt enkelt fel förfarande från starten.

Det här blir en intressant kurs att följa.

[Al_Bundy]

Ett förslag:
Synpunkter på kursen borde vara i en annan tråd.
På så vis hålles denna ren och kan användas på ett vettigt sätt även för nytillkomna intressenter.

Som det blir nu blir den sönderhackad

Låter som en bra idé. Jag önskade att man kunde skicka in ett förslag och sedan får moderator ändra eller om jag har rätt att ändra gamla poster.

Problemet är att ändrar man gamla poster så riskerar det att bli en brytning i konversationen.

Detta forum är känt för att ha medlemmar som är lite drama queens

[Shimonu]

Dog kursen?

[säter]

Är kursen klar?

[Al_Bundy]

Nej, kursen är inte klar. Jag väntar på lite respons från övriga, men det verkar som att ingen vara intresserad, förrän nu. Så jag kommer lägga upp en ny lektion.

[Mindmapper]

Fortsätt kursen det vore intressant att få se vart det leder, utan en massa tjafs!
Jag funderar att hoppa på men just nu så har jag fullt upp på jobbet och så befarar jag att jag ledsnar om inte kursen leder fram till något praktiskt resultat inom en överskådlig tid.

[Al_Bundy]

Lektion 5: Använda sig utav Primefaces

Nu när vi har installerat klart allt så tänkte jag att det är dags att vi ska använda oss utav Primefaces. Det första vi gör med Primefaces är att gå in på denna hemsida: https://www.primefaces.org/showcase/getstarted.xhtml

Till höger så kan vi välja de moduler vi vill jobba med. Låt oss säga att vi vill ha en knapp som har Ajax-funktion. Vi söker på "command button" och går till denna sida: https://www.primefaces.org/showcase/ui/ ... tton.xhtml

Här kan vi se en kod:

Kod: Markera allt

<h:form> 
    <p:growl id="growl" life="2000" />
     
    <p:commandButton value="Ajax Submit" id="ajax" update="growl" action="#{buttonView.buttonAction}" style="margin-right:20px;" styleClass="ui-priority-primary" />
 
    <p:commandButton value="Non-Ajax Submit" id="nonAjax" action="#{buttonView.buttonAction}" style="margin-right:20px;" ajax="false" />
 
    <p:commandButton value="With Icon" id="withIcon" action="#{buttonView.buttonAction}" update="growl" style="margin-right:20px;" icon="pi pi-save" />
 
    <p:commandButton action="#{buttonView.buttonAction}" id="iconOnly" update="growl" style="margin-right:20px;" icon="pi pi-save" title="Icon Only" />
 
    <p:commandButton value="Disabled" id="disabled" style="margin-right:20px;" disabled="true" />   
</h:form>

Samt denna kod:

Kod: Markera allt

@ManagedBean
public class ButtonView {
     
    private MenuModel model;
 
    @PostConstruct
    public void init() {
        model = new DefaultMenuModel();
 
        //First submenu
        DefaultSubMenu firstSubmenu = new DefaultSubMenu("Dynamic Submenu");
 
        DefaultMenuItem item = new DefaultMenuItem("External");
        item.setUrl("http://www.primefaces.org");
        item.setIcon("pi pi-home");
        firstSubmenu.addElement(item);
 
        model.addElement(firstSubmenu);
 
        //Second submenu
        DefaultSubMenu secondSubmenu = new DefaultSubMenu("Dynamic Actions");
 
        item = new DefaultMenuItem("Save");
        item.setIcon("pi pi-save");
        item.setCommand("#{buttonView.save}");
        item.setUpdate("messages");
        secondSubmenu.addElement(item);
 
        item = new DefaultMenuItem("Delete");
        item.setIcon("pi pi-times");
        item.setCommand("#{buttonView.delete}");
        item.setAjax(false);
        secondSubmenu.addElement(item);
 
        model.addElement(secondSubmenu);
    }
 
    public MenuModel getModel() {
        return model;
    }
 
    public void save() {
        addMessage("Data saved");
    }
 
    public void update() {
        addMessage("Data updated");
    }
 
    public void delete() {
        addMessage("Data deleted");
    }
 
    public void buttonAction() {
        addMessage("Welcome to Primefaces!!");
    }
 
    public void addMessage(String summary) {
        FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, summary, null);
        FacesContext.getCurrentInstance().addMessage(null, message);
    }
}

Här utgår jag från att ni förstår Java som programmeringspråk. Så vi ska välja endast knappen som har Ajax-funktion. Nämligen:

Kod: Markera allt

<h:form> 
<p:growl id="growl" life="2000" />
     
    <p:commandButton value="Ajax Submit" id="ajax" update="growl" action="#{buttonView.buttonAction}" style="margin-right:20px;" styleClass="ui-priority-primary" />
</h:form>

När vi vill "ändra" eller "röra" på en hemsida så måste den valda komponenten vara omringat utav <h:form> </h:form>, annars fungerar det inte.

Denna kod betyder att vi ska skriva ut ett meddelande på skärmen:

Kod: Markera allt

<p:growl id="growl" life="2000" />

Denna kod indikerar att vi ska placera ut en knapp på våran hemsida.

Kod: Markera allt

<p:commandButton value="Ajax Submit" id="ajax" update="growl" action="#{buttonView.buttonAction}" style="margin-right:20px;" styleClass="ui-priority-primary" />

Value är själva texten på knappen.
id är själva identiteten på knappen. Onödigt i detta fall.
update är att vi ska sammanlänka meddelandet med att vi trycker på knappen.

Men det som är intressanta här är själva action="#{buttonView.buttonAction}". Varför ska det stå så?

Vi börjar med att öppna våran index.xhtml och lägger in följande kod:

Kod: Markera allt

<h:form> 
<p:growl id="growl" life="2000" />
     
    <p:commandButton value="Ajax Submit" id="ajax" update="growl" action="#{buttonView.buttonAction}" style="margin-right:20px;" styleClass="ui-priority-primary" />
</h:form>

Så det ser ut så här:

Kod: Markera allt

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

<h:head>

</h:head>

<h:body>

	<h:form>
		<p:growl id="growl" life="2000" />

		<p:commandButton value="Ajax Submit" id="ajax" update="growl"
			action="#{buttonView.buttonAction}" style="margin-right:20px;"
			styleClass="ui-priority-primary" />
	</h:form>

</h:body>
</html>

Tyck gärna på Source -> Format för att snygga till HTML koden

Där efter så skall vi skapa ett nytt paket och en klass som heter ButtonView. Du högerklickar på src mappen och skapar nytt paket och sedan högerklickar du på paketet som väljer ny klass. Notera att paketet kan heta vad som helst, men jag rekommenderar att börja med "se" och sedan "." och där efter ert namn och efternamn och sedan "." samt viken typ utav applikation det är. Det har med att för varje "." så blir det en ny mapp. Gå in och kolla själv där ni har sparat projektet.

Markering_002.png

Nu ska vi skriva in detta i klassen ButtonView:

Kod: Markera allt

package se.elektronikforumet.web;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;

@ManagedBean
@SessionScoped // För enskilld applikation 
// @ApplicationScoped // För gemensam applikation
// @RequestScoped // För engångsapplikation
public class ButtonView {
     
   // Konstruktör. Denna skapas när din applikation körs
   public ButtonView() {
	   
   }
   
   public void buttonAction() {
       addMessage("Välkommen till Elektronikforumet");
   }
 
    public void addMessage(String summary) {
        FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, summary, null);
        FacesContext.getCurrentInstance().addMessage(null, message);
    }
}

Som ni ser här så finns det tre olika alternativ att välja mellan:

@SessionScoped // För enskilld applikation
// @ApplicationScoped // För gemensam applikation
// @RequestScoped // För engångsapplikation

SessionScoped används när DU själv vill ha din webbapplikation för dig själv. Du själv ska styra ditt arbete. Tänk på att om du bygger en applikation som använder en funktion som ej "går att kopiera" och en annan person använder samma funktion så krockar det. Denna är den mest vanligaste att använda

ApplicationScoped används när du och din kompis vill dela din webbapplikation med andra. Alla ser vad alla andra gör. Denna är bra om det är en operatörspanel som alla ska kunna titta på samtidigt.

RequestScoped används när du endast vill använda en liten del av din webbapplikation EN gång och efter du har uppdaterat hemsidan så är webbapplikationen nollstäld.

------------------------------------------------------------------------------------------------------------------------------------------------------------
Nu kommer jag tillbaka till action="#{buttonView.buttonAction}"

När vi kör denna "action" så letar den efter klassen objektet i "ButtonView". Här skapas alla objekt av en klass med samma namn, utom att objektet har liten bokstav. Så det är viktigt att klassnamnet SKALL ha stor bokstav!!!

När det kommer till buttonAction så anropar våran "action" buttonAction() metoden i ButtonView.java klassen. Rätt logiskt! Nu kör vi programmet!

Markering_003.png

Kul! Nu fungerar det! Lått oss nu skapa ett textfält också!

Vi ändrar våran klass.

Kod: Markera allt

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;

@ManagedBean
@SessionScoped // För enskilld applikation
// @ApplicationScoped // För gemensam applikation
// @RequestScoped // För engångsapplikation
public class ButtonView {

	// Vårt nummer
	private int number;
	
	
	// Konstruktör. Denna skapas när din applikation körs
	public ButtonView() {

	}

	public void buttonAction() {
		addMessage("Välkommen till Elektronikforumet");
		number = 10;
	}
	

	public int getNumber() {
		return number;
	}

	public void setNumber(int number) {
		this.number = number;
	}

	public void addMessage(String summary) {
		FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, summary, null);
		FacesContext.getCurrentInstance().addMessage(null, message);
	}
}

Nu har vi lagt till ett fält vid namn number och en getter och setter som görs via högerklick på koden -> Source -> Generate Getters And Setters. Då väljer vi number.

Markering_004.png

Där efter ändrar vi våran index.xhtml fil till:

Kod: Markera allt

<h:body>

	<h:form id="form1">
		<p:growl id="growl" life="2000" />

		<p:commandButton value="Ajax Submit" id="ajax" update="growl,form1"
			action="#{buttonView.buttonAction}" style="margin-right:20px;"
			styleClass="ui-priority-primary" />
		
		<p:inputText value="#{buttonView.number}"/>

	</h:form>

</h:body>

Resultatet blev:

Markering_005.png

Här har vi lagt till

Kod: Markera allt

<p:inputText value="#{buttonView.number}"/>

samt

Kod: Markera allt

 update="growl,form1"

Kod: Markera allt

<h:form id="form1">

Vi uppdaterar alltså våran form samtidigt som vi skriver ut vårat meddelande. Det som är unikt här är att när vi anropar en metod så anropar vi metoden som den är. Eventuellt så kan man även passera in ett argument i metoden typ

Kod: Markera allt

<p:inputText value="#{klassNamn.metoden(argument1, argument2)}"/>

Men när det kommer till fält, ovsett datatyp så MÅSTE dem alltid börja på "get..." eller "set...". Därför uppmanar jag er att ALLTID använda "getters and setters" och ändra inte namnet på dem. Då förstör ni JSF!

Så i detta fall, när vi ser:

Kod: Markera allt

<p:inputText value="#{buttonView.number}"/>

Så tolkar JSF detta som:

Kod: Markera allt

<p:inputText value="#{buttonView.getNumber()}"/>

Samma sak när vi ska skicka in något i textfältet. Då anropar JSF denna metod

Kod: Markera allt

<p:inputText value="#{buttonView.setNumber(int number)}"/>

Så lek gärna runt och pröva olika saker. Detta är enormt viktigt om vi ska göra snygga webbapplikationer på ett enkelt sätt. Här bör du använda klasser i klasser, dvs polymorfism. Deklarera klasserna i din konstruktör och glöm för guds skull inte bort @ApplicationScoped eller @SessionScoped eller @RequestScoped när du skapar en klass som ska vara ansluten mot din HTML kod. Annars förstår inte JSF Java. Men är det en enskild klass typ som databas som inte ska anslutas mot din webbapplikation. Då behöver du inte @ApplicationScoped eller @SessionScoped eller @RequestScoped .

Så se så! Ut och lek! Skapa hemsidor nu!