bezahlt von Shopware 6: Tipp aktueller Benutzer in der Administration
const { currentUser } = Shopware.State.get('session');
console.log(currentUser);
Und dann kann man ohne Probleme CustomFields des Users auslesen.
Blog: Blog-entries by search-pattern/Tags:const { currentUser } = Shopware.State.get('session');
console.log(currentUser);
Und dann kann man ohne Probleme CustomFields des Users auslesen.
JavaScript: Detect scroll to bottom
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<style>
#reader {
max-height: 200px;
border: 1px solid lightgray;
border-radius: 3px;
overflow: auto;
padding: 0.25rem;
}
#page {
display: flex;
justify-content: center;
padding-top: 5rem;
}
</style>
</head>
<body><div id="page">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Scroll to Accept</h5>
<p class="card-text">
<div id="reader">
Gott zum Gruße! Das feist Weichteile. Die geflissentlich
Begrüßungsgeld meucheln. Der töricht Lump grämen. Das bräsig Schürzenjäger.
Der grobschlächtig Edelmut. Der Kummerspeck anschwärzen der bierernst Lump.
Fatzke und Panzerkampfwagen flanieren pompös Schindluder. Die pomadig Bagage
foppen. Narr und Affenzahn schlampampen feist Quasselstrippe. Presssack und
Kuppelei picheln altbacken Kummerspeck. Die geflissentlich Luder frickeln.
Das Begrüßungsgeld schlampampen die gebeutelt Flegel. Habe die Ehre!
</div>
</p>
<button id="ok" class="btn btn-primary" disabled type="button">Accept</button>
</div>
</div>
<script>
document.getElementById('reader').addEventListener('scroll',
(e) => {
const element = e.target;
if(element.offsetHeight + element.scrollTop >= element.scrollHeight) {
document.getElementById('ok').removeAttribute('disabled');
}
}
, true)
</script>
</div>
</body>
</html>
Shopware 6: Storefront Plugins
Das Plugin an sich ist sehr einfach strukturiert.
example-plugin/index.js
import Plugin from 'src/plugin-system/plugin.class';
export default class ExamplePlugin extends Plugin {
init() {
console.log('plugin is bind to this element', this.el);
}
}
Die Klasse registiert man in der main.js:
import ExamplePlugin from './example-plugin/';
window.PluginManager.register('ExamplePlugin', ExamplePlugin, '[data-example-plugin]');
Nun muss man das nur noch an ein HTML-Element binden, so dass es wenn dieses Element geladen wird auch gestartet wird.
...
<div data-example-plugin="true"></div>
...
Im Plugin sucht man sich dann alle benötigten Elemente und registriert dort alle benötigten Listener.
Ausführlich steht alles hier: https://developer.shopware.com/docs/guides/plugins/plugins/storefront/add-custom-javascript
Wobei ich eher diese Seite https://mrtnschndlr.medium.com/die-neue-shopware-6-storefront-und-was-du-alles-dar%C3%BCber-wissen-solltest-e1e5621b6397 empfehlen würde.
die Art und Weise erinnert mich etwas wie ich damals bei meinen cJSv2-Framework die Controller an Elemente gebunden und initialisiert habe.. der default-Name der Init-Methode war da auch init.
Der DomAccess-Helper ist super und sollte man so verwenden. Über den kann man auch den QuerySelector nutzen und dass schützt hoffentlich davor, dass ein Haufen klassischer Webdesigner versuchen JQuery wieder da rein zu bringen. Der HttpClient ist auch nett aber man kann genau so gut direkt mit fetch() arbeiten, wenn man nicht unbedingt irgendwelche Steinzeit Browser supporten möchte. Aber besonder mag ich von den Helpern DeviceDetection.isTouchDevice() weil man damit einfach unterschieden kann ob man gerade ein Touch oder ein MouseEnter
Event nutzen muss.
Shopware 6: Lesbares Javascript
Das ist zum Glück extrem einfach:
* Port 9998 aus dem Docker-Container durchleiten
* Dem SalesChannel in dem man entwickelt die Domain "localhost" zu ordnen
* das Script bin/watch-storefront.sh starten
Nun kann man localhost:9998 im Browser aufrufen. Der JavaScript Code ist lesbar und Änderungen werden sofort übernommen ohne dass man die Storefront neu bauen muss.
JavaScript: Prettier Formatierung in PHPStorm
Dann kann das Problem kommen, dass man Node nicht unter Windows laufen lässt sondern in WSL. Aber da hat PHPStorm zum Glück eine eine fertige Framework-Integration für.
Damit kann Prettier auch für die normale Reformatierung von PHPStorm mit JS-Dateien ausgewählt werden.
JavaScript Syntax für PHP-Devs
let a = [23, 42, 69];
let b = [112, 256 ...a];
isset() oder ??:
let data = {a: 2, b: 3};
let result = a?.c ?? 0;
Object-Felder als Arguments verwenden:
let data = [
{
id: 0,
name: 'test'
}
];
data.forEach(
({id, name}, idx) => {
console.log(id + ' is named as ' + name + ' and has the index ' + idx);
}
);
JavaScript Check
auf der Seite erlaubt hat oder ob ein Framework wie JQuery korrekt geladen und nicht geblockt wurde.
Prinzip ist einfach. Man versucht die Meldung mit JavaScript nach dem Laden der Seite auszublenden. Wenn es nicht klappt, liegt ein Problem vor und die Meldung ist für den Benutzer sichtbar.
Hier
wird erklärt wie man im Chrome bewußt JavaScript deaktiviert, damit man solche Fälle testen kann.
Eine Notice in HTML
<strong id="">Please activate/allow JavaScript</strong>
Vanilla-JS
setTimeout(function() {
document.getElementById('#noscript-marker').style.display = 'none';
}, 50);
JQuery (prüft auch mit ob JQuery geladen wurde)
setTimeout(function() {
$('#noscript-marker').hide();
}, 50);
cJSv2: Services und Service-Injection
An sich wird damit die cjsGetController Methode, mit der sich Controller untereinander mit ihren Namen konnten, überflüssig und man kann einfach asynchrone/reactive Lösungen basteln.
Hier erst einmal ein kleines synchrones Event-System:
function EventBus() {
this.events = [];
this.register=function(event, callback){
if(!this.events[event]) {
this.events[event] = [];
}
this.events[event].push(callback);
}
this.fire=function(event, payload){
if(this.events[event]) {
this.events[event].forEach(subscriber => {
subscriber(payload);
})
}
}
}
function Receiver(){
this.value="";
this.init=function(){
this.EventBus.register("update", (payload) => {
this.value = payload.value;
});
this.cjsPushBindings();
};
}
function Sender(){
this.values=[
'Blubb',
'Test',
'Brumm',
'Event',
'Something'
];
this.send=function(event){
this.EventBus.fire("update", {value: this.values[Math.floor(Math.random() * this.values.length)]})
};
}
<div cjs-controller="sender:Sender" cjs-services="EventBus">
<input type="button" value="fire event" cjs-binding-event="click:send"/>
</div>
<div cjs-controller="receiver:Receiver:init" cjs-services="EventBus">
<input type="text" value="" cjs-binding-value="value"/>
</div>
Summernote: Image Resizing
Die Callback-Function:
let onImageUploadFunc = function (elementId) {
return function(image) {
resizeImage(image[0], elementId);
}
};
function resizeImage(file, elementId) {
let image = new Image();
let url = window.URL ? window.URL : window.webkitURL;
image.src = url.createObjectURL(file);
image.onload = function (e) {
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
let width = 600;
let factor = image.width / width;
let height = image.height / factor;
if(image.height > image.width) {
height = 300;
factor = image.height / height;
width = image.width / factor;
}
canvas.width = width;
canvas.height = height;
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
$(elementId).summernote('editor.insertImage', canvas.toDataURL('jpeg', 0.7));
};
}
Verwendung:
$('#editSolution').summernote(
{callbacks:{onImageUpload: onImageUploadFunc('#editSolution')}}
);
CoreUI mit JSON-Schema
CoreUI und vue-form-generator arbeiten gut zusammen.
Man muss vue-form-generator nur per NPM installieren.
<template>
<CRow>
<CCol col="12" md="6">
<CCard>
<CCardHeader>
JSON-Schema Form
</CCardHeader>
<CCardBody>
<vue-form-generator :schema="schema" :model="model" :options="formOptions">
</vue-form-generator>
</CCardBody>
<CCardFooter>
<CButton block color="primary">Submit</CButton>
</CCardFooter>
</CCard>
</CCol>
</CRow>
</template>
<script>
import Vue from 'vue'
import VueFormGenerator from 'vue-form-generator'
Vue.use(VueFormGenerator);
export default {
name: 'Alerts2',
data () {
return {
model: {
id: 1,
name: 'John Doe',
password: 'J0hnD03!x4',
skills: ['Javascript', 'VueJS'],
email: 'john.doe@gmail.com',
status: true
},
schema: {
fields: [
{
type: 'input',
inputType: 'text',
label: 'ID (disabled text field)',
model: 'id',
readonly: true,
disabled: true
},
{
type: 'input',
inputType: 'text',
label: 'Name',
model: 'name',
placeholder: 'Your name',
featured: true,
required: true
},
{
type: 'input',
inputType: 'password',
label: 'Password',
model: 'password',
min: 6,
required: true,
hint: 'Minimum 6 characters',
validator: VueFormGenerator.validators.string
},
{
type: 'select',
label: 'Skills',
model: 'skills',
values: ['Javascript', 'VueJS', 'CSS3', 'HTML5']
},
{
type: 'input',
inputType: 'email',
label: 'E-mail',
model: 'email',
placeholder: 'User's e-mail address'
},
{
type: 'checkbox',
label: 'Status',
model: 'status',
default: true
}
]
},
formOptions: {
validateAfterLoad: true,
validateAfterChanged: true,
validateAsync: true
}
}
}
}
</script>
Ja das ist einfach das Beispiel, das ich kopiert habe.... aber es funktioniert!
CoreUI: Ein Admin-Template für Vue
Die Installation über GitHub ist einfach und schnell.
Um ein eigens View anzulegen muss man an sich drei Dinge tun.
1. Die View anlegen:
2. In router/index.js die Component importieren und in die Router-Config einfügen:
3. In containers/_nav.js einen Link für die Sidebar einfügen:
4. Dann den Server starten:
npm run serve
Und unter http://localhost:8080 angucken.
Geht an sich alles ganz einfach.
EasyComponent.JS: Framework Beispiel
Man selbst ist ja einfacher "Anwender" und wie die eigenen Anwender, die das eigene Programm nutzen, das wieder das Framework nutzt, sollte man sich nicht die Dinge einmischen, von denen man keine Ahnung hat.
Ich habe über die Jahre doch ein paar Frameworks gebaut. Gute, schlechte, noch schlechtere und auch welche, die durch die allgemeine Frameworks ersetzt wurden. Auch mal ein Bugfix für ein vorhandenes Framework war dabei.
Wichtig ist dabei, dass man sich klar wird, dass Frameworks im Kern meistens alles andere als hoch komplex sind. Das würde schon dem
Zweck des Frameworks widersprechen, das ja für möglichst viele Anwendungszwecke funktionieren soll. Der Core ist meistens sehr einfach und klar strukturiert. Komplexität kommt meistens über Zusatzfunkionen rein, die wieder rum nur die Kernfunktionen bedienen. Wenn diese Kernfunktionen gemischt werden und kann es am Anfang sehr unübersichtlich erscheinen, weil teilweise nicht ganz klar ist, was wofür da ist.
Bei React mit Hooks kann selbst das Mischen von useState und useEffect teilweise kompliziert sein, weil aus der Sicht des Entwicklers vielleicht, von diesen Funktionen was anderes Erwartet wird, als im Framework-Kern damit wirklich erreicht wird.
Frameworks machen keine Zauberrei aber dafür sehr viel Referenz-Verwaltung. Meiner Erfahrung nach beschäftigt man sich im Framework-Kern zu 75% allein damit Instanzen und Referenzen zu erzeugen und zu verwalten.
Um das ganze etwas zu verdeutlichen habe ich mich einmal hingesetzt und in unter einer Stunde (hatte ich mir auch so vorgegeben) ein kleines Framework gebaut, das useState und useEffect reimplementiert und zeigt, wie man das Verhalten dieser Funktionen nutzt, aber auch, welche Funktion für das Framework wirklich dahinter steckt. Weil am Ende kommt man zu meist immer zu selben Strukturen, die bei allen Frameworks immer nur etwas anders benannt und implementiert sind.
Github - EasyComponent.JS Code & Präsentation
https://github.com/annonyme/easycomponents_presentation
React: Internals
T3N - 6 Gründe Python zu lernen: Naja...
1. Automatisiert triviale Aufgaben
Das kann ich mit PHP (mit Symfony-CLI) auch ganz gut. Kleine Tools schreiben ohne viel Framework wie JRE + Spring + JPA + etc haben zu müssen. Aber sobald der Code Compiler wird, kommt auch da alles hinzu. Ich sehe da eher den Vorteil dass Python auf IoT-Geräten gut läuft und man sehr viel Overhead einsparen kann.
2. Schneller Einstieg und einfache Syntax
Stimmt. Das Beispiel ist zwar nicht aussagekräftig da der Boilerplate-Code mit zunehmenden Code immer geringere Anteile einnimmt und man sich viel Code heute ja auch automatisch generieren lassen kann. IDEs sei dank bringt einen diesen Code zu schreiben kaum einen zeitlichen Nachteil. Also... ja.. Python ist nicht schwer, aber auch nicht leichter als PHP oder JavaScript. Java ist an sich auch nicht schwer, man muss nur eben Classes und Packages richtig nutzen und schon ist alles sehr übersichtlich. Je weniger Struktur man braucht desto schwieriger wird es auch für die IDE bei der Codevervollständigung zu helfen. Java ist da einfach immer noch weit vorne.
3. Data Science
Geil... wenn ich Python kann, kann ich Data Science? Nein. Irgendwer hat man angefangen Python in dem Bereich zu nutzen und hat gute Libs geschrieben. Oft sind die Libs Ausschlag gebender als die Sprache an sich. Also war es wohl eher Zufall dass in dem Bereich Python hauptsächlich eingesetzt wird und nicht der Sprache an sich geschuldet. Bloss weil ich das Hauptwerkzeug für einen Berufszweig benutzen kann, kann ich auch den Beruf ausüben... ich kann mit einem Skalpell scheiden!!!!
4. Machine Learning
Ja.. auch cool. Tolles und komplexes Thema. Werkzeuge dafür zu erlernen ist hier sicher nicht die größte Herausforderung in dem Bereich.
5. Ressourcen
Wie oben schon beschrieben. Wenn die Lib mein Problem löst, nehme ich die Sprache für die es die Lib gibt. Da ist es egal ob es Python, Java oder C++ ist. Ich nehme einfach das, was mein Problem schnell und einfach löst. Also bringt es mir nichts Python zu lernen, weil es tolle Libs gibt. Wenn ich eine Lib benutzen will, dann habe ich ein Grund mir die Sprache anzueignen.. vorher nicht (außer aus Spass oder Lerndrang).
6. Community
Das gilt an sich für jede größere Programmiersprache. Stackoverflow hilft, deutsche Foren liefern nie eine Lösung. Alles wie immer.
Zusammenfassend kann ich für mich nur sagen. Es lohnt sich für mich nicht eine neue Sprache zu lernen, weil man theoretisch super tolle Dinge damit machen könnte, die ich entweder nicht beherrsche oder nicht benötige. Die Standardaufgaben können alle Sprachen fast gleich gut und da zwischen den Sprachen zu wechseln fällt auch entsprechend leicht. Mal mit einer Sprache rumspielen ist immer lustig und macht Spass, aber eine Sprache wirklich lernen ist nru nötig wenn man es benötigt. IoT-Geräte sehe ich da noch als den wahrscheinlichsten Grund, warum ich mal wieder was mit Python machen sollte.
NodeJS: Development HTTPS Server
Mit yarn:
yarn build
openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem
sudo yarn global add http-server
http-server --ssl -c-1 -p 3000 ./build/
Mit npm:
npm run build
openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem
sudo npm -g install http-server
http-server --ssl -c-1 -p 3000 ./build/
Damit hat man direkt einen HTTPS-Server bei dem man nur noch das unsichere Zertifikat akzeptieren muss.
Wenn man Windows verwendet muss man über die Bash (WSL) OpenSSL, NodeJS und NPM installieren und dann ist es wie unter Linux.. man befindet sich dann ja auch in einem Linux....
IE11: Zombies und andere unangenehme Zeitgenossen
"Mit dem Internet Explorer geht das nicht...". Du versuchst am Verwesungsgeruch fest zustellen, ob es der IE11 ist oder der Mitarbeiter eine noch ältere Version ausgebuddelt hat. Es ist nur der IE11, aber trotzdem würde ein Surströmming-Deo seinen Geruch schon ungemein verbessern.
Es bleibt nur eins übrig: Den Zombie verscheuchen, dem Mitarbeiter mitteilen, dass man sich morgen gleich als Erstes darum kümmern wird und sich einreden, dass Menschen die noch einen Internet Explorer benutzen es auch verdient haben in Probleme zu laufen.
Vue: Animations einbauen
<transition name="dialogbox">
<div class="overlay-content card" v-if="textDialog.show">
<h4 class="text-center card-header">{{ textDialog.title }}</h4>
<div class="text-field card-body">
{{ textDialog.content }}
</div>
<div class="text-center card-footer">
<button v-on:click="closeDialogs" class="btn btn-dark">close</button>
</div>
</div>
</transition>
Durch die Transition-Tag wird das Element eingeschlossen, dessen Änderung mit der Animation verknüpft werden soll. Der Name ist der der erste Teil des Animationsnamens.
.dialogbox-enter-active {
animation: open 0.8s;
}
.dialogbox-leave-active {
animation: open 0.4s reverse;
}
@keyframes open {
0% {
opacity: 0;
transform: scale(0);
}
100% {
opacity: 1;
transform: scale(1);
}
}
die erste Klasse wird beim Anzeigen verwendet und die zweite, wenn das Element aus dem DOM entfernt wird.
Neben v.id geht auch v-show.
AngularJS + IE: OnChange mit Input und DataList
function onChangeIE(value){
var ua = window.navigator.userAgent;
if((ua.indexOf('Trident/') > 0 || ua.indexOf('MSIE ') > 0) && ua.indexOf('Edge/') <= 0) {
angular.element(document.getElementById('my-ng-controller-element')).scope().myInputModel = value;
angular.element(document.getElementById('my-ng-controller-element')).scope().myNgChangeFunction();
}
}
<input type="text" list="thelist" oninput="onChangeIE(this.value)" id="input_pattern" ng-model="myInputModel" ng-change="myNgChangeFunction()"/>
<datalist id="thelist"></datalist>
Die beste Lösung wäre solche alten Browser nicht mehr zu supporten und dann vielleicht auch auf Vue.js oder eine aktuelle Angular-Version zu wechseln.
Aber für schnelles Prototypen, wo man wenig Code schreiben will, ist AngularJS noch immer sehr gut. Teilweise ist man so schnell damit, dass man während einer Diskussion die Ideen direkt nebenbei umsetzen und ausprobieren kann. Wenn man erst einmal viele Components schreiben muss, geht es nicht so gut, wie mit den AngularJS Templates und Dingen wie ng-options. Mit Vue.js ist man mit etwas Übung aber auch ähnlich schnell.
JavaScript: FlushQueue Konzept
Man muss drei Functions mit geben: Validator zum prüfen der einzelnen Items, Cosumer zum Verarbeiten der einzelnen Items und onEmpty, die ausgeführt wird, wenn der Flush durch ist.
let flushQueue = {
items: [],
getChangeHandler: function(service){
return {
set: (obj, prop, newval) => {
obj[prop] = newval;
service.consume(false);
}
}
},
consumer: null, //user function
onEmpty: null, //user function
validator: null, //user function
validate: function() {
let result = true;
this.items.forEach((item) => {
if(!this.validator(item)) {
console.log(item);
result = false;
}
});
return result && this.items.length > 0;
},
consume: function(tested) {
if(tested || this.validate()) {
var item = this.items.shift();
if(this.consumer){
try{
this.consumer(item);
}
catch(e){
}
}
if(this.items.length > 0) {
this.consume(true);
}
else if(item && this.onEmpty) {
this.onEmpty();
}
}
},
add: function(itemIn) {
let item = new Proxy(itemIn, this.getChangeHandler(this));
this.items.push(item);
this.consume(false);
return item;
},
addAll: function(items) {
let out = [];
items.forEach((itemIn, key) => {
let item = new Proxy(itemIn, this.getChangeHandler(this));
this.items.push(item);
out[key] = item;
});
this.consume(false);
return out;
}
};
Beispiel:
flushQueue.validator = (item) => {
return item.checked;
};
flushQueue.onEmpty = () => {
console.log("flushed!");
};
flushQueue.consumer = (item) => {
console.log("consumed -> " + item.id);
return true;
}
let items = [
{id: 1, checked: true},
{id: 2, checked: true},
{id: 3, checked: true},
{id: 4, checked: true},
{id: 5, checked: true},
{id: 6, checked: true},
{id: 7, checked: false},
];
let itemsP = flushQueue.addAll(items);
console.log("add all");
console.log("pre change");
itemsP[6].checked = true;
console.log("post change");
Man muss noch viel verbessern wie eine Fehlerbehandlung beim Verarbeiten von Items.
Visualstudio Code: Zeilen Wrap
Node.js und Elasticsearch
Elasticsearch-Client installieren:
npm install elasticsearch get-json
Client erstellen:
var elasticsearch = require('elasticsearch');
var client = new elasticsearch.Client( {
hosts: [
'http://localhost:9200/'
]
});
Index erstellen:
if(!client.indices.exists("testidx")){
client.indices.create({
index: "testidx"
}, (error, resp, status) => {console.log(status)}
);
}
Document speichern:
client.index(
{
index: "testidx",
type: "item",
id: "1",
body: {
id: "123",
value: "blubb"
}
}
);
Ein einfaches Query mit Callback-Function:
client.search({
index: 'testidx',
type: 'item',
body: {
query: {
match: { "id": "123" }
},
}
}, (error, response,status) => {
console.log("-- Hits --");
response.hits.hits.forEach((hit) => {
console.log(hit);
});
});
Ein einfaches Query mit Promise:
client.search({
index: 'testidx',
type: 'item',
body: {
query: {
match: { "id": "123" }
},
}
}).then((response) => {
response.hits.hits.forEach((hit) => {
console.log(hit);
});
}, (error) => {console.log(error);})
Mit Hilfe dieser Seite https://www.compose.com/articles/getting-started-with-elasticsearch-and-node/ zusammen gebastelt und hiermit https://www.elastic.co/guide/en/elasticsearch/client/javascript-api/current/quick-start.html ergänzt.
JavaScript Promise Beispiel
let key = "blubb";
function get(resolve, reject){
resolve({blubb: (new Date()).getUTCDate()});
};
(new Promise(get)).then(data => data[key]).then(val => console.log(val));
Die Frage war: Wie bekomme ich Daten in eine function für then(), wenn ich doch nur ein Argument übergeben bekomme?
So denkt man in JavaScript aber garnicht.... man muss, wie in dem Beispiel, key garnicht als Argument mit rein reichen.
Wenn eine function ein weiteres Promise zurück liefert, bezieht sich das darauf folgende then() auf die Rückgabe dieses Promises.. an sich logisch :-)
JavaScript Values von Sub-Objects per Pfad-String
Wenn man einen Key hat und auf der ersten/obersten Ebene agiert wie bei item.id ist alles einfach. Bei item.sub.moreSub.verySub.id ist es schon schwieriger.. naja eigentlich nicht und jeder hat so etwas schon mal gebastelt. Hier meine Lösung die vielleicht jemanden 5 Minuten Arbeit ersparen kann :-)
function getObjectValue(obj, path){
let curObj = obj;
const parts = path.split(".");
for(let i = 0; i < parts.length; i++){
if(curOjb[parts] !== undefinded){
curObj = curObj[parts];
}
else {
return undefined;
}
}
return curObj;
}
getObjectValue({sub:{id: 23}}, "sub.id") == 23
React mit Hooks.. echt praktisch
Man braucht ein Flag, dass sich ändert, wenn ein Refresh der Child-Component nötig wurde. Da reicht ein bool-Flag, das bei jeder Änderung seinen Zustand ändert.
Hier wird es einmal sehr gut erklärt, aber mit den neuen Hooks von React geht es sehr elegant umzusetzen.
Hier der Code aus der Parent-Component:
const[trigger,setTrigger] = useState(false);
return (
<>
<child1 onSubmit={() => {setTrigger(!trigger)}}/>
<child2 refresh={trigger}/>
</>
);
Damit child2 nun was laden kann muss man nicht mehr groß selbst prev-props mit next-props vergleichen sondern kann useEffect() verwenden:
useEffect(() => {reloadList()}, props.refresh);
Schön einfach und kompakt. Das man mit useEffect() direkt auf einzelne props/Änderungen reagieren kann, macht mir React schon sehr viel sympathischer. Erinnert mich an Watcher und Proxies aus Vue, nur sehr viel einfacher zu verwenden.
Form Generatoren in den verschiedenen Frameworks
Vue:
FormSchema Native: lief erstmal ganz gut, aber wenn sich das Schema oder das Model im State geändert hat, würde die Form nicht neu gerendert. Wenn man eine Form-Component schreibt in die verschiedene Schemas rein gericht werden können zur Laufzeit ist das echt doof. Ansonsten machte es nämlich einen guten Eindruck.
React:
react-jsonschema-form: bis jetzt das Beste nur gibt es leichte Probleme wenn man $schema mit etwas anderen als dem default-Schema rein reicht. Aber ansonsten funktioniert bis jetzt am Besten. Auch mit 3 Forms auf der Seite.
AngularJS
Angular Schema Form: Wenn man nur eine Form auf der Seite braucht funktioniert es perfekt. Wenn ich aber zwei Forms mit zwei unterschiedlichen Schemas verwende, wollte die zweite Form nicht mehr rendern. Aber eine Form allein funktionierte echt super. Leider ist AngularJS aber ja nicht mehr wirklich supported und ich hätte lieber etwas für Vue gehabt, was genau so gut funktioniert.. eben dann auch mit 2-3 Form pro Seite. Edit: Problem hat sich in Luft aufgeloest...
Meine Suche geht weiter, weil ich Vue doch lieber mag als React. Oder am Ende doch selber schreiben oder ein andere auf JSON-Schema anpassen?
Event/Action driven State-Changes
Nach einer schnellen Betrachtung wurde aber klar, dass ich da nicht viel umbauen konnte, weil die Engine schon rein der Logik wegen so implementiert wurde. Ich hab es einfach so schon gemacht ohne groß drüber nachzudenken. Ich hatte zusätzlich noch Action-Groups eingeführt, die dafür sorgen, dass immer nur die erste Action einer Gruppe ausgeführt wird (um Actors sich über die Map bewegen zu lassen, wobei alle Schritte vorberechnet sind und nicht vor dem Schritt dieser erst berechnet werden muss). Es gibt zwei Lanes: fast und slow. "slow" für das Bewegen von Actors auf der Map und "fast" für Eingaben und Dinge die an sich in Echtzeit da sein müssen. Ein kleine Verzögerung ist aber ok.
addIntervalEvent: function(eventType, eventArgs, group, lane){
this.interval.queue.push({lane: lane ? lane : 'slow',
type: eventType, args: eventArgs, parent: this.interval,
group: group});
},
performIntervallTick: function(lane){
//filter to perform events of a lane and remove this performed events
let filterCheck = [];
let render = false;
let newQueue = this.interval.queue.filter(item => {
let res = true;
if(item.lane == lane){
if(this.eventHandling[item.type] && (item.group === null || !filterCheck[item.group])){
this.eventHandling[item.type](item.args, item.parent, this);
filterCheck[item.group] = item.group;
res = false; //was performed and is removed from the queue
render = true;
}
}
return res;
});
this.interval.queue = newQueue;
//using the same method to trigger field-events
if(render){
this.globalKeyListener({keyCode: 0}, true);
this.renderViewport();
}
},
Hier bei ist der Controller der State und wird durch die Actions verändert. Eine Action wird mit einer Veränderung des State gleichgesetzt, da einmal oder zwei Rendern ohne das es nötig gewesen wäre in der Gesamtheit nichts ausmacht.
Was ich dabei gelernt habe ist, dass es schwer ist in JavaScript anders zu arbeiten, wenn man die Verarbeitung und die Ausgabe von einander entkoppelt, was gerade bei Anwendungen mit Grafik schwer ist nicht zu tun.
States, Redux... ein Selbstversuch
Ich habe mit Hilfe von anderen Seiten dann heraus bekommen. Dass Redux einen State pro Reducer hält und der alle Actions bekommt und dann mit eigener Logik, die für ihn interessanten Actions ab arbeitet. Alter State geht rein und neuer geht raus. Eine Action hat einen Typ und ein Payload. Wenn sich der State ändert, wird etwas getriggert. Aber ich fand, dass doch für einfache Beispiele zu viel Code da war um es zu verstehen.
Um also das Prinzip von Redux zu verstehen habe ich dann mal 20min investiert und mir ein ähnliches Kontrukt geschaffen. Etwas Topic orientierter mit den States, so dass man die Reducer pro Action hat, aber vom Prinzip ist es alles relativ einfach und das Bootstrapping wurde daruch auch übersichtlicher.
Die meisten Beispiele zu Redux bestehen sowie so zu 50% aus React. Aber ich wollte ja Redux verstehen und nicht Redux+React (ja.. die gibt es wirklich auf getrennt von einander!)
Hier das Ergebnis meines Selbstversuches:
const StateStore = {
states: {},
actions: {},
createState: function(name){
this.states[name] = {
data: null,
workers: [],
listeners: []
}
},
registerWorker: function(statename, action, worker){
if(this.states[statename]){
if(!this.states[statename].workers[action]){
this.states[statename].workers[action] = []
}
this.states[statename].workers[action].push(worker);
if(!this.actions[action]){
this.actions[action] = [];
}
this.actions[action].push(statename);
}
},
registerListener: function(statename, listener){
if(this.states[statename]){
this.states[statename].listeners.push(listener);
}
},
action: function(action, payload){
if(this.actions[action]){
this.actions[action].forEach((statename) => {
let changes = false;
this.states[statename].workers[action].forEach((worker) => {
const stateCopy = JSON.parse(JSON.stringify(this.states[statename].data));
let newState = worker(this.states[statename].data, payload);
if(newState != stateCopy){
changes = true;
}
this.states[statename].data = newState;
});
if(changes){
this.states[statename].listeners.forEach((func) => {func(this.states[statename].data)});
}
});
}
}
};
Dazu mein kleiner Test:
StateStore.createState("test");
StateStore.registerWorker("test", "inc", (state, payload) => {
if(state === null){
return 0;
}
else {
return ++state;
}
});
StateStore.registerWorker("test", "dec", (state, payload) => {
if(state === null){
return 0;
}
else {
return --state;
}
});
StateStore.registerWorker("test", "dn", (state, payload) => {
console.log("(" + state + ") do nothing");
//change-listeners are not triggert
return state;
});
StateStore.registerListener("test", (state) => {console.log(state)});
StateStore.action("inc", null); //0
StateStore.action("inc", null); //1
StateStore.action("inc", null); //2
StateStore.action("dn", null); //(2) do nothing
StateStore.action("inc", null); //3
StateStore.action("dec", null); //2
Lief erstaunlicher Weise direkt wie es sollte (nach dem ein kleiner Fehler bei einer falschen Variablen behoben war).
Damit sollte man durch aus das gesamte Statemanagement einer Componente abbilden können. Wenn man nun noch Events verwenden würde, geht es schon stark in Richtung Reactive-Programming.
https://github.com/annonyme/jsstatestore
References vs Callback-Functions in Vue und React
Bei React müßte ich eine callback-funktion mit in die Unterkomponente reinreichen und bei der Änderung diese antriggern, damit die Oberkomponente die geänderten Daten in denen eigenen State wieder übernehmen kann. Also wird in dem Sinne jede Reference, wie sie in Vue.js existiert hätte, durch eine selbst zu implementierende callback-Funktion ersetzt?
Macht das Sinn? Erzeugt es nicht nur mehr Arbeit und Code? Wo genau ist da der Vorteil? Oder habe ich da was falsch verstanden bei React?
Irgendwie werde ich mit React nicht wirklich warm. Es sind so Kleinigkeiten, die mich da stören oder mir das Gefühl geben, einiges wäre unnötig kompliziert in React.
Proxies in JavaScript
Das geht zum Glück an sich ganz einfach.
<html>
<head>
<script type="text/javascript">
var x = {value: ""};
var xHandler = {
set: function(target, property, value, receiver) {
target[property] = value;
console.log(target);
}
};
var xProxy = new Proxy( x, xHandler );
</script>
</head>
<body>
<input type="text" onkeyup="xProxy.value=this.value;">
</body>
</html>
Damit kann auch bidirektionales Binding zwischen Model und HTML-Element implementieren.
Vue.js: v-for mit Start-Index > 0
Shopware: Eigenes Einkaufswelten Element
Elemente von Einkaufswelten sind ein wirklich nicht so einfaches Thema, wenn man die reine PHP-Schiene verlässt und mit ExtJS arbeitet. Aber diese Mischung im Vimoe-Element Beispiel finde ich jetzt auch nicht so wirklich toll. Felder hier, Stores da.. man sollte alles auf einen Blick haben und wenn man mit JavaScript arbeitet muss man das Plugin auch nicht öfters neu installieren sondern nur den Cache löschen und das Shopware-Backend neu laden.
Init-Methode einer einfachen kleinen GUI mit einem Feld zur Artikel-Auswahl:
initComponent: function() {
var me = this;
me.callParent(arguments);
me.articleStore = Ext.create('Ext.data.Store', {
model: 'Shopware.model.Dynamic',
proxy: {
type: 'ajax',
url: '{url controller="EntitySearch" action="search"}?model=Shopware\\Models\\Article\\Article',
reader: Ext.create('Shopware.model.DynamicReader')
}
});
me.articles = Ext.create('Ext.form.field.ComboBox', {
name: 'article',
fieldLabel: 'Artikel',
store: me.articleStore,
allowBlank: false,
valueField: 'id',
displayField: 'name'
});
me.articles.setVisible(true);
me.elementFieldset.add(me.articles);
},
Darin sieht man wie man einen eigenen Store mit AJAX-Backend definiert und diesen in der ComboBox verwendet, die man wiederum in den Element-Einstellungen anzeigt. Wenn man schon mal soweit ist, steht einen auf dem Weg zu Einkaufswelten mit eigenen Elementen in Shopware nicht mehr viel im Weg.
Datenschutz DSGVO Cookie-Overlay V.2
<a href="#" cookie-optout-link>Doch keine Cookies!</a>
<div id="cookiequestion">
<style type="text/css">
#cookiequestion{
position: fixed;
text-align: center;
font-weight: bold;
left: 0;
bottom: 0;
border: 2px solid #BBB;
background-color: #DDD;
padding: 10px;
border-radius: 5px;
width: 100%;
}
</style>
<script type="text/javascript">
function cookieclose(val){
var storage = window.localStorage;
if(val && val > 0){
storage.setItem("cookiequestion_val", val);
}
else {
val = storage.getItem("cookiequestion_val");
}
if(val && val > 0){
document.getElementById("cookiequestion").style.display="none";
if(val > 1) {
var event = new Event('cookiequestion_clicked', {value: val, overlay: document.getElementById("cookiequestion")});
document.dispatchEvent(event);
//or do other things here
}
}
//create optional optout-links
var elements = document.querySelectorAll("[cookie-optout-link]");
var func = function(){
return function(){
cookieclose(1);
};
};
for(var i=0; i < elements.length; i++){
elements.addEventListener("click", func());
}
};
cookieclose(0);
</script>
<p>
Erlauben von Tracking/Cookies?
</p>
<p>
<button onclick="cookieclose(2);">ja</button>
<button onclick="cookieclose(1);">nein</button>
</p>
</div>
Datenschutz DSGVO Cookie-Overlay
Besuchern die Seite zu verwehren halte ich für falsch. Belohnungen sind besser als Strafen.
Hier eine Plain-JavaScript Lösung, bei der man die Ausführung von AdSense oder Analytics per Event triggern kann. Wenn es einmal bestätigt wurde, merkt sich der Browser die Einstellung und behält das Verhalten bei. Es wird im localStorage gespeichert und dort kann man die Auswahl auch wieder löschen.
Vielleicht hilft das ja jemanden :-)
<div id="cookiequestion">
<style type="text/css">
#cookiequestion{
position: fixed;
text-align: center;
font-weight: bold;
left: 0;
bottom: 0;
border: 2px solid #BBB;
background-color: #DDD;
padding: 10px;
border-radius: 5px;
width: 100%;
}
</style>
<script type="text/javascript">
function cookieclose(val){
var storage = window.localStorage;
if(val && val > 0){
storage.setItem("cookiequestion_val", val);
}
else {
val = storage.getItem("cookiequestion_val");
}
if(val && val > 0){
document.getElementById("cookiequestion").style.display="none";
if(val > 1) {
var event = new Event('cookiequestion_clicked', {value: val, overlay: document.getElementById("cookiequestion")});
document.dispatchEvent(event);
//or do other things here
}
}
};
cookieclose(0);
</script>
<p>
Erlauben von Tracking/Cookies?
</p>
<p>
<button onclick="cookieclose(2);">
ja
</button>
<button onclick="cookieclose(1);">
nein
</button>
</p>
</div>
Old-Shit-Releases: cJS
Teil 1: cJS
Das kleine JavaScript Framework, mit dem genau so Controller entwickeln konnte wie mit JavaFX.. es was fast eine 1:1-Kopie. MP4toGIF.com nutzt es und es läuft gut. Es hat kein bidirectional-Binding wie Angular. Am Ende wurde eine Lib für AngularJS dafür, die ich auch oft verwendet habe. Das eigene Framework habe ich nie weiter entwickelt, dabei konnte man Controller ondemand per require.js nachladen und so lustige Dinge. Controller konnten Controller anhand des Namens laden.. wie Services in Symfony..
letzte Version und Beispiele.
Macht damit was ihr wollt :-)
Es wird Zeit für Angular...
Wenn es mir nicht gefällt gibt es ja noch immer Knockout.js. Lust mein eigenes kleines cJS-Framework doch nochmal weiter zu entwickeln habe ich dann doch nicht. Dem fehlt einfach eine gute Template-Engine und so eine zu schreiben oder einzubauen, wäre etwas zu viel Arbeit.
Mal gucken bei welchen Framework ich am Ende dann landen werde.
Pop-Up Messages im Shopware-Backend auslösen
Shopware.Notification.createGrowlMessage('title', 'message', 'growl');
Besser sollte man sich im Controller die Messages separat anlegen. Da kann man auch direkt {s} Smarty-Tags drin verwenden für die Text-Snippets.
messages:{
success:{
title:'',
error:'',
growl:''
},
fail:{
title:'',
error:'',
growl:''
}
},
Ext.Ajax.request({
url: "",
params: {},
success: function(response, opts){
var result = Ext.decode(response.responseText);
if(result.success){
Shopware.Notification.createGrowlMessage(msgs.success.title, msgs.success.error, msgs.success.growl);
}
else{
Shopware.Notification.createGrowlMessage(msgs.fail.title, msgs.fail.error, msgs.fail.growl);
}
}
});
Damit ist dieser Teil an sich sehr viel einfacher als der Rest der Backend-UI Entwicklung.
Shopware: Einkaufswelten Code-Element
function (x) {
alert(x);
}
oder
{literal}
function(x){alert(x);}
{/literal}
funktionieren.
Shopware: Unable to find parent for query Array
Unable to find parent for query Array ( [controller] => Items )
In der menu.xml den Eintrag für <parent identifiedBy="controller"> nochmals prüfen.
Überschreiben bei ImageData
Das geht nicht:
imageData.data = frame;
Aber das geht:
for(var ifr=0; ifr<frame.length;ifr++){
imageData.data[ifr] = frame[ifr];
}
Ein kurzer Blick auf SAP OpenUI 5
Angular 2 sah immer interessant aus, aber irgendwie habe ich es dann doch nicht geschafft mir es mir als anzusehen. Dabei schreckte mich eher Typescript ab, was aber auch ja optional ist. Andere Sprachen und dann alles zu kompilieren mag ich bei JavaScript nicht so sehr.. da waren meine Erfahrungen mit Coffee-Script zu.. ja.. ernüchternd. Die Umgebung zum Entwickeln auf zu setzen ist vergleichbar mit dem Aufwand bei Java oder PHP. Das Debugging ist mit nativen JavaScript sehr viel einfacher gewesen.
Mit Shopware kam dann Ext JS in mein Leben. Seit Groupware und Tine 2.0 habe ich alles versucht diesem Framework aus dem Weg zu gehen. Man kommt damit zu recht, aber es ist echt nicht einfach sich dort einzuarbeiten und mal schnell eine kleine UI zu basteln, ohne sich wirklich einmal mit dem Framework auseinander zu setzen. Angular JS ist da sehr viel einfacher, aber dafür hat man eben auch nicht diese komplexe UI.
Um ehrlich zu sein, würde ich dann aber bei solchen UIs das Ext JS-Framework anderen Frameworks aus dem Desktop-Bereich wie SWT, Swing oder JavaFX vorziehen.
Heute habe ich mich mal durch die Dokumentation und die Beispiele von SAP OpenUI 5
geklickt. Es sieht etwas nach Ext JS aus, aber irgendwie spricht es mich spontan eher an. Nicht wie das erste mal mit AngularJS.. gesehen.. verstanden .. und gleich erfolgreich eingesetzt.Aber mein Gefühl war besser als bei Ext JS .. so ungefähr auf Angular 2 Niveau.
Vielleicht habe ich ja mal die Gelegenheit was damit zu machen. Momentan habe ich weder Projekt noch Zeit dafür. Aber es sieht so interessant aus, dass ich gerne was dafür hätte... gerade der Planning Calendar sieht echt gut aus.
Blog-entries by search-pattern/Tags: