IBM ConnectED 2015 - AD302 - Responsive Application Development for XPagesbeglee
Bootstrap has recently been integrated into the XPages core framework, allowing the creation of sleek, polished, responsive XPages applications. Using this new feature your apps will look great, with a consistent look and feel from the web browser to the mobile experience on phones & tablets. This session will demonstrate all of the tools now at your disposal, such as the Bootstrap-ized XPages controls, icons, fonts, CSS, new controls, themes and jQuery! We'll show you why this new feature is one that you can't ignore.
IBM ConnectED 2015 - AD302 - Responsive Application Development for XPagesbeglee
Bootstrap has recently been integrated into the XPages core framework, allowing the creation of sleek, polished, responsive XPages applications. Using this new feature your apps will look great, with a consistent look and feel from the web browser to the mobile experience on phones & tablets. This session will demonstrate all of the tools now at your disposal, such as the Bootstrap-ized XPages controls, icons, fonts, CSS, new controls, themes and jQuery! We'll show you why this new feature is one that you can't ignore.
Essentiële ‘theme’ vaardigheden voor het aanpassen van de look&feel van een Magento webshop
Duur: 16 uur
Doelgroep: Deze cursus is geschikt voor front-end ontwikkelaars welke de Magento look&feel aanpassen. Studenten dienen ervaring te hebben met het aanpassen van complexe websites.
Vereisten: Studenten moeten een goede kennis hebben van HTML&CSS. Studenten dienen ervaring the hebben met het rechtstreeks in de code aanpassen van HTML & CSS zonder WYSIWYG editor. Ervaring met FTP is een vereiste. Enige ervaring met PHTML en PHP is handig, maar niet vereist. Daarnaast dient de student al enige ervaring the hebben met de Magento functionaliteiten.
Materialen: Elke student dient zelf een laptop mee te brengen met daarop een tekst editor en een FTP client. Een Magento 1.7 versie zal voor oefeningen beschikbaar worden gesteld op het internet.
Doel
Deze cursus geeft een goede introductie tot het Magento template systeem en het toepassen de beste manier om aanpassing te realiseren. De cursus geeft voorbeelden en hands-on oefeningen. Studenten zullen de fundamenten van Magento templating systeem begrijpen en weten hoe de thema’s werken en hoe de componenten zoals lay-outs, page templates en block templates aangepast kunnen worden.
Cursus overzicht
Magento template systeem – architectuur en componenten, uitleg over de werking en structuur van het template systeem, de componenten en hoe deze samenwerken
Werken met thema’s – Leer hoe een thema toegepast wordt, inclusief de directory structuur, ‘fallback’ methode en website bereik.
‘best practice’ theme aanpassingen – Leer wat wel en niet aangepast kan worden op thema niveau, incl. het aanpassen wat zonder thema aanpassingen. Leer een goede manier om de website aan te passen.
Werken met Pagina templates, lay-outs en block templates – Begrijp het doel, structuur en relatie van alle componenten van het Magento template systeem. Leer op welk niveau de templates het best aangepast kunnen worden.
Maak een eigen ‘Default’ Theme – Leer hoe je zelf een ‘design package’ aanmaakt als startpunt voor het verdere ontwerp.
Maak een module met aangepaste theme componenten - leer hoe je een aangepaste module met aangepaste lay-out kunt gebruiken in Magento.
De webshop look&feel en functionaliteit aan te passen
Nieuwe thema’s op een goede manier aan te maken, zodat updates later mogelijk zijn.
Na deze cursus zijn de studenten in staat:
De webshop look&feel en functionaliteit aan te passen
Nieuwe thema’s op een goede manier aan te maken, zodat updates later mogelijk zijn.
Complexe pagina’s gebruiksvriendelijk? Dat klinkt als een vreemde combinatie!
Heb jij ook wel eens een pagina gebouwd voor een klant bestaande uit meerdere kolommen en rijen, tabs, embedded-video, afbeeldingen met lightbox effect etc… ?
Vaak wordt dit opgelost door meerdere extensies in te zetten en aan elkaar te knopen. Maar kon de klant daarna nog eenvoudig aanpassingen maken zonder de pagina om zeep te helpen of naar 10 verschillende pagina’s in het beheer te gaan? En hoe zag die pagina eruit in de zoekresultaten van de site?
Met Perfect Content Builder kan je zulke pagina’s opbouwen terwijl ze toch nog op een gebruiksvriendelijke manier voor je klant te bewerken zijn. In deze presentatie laten we zien hoe deze extensie het werken aan de site voor jou en je klant eenvoudig maakt!
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayoutsHans Kuijpers
Waarom een 3rd party extensie gebruiken als Joomla core de benodigde content al bevat? Een kalender, slideshow, carrousel en smoelenboek. Allemaal met Joomla, zonder uitbreiding van 3th party extensies.
Met deze workshop legt Hans Kuijpers aan de hand van vele voorbeelden uit hoe je template overrides en jLayouts toepast. Als deelnemer ga je ook zelf aan de slag. Dus neem je laptop mee en zorg ervoor dat je met een Joomla website aan de slag kunt. We gaan dingen stuk maken, dus pak niet de website die nu live staat. Voorkennis van PHP, HTML, JS en CSS is wel handig. Een dosis Gezond BoerenVerstand is nog veel belangrijker.
Deze workshop was op vrijdag 17 mei 2019 tijdens de Nederlandse JoomlaDagen. #jd19nl
Start vandaag met het maken van eigen Joomla modules!
Wat zijn modules, en hoe kan een zelfgemaakte module het beheer van Joomla versimpelen? We leggen de basis uit van PHP, MySQL en XML en laten zien hoe je eenvoudig zelf een module maakt.
Deze presentatie is gegeven bij de Joomladagen 2016 en verschillende lokale Joomla User Groups.
Essentiële ‘theme’ vaardigheden voor het aanpassen van de look&feel van een Magento webshop
Duur: 16 uur
Doelgroep: Deze cursus is geschikt voor front-end ontwikkelaars welke de Magento look&feel aanpassen. Studenten dienen ervaring te hebben met het aanpassen van complexe websites.
Vereisten: Studenten moeten een goede kennis hebben van HTML&CSS. Studenten dienen ervaring the hebben met het rechtstreeks in de code aanpassen van HTML & CSS zonder WYSIWYG editor. Ervaring met FTP is een vereiste. Enige ervaring met PHTML en PHP is handig, maar niet vereist. Daarnaast dient de student al enige ervaring the hebben met de Magento functionaliteiten.
Materialen: Elke student dient zelf een laptop mee te brengen met daarop een tekst editor en een FTP client. Een Magento 1.7 versie zal voor oefeningen beschikbaar worden gesteld op het internet.
Doel
Deze cursus geeft een goede introductie tot het Magento template systeem en het toepassen de beste manier om aanpassing te realiseren. De cursus geeft voorbeelden en hands-on oefeningen. Studenten zullen de fundamenten van Magento templating systeem begrijpen en weten hoe de thema’s werken en hoe de componenten zoals lay-outs, page templates en block templates aangepast kunnen worden.
Cursus overzicht
Magento template systeem – architectuur en componenten, uitleg over de werking en structuur van het template systeem, de componenten en hoe deze samenwerken
Werken met thema’s – Leer hoe een thema toegepast wordt, inclusief de directory structuur, ‘fallback’ methode en website bereik.
‘best practice’ theme aanpassingen – Leer wat wel en niet aangepast kan worden op thema niveau, incl. het aanpassen wat zonder thema aanpassingen. Leer een goede manier om de website aan te passen.
Werken met Pagina templates, lay-outs en block templates – Begrijp het doel, structuur en relatie van alle componenten van het Magento template systeem. Leer op welk niveau de templates het best aangepast kunnen worden.
Maak een eigen ‘Default’ Theme – Leer hoe je zelf een ‘design package’ aanmaakt als startpunt voor het verdere ontwerp.
Maak een module met aangepaste theme componenten - leer hoe je een aangepaste module met aangepaste lay-out kunt gebruiken in Magento.
De webshop look&feel en functionaliteit aan te passen
Nieuwe thema’s op een goede manier aan te maken, zodat updates later mogelijk zijn.
Na deze cursus zijn de studenten in staat:
De webshop look&feel en functionaliteit aan te passen
Nieuwe thema’s op een goede manier aan te maken, zodat updates later mogelijk zijn.
Complexe pagina’s gebruiksvriendelijk? Dat klinkt als een vreemde combinatie!
Heb jij ook wel eens een pagina gebouwd voor een klant bestaande uit meerdere kolommen en rijen, tabs, embedded-video, afbeeldingen met lightbox effect etc… ?
Vaak wordt dit opgelost door meerdere extensies in te zetten en aan elkaar te knopen. Maar kon de klant daarna nog eenvoudig aanpassingen maken zonder de pagina om zeep te helpen of naar 10 verschillende pagina’s in het beheer te gaan? En hoe zag die pagina eruit in de zoekresultaten van de site?
Met Perfect Content Builder kan je zulke pagina’s opbouwen terwijl ze toch nog op een gebruiksvriendelijke manier voor je klant te bewerken zijn. In deze presentatie laten we zien hoe deze extensie het werken aan de site voor jou en je klant eenvoudig maakt!
JD19NL - Joomla Template Overrides, Alternate Layouts en JLayoutsHans Kuijpers
Waarom een 3rd party extensie gebruiken als Joomla core de benodigde content al bevat? Een kalender, slideshow, carrousel en smoelenboek. Allemaal met Joomla, zonder uitbreiding van 3th party extensies.
Met deze workshop legt Hans Kuijpers aan de hand van vele voorbeelden uit hoe je template overrides en jLayouts toepast. Als deelnemer ga je ook zelf aan de slag. Dus neem je laptop mee en zorg ervoor dat je met een Joomla website aan de slag kunt. We gaan dingen stuk maken, dus pak niet de website die nu live staat. Voorkennis van PHP, HTML, JS en CSS is wel handig. Een dosis Gezond BoerenVerstand is nog veel belangrijker.
Deze workshop was op vrijdag 17 mei 2019 tijdens de Nederlandse JoomlaDagen. #jd19nl
Start vandaag met het maken van eigen Joomla modules!
Wat zijn modules, en hoe kan een zelfgemaakte module het beheer van Joomla versimpelen? We leggen de basis uit van PHP, MySQL en XML en laten zien hoe je eenvoudig zelf een module maakt.
Deze presentatie is gegeven bij de Joomladagen 2016 en verschillende lokale Joomla User Groups.
3. AppliGate
Opleidingsinstituut
Sinds 1993 is AppliGate Consultancy een
IBM Authorized Independent Training Provider
voor:
Lotus Notes & Domino
WebSphere
WebSphere Portal
Lotus Connections 2.5
4. Dojo Core
"A Toolkit by the Dojo Foundation featuring
DHTML and AJAX functions".
"Dojo gives you a rich set of utilities for building responsive
applications".
"The Dojo Core is the result of years of evolution and
refinement. Built by JavaScript experts".
IBM gebruikt Dojo in Domino 8.5. In 8.5.1 Dojo versie 1.3.2
5. Dojo Dijit
Dojo Dijit bevat de Interface Widgets. Een widget is een
grafische User Interface (UI) element.
Textbox
Listbox
Button
In Domino XPages heet een UI element een Control.
In Domino 8.5.1 kunnen aan controls een aantal Controls Dijit
widget attributen worden toegekend, zoals aan het Panel
Control.
6. dijit.layout.BorderContainer
Geeft een webpagina een flexibele vaste indeling. De
BorderContainer heeft vijf gebieden.
Het "center" pane
past zich aan de
grootte van het
Browser window
aan.
In Domino 8.5
met <div>'s.
In Domino 8.5.1 met de Panel Container Control properties.
7. BorderContainer in Domino 8.5.1
Een outer Panel Container control, die vijf inner Panel
Container control's heeft.
Outer Panel wordt de Dojo dijit.laylout.BorderContainer. De
inner Panels worden dijit.layout.ContentPane's.
De volgende drie stappen:
1. Activeer XPage dojo.ParseOnLoad en dojoTheme;
2. Definieer de Dojo widgets;
3. Definieer voor de outer Panel de Dojo widget en attributen.
12. Attributen
Attributen dijit.layout.BorderContainer:
Naam Type Opmerking
design String "headline" of "sidebar"
persist Boolean Splitter posties bewaren als cookie
Attributen dijit.layout.ContentPane:
Naam Type Opmerking
region String Positie: "top", "left", "center", "right", "bottom"
splitter Boolean Handvat splitter
13. Dojo ContentPane
De definitie van de "center" ContentPane.
<xp:panel dojoType="dijit.layout.ContentPane">
<xp:this.dojoAttributes>
<xp:dojoAttribute name="region" value="center">
</xp:dojoAttribute>
<xp:dojoAttribute name="splitter" value="true">
</xp:dojoAttribute>
<xp:dojoAttribute name="style" value="border: 1px solid #ccc;">
</xp:dojoAttribute>
</xp:this.dojoAttributes>
</xp:panel>
14. Attributen (vervolg)
Attributen dijit.layout.AccordionContainer:
Naam Type Opmerking
region String Positie: "top", "left", "center", "right", "bottom".
persist Boolean Geselecteeerde AccordionPane als cookie
opslaan.
splitter Boolean Handvat splitter.
maxSize Integer Maximale breedte in pixels. Default breedte wordt
via de style attribute geregeld.
Attributen dijit.layout.AccordionPane:
Naam Type Opmerking
title String Title van het pane
16. dijit.form.DateTextBox
Kalender openen, zodra de cursor in een Date Time Picker
control wordt gezet. Selecteer eerst de control, dan All
Properties -> dojo -> dojoType.
<xp:inputText value="#{dominoDocument1.dateHired}" id="dateHired1">
<xp:this.converter>
<xp:convertDateTime type="date" dateStyle="medium">
</xp:this.converter>
<xp:dateTimeHelper dojoType="dijit.form.DateTextBox
</xp:dateTimeHelper>
</xp:inputText>
17. Computed Voorbeeld
Dijit object creëren en koppelen aan XPages control: twee
initialisatie parameters. Eerste parameter is in JSON formaat
en bevat de attributen voor de (Dijit) Textarea.
<xp:inputTextarea id="inputTextarea1"
value="#{dominoDocument1.remark}">
</xp:inputTextarea>
<xp:scriptBlock id="scriptBlock2">
<xp:this.value>
<![CDATA[new dijit.form.Textarea(
{name: "#{id:inputTextarea1}", // eerste argument
value: "",
style: "width: 80%;",
escape: false}, // nu volgt het tweede argument
XSP.getElementById("#{id:inputTextarea1}")
);]]>
</xp:this.value>
</xp:scriptBlock>
18. Regular Expressions
Selecteer Edit Box control, dan: All Properties -> data ->
validators. Klik op het toetsje met +-teken en kies uit de lijst xp:
validateConstraint. Tik foutboodschap en regular expression in.
<xp:inputText value="#{dominoDocument1.email}" id="email1" style="
width:191.0px">
<xp:this.validators>
<xp:validateConstraint message="Wrong e-mail address.">
<xp:this.regex><![CDATA[^([0-9a-zA-Z]([-.w]*[0-9a-zA-Z])*@
([0-9a-zA-Z][-w]*[0-9a-zA-Z].)+[a-zA-Z]{2,9})$]]>
</xp:this.regex></xp:validateConstraint>
</xp:this.validators>
</xp:inputText>
Regular expressions library: http://regexlib.com/
19. Custom Control's
Vergelijk een Custom Control met een Domino Subform.
Een Custom Control kan in een andere Custom Control genest
worden.
View Control CC van Tibor Koch. Vergelijk dit met @Command
([CollapseAll]) en @Command([ExpandAll]).
Zie voor de code de XPage wiki van AppliGate.
OpenNTF heeft twee Custom Control's:
Fisheye CC
Login CC
20. Fisheye Custom Control
Download de XPagesFisheyeControl.nsf.
Kopieer de volgende bestanden naar eigen applicatie:
ccXPagesFisheye.xsp, jsXPagesFisheyeControlClient,
jsXPagesFisheyeControlServer en cssFisheyeControl.css.
Definieer itemTitles, itemLinks en itemImgs, bijvoorbeeld:
<xc:ccXPagesFisheyeControl
itemTitles="item1, item2"
itemLinks="http://www.openntf.org, http://www.openntf.org"
itemImgs="/favicon.ico, /favicon.ico">
</xc:ccXPagesFisheyeControl>
21. Waarde doorgeven aan Custom Control
Voorbeeld met View Control van Tibor Koch. Je kunt meerdere
Views panels op een pagina hebben. Hoe geef je de id van het
juiste panel door aan de CC?
<xc:ccViewControls viewPanelName="ccAccordionPaneViewPanel1"></xc:ccViewControls>
In CC, definieer onder Property Definition:
naam van de property b.v.: viewPanelName;
maak property: Required;
In de formule naar de property verwijzen:
var viewPanel = getComponent(compositeData.viewPanelName);
22. Java
In server side JavaScript kan naast @Functions ook Java
worden gebruikt:
var personBO = new nl.appligate.bo.PersonBO();
var person = personBO.getPersonById(getComponent("id1").value);
getComponent("name1").value = person.getName();
getComponent("email1").value = person.getEmail();
Java classes in het
Java Perspectief (Window ->
Open Perspective -> Other... ->
Java) definiëren onder de
folder Local van de database.
23. Computed Window Title
In de Global Properties van de XPage kun je een Page
(Window) Title en Icon definiëren, ook computed:
var name = getComponent("name1").getValue();
if (name == null) {
name = "New Employee";
}
getComponent("label1").setValue(name);
view.setPageTitle(name);
24. Language Localization
Omschrijvingen op de pagina aanpassen aan de
taalinstellingen van de browser.
Domino genereert automatisch de .properties bestanden voor
elke XPage. Aanzetten in de Application Properties op de
XPage tab.
Daarna activeren via Project ->
Clean.
Bestanden worden automatisch
aangepast bij wijzigingen.