Wilhelm Faber

Entwicklung der Mobile Apps, Webentwicklung, technischer Blog

1. August 2017
nach Ferohs
Keine Kommentare

Deine erste React-Webanwendung, Crashkurs!

1. Verzeichnisstruktur

2. Init und Install

Initialisieren eines Projektes


npm init

Press ^C at any time to quit.
package name: (probe)
version: (1.0.0)
description: first app
entry point: (index.js)
test command:
git repository:
keywords:
author: Wilhelm Faber
license: (ISC)
About to write to /Users/foo/Desktop/Probe/package.json:

{
„name“: „probe“,
„version“: „1.0.0“,
„description“: „first app“,
„main“: „index.js“,
„scripts“: {
„test“: „echo \“Error: no test specified\“ && exit 1″
},
„author“: „Wilhelm Faber“,
„license“: „ISC“
}

Installieren von react und react-dom


npm install --save react react-dom

Installieren von Übersetzern


npm install --save babel-core babel-loader babel-preset-es2015 babel-preset-react

Installieren von webpack


npm install --save webpack@3

3. Erste Komponente

/Probe/app/components/MainComponent.js

1
2
3
4
5
6
7
8
9
10
11
12
13
import React from 'react';
import ReactDOM from 'react-dom';
 
class MainComponent extends React.Component {
    render () {
        return (
          <div>
            <div>Hallo world</div>
          </div>
        ) 
    }
} 
ReactDOM.render(, document.getElementById('app'));
import React from 'react';
import ReactDOM from 'react-dom';

class MainComponent extends React.Component {
    render () {
        return (
          <div>
            <div>Hallo world</div>
          </div>
        ) 
    }
} 
ReactDOM.render(, document.getElementById('app'));

4. Webpack-Konfiguration

/Probe/webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
module.exports = {
    entry : './app/components/MainComponent.js',
    output : {
        filename: 'public/bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    }
}
module.exports = {
	entry : './app/components/MainComponent.js',
	output : {
		filename: 'public/bundle.js'
	},
	module: {
		loaders: [
			{
				test: /\.js$/,
				exclude: /node_modules/,
				loader: 'babel-loader',
				query: {
					presets: ['es2015', 'react']
				}
			}
		]
	}
}

5. Bindung an die Ausgabe

/Probe/public/index.html

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"></meta>
        <title>React</title>
    </head>
    <body>
        <div id="app"></div>
        <script src="bundle.js"></script>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"></meta>
        <title>React</title>
    </head>
    <body>
        <div id="app"></div>
        <script src="bundle.js"></script>
    </body>
</html>

6. Ausführen


webpack -w

Nun die index.html mit dem Chrome Browser öffnen und das Ergebnis beurteilen 🙂

9. September 2015
nach Ferohs
Keine Kommentare

Picasso, Open Source Library für Android

Picasso, Open Source Library im Bezug auf das Laden, Cachen und Anzeigen der Bilder im Hintergrund.

http://square.github.io/picasso/

1
2
3
4
5
6
7
8
Picasso.with(context)
       .load(url)
       .placeholder(R.drawable.placeholder)
       .error(R.drawable.ic_error_fallback)
       .resize(imgWidth, imgHeight)
       .centerCrop()       
       .rotate(90)
       .into(image);
Picasso.with(context)
       .load(url)
       .placeholder(R.drawable.placeholder)
       .error(R.drawable.ic_error_fallback)
       .resize(imgWidth, imgHeight)
       .centerCrop()       
       .rotate(90)
       .into(image);

Siehe auch:

Universal Image Loader
Volley
UrlImageViewHelper

19. Juni 2015
nach Ferohs
Keine Kommentare

Vertikale Positionierung eines Divs in einem anderen Div

Gute Beschreibung mit 3 Ansätzen wird hier beschrieben.

Ich bevorzuge folge Lösung, dabei müssen folgende Punkt beachtet werden:

– divs müssen Block-Elemnte sein. Der innere Div inline-block
– line-height des äußeren Divs muss genau groß wie die Höhe sein

1
2
3
4
5
6
7
8
.block {
  height: 120px;
  line-height: 120px;
}
.inner {
  display: inline-block;
  vertical-align: middle;
}
.block {
  height: 120px;
  line-height: 120px;
}
.inner {
  display: inline-block;
  vertical-align: middle;
}

27. März 2014
nach Ferohs
Keine Kommentare

Teiltransparente Flächen unter Android

Beispiel <TextView android:background=“#AARRGGBB“>…</TextView>

AA – Alphakanal

Hex Opacity Values:
100% — FF
95% — F2
90% — E6
85% — D9
80% — CC
75% — BF
70% — B3
65% — A6
60% — 99
55% — 8C
50% — 80
45% — 73
40% — 66
35% — 59
30% — 4D
25% — 40
20% — 33
15% — 26
10% — 1A
5% — 0D
0% — 00
—————————-

RR – red

GG – green

BB – blue

bedeutet, dass die weiße Hintergrund mit 60%-tiger Transparenz folgendermassen angegeben wird: #99FFFFFF

1. Februar 2014
nach Ferohs
Keine Kommentare

Nettorechner 2014

Nettorechner geht in die nächste Runde und hat ein Update für das Jahr 2014 erfahren. Die App wartet auf die Freigabe und ist hoffentlich bald verfügbar.

7. Januar 2014
nach Ferohs
Keine Kommentare

FF-OS möchte Smart-Tv erobern

Laut heise.de möchte FF-OS Smart-Tv erobern. Dazu habe ich einen klaren Statement: „Nein, danke!“. Es reicht ja schon, dass mein Rechner hängt sobald FireFox sich 2Gb Ram wegen schlechten Speicherverwaltung reserviert. Da kann ich auf meinem Tv darauf ruhig verzichten 🙂

19. Dezember 2013
nach Ferohs
2 Kommentare

Typo3, width und height Attribute bei den Bildern entfernen.

Bilder aus dem gepflegten Kontent werden vorgerechnet und mit Attributen „width“ und „height“ vorgesehen. Dies stört bei der Erstellung der Responsive-Templates.

Eine Lösung hierzu ist das entfernen der Attribute. Dies ist mit dem folgenden TypoScript möglich:

1
2
3
4
5
6
7
8
9
10
11
12
tt_content.image.20.stdWrap.parseFunc.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib {
  width.unset = 1
  height.unset = 1
}
tt_content.textpic.20.stdWrap.parseFunc.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib {
  width.unset = 1
  height.unset = 1
}
lib.parseFunc_RTE.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib {
  width.unset = 1
  height.unset = 1
}
tt_content.image.20.stdWrap.parseFunc.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib {
  width.unset = 1
  height.unset = 1
}
tt_content.textpic.20.stdWrap.parseFunc.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib {
  width.unset = 1
  height.unset = 1
}
lib.parseFunc_RTE.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib {
  width.unset = 1
  height.unset = 1
}

14. Dezember 2013
nach Ferohs
Keine Kommentare

Gingerbread ist wie IE7 und will einfach nicht sterben

Interessante Statistik über die Nutzung der Androidversionen findet man auf der Developersseite.

Dashboards  Android Developers

 

Die 2.3.* Version scheint tatsächlich viel genutzt zu werden und ist einfach nicht tot zu kriegen. Ich vermutte stark, es sind noch die alten Samsunggeräte wie Galaxy S oder Galaxy S Plus.

Ich muss an dieser Stelle zugeben, dass auch ich im Besitzt eines Galaxy S Plus bin. Allerdings läuft da schon längst ein Cyanogenmod. Und wenn es nicht der kleine Ram von 512 Mb wäre, wäre ich mit dem Gerät noch super zufrieden 🙂

13. Dezember 2013
nach Ferohs
Keine Kommentare

Typo3 hält Einzug

Ein weiterer Bestandteil meiner Projekte seit Kurzem heißt Typo3. In einem direkten Vergleich mit papayaCms würde ich behaupten, dass die Einstiegshürde, allein durch die Benutzung des eigenen proprietären Templatescriptes, um einiges höher ist. Auch die Bedienung im Backend (obwohl viel mit Ajax) sehr gewöhnungsbedürftig und nicht intuitiv. Am Meisten beigestern mich die viele nichts aussagende Fehlermeldungen.

Hier ist ein beispiel der konfiguration für die Ausgabe der Bilder aus dem Kontent mit einer bestimmten CSS-Klasse:

tt_content.textpic.20.1.params = class=“myClass“

Alles klar soweit? „20.1“ ist eben sehr Aussagekräftig 🙂

Witzig ist auch der Vergleich zwischen TypoScript und XSLT der Typo3-Macher.

Free Google Page Rank

Social Widgets powered by AB-WebLog.com.