Open source means openness
In Debian werden Paket relativ selten aktualisiert und mit neueren Versionen ausgetauscht. Hier unterscheidet sich Debian deutlich von Ubuntu. Wen man dennoch ein wichtiges Update von einem Kernel benötigt kann man über die Backports diesen meist problemlos nach-installieren. Dies habe ich hier beschrieben.
Darüber hinaus gibt es aber auch die Möglichkeit über die DebianTesting releases neuere Paket zu nutzen. Ich beschreibe im Folgenden das grundsätzliche vorgehen.
Die Originaleinstellung der Schriften unter Gnome3 finde ich persönlich nicht ganz so schick wie jene die als Voreinstellung in Ubunt verwendet werden. Die Schriften sowie das sogenannte ‘Hinting’ lassen sich aber über das Gnome-Tweek-Tool schnell anpassen. Continue reading “Gnome3 – Darstellung der Schriften”
Nachdem ich Debian 7.1 auf meinem Wortmann Terra Mobile 1450 II Ultrabook installiert hatte gab es ein Problem mit unregelmäßigen System Freezes (Bug report).
Das Problem konnte ich mit einem Upgrade auf Kernel Version 3.10-0 über den debian backport lösen. Hier nun meine Kurzanleitung Continue reading “Debian Wheezy – Kernel 3.10-0”
Debian Weezy verwendet in der aktuellen version immer noch den Init-Deamon System-V-init. Dieser kann durch den neueren deamon systemd ersetzt werden. Dieser erlaubt einen schnelleren Bootvorgang, da beim booten mehrere dienste parallel gestartet werden können:
# apt-get update # apt-get install systemd
Hier folgen einige kurze Hilfestellungen zur Installation von Debian 7 (Wheezy)
Für die Installation von Debian wird die ‘Netzwerkinstallation‘ empfohlen. Es handelt sich dabei um ein ca. 200MB großes ISO Image welches von einem USB-Stick aus installiert werden kann. Sämtliche für die eigentliche Installation benötigten Komponenten werden werden später automatisch heruntergeladen. Continue reading “Debian Installation”
Combining JSF 2.0 and jQuery / jQuery-UI is in my opinion the best choice to build modern web applications. Your JSF web application becomes much smaller as using one of the JSF component libraries. Also with jQuery you got a lot of flexibility designing your pages.
But things become interesting when you try to integrate a jQuery Dialog box with JSF 2.0. I am talking here about a Dialog Box which contains a JSF form with input elements to be submitted – independent from the current page flow. For example: you have a normal jsf form with input components and a link to open another form (in my case a user-profile dialog) also with data which can be submitted. It takes me some time to figure out the best way to manage this. But with JSF 2.0 and ajax support things are not so difficult.
So here is my Solution:
I put my Dialog into a JSF faclet to separate all the dialog stuff in one xhtml element which can be included in the main pages. The interesting thing is here the JSF validation which is also supported. The dialog will not close if a validation error occurs. There for I check the #{facesContext.validationFailed} and save the state in a JavaScript variable. The ajax method ‘processCompleteEvent’ checks if a validation exception was thrown. In that case the dialog stays open, otherwise it will be closed after submit. The command button triggers a JSF 2.0 ajax request to avoid any changes on the main page behind the dialog.
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<script type="text/javascript">
/*<![CDATA[*/
$(document).ready(function() {
// setup dialog
$("#dialog-myprofile").dialog({
resizable : false,
width : 530,
modal : true,
autoOpen : false
});
});
// auto close dialog and check validation...
var validationError=false;
function processCompleteEvent(e) {
if (e.status == 'success') {
if (!validationError) {
$("#dialog-myprofile").dialog("close");
}
}
}
// open dialog
function openMyProfile() {
$("#dialog-myprofile").show();
$("#dialog-myprofile").dialog("open");
}
/*]]>*/
</script>
<div id="myprofile_view">
<!-- Dialog Box -->
<div id="dialog-myprofile" title="#{message['profile.title']}">
<h:form id="dialog-myprofile-form">
<ui:include src="/pages/error_message.xhtml" />
<script>validationError=#{facesContext.validationFailed};</script>
<h:inputText
value="#{userController.workitem.item['txtusername']}"
style="width: 260px;" />
<!-- Save Action -->
<h:commandButton actionListener="#{userController.doProcess}"
value="#{message.save}">
<f:ajax execute="@form" render="@form"
onevent="processCompleteEvent">
</f:ajax>
</h:commandButton>
<input type="button"
onclick="$('#dialog-myprofile').dialog('close');"
value="#{message.close}" />
</h:form>
</div>
</div>
</ui:composition>
To open the Dialog from my main template I use a h:commandLink with an onclick event to open the jQuery dialog. See the following code snippet:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:f="http://java.sun.com/jsf/core"
<h:head>
.....
<script type="text/javascript" src="../jquery-ui-1.10.0.custom.min.js"></script>
<script type="text/javascript" src="../jquery-1.9.0.js"></script>
.....
</h:head>
<h:body>
<f:view id="main_view">
.....
<h:form id="main_form">
...
<h:commandLink onclick="openMyProfile();">
<h:outputText id="profile_userlink"
value="#{message.open_profile}" />
<f:ajax render=":dialog-myprofile-form" />
</h:commandLink>
</h:form>
...
<ui:include src="/pages/profile/myprofile_dialog.xhtml" />
</f:view>
</h:body>
</html>
The trick here is again the ajax integration of the commandLink.
<f:ajax render=":dialog-myprofile-form" />
The f:ajax tag will rerender the dialog form. This is an important part of this solution, because you need to reset the old data of the dialog when the dialog is reopened. For example when the user opens the dialog, types in some data and close the dialog without submitting the data. In this scenario it is necessary to reload the dialog form data. This is done by the ajax render command.
So that’s it. I hope this will help someone.
Today I run into a problem with a custom JSF component using the @MultipartConfig. Trying to use my FileUpload Bean (http://www.imixs.org/jsf/fileupload.html) results in the following error message:
[#|2013-04-26T15:37:21.769+0200|WARNING|glassfish3.1.2|javax.enterprise.system.container.web.com.sun.enterprise.web|_ThreadID=20;_ThreadName=Thread-2;|StandardWrapperValve[Faces Servlet]: PWC1406: Servlet.service() for servlet Faces Servlet threw exception java.lang.IllegalStateException: PWC4016: Request.getParts is called without multipart configuration. Either add a @MultipartConfig to the servlet, or a multipart-config element to web.xml
It seems that this error did not be thrown on a GlassFish 3.2.1 server.
Finally I was able to fix the problem when adding the following servlet configuration into the web.xml file for my Faces Servlet.
...
<!-- Facelets -->
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>0</load-on-startup>
<multipart-config>
<location>/tmp</location>
<max-file-size>20848820</max-file-size>
<max-request-size>418018841</max-request-size>
<file-size-threshold>1048576</file-size-threshold>
</multipart-config>
</servlet>
.....
Today I searched for a solution to submit a form embedded into a jQuery dialog with ajax.
My situation is the following: I use a jQuery UI Dialog to display a feedback-form in my web application. The feedback form should not change the state of the page the user worked before.
So my first approach was to change my form post action into a ajax post action. This can be done easily during the initialisation of the dialog. See the following code snippet:
/**
* Method to initialize the feedback dalog.
* @see contact_dialog.xhtml
*/
function initContactDialog() {
// set default settings for profile dialog
$("#dialog-contact").dialog({
resizable : false,
height : 530,
width : 550,
modal : true,
autoOpen : false
});
// hide contact dialog per default
$("#dialog-contact").hide();
// the following method modifies the submit request into a ajax request
// So the dialog will be closed after the submit was successfull without
// affects to the main page.
$('#dialog-contact-form').submit(function() {
// show up waiting panel
$(".ajax-wait-panel").addClass("ajax-waiting");
$.ajax({
type: "POST",
url: "http://localhost:8080/myrestservice",
data: $("#dialog-contact-form").serialize(), // serializes the form's elements.
success: function(data)
{
$(".ajax-wait-panel").removeClass("ajax-waiting");
$("#dialog-contact").dialog("close");
},
error: function(data)
{
alert('An error occured. Could not send data!'); // show response from post.
$(".ajax-wait-panel").removeClass("ajax-waiting");
}
});
return false; // avoid to execute the actual submit of the form.
});
}
With the initContactDialog() method I initialize the dialog and bind a function to the submit event of my form. The function changes the submit into a ajax call and closes the dialog after the ajax request was finished.
This is quite easy and the dialog will automatically close when the Ajax submit was finished.
Here is the html part of my dialog form:
<!-- Dialog Box -->
<div id="dialog-contact" title="#{global.contact_title}">
<form id="dialog-contact-form" method="post" name="contact_form">
<h:panelGrid columns="2">
<h:panelGroup>
<dl>
<dt>#{global.contact_firstname}:</dt>
<dd>
<input type="text" name="txtfirstname" value="" />
</dd>
</dl>
</h:panelGroup>
<h:panelGroup>
<dl style="">
<dt>#{global.contact_lastname}:</dt>
<dd>
<input type="text" name="txtlastname" value="" />
</dd>
</dl>
</h:panelGroup>
<h:panelGroup>
<dl style="">
<dt>#{global.contact_email}:</dt>
<dd>
<input type="text" name="txtemail" value="" />
</dd>
</dl>
</h:panelGroup>
</h:panelGrid>
<dl style="margin: 0 0 0 0px;">
<dt>#{global.contact_message}:</dt>
<dd>
<textarea style="width: 450px; height: 80px;" name="_description" />
</dd>
</dl>
<input type="submit" value="send" />
</form>
<div>
<h2>#{global.please_wait}</h2>
</div>
</div>
I open the dialog with the following JavaScript function:
/**
* helper method to open the contact dialog.
* The method creates a new empty contact workitem.
*/
function openContact() {
$("#dialog-contact").show();
$("#dialog-contact").dialog("open");
}
As you can see in my script and in the html snippet I have added a div section with the class ‘ajax-wait-panel’. This div overlays the form of my dialog when the ajax call is started. So the user will see a ‘Please wait’ message until the ajax request is finished. I simply add the class ‘ajax-waiting’ to the div section in the moment the request starts and remove the class when the submit was finished. So this is the css part of my solution:
/* Ajax-wait-panel can be useded in jquery dialogs
for long runnign ajax request.
Start by setting display:none to make this hidden.
Background we set to 80% white with
our animation centered, and no-repeating */
.ajax-wait-panel {
display: none;
position: absolute;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .6 )
url('ajax-loader.gif')
50% 50%
no-repeat;
cursor: wait;
}
.ajax-wait-panel h2 {
position: absolute;
top: 50%;
margin-top: -80px;
color: #666;
text-align: center;
width: 100%;
}
/* Class to be added when ajax wait panel should
be displayed */
.ajax-waiting {
display: block;
}
Today I searched for a solution to submit a form embedded into a jQuery dialog with ajax.
My situation is the following: I use a jQuery UI Dialog to display a feedback-form in my web application. The feedback form should not change the state of the page the user worked before.
So my first approach was to change my form post action into a ajax post action. This can be done easily during the initialisation of the dialog. See the following code snippet:
/**
* Method to initialize the feedback dalog.
* @see contact_dialog.xhtml
*/
function initContactDialog() {
// set default settings for profile dialog
$("#dialog-contact").dialog({
resizable : false,
height : 530,
width : 550,
modal : true,
autoOpen : false
});
// hide contact dialog per default
$("#dialog-contact").hide();
// the following method modifies the submit request into a ajax request
// So the dialog will be closed after the submit was successfull without
// affects to the main page.
$('#dialog-contact-form').submit(function() {
// show up waiting panel
$(".ajax-wait-panel").addClass("ajax-waiting");
$.ajax({
type: "POST",
url: "http://localhost:8080/myrestservice",
data: $("#dialog-contact-form").serialize(), // serializes the form's elements.
success: function(data)
{
$(".ajax-wait-panel").removeClass("ajax-waiting");
$("#dialog-contact").dialog("close");
},
error: function(data)
{
alert('An error occured. Could not send data!'); // show response from post.
$(".ajax-wait-panel").removeClass("ajax-waiting");
}
});
return false; // avoid to execute the actual submit of the form.
});
}
With the initContactDialog() method I initialize the dialog and bind a function to the submit event of my form. The function changes the submit into a ajax call and closes the dialog after the ajax request was finished.
This is quite easy and the dialog will automatically close when the Ajax submit was finished.
Here is the html part of my dialog form:
<!-- Dialog Box -->
<div id="dialog-contact" title="#{global.contact_title}">
<form id="dialog-contact-form" method="post" name="contact_form">
<h:panelGrid columns="2">
<h:panelGroup>
<dl>
<dt>#{global.contact_firstname}:</dt>
<dd>
<input type="text" name="txtfirstname" value="" />
</dd>
</dl>
</h:panelGroup>
<h:panelGroup>
<dl style="">
<dt>#{global.contact_lastname}:</dt>
<dd>
<input type="text" name="txtlastname" value="" />
</dd>
</dl>
</h:panelGroup>
<h:panelGroup>
<dl style="">
<dt>#{global.contact_email}:</dt>
<dd>
<input type="text" name="txtemail" value="" />
</dd>
</dl>
</h:panelGroup>
</h:panelGrid>
<dl style="margin: 0 0 0 0px;">
<dt>#{global.contact_message}:</dt>
<dd>
<textarea style="width: 450px; height: 80px;" name="_description" />
</dd>
</dl>
<input type="submit" value="send" />
</form>
<div>
<h2>#{global.please_wait}</h2>
</div>
</div>
I open the dialog with the following JavaScript function:
/**
* helper method to open the contact dialog.
* The method creates a new empty contact workitem.
*/
function openContact() {
$("#dialog-contact").show();
$("#dialog-contact").dialog("open");
}
As you can see in my script and in the html snippet I have added a div section with the class ‘ajax-wait-panel’. This div overlays the form of my dialog when the ajax call is started. So the user will see a ‘Please wait’ message until the ajax request is finished. I simply add the class ‘ajax-waiting’ to the div section in the moment the request starts and remove the class when the submit was finished. So this is the css part of my solution:
/* Ajax-wait-panel can be useded in jquery dialogs
for long runnign ajax request.
Start by setting display:none to make this hidden.
Background we set to 80% white with
our animation centered, and no-repeating */
.ajax-wait-panel {
display: none;
position: absolute;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .6 )
url('ajax-loader.gif')
50% 50%
no-repeat;
cursor: wait;
}
.ajax-wait-panel h2 {
position: absolute;
top: 50%;
margin-top: -80px;
color: #666;
text-align: center;
width: 100%;
}
/* Class to be added when ajax wait panel should
be displayed */
.ajax-waiting {
display: block;
}
Using JSF 2.0 and Ajax simplifies the web design and provides a lot of cool tricks to extend the user experience. With the render and execute tags form the f:ajax tag it is use to update components dynamically.
But in the past I run often into problems when trying to update a component outside the current ui context. For example when you try to update a part of your form for a single row in h:datatable component you will typically see log messages like this one:
f:ajax contains an unknown id 'j_idt90:painelTabela' - cannot locate it in the context of the component j_idt75
To solve such kind of problems you need to specify the full component id to be rendered or executed. This is not always as easy at it sounds. When your component is nested in a complex component tree the component id can be prafixed with a long list of parent component ids. This happens typically in h:datatables, ui:repeats or c:forEach sections.
One solution is to navigate back in the tree to the correct ui node and get the componentID using an EL syntax like this:
<f:ajax render=":#{component.parent.parent.parent.parent.clientId}:new-minute-panel:" />
This looks not really nice and it creates new problems when you redesign or move your ui components into a new structure on your jsf page.
A simple trick to solve the problem is to bind the component which need to be rendered into a ui param. So you can reference its full clientId in the ajax context. See the following example:
<h:panelGroup layout="block" id="mylist" binding="#{myListComponent}">
<ui:repeat var="attachment" value="#{myController.myList}">
....
<!-- some ajax functionality... -->
<f:ajax render=":#{myListComponent.clientId}">
<h:commandLink actionListener="#{myController.soSomething}">click me</h:commandLink>
</f:ajax>
...
</ui:repeat>
....
In this example I use the binding tag to bind the panelGroup to a param named ‘myListComponent’. Inside the ui:repeat I can now access the outer component and render the component fom my f:ajax element accessing the clientId
<f:ajax render=":#{myListComponent.clientId}"
As a result the ajax component no longer depends on the position in my page and I can reuse it in any part of my jsf page.
Another solution using the binding is to transfer a component into a subform. See the following example:
<h:panelGroup id="my_panel" binding="#{myListComponent}">
<h:dataTable id="mydatatable" value="#{myController.myList}" var="child">
.....
<ui:include src="/forms/sub_myeditor.xhtml" >
<ui:param name="myPanel" value="#{myListComponent}" />
</ui:include>
.....
</h:dataTable>
In this example I transfer the ui:component containing my h:datatable to a subpage ‘sub_myeditor.xhtml’ which is included inside the table. Now I can access the panelGroup inside my subpage and render it after an ajax event:
<h:commandButton .... >
<f:ajax render=":#{myListComponent.clientId}"
execute=":#{myListComponent.clientId}"/>
</h:commandButton>
Also in this example the component in the ajax tag is addressed with its absolute path.