Posts Tagged: ‘css’

XPages: Modify the File Selection Button

24. Januar 2014 Posted by Sven Hasselbach

With Dojo, you can easily customize the file upload button, f.e. to change the label, add additional style sheets or use HTML5 or Flash plugin for uploading.

Here is basic example which adds a label and a blue border around the button:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

    <xp:this.data>
        <xp:dominoDocument var="document1" formName="File" />
    </xp:this.data>

    <xp:scriptBlock id="scriptBlockFileUpload">
        <xp:this.value>
            <![CDATA[
                require(['dojo/parser',
                         'dojox/form/Uploader',
                         'dojo/domReady!'], 
                         function(parser, ready){
                             parser.parse().then(function(){
                                uploader = new dojox.form.Uploader({
                                    name:'#{id:fileUpload1}', 
                                    label:'Select Some Files',
                                    multiple:false, 
                                    style: 'border:5px solid blue;'
                                }, '#{id:fileUpload1}');

                                uploader.startup();
                             });
                         });
            ]]>
        </xp:this.value>
    </xp:scriptBlock>

    <xp:fileUpload id="fileUpload1"
        value="#{document1.Body}">
    </xp:fileUpload>

    <xp:button value="Submit" id="buttonSubmit" >
        <xp:eventHandler event="onclick" submit="true"
            refreshMode="complete" immediate="false" save="true" />
    </xp:button>

</xp:view>

Have a look at dojox.form.Uploader for more details.

XPages: Lost in Translation

18. September 2012 Posted by Sven Hasselbach

The localization feature is really nice and helps a lot, but you also can have some trouble using it. The first problem is that the language codes which are used in XPages are different from the language codes in java.util.Locale.

This SSJS code for example will not work:

var locale = new java.util.Locale( "fr_BE" );
context.setLocale( locale );
context.reloadPage();

It will not work because the java.util.Locale object returns “fr_be“, but the PageDetails are set to “fr_BE“, and that’s why the setting the language does not work.

<xp:text escape="true" id="computedFieldLocale">
   <xp:this.value>
      <![CDATA[#{javascript:
         var locale = new java.util.Locale( "fr_BE" );
         locale.getLanguage()}]]>
      </xp:this.value>
</xp:text>

[This SSJS Code returns "fr_be"]

[In PageDetails "fr_BE" is used]

But if you set the locale string manually with the setLocaleString() method of the context object, it works as designed.

The second problem I ran into is the aggressive transformation of all texts on a XPage. I copied a simple CSS Style definition from another database, but after copy/pasting it I was unable to see any changes in the browser, as soon I switched to another than the default language. The CSS style didn’t work anymore:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
   <style>
      .red { color:rgb(255,0,0 ) }
   </style>
   <p>TEXT</p>
</xp:view>

[Default Language, it worked]

[Other Language, not working anymore]

The CSS style was transformed by the localization feature and was now “translated”. In the generated HTML code, the tag looked like this:

<style>[en| .red { color:rgb(255,0,0 ) } ]</style>

Same result for directly copied JavaScript-Code, Text etc. (as shown in the screenshot above).

But I still love this feature. It makes developers life a lot easier.

XPages: JQuery Gantt Module

16. September 2012 Posted by airwolf89

In the past weeks I was trying something new, at least new for me…

I realised that using jQuery in Xpages is a wonderful idea. Mark Roden has a nice blog with great things you can do with jQuery in XPages. You can find it here: Xomino Also check out his demo site: Xomino JQinX Demo

In one project I wanted to use a gantt chart. I want to write this article to show you how it’s done and warn you about the problems I had.

Let’s start.

To use jQuery you have to download it and integrate it in your database. Build your own version of jQuery here: JQuery Download It is the download page of JQuery UI, a set of many nice plugins and modules for jQuery. A version of the base jQuery is included. You can also configure a custom theme for your jQuery modules. It is on the right menu when you follow the link “design a custom theme

For the gantt chart I am using this module: Taitems JQuery Gantt Chart Module

So, now you have to integrate these files into your database. You can do this either via the resource category in the database, or via the PackageExplorer (it is an Eclipse View) I recommend using the package explorer, because you can manage your files more easily. Simply drag and drop your files and create some folders to organize them.

Now you have to load them into your application. You can do this easily via a theme with the following statement:

<resource>
<content-type>application/x-javascript</content-type>
<href>js/jquery-1.7.min.js</href>
</resource>

Or you load them directly into your code via the resource properties of the XPage/ Custom Control

<xp:script src="js/jquery-ui-1.8.23.custom.min.js" clientSide="true"/>

You have to do this for the jQuery base module, the UI module and the gantt module, also you have to load the CSS files.

First problem I had to face: The gantt module doesn’t work with every jQuery version. I was using jQuery 1.8.0. But when using this module, I had an error message which complained about some undefined variables (TypeError: m is undefined) Using the 1.7 version was a solution to this.

Now we can get started. On the page of the gantt module is an easy manual how to use this module. It is quite self explaining.

To implement a gantt chart, you only have to put in these few lines of code (client side of course)

<xp:scriptBlock id="scriptBlock1">
<xp:this.value>
// + "/ganttJSONBuilder?OpenAgent";
// + "/js/data.js";
jQuery( function() {
var dataPath = location.href.substring(0,
location.href.lastIndexOf('/') + 1)
+ "/ganttJSONBuilder?OpenAgent;

$(".gantt").gantt( {
source : dataPath
});
});]]>
<<!--xp:this.value>
<<!--xp:scriptBlock>

As data source the module uses JSON data. Use this site to validate your JSON data easily. The structure of your data is explained in the manual site of the module.

Be aware, the module expects a URL as data source. That means you can’t use server side Javascript in that scriptblock to generate the data source. So, we have two options on how to load the data into the module, either via a file which you can put into the WebContent folder in your database, or you call an agent. The agent is probably the better option because you sure want to load data dynamically.

Using an agent to achieve this is basically easy, you only have to write your JSON string into a variable and then you do this:

PrintWriter pw = getAgentOutput();
pw.println(output);

The difficulty of generating the JSON string itself depends on your data. In my case it was a simple project management, so some tasks, projects and editors. I used a view. I looped the entries and parsed the information into a JSON String.

There are some nice little things you should know when doing so.

The first line of your JSON string has to be the content type of the output, for JSON it is: Content-type: application/json; charset=utf-8\n
Also, it is very important that you use line breaks in the string, simply by using \n. If you aren’t doing that, your JSON string will not be properly interpreted and the module shows nothing but a nice grey bar.
Easily to overlook, but also important, in JSON you have to use a comma to separate your entries. Be sure you have no comma behind your last entry or parameter. It will result in a misinterpretion of the data.
The next important thing is, in the JSON data, you have to provide all entries defined in the manual. That means, if you forgot to write one of the parameters into the string, it is valid, but not recognized by the gantt module and isn’t doing anything. All of them need a value. providing nothing will have the same result: Nothing =)
I wanted to have my projects and tasks separated. In one line the project and then in the other lines the related tasks. This is possible by writing an extra entry to your JSON string, in which you only write the information about the project. When writing the tasks of the project, you probably don’t want to write the project in front of each task. If you think you can define an empty string for the name parameter of the JSON entry, you are wrong. The module needs a value of at least one character. Using an empty string results in not displaying the chart and some nice error messages. Using a space (” “) is the solution.
Also, you have to provide a start and end date for each entry. I wanted to have no duration for the project, so I didn’t provide the “from” and “to” parameter, it rewarded me with some other javascript errors. So I used the whole duration of the project for the project entry, it’s a good feature anyway.

A nice feature: You can use HTML in your JSON parameters, so, if you use
tags for example in your desc parameter and some formatting tags, you can make the mouseOver of the entries look more beautiful and put some more information into it.

If you think the styleClasses available for your entries in the chart (ganttRed, ganttGreen, ganttOrange) are not that beautiful, or you want to use some more, you can easily define some. There is a css file in the module. Looks like this:

.fn-gantt .ganttOrange {
background-color: #FCD29A;
}
.fn-gantt .ganttOrange .fn-label {
color: #714715 !important;
}

Copy those entries and do your own styles, the class at the end of the definition is recognized by the module, so you can use it directly in the “customClass” parameter of your JSON.

But there is one big problem when using this module. Above the chart, I have some buttons. I wanted to load different charts with those buttons. Easily done I thought, just firing a partial execute on the chart container to set another data source or something. But, nothing happens, in fact really nothing, not even an event which I could see in my FireBug. Some other buttons with only clientside code are working fine. All other buttons on the whole page are working fine, only those I have directly above my chart didn’t wanted to work. I haven’t figured out what’s the problem, if I find it, I will let you know.

Another problem is that the gantt chart is not working in the Notes Client. If I open the Xpage in my Notes client, the chart isn’t loaded, only a nice grey bar. Other jQuery modules are working fine, for example the accordion or flip is working, but not the module. If you want to use it in the NotesClient you should think about another solution… or wait until I find a solution for this problem =)

Another thing you should consider are loading times. The loading time is increasing dramatically proportional on how many entries you display (rowsPerPage parameter in the gantt function) and how many years they cover. If you want to display some tasks from a period of 10 years or more, you have to wait a bit. I tried a period of 30 years… not a good idea, my browser crashed… after about 5 minutes of loading.

So, I think that’s all I know about the module and how to use it. Despite all the small and big problems I have a nice application with some really nice gantt charts. If you are interested in such an application, you should visit this page (Cobalt Software GmbH), the new version should be available soon. Ok, sorry for the advertisement…

If you have any questions or solutions for my unsolved problems, the comment section is all yours =)

Hope it was useful for some of you.


Filed under: Notes & XPages Tagged: Chart, Cobalt Software GmbH, CSS, Datasource, Gantt, Javascript, JQuery, JSON, Mark Roden, Notes, Parameter, Plugin, Serverside Javascript, Taitem, Tools, Xomino, XPages, Xpages in NotesClient, XpInc

AK Anwendungsentwicklung am 11. Juni 2012: Ein Nachmittag mit vielen Infos zu XPages und CSS

15. Mai 2012 Posted by Roswitha Boldt

Der Arbeitskreis Anwendungsentwicklung lädt am 11. Juni 2012 ab 13 Uhr zu diesen Schwerpunkten ein:


Warum das Rad neu erfinden?
OpenNTF: XPages Anwendungen, Custom Controls und Bibliotheken für die Nutzung in eigenen Entwicklungen
Niklas Heidloff, IBM


CSS - Grundlagen, Tools und ihr praktischer Einsatz in Domino und XPages
Cascading Style Sheets in ihren unterschiedlichen Ausprägungen sind DIE Schnittstelle zur grafischen Gestaltung von Webseiten. Neben einer Einführung in die Grundlagen von CSS, werden Tipps und Tricks sowie einige nützliche Tools für den Entwurf und das Debugging von CSS-Vorgaben gezeigt. Darüber hinaus wird demonstriert, wie einfach CSS in Notes/Domino allgemein und speziell in XPages genutzt angewendet werden kann. Dabei wird hervorgehoben, wie und an welchen Stellen CSS in XPages erweitert oder sinnvoll verändert werden kann.

Michael Gollmick, TIMETOACT GROUP


Leitung der Veranstaltung
Uwe Brahm, Max-Planck-Institut für Informatik
Sigrun Greber, GWDG Ges. für wissenschaftliche Datenverarbeitung Göttingen

 

Alle Mitglieder sind herzlich zur Teilnahme eingeladen. Interessenten können die Gelegenheit einer "Schnupperteilnahme" nutzen.

Um Anmeldung wird in jedem Fall gebeten.

 

Nutzen Sie gern auch die Community des Arbeitskreises hier auf EULUC, um sich mit anderen vorher (und nach der Veranstaltung) auszutauschen, Ihre Anregungen, Fragen und Themenvorschläge für das zweite Halbjahr einzubringen!

 

Stumbling Stones: Difference between xp:panel and xp:div

2. April 2012 Posted by airwolf89

Today another stumbling stone.

With this post I want to announce that I will write this Blog in english from now on to reach more readers throughout the world. My old posts will be translated step by step. I hope you understand this step and continue reading my Blog.

But back to topic. Today I was customizing a module in one of my applications. The structure was implemented via xp:panel elements. I wanted to save some performance and wanted to change it to xp:div.

By the way, what is the difference between xp:panel and xp:div, you might ask. Well, it is quite easy. Both controls are container controls which are rendered as a <div> element in HTML. The difference is that you can define a datasource in xp:panel elements. Therefore, xp:panel and xp:div references different Java-classes in the backend. The class for xp:panel is more complex, that means you a bit more serverload. Here is the Java code generated:

 

xp:panel:
private UIComponent createPanel2(FacesContext context,
      UIComponent parent, PageExpressionEvaluator evaluator) {
   UIPanelEx result = new UIPanelEx();
   return result;
}

xp:div
private UIComponent createDiv(FacesContext context,
      UIComponent parent, PageExpressionEvaluator evaluator) {
   XspDiv result = new XspDiv();
   return result;
}

 

It seems not worth to mention, but imagine you have an application with, let’s say 200 div containers throughout the application. With each the server has to load the more complex class and prepare the functionality to create a datasource. If you use xp:div instead, the serverload may decrease a bit. I do not have some statistics to prove how it affects the applications performance in detail, but it is alsways a good idea to reach for maximum performance of an application.

So, what was the problem? I changed the tags to xp:div, and the design of my module was affected. I wondered, because I was thinking both elements are rendered as a <div> element in HTML. But a short glance into the Firebug told me something. For two panels, I didn’t define an ID attribute. So, the second difference between xp:div and xp:panel is that xp:panels without an ID attribute are NOT rendered in an XPage. This could affect either some CSS hierarchies and also, if you need every pixel in a container, affects the way it is displayed. In my case it had the result that an image, which I used as a button was not displayed next to an inputBox, it was displayed below that.

Here an example with the output:

 

Without IDs:

XSP:
<xp:panel>
   <xp:panel>
      test 1
   </xp:panel>
</xp:panel>

<xp:br/>

<xp:div>
   <xp:div>
      test 2
   </xp:div>
</xp:div>

HTML:
test 1
<br>
<div>
   <div>
      test 2
   </div>
</div>

With IDs:

XSP:
<xp:panel id="panel1">
   <xp:panel id="panel2">
      test 1
   </xp:panel>
</xp:panel>

<xp:br/>

<xp:div id="div1">
   <xp:div id="div2">
      test 2
   </xp:div>
</xp:div>

HTML:
<div id="view:_id1:panel1">
   <div id="view:_id1:panel2">
      test 1
   </div>
</div>
<br>
<div id="view:_id1:div1">
   <div id="view:_id1:div2">
      test 2
   </div>
</div>

 

This is not a big deal, if you know that and always set an ID attribut, as it should be, you won’t encounter that problem. But like it is always, you have to know it or you get confused by its consequences.


Filed under: Stumbling Stones Tagged: Attribute, CSS, Datasource, Hierarchy, HTML, Java, Notes, Stumbling Stone, xp:div, xp:panel, XPages

Tools: Austauschen von schlechten Website-Designs im eigenen Browser

23. Februar 2012 Posted by airwolf89

Ab und an kommt es ja mal vor, dass man auf eine Website gerät, auf der man augenblicklich Augenkrebs bekommt. Wenn das nun eine Seite ist die man recht häufig nutzen möchte, wie z.B. ein Forum, dann ist das natürlich sehr ärgerlich.

Mit ein paar Kenntnissen in Webdesign, bzw. dem Schreiben von CSS-Stylesheets, muss das aber nicht sein.
Firefox bietet die Möglichkeit an eigene Styles für bestimmte Seiten zu definieren. Dazu muss einfach nur eine Datei im Firefox ProfilVerzeichnis angelegt werden.

Die Datei heißt userContent.css und muss sich in einem Verzeichnis namens “Chrome” befinden.

Bei Windows 7 sähe das in etwa so aus:

C:\Users\Benutzername\AppData\Roaming\Mozilla\Firefox\Profiles\profilnummer.default\Chrome\userContent.css

Dort kann man mit Firefox-spezifischen CSS Befehlen eine Domain ansteuern und CSS Definitionen kapseln:

@-moz-document domain(“Domain-mit-schlechtem-Design.com”) {
.screwedStyleClass{…}
}

Nun kann man seine eigenen Styles für jede beliebige Seite definieren. Das ganze funktioniert übrigens auch im Aurora, wobei es da Diskrepanzen bei der Interpretierung des Stylesheets geben kann. Bei einem Anwendungsfall bei mir sah das Ergebnis im Aurora anders aus als im Firefox. Da Aurora und Firefox bei paralleler Installation auf das gleiche profil zugreifen muss man die Styles dementsprechend auch nur einmal ablegen.

Wer genauere Informationen zu diesem Thema und rund um das Thema Firefox haben möchte, dem kann ich diese Seite hier empfehlen:

Holger Metzger – Mozilla Tipps & Tricks

Diese Geschichte mit der userContent.css befindet sich in der Mozilla FAQ unter Kapitel 9


Einsortiert unter:Tools Tagged: Aurora, CSS, Design, Firefox, Mozilla, Stylesheets, Tools

Quick-n-Dirty: Hijacking TypeAhead in CSJS

9. Dezember 2011 Posted by Sven Hasselbach

Matthias Nicklisch hat eine interessante Frage im XPages Forum gestellt, nachdem er festgestellt hat, dass im Designer zwar ein OnStart- / OnComplete-Event für die TypeAhead-Funktion angeboten wird, der Code aber als Deprecated angezeigt wird – und auf der XPage auch nicht funktioniert: Wie kann ein OnStart- / OnComplete-Event trotzdem verwendet werden?

Meine Idee dazu ist, den darunter liegenden dojo.xhr-Request zu hijacken, und auf diese Weise die Events zu erhalten. Dadurch lässt sich der Code bequem auf die jeweilige XPage einbetten, ohne das eine Manipulation der original Javascript-Dateien erfolgen muss.

Der folgender Code muß in einem CSJS-Scriptblock eingebettet werden. Dann erhält man für die TypeAhead-Funktion die Events, um zum Beispiel ein kleines “Loading”-Icon einzublenden, wenn die Daten vom Domino Server geladen werden.

var typeAheadLoad;

dojo.addOnLoad( function(){
   /*** hijacking xhr request ***/
   if( !dojo._xhr )
      dojo._xhr = dojo.xhr;

   dojo.xhr = function(){
      try{
         var args = arguments[1];
         if( args['content'] ){
            var content = args['content'];
               if( content['$$ajaxmode'] ){
                  if( content['$$ajaxmode'] == "typeahead" ){
                
                     /*** hook in load function ***/
                     typeAheadLoad = args["load"];

                     /*** overwrite error function ***/
                     args["error"] = function(){
                        alert('Error raised!')
                     };
                    
                     /*** hijack load function ***/
                     args["load"] = function(arguments){
                 
                        /*** On Start ***/
                        alert("On Start!");
                    
                        /*** call original function ***/
                        typeAheadLoad(arguments);
                    
                        /*** On Complete ***/
                        alert("On Complete!")
                     };
                 }
             }
         }
      }catch(e){}
      dojo._xhr( arguments[0], arguments[1], arguments[2] );
   }
});

Performance-Tuning (4): Fein-Tuning von xsp.resources.aggregate

11. November 2011 Posted by Sven Hasselbach

Mit Domino 8.5.3 wurde eine neue Option eingeführt, mit der automatisch verschiedene Ressourcen-Dateien vom Server vor der Auslieferung an den Browser zusammengefasst werden. Dadurch läßt sich die Performance einer Web-Applikation deutlich erhöhen, denn zum Einen werden dadurch weniger Anfragen vom Browser an den Server gesendet,  zum Anderen wird der Browser nicht unnötig “blockiert”, da sich die Anzahl der zu ladenden Ressourcen deutlich reduziert (siehe dazu RFC 2616)

In folgendem Artikel ist die neue Option xsp.resources.aggregate detailliert beschrieben, doch es gibt noch ein paar undokumentierte Optionen, mit denen sich das Verhalten der XPages-Engine genauer steuern läßt.

Dafür muß zu aller erst die Funktion aktiviert sein, das xsp.properties-File also folgende Zeile beinhalten:

xsp.resources.aggregate=true

Dann kann mit den folgenden Optionen das Verhalten für die einzelnen zu aggregierenden Ressourcen individuell festgelegt werden (Standardmäßig werden alle Ressourcen zusammen gefasst).

  • xsp.resources.aggregate.dojo

Wenn false, werden die Javascript-Libraries des Dojo Toolkits ausgeschlossen.

  • xsp.resources.aggregate.css

Schließt die Standard-CSS-Dateien aus, wenn false.

  • xsp.resources.aggregate.appcss

Schließt die CSS-Dateien der Applikation aus, wenn false.

  • xsp.resources.aggregate.appjs

Wenn false, werden die JavaScript-Libraries der Applikation ausgeschlossen.

Themensammlung für den nächsten Arbeitskreis im Frühjahr 2012

10. November 2011 Posted by Uwe Brahm

Liebe AnwendungsentwicklerInnen,

Hier ein paar Vorschläge zu den Themen, die wir im nächsten Arbeitskreis ansprechen wollen / sollen / könnten:

C-API:

  • Wann, Wofür und Wie? - Eine Handreichung

OpenNTF:

  • Die besten Werkzeuge aus der Open Source Welt: Was gibt es und lohnt sich genauer anzusehen?
  • Welche auf OpenNTF verfügbaren Codezeilen helfen mir bei meinen Applilakationsentwicklungen: Beispiele, Kniffe und Best Practices

XPages:

  • View Management: Wie suche ich im View, wie sortiere ich schnell und richtig
  • Custom Controls für alle Fälle: Was aus dem letzten Wettbewerb kann ich sofort benutzen
  • CSS: Grundlegendes, Tips und Tricks in Verbindung mit dem XPages-Einsatz

 

Weitere Ideen können Sie gerne hier auf der EULUC Platform posten oder immer auch per email an uns senden.

Wer weitere Ideen und Wünsche hat, die sich etwa mit der XPages-Entwicklung oder aber auch mit der klassischen Notes-Entwicklung beschäftigen, darf sich mit weiteren Themenvorschlägen gerne hier zu Wort melden.

Vielen Dank für Ihre Hilfe und Ihre rege Beteiligung!

 

Sigrun Greber, Uwe Brahm (Leitung AK Anwendungentwicklung)