Twitter Bootstrap

Med Twitter Bootstrap er det nemt at lave et pænt og responsivt layout der virker på alle skærm størrelser. Et flot eksempel er CollaborationToday.info hvor Per Lausten har lavet Bootstrap delen – alt er selvfølgelig lavet med XPages.

Bootstrap håndterer et fluid grid med 12 kolonner. Udvalgte elementer kan nemt vises/skjules på forskelige devices ved at give dem en class:

  • .visible-phone / .hidden-phone
  • .visible-tablet / .hidden-tablet
  • .visible-desktop / .hidden-desktop

Der følger en del ikoner med som nemt kan indsættes i html koden:

<i class=”icon class name”></i>

Alle ikoner kan ses på Bootstraps hjemmeside

Hvis du vil i gang, så følg nedenstående links – der er både guides, tutorials og tips:

Bootstrap på en XPages

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
	xmlns:xc="http://www.ibm.com/xsp/custom">
	<xp:this.resources>
		<xp:metaData name="viewport"
			content="width=device-width, initial-scale=1.0">
		</xp:metaData>

		<xp:metaData name="charset" content="utf-8"></xp:metaData>

		<xp:styleSheet href="/css/bootstrap.css"></xp:styleSheet>
		<xp:styleSheet href="/css/bootstrap-responsive.css"></xp:styleSheet>
		<xp:styleSheet href="/custom.css"></xp:styleSheet>
	</xp:this.resources>

	<xc:layout_topmenu></xc:layout_topmenu>
	<div class="container">

		<!-- Content row -->
		<xp:callback facetName="facet_1" id="callback1"></xp:callback>
		<!-- end content row -->

	</div>
	<!-- End container -->
	<!-- Placed in the bottom for faster load times -->
	<script type="text/javascript" src="js/jquery-1.8.2.min.js"
		clientSide="true">
	</script>
	<script type="text/javascript" src="js/bootstrap.js"
		clientSide="true">
	</script>
	<xc:ccDebugToolbar load="true" defaultCollapsed="false"
		collapseTo="left" rendered="false">
	</xc:ccDebugToolbar>

</xp:view>

Smart brug af ikoner

I stedet for at gemme hvert enkelt billede som en separate image ressource – så kan alle ikoner samles på et image og blot selectes med CSS. Det er nemmere at håndtere og giver bedre performance (cache).

Jeg har lavet et image med alle Notes ViewIcons og et tilhørende CSS. Herefter kan der indsættes et ikon blot ved at skrive:

<i class=”viewicon-001″></i>

Filerne kan downloades her:

Links til andre icon set

XPages Log File Reader

Med denne lille applikation får du nemt adgang til alle relevante log filer og settings filer. Kopier blot baser over på serveren og åben den i enten notes eller en webbrowser – herefter har du adgang til bl.a.:

  • Log.nsf
  • Console.log
  • XPages.log
  • Error og Trace log filer
  • Samt notes.ini, java.policy, jvm.properties, xsp.properties m.v.

Applikationen er tilgængelig på OpenNTF og live demo kan ses her

 

Beans

Du kan godt lave XPages uden at bruge Java – ligesom du kan lave Notes Apps uden at bruge Lotus Script … Med andre ord: Lav alt din kode i Java Beans!

Der er 3 krav til en bean (Se også ‘what the heck is a bean?‘)

  1. Skal have en constructor uden parameter
  2. Skal være Serializable
  3. Properties skal kunne tilgåes med ‘getters’ og ‘setters’ med samme navn prefixed med get eller set

Recycle

Husk at recycle alle Notes objekter efter brug, eksempelvis:
doc.recycle();
view.recycle();

Debug

Beans kan nemmest debugges med ‘XPages Debug Toolbar‘ som kan downloades fra OpenNTF. I din java kode kan du skrive
import com.debug.*;
DebugToolbar debug=new DebugToolbar();
debug.warn("my warning");
debug.info("some info");
debug.error("This is wrong", "!!");
Debug teksterne vil se således ud i toolbaren:
I toolbar basen kan du på demoPage.xsp siden se flere eksempler og dokumentation.

Skabelon

Vedlagt en bean skabelon som du kan bruge som udgangspunkt for dine egne bean. Simpelt eksempel der giver adgang til currentSession, currentDatabase samt Debug Toolbar: beanTemplate.java

Server Side Java Script

Du kan kalde din Java kode direkte fra SSJS på 3 måder:
  • Med importPackage
importPackage( majkilde.fw );
var config: DbConfig = new DbConfig();
config.getDatabaseUrl("LOG");
  • Direkte
var config = new majkilde.fw.DbConfig();
config.getDatabaseUrl("LOG");
  • Som en Managed Bean – her kan du både bruge SSJS og EL. Først skal kode registreres som en managed bean (se screenshot) – herefter kan den kaldes simpelt fra SSJS:
DbConfig.getDatabaseUrl("LOG");
faces-config.xml filen findes under WebContent\WEB-INF i Package Explorer

Links

XPages og performance

Paul Withers lavede et glimrende indlæg på Dannotes hvor han havde lavet performance målinger på XPages. Her et par af konklusionerne:

  • SSJS bliver fortolket af JVM, mens EL og Java (e.g. beans) bliver compileret til bytecode. Dette er en af grundene til at Java kode er hurtigere end SSJS
  • Hver Control bliver til en Java Class som eksekveres på serveren – spar derofr på antallet af controls hivs det er muligt. F.eks. er det bedre med ét computet fullname field fremfor 2 fields med fornavn og efternavn.
  • Persistence: På application properties kan man angive Persistence. Der er flere indstillingsmuligheder i xsp.properties filen (findes under WebContent\WEB-INF i Package Explorer). Her kan persistence sættes til None, hvilket kan give et performance boost. Ligeledes kan ‘Persist pages between request’ disables – hvilket gør siderne stateless (og hurtigere)
  • Brug ‘loaded’ fremfor ‘rendered’
  • Brug dataContexts – specielt ifm. med beregning af ‘rendered’ (se side 47 i slide og frem)
  • Partial refresh: hvis muligt, så sæt execMode=’partial’
  • Brug gerne variableResolvers

Links

Fonts

Med CSS @Font-Face selector kan du nemt indsætte andre fonte i din web page. På Google Web Fonts kan du finde mange flotte fonte. For at bruge en af dem i din XPage skal du gøre 2 ting:

  1. Benytte et google stylesheet – dette vil give dig den ønskede font
  2. I dit eget stylesheet kan du nu bruge fonten
Her vist et lille eksempel, der blot skriver ‘Hello World’ med en pæn Google font

Links

Extension Library Version

På server consollen kan du skrive nedenstående kommando for at få at vide hvilken version af Extension Library der er installeret på serveren:

tell http osgi ss com.ibm.xsp.extlib

Du kan evt. lave en knap på din toolbar med denne kommando:

@Command([AdminRemoteConsole])

så får du en hurtig genvej til server konsollen. Knappen findes som default på Developer Toolbaren

Du kan også få versionsnummeret via SSJS: