Introduktionskurs: Webbapplikationer i inbyggda system (IoT)

PIC, AVR, Arduino, Raspberry Pi, Basic Stamp, PLC mm.
Användarvisningsbild
Al_Bundy
Inlägg: 2889
Blev medlem: 11 september 2012, 23:59:50
Ort: The U.S - Chicago
Kontakt:

Re: Introduktionskurs: Webbapplikationer i inbyggda system (

Inlägg av Al_Bundy »

Jag har faktiskt inte kunnat läsa ditt senaste PM.
Ok. Återkom till tråden så ska jag hjälpa dig :)
Användarvisningsbild
Al_Bundy
Inlägg: 2889
Blev medlem: 11 september 2012, 23:59:50
Ort: The U.S - Chicago
Kontakt:

Re: Introduktionskurs: Webbapplikationer i inbyggda system (

Inlägg av Al_Bundy »

rvl skrev:
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
Inlägg: 8044
Blev medlem: 18 januari 2009, 00:48:24
Ort: Alvesta, Småland

Re: Introduktionskurs: Webbapplikationer i inbyggda system (

Inlägg av 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
Användarvisningsbild
Al_Bundy
Inlägg: 2889
Blev medlem: 11 september 2012, 23:59:50
Ort: The U.S - Chicago
Kontakt:

Re: Introduktionskurs: Webbapplikationer i inbyggda system (

Inlägg av Al_Bundy »

Vad var det som var o-korrekt?
danielr112
Inlägg: 8044
Blev medlem: 18 januari 2009, 00:48:24
Ort: Alvesta, Småland

Re: Introduktionskurs: Webbapplikationer i inbyggda system (

Inlägg av 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.
Användarvisningsbild
Al_Bundy
Inlägg: 2889
Blev medlem: 11 september 2012, 23:59:50
Ort: The U.S - Chicago
Kontakt:

Re: Introduktionskurs: Webbapplikationer i inbyggda system (

Inlägg av 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
Inlägg: 4847
Blev medlem: 21 december 2009, 17:59:48

Re: Introduktionskurs: Webbapplikationer i inbyggda system (

Inlägg av 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
Inlägg: 7779
Blev medlem: 26 maj 2009, 12:20:37
Ort: Kristinehamn

Re: Introduktionskurs: Webbapplikationer i inbyggda system (

Inlägg av 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.
Användarvisningsbild
säter
Inlägg: 32514
Blev medlem: 22 februari 2009, 21:16:35
Ort: Säter

Re: Introduktionskurs: Webbapplikationer i inbyggda system (

Inlägg av säter »

danielr112 skrev:Helt enkelt fel förfarande från starten.
Det här blir en intressant kurs att följa. :)
Användarvisningsbild
Al_Bundy
Inlägg: 2889
Blev medlem: 11 september 2012, 23:59:50
Ort: The U.S - Chicago
Kontakt:

Re: Introduktionskurs: Webbapplikationer i inbyggda system (

Inlägg av Al_Bundy »

ToPNoTCH skrev: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
Inlägg: 294
Blev medlem: 21 oktober 2015, 22:44:33

Re: Introduktionskurs: Webbapplikationer i inbyggda system (

Inlägg av Shimonu »

Dog kursen?
Användarvisningsbild
säter
Inlägg: 32514
Blev medlem: 22 februari 2009, 21:16:35
Ort: Säter

Re: Introduktionskurs: Webbapplikationer i inbyggda system (

Inlägg av säter »

Är kursen klar?
Användarvisningsbild
Al_Bundy
Inlägg: 2889
Blev medlem: 11 september 2012, 23:59:50
Ort: The U.S - Chicago
Kontakt:

Re: Introduktionskurs: Webbapplikationer i inbyggda system (

Inlägg av 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
Inlägg: 6389
Blev medlem: 31 augusti 2006, 16:42:43
Ort: Jamtland

Re: Introduktionskurs: Webbapplikationer i inbyggda system (

Inlägg av 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.
Användarvisningsbild
Al_Bundy
Inlägg: 2889
Blev medlem: 11 september 2012, 23:59:50
Ort: The U.S - Chicago
Kontakt:

Re: Introduktionskurs: Webbapplikationer i inbyggda system (

Inlägg av 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!
Du har inte behörighet att öppna de filer som bifogats till detta inlägg.
Skriv svar