markUp code

jQuery check if element has border

2012-01-14T09:37:00.000-08:00

Sometimes you need to check if an html element has border for some reason. Normally we can use build in function css() for this purpose. But this approach is quite troublesome to find answer due to some facts: $(element).css('property') function returns window.getComputedStyle(element) . For border we have 4 css-computed rules:

.someClass{
    border: 1px solid black;
    /* is in fact computed in browser as */
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
}

To check if element has border we need to write something like this. Code is simple but in fact really ugly.

if ($(element).css('border-top-style') != 'none' && 
        $(element).css('border-right-style') != 'none' &&
        $(element).css('border-bottom-style') != 'none' &&
        $(element).css('border-left-style') != 'none'){
    //Has border
    }

Moreover code above may give you wrong result. Imagine situation when web-developer wrote:

.anotherFancyClass{
    /* only bottom border */
    border-bottom: 1px solid black;
    /* is in fact computed as */
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: solid;
    border-left-style: none;
}

Now javascript if condition fail. You can change condition from AND to OR but it is still UGLY code.

Better solution

To check if element has border we will use another functions:

outerWidth(), innerWidth(), outerHeight(), innerHeight().

And here's a code and explaination:

$.fn.hasBorder = function() {
    /* outer contains: dimensions + padding + border */
    /* inner contains: dimensions + padding */
  if ((this.outerWidth() - this.innerWidth() > 0) ||  (this.outerHeight() - this.innerHeight() > 0)){
        return true;
    }
    else{
        return false;
    }
  };
  
  /* Usage */
  if ($('#selector').hasBorder()){
      //With border. Such more sophisticated ain't true?
  }

That's all.

Android service with dynamic schedule time

2012-01-12T11:20:00.000-08:00

Introduction

In this article I will show you how to write example android service which will be restarted after change user preferences. After changes are applied service will show toast with last execution time.

XML Files

First we will write some piece of code that will display preferences and will show them to user. Let's start from define xml with preferences:

<?xml version="1.0" encoding="utf-8"?>
<PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android" >

    <PreferenceCategory android:title="Update frequency" >
        <ListPreference
            android:defaultValue="15 minut"
            android:entries="@array/listFrequency"
            android:entryValues="@array/listValues"
            android:key="Frequency"
            android:title="Change update frequency" />
    </PreferenceCategory>

</PreferenceScreen>

Here goes entries and entryValues from @array:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="listFrequency">
        <item>1 minuta</item>
        <item>2 minuty</item>
        <item>10 minut</item>
        <item>15 minut</item>
        <item>30 minut</item>
        <item>Wylaczone</item>
    </string-array>
    <string-array name="listValues">
        <item>60000</item>
        <item>120000</item>
        <item>600000</item>
        <item>900000</item>
        <item>1800000</item>
        <item>0000</item>
    </string-array>
</resources>

This xml will look like:

And don't forget to modify AndroidManifest.xml

<application>
     .....
        <service
            android:enabled="true"
            android:name=".service.BackgroundService" >
        </service>
    </application>
 <uses-permission android:name="android.permission.VIBRATE" />

Now let's code.

It's time to create Activity which will extend PreferenceActivity class. In this class we add OnSharedPreferenceChangeListener which will be called after change user preferences.

package com.stock_app.home;

import android.content.Intent;
import android.content.SharedPreferences;
import android.content.SharedPreferences.OnSharedPreferenceChangeListener;
import android.os.Bundle;
import android.preference.PreferenceActivity;
import android.preference.PreferenceManager;
import android.widget.Toast;

import com.stock_app.R;
import com.stock_app.service.BackgroundService;

public class PreferencesActivity extends PreferenceActivity {
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  addPreferencesFromResource(R.xml.preferences);
  SharedPreferences prefs = PreferenceManager
    .getDefaultSharedPreferences(this);
  prefs.registerOnSharedPreferenceChangeListener(prefchanged);
 }

 OnSharedPreferenceChangeListener prefchanged = new OnSharedPreferenceChangeListener() {

  @Override
  // Method for listening changes of SharedPreferences. 
  public void onSharedPreferenceChanged(
    SharedPreferences sharedPreferences, String key) {
   Intent serviceIntent = new Intent(getBaseContext(),
     BackgroundService.class);
   // Only if key was Frequency we will restart service. 
   if (key.equals("Frequency")) {
    String value = sharedPreferences.getString("Frequency", "0000");
    // If user turned of Service 
    if (value.equals("0000")) {
     stop(serviceIntent);
     String message = "Service is shut down.";
     Toast myToast = Toast.makeText(getApplicationContext(),
       message, Toast.LENGTH_SHORT);
     myToast.show();

    } else {
     // Oherwise restart
     stop(serviceIntent);
     start(serviceIntent);
    }

   }
  }
 };
 // Helper methods for start/stop service 
 private void start(Intent serviceIntent) {
  try {
   startService(serviceIntent);
  } catch (Exception e) {
   // If exception thrown means service is running 
   stopService(serviceIntent);
  }
 }

 private void stop(Intent serviceIntent) {
  try {
   stopService(serviceIntent);
  } catch (Exception e) {
   // If exception thrown means service not is running 
   startService(serviceIntent);
  }
 }
}

Now it's time for Service:

package com.stock_app.service;

import java.text.SimpleDateFormat;
import java.util.Calendar;
import java.util.Date;
import java.util.Timer;
import java.util.TimerTask;

import android.app.Notification;
import android.app.NotificationManager;
import android.app.PendingIntent;
import android.app.Service;
import android.content.Context;
import android.content.Intent;
import android.content.SharedPreferences;
import android.net.Uri;
import android.os.IBinder;
import android.os.Vibrator;
import android.preference.PreferenceManager;
import android.util.Log;
import android.widget.Toast;

public class BackgroundService extends Service {

 private static final String TAG = BackgroundService.class.getSimpleName();
 private static int NOTIFICATION_ID = 1;
 private int icon = (Integer) 0x7f02000d;
 private Toast myToast;

 private Timer updatingTimer;
 public NotificationManager notificationmanager;
 public static boolean isGoing = false;
 SharedPreferences preferences = null;
 private TimerTask notify;

 @Override
 public void onCreate() {
  super.onCreate();

  if (!isGoing) {
   notify = new TimerTask() {
    @Override
    public void run() {
     checkValues();
    }
   };
   notificationmanager = (NotificationManager) getSystemService(NOTIFICATION_SERVICE);
   updatingTimer = new Timer();
  }

 }

 @Override
 public IBinder onBind(Intent intent) {
  return null;
 }

 @Override
 public void onDestroy() {
  updatingTimer.cancel();
  notify.cancel();
  super.onDestroy();
  isGoing = false;
 }

 public void onStart(Intent intent, int startId) {
  super.onStart(intent, startId);
  String message = "";
  isGoing = true;
  preferences = PreferenceManager.getDefaultSharedPreferences(this);
  try {

   String str_frequency = preferences
     .getString("Frequency", "1800000");
   long frequency = Long.parseLong(str_frequency);

   if (str_frequency.equals("60000")) {
    message = "Changed to one minute";

   } else if (str_frequency.equals("120000")) {
    message = "Changed to 2 minutes";
   } else if (str_frequency.equals("600000")) {
    message = "Changed to 10 minutes";

   } else if (str_frequency.equals("900000")) {
    message = "Changed to 15 minutes";

   } else if (str_frequency.equals("1800000")) {
    message = "Changed to 30 minutes";
   }

   // If running show toast:
   if (message != "" && message != "0000") {
    myToast = Toast.makeText(getApplicationContext(), message,
      Toast.LENGTH_SHORT);
    myToast.show();
   }

   updatingTimer.scheduleAtFixedRate(notify, 1 * 1000, frequency);
  } catch (Exception ex) {
   Log.i(TAG, ex.toString());
  }
 }

 public void displayNotificationMessage(String message) {
  Notification notif = new Notification(icon, message,
    System.currentTimeMillis());

  // enabling vibrate
  boolean checkVibration = preferences
    .getBoolean("checkVibration", false);
  if (checkVibration)
   vibrtationEnabled(notif);

  // enabling sound
  boolean checkSound = preferences.getBoolean("checkSound", false);
  if (checkSound)
   soundEnabled(notif);

  PendingIntent contentIntent = PendingIntent.getActivity(this, 0,
    new Intent(this, BackgroundServiceActivity.class), 0);

  notif.setLatestEventInfo(this, "Notification!", message, contentIntent);
  notif.defaults |= Notification.DEFAULT_LIGHTS;
  notificationmanager.notify(NOTIFICATION_ID, notif);
  NOTIFICATION_ID++;
 }

 public void vibrtationEnabled(Notification notification) {
  long[] vibrate = { 0, 100, 200, 300 };
  Vibrator vibrator = (Vibrator) getSystemService(Context.VIBRATOR_SERVICE);
  vibrator.vibrate(vibrate, -1);

 }

 public static void soundEnabled(Notification notification) {
  notification.sound = Uri
    .parse("android.resource://com.stock.app/raw/notifsound");
  notification.defaults |= Notification.DEFAULT_SOUND;

 }

 public void checkValues() {
  SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd kk:mm:ss");
  Calendar c = Calendar.getInstance();
  c.set(Calendar.YEAR, Calendar.MONTH, Calendar.DAY_OF_MONTH,
    Calendar.HOUR, Calendar.MINUTE, Calendar.SECOND);
  Date time = c.getTime();
  displayNotificationMessage(sdf.format(time));
 }
}

Conclusion

This is a sample code that will make your life easier :) If you want full application source code @me.

Android HTML parser in less than 5 minutes.

2011-10-25T04:59:00.000-07:00

Yes it's true. You can create a simple application that parse a html document and get all data you need in less than 5 minutes.

Introduction

In this tutorial I will use standalone Java SE parser called Jsoup. We have few jsoup files available:

In android world size matter so I want only my jsoup-1.6.1-sources.jar. So far jar is an archive so I use 7-zip to extract content of jsoup-1.6.1-sources.jar into folder. Next thing is to create Android Application from Eclipse IDE.

After extracting sources from jsoup you should copy all directories inside your src folder. You should have similar application structure:

public class HtmlAParseActivity extends Activity {
 EditText text1;
 Button btn1;

 /** Called when the activity is first created. */
 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);
  text1 = (EditText) findViewById(R.id.editText1);
  btn1 = (Button) findViewById(R.id.button1);
  btn1.setOnClickListener(new OnClickListener() {

   @Override
   public void onClick(View v) {
    // TODO Auto-generated method stub
    Document doc;
    try {
     doc = Jsoup.connect(text1.getText().toString()).get();
     Elements links = doc.select("a[href]");
     Elements media = doc.select("[src]");
     Elements imports = doc.select("link[href]");
     print("\nMedia: (%d)", media.size());
     for (Element src : media) {
      if (src.tagName().equals("img"))
       print(" * %s: <%s> %sx%s (%s)", src.tagName(),
         src.attr("abs:src"), src.attr("width"),
         src.attr("height"),
         trim(src.attr("alt"), 20));
      else
       print(" * %s: <%s>", src.tagName(),
         src.attr("abs:src"));
     }

     print("\nImports: (%d)", imports.size());
     for (Element link : imports) {
      print(" * %s <%s> (%s)", link.tagName(),
        link.attr("abs:href"), link.attr("rel"));
     }

     print("\nLinks: (%d)", links.size());
     for (Element link : links) {
      print(" * a: <%s>  (%s)", link.attr("abs:href"),
        trim(link.text(), 35));
     }
    } catch (IOException e) {
     // TODO Auto-generated catch block
     e.printStackTrace();
    }

   }
  });
 }

 private static void print(String msg, Object... args) {
  System.out.println(String.format(msg, args));
 }

 private static String trim(String s, int width) {
  if (s.length() > width)
   return s.substring(0, width - 1) + ".";
  else
   return s;
 }
}

Of course don't forget to add permission for internet connection.

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.persmission.ACCESS_NETWORK_STATE" />

Code in HtmlAParseActivity was from org.jsoup.example package with some modifications.

Thats all.

Insert Update row with MERGE keyword SQL 2008

2011-09-27T13:15:00.000-07:00

Few days ago I've got question how to perform insert/update taks in one query. I couldn't answer because I've never used MERGE in SQL 2008 Server. With my curiosity I make reaserch and google and found a solution. Furthermore almost all examples about MERGE was connected with two tables joining by PK-FK but I needed MERGE with one table.For show this query let first prepare a simple table:

CREATE TABLE [dbo].[Target](
	[EmployeeID] [int] IDENTITY(1,1) NOT NULL,
	[EmployeeName] [nvarchar](500) NOT NULL,
 CONSTRAINT [PK_Target] PRIMARY KEY CLUSTERED 
(
	[EmployeeID] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF,
 ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]
GO

Now It's time for write stored procedure that takes adventage of MERGE.

ALTER PROCEDURE [dbo].[TargetInsertUpdate]
(
   @EmployeeID INT,
   @EmployeeName NVARCHAR(500),
   @NewEmployeeID   int OUTPUT
)
AS
SET NOCOUNT ON


MERGE dbo.[Target]  T
-- To check if row is in database we put
-- existing row data inside USING (Source table )(S)
-- if row exists then name is updated
-- otherwise new row is added
-- and @NewEmployeeID indicates newly added ID
USING (SELECT @EmployeeID as EmployeeID,@EmployeeName as EmployeeName) as S
ON T.EmployeeID = S.EmployeeID
WHEN NOT MATCHED BY TARGET THEN
INSERT(EmployeeName) VALUES(S.EmployeeName)
WHEN MATCHED THEN
UPDATE SET T.EmployeeName = S.EmployeeName;

SET @NewEmployeeID = scope_identity()
GO

How to Send Email via Java Mail, CKEditor with NetBeans IDE

2011-06-20T02:22:00.001-07:00

This post is copy of my article from here.

Introduction

In this tutorial I will show you how to create a simple JFrame to send email containing HTML content:

This article is divided into several parts, covering topics from the writing of simple e-mail sender Java classes to the integration of a JFrame with CKEditor, which is a rich web HTML editor.

Downloading and Registering Libraries in NetBeans IDE 6.8

First of all, you need to download the latest version of Java Mail from this page, as well as DJ Native Swing. After you download the libraries, you need to put them into theNetBeans Library Manager. I recommend you store all libraries in, for example, C:\Program Files\Java\libraries.

Creating a Java Application and Adding Libraries to the Project

Take the following steps to begin creating the application:

Choose File -> New Project -> Java Application. Click Next.
When Name and Location Window shows up, name your project FCKEditorEmailSender and uncheck Create Main Class so that you end up creating an empty project. Click Finish.
In the Projects Tab click right click Libraries and Add Library from the menu. Then select the libraries which you added from Library Manager. You should have now Java Mail and DJNativeSwing JAR files. Your project should now look like the image shown below:

Creating the Package and Java Classes

Now let's do the real coding work. Go to the project you created and then create a package named EmailSender. In this package, create a Java class named EmailSender (the same name, don't worry) from the New File dialog. In the class, create private fields as shown below:

public class EmailSender {
  private String smtpServer;
  private String port;
  private String user;
  private String password;
  private String auth;
  private String from;

Provide a simple constructor by pressing ALT + INSERT and selecting Constructor... . Select all the fields in the window.

To enable the sending of e-mails by the Java Mail API, you need to create a Properties object where you put all the needed information about SMTP session, such as the server, port, and user. For this purpose create the following method:

private Properties prepareProperties()

Next, when you prepare the Properties object, you can simply model an email message. This method returnsa MimeMessage (which stands for Multipurpose Internet Mail Extensions Message Class). Then create this method:

private MimeMessage prepareMessage(Session mailSession,String charset,
String from, String subject,
String HtmlMessage,String[] recipient)

The next step about sending emails via Internet involves creating a method for sending HTML content messages. Create this method:

public void sendEmail(String subject,String HtmlMessage,String[] to)

Now we add the implementations of the methods shown above:

private Properties prepareProperties()
{
   Properties props = new Properties();
   props.setProperty("mail.smtp.host", smtpServer);
   props.setProperty("mail.smtp.port", port);
   props.setProperty("mail.smtp.user", user);
   props.setProperty("mail.smtp.password", password);
   props.setProperty("mail.smtp.auth", auth);
   return props;
}

private MimeMessage prepareMessage(Session mailSession,String charset,
                                        String from, String subject,
                                        String HtmlMessage,String[] recipient) {
        //Multipurpose Internet Mail Extensions
        MimeMessage message = null;
        try {
            message = new MimeMessage(mailSession);
            message.setFrom(new InternetAddress(from));
            message.setSubject(subject);
            for (int i=0;i<recipient.length;i++)
                message.addRecipient(Message.RecipientType.TO, new InternetAddress(recipient[i]));
            message.setContent(HtmlMessage, "text/html; charset=\""+charset+"\"");
        } catch (Exception ex) {
            Logger.getLogger(EmailSender.class.getName()).log(Level.SEVERE, null, ex);
        }
        return message;
    }

public void sendEmail(String subject,String HtmlMessage,String[] to)
    {
        Transport transport = null;
        try {
            Properties props = prepareProperties();
            Session mailSession = Session.getDefaultInstance(
                            props, new SMTPAuthenticator(from, password, true));
            transport =  mailSession.getTransport("smtp");
            MimeMessage message = prepareMessage(mailSession, "ISO-8859-2",
                                                from, subject, HtmlMessage, to);
            transport.connect();
            Transport.send(message);
        } catch (Exception ex) {    
        }
        finally{
            try {
                transport.close();
            } catch (MessagingException ex) {
                Logger.getLogger(EmailSender.class.getName()).
                                                    log(Level.SEVERE, null, ex);
            }
        }
    }

package EmailSender;

import javax.mail.Authenticator;
import javax.mail.PasswordAuthentication;

public class SMTPAuthenticator extends Authenticator{
    private String username;
    private String password;
    private boolean needAuth;

    public SMTPAuthenticator(String username, String password,boolean needAuth)
    {
        this.username = username;
        this.password = password;
        this.needAuth = needAuth;
    }

    @Override
    protected PasswordAuthentication getPasswordAuthentication() {
        if (needAuth)
            return new PasswordAuthentication(username, password);
                else return null;
    }
}

Creating a Swing Form to Provide a Nice GUI

Now that we have finished the e-mail work, we concentrate on the Swing and FCKEditor integration. You need to click right button over package EmailSender and choose New -> JFrame Form, call this class SendEmail and put this class in EmailSender package. Now right click over JFrame Design View and select: Set Layout -> Border Layout.

Now when you try to drop JPanel from Pallete into Design View you will see a few borders which are simpy Content Holders of Border Layout. Please read about BorderLayout from official Java Docs. Click Panel from Pallete and drop panel as is in image below. In this area you will next put controls to get smtp values.

Now right click over the panel above and select : Set Layout -> Null Layout. This will make your controls not floating when user will resize window and secondly controls will be in the same position as it was created in Design view. Test with some diffrent Layouts when you run your application to see what will happen :)Now you will need to create buttons to interact with user. Put new JPanel into lower "Place holder".

Add the two buttons:

And we are close to finishing the tutorial. Last thing to do is put FCKEditor in main method. Modify your:


public static void main(String[] args) 
    UIUtils.setPreferredLookAndFeel();
    NativeInterface.open();
    final String configurationScript =
      "FCKConfig.ToolbarSets[\"Default\"] = [\n" +
      "['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],\n" +
      "['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],\n" +
      "['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],\n" +
      "['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],\n" +
      "'/',\n" +
      "['Style','FontFormat','FontName','FontSize'],\n" +
      "['TextColor','BGColor'],\n" +
      "'/',\n" +
      "['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],\n" +
      "['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote'],\n" +
      "['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],\n" +
      "['Link','Unlink','Anchor'],\n" +
      "['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak', '-', 'ShowBlocks'],\n" +
      "];\n" +
      "FCKConfig.ToolbarCanCollapse = false;\n";
        java.awt.EventQueue.invokeLater(new Runnable() {
            public void run() {
                htmlEditor = new JHTMLEditor(HTMLEditorImplementation.FCKEditor,
JHTMLEditor.FCKEditorOptions.setCustomJavascriptConfiguration(configurationScript));
                SendEmail es2 = new SendEmail();
                es2.setSize(new Dimension(800,600));
                es2.add(htmlEditor,BorderLayout.CENTER);
                es2.setLocationByPlatform(true);
                es2.setVisible(true);
            }
        });
    }

Now when you replace main method go to your Design View and double click both buttons to generate actionPerformed . Put this codes into proper buttons.Notice that I used code below to provide new Thread to prevent block Graphical User Interface during send e-mail:


javax.swing.SwingUtilities.invokeLater(new Runnable() {
  public void run() {
    emailer.sendEmail(subject.getText(),
    htmlEditor.getHTMLContent(),
    recipientsString); 
    }
});


private void sendEmailActionPerformed(java.awt.event.ActionEvent evt) {                                          
        // TODO add your handling code here:
                StringTokenizer recepientsTokenizer = new StringTokenizer(to.getText(), ",");
                final String[] recipientsString = new String[recepientsTokenizer.countTokens()];
                for (int i = 0; i < recipientsString.length; i++) {
                    recipientsString[i] = recepientsTokenizer.nextToken();
                }
                 final EmailSender emailer = new EmailSender(smtpServer.getText(),
                        port.getText(), username.getText(),
                        password.getPassword().toString(),
                        "true", from.getText());
              javax.swing.SwingUtilities.invokeLater(new Runnable() {
            public void run() {
                emailer.sendEmail(subject.getText(),
                        htmlEditor.getHTMLContent(),
                        recipientsString);
            }
        });
    }


private void jButton2ActionPerformed(java.awt.event.ActionEvent evt) {                                         
  // TODO add your handling code here:
  dispose();
}

Now you can build your project and show off to your friends :)
Here you can download the packed NetBeans project.
Tip:

When you download DJ Native you can double-click the DJNativeSwing-SWTDemo.jar to look closer into the various amazing classesm such as JWebBrowser JHtmlEditor with different HtmlEditors.

Persist checkbox client side row selection inside GridView in asp:UpdatePanel

2011-06-16T12:47:00.000-07:00

Comming Soon :-) //After defend my thesis.

Disappearing content in FCKEditor after mode change.

2011-06-13T03:27:00.000-07:00

Comming soon :-)

Hightly efficiently GridView with JSON and Caching(in part 2)

2011-05-29T11:55:00.000-07:00

Introduction

Hello. In this article I will show you how to extremely improve GridView performance. For this purpose I prepared table with huge amout of data (about 4000 rows). We will start with trivial things and then we will do real code exhibition. Note that I don't use pagination now.

Little things matter. Really.

Take a look at this GridView:

<asp:GridView ID="GblContactsGv" runat="server" AutoGenerateColumns="False" CssClass="EntityGridView"
        OnRowCommand="GblContactsGv_RowCommand" OnRowDeleting="GblContactsGv_Deleting">
        <Columns>
            <asp:TemplateField HeaderText="ID">
                <ItemTemplate>
                    <asp:Label runat="server" ID="glbContactIdLbl" Text='<%# Eval("gblContactId") %>'
                        CssClass="label" />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Email">
                <ItemTemplate>
                    <asp:Label runat="server" ID="glbContactIdLbl" Text='<%# Eval("Email") %>' CssClass="label" />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Phone">
                <ItemTemplate>
                    <asp:Label runat="server" ID="glbContactIdLbl" Text='<%# Eval("Phone") %>' CssClass="label" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

This simple GridView will render your HTML such like this:

<tr>
   <td>
                    <span class="label" id="ctl00_CenterColumn_GblContactsGv_ctl02_glbContactIdLbl">78</span>
                </td><td>
                    <span class="label" id="ctl00_CenterColumn_GblContactsGv_ctl02_glbContactIdLbl">test@test.test 78</span>
                </td><td>
                    <span class="label" id="ctl00_CenterColumn_GblContactsGv_ctl02_glbContactIdLbl">123456 78</span>
                </td>
  </tr>

On the other hand the same result could be done with this GridView:

<asp:GridView ID="GblContactsGv" runat="server" AutoGenerateColumns="False" CssClass="EntityGridView"
        OnRowCommand="GblContactsGv_RowCommand" OnRowDeleting="GblContactsGv_Deleting">
        <Columns>
            <asp:BoundField DataField="gblContactId" HeaderText="ID" />
            <asp:BoundField DataField="Email" HeaderText="Email" />
            <asp:BoundField DataField="Phone" HeaderText="Phone" />
        </Columns>
</asp:GridView>

So again let see what is going to send to browser:

<tr>
    <td>
        78
    </td>
    <td>
        test@test.test 78
    </td>
    <td>
        123456 78
    </td>
</tr>

In first code listing each row(for 3 columns) contains 438 characters and in second GridView using BoundFields each row contains just 112 characters. In this case I saved 326 characters per row. Assuming you use UTF-8 as page encoding it's 652 bytes by row!

Depending on amount of rows and columns I can save about 30%-40% of data. Wherever you can you should avoid any control with runat="server" because each row is using NamingContainer to add unique ClientID.

Avoid PostBacks and UpdatePanels.

Now I will show you how to make dramatically performance improvement. In this scenario I will use GridView shown above but I added all columns definied in C# class holding database table. I also fill table with ~ 4000 rows. I will create 3 pages: PostBack.aspx, UpdatePanel.aspx and jQuery.aspx. First will won't use any AJAX, second will use build in asp.net UpdatePanel to create AJAX Request and last example will be using jQuery.ajax() method with JSON and [WebMethod()].

<asp:GridView ID="GblContactsGv" runat="server" AutoGenerateColumns="False" CssClass="EntityGridView"
        OnRowCommand="GblContactsGv_RowCommand" OnRowDeleting="GblContactsGv_Deleting">
        <Columns>
            <asp:BoundField DataField="gblContactId" HeaderText="ID" />
            <asp:BoundField DataField="Email" HeaderText="Email" />
            <asp:BoundField DataField="Phone" HeaderText="Phone" />
            <asp:BoundField DataField="URL" HeaderText="URL" />
            <asp:BoundField DataField="Description" HeaderText="Description" HtmlEncode="false" />
            <asp:BoundField DataField="Address" HeaderText="Address" />
            <asp:TemplateField HeaderText="Delete">
                <ItemTemplate>
                    <asp:LinkButton runat="server" ID="deleteBtn" CommandArgument='<%# Eval("gblContactId") %>' CommandName="delete" 
                    Text="Delete" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
</asp:GridView>

Now we will need FireBug and Network Tab to show some magic.

Here I got first page. Whenever I load page or perform <asp:linkbutton /> action I receive alost 3MB of data.

Now I thought a UpdatePanel will be better solution doing AJAX request. Let's try:

<asp:UpdatePanel runat="server" ID="upPanel1">
        <ContentTemplate>
   <!-- The same GridView like before -->
  </ContentTemplate>
</asp:UpdatePanel>

And again take a look what happen when I click LinkButton:

Image above show that Request["__VIEWSTATE"] (1,13 MB) and Request["__EVENTVALIDATION"] (31,7 KB) is extremly big! Whenever you use ajax request each time those two hidden inputs are send to server. Even when you update just one single Label.

Now I will show how to do simple action via jQuery.ajax() and C# [WebMethod()] for performance improve. One thing what will change in aspx file will be script tag:

$(document).ready(function () {
    $('.delete').click(function () {
        var commentId = $(this).closest('tr').find(':hidden').val();
        var row = $(this).closest('tr');

        $.ajax({
            type: "POST",
            url: "jQuery.aspx/DeleteComment",
            data: "{'c':'" + commentId + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            beforeSend: function () {
                $('#Result').html('Deleting...');
            },
            success: function (msg, textStatus, jqXHR) {
                if (msg.d == '0') {
                    row.closest('tr').hide();
                    $('#Result').html('Deleted !');
                } else {

                }
                return false;
            },
            error: function (jqXHR, textStatus, errorThrown) {
                $('#Result').html('Error !' + errorThrown);
            }
        });
        return false;
    });

And in GridView let modify last column:

<asp:TemplateField HeaderText="Delete">
 <ItemTemplate>
  <input type="hidden" value='<%# Eval("gblContactId") %>' />
  <asp:LinkButton runat="server" ID="deleteBtn" CommandArgument='<%# Eval("gblContactId") %>'
   CommandName="delete" CssClass="delete" Text="Usuń" />&nbsp;&nbsp;
  <a href="#" class="delete">Delete</a>
 </ItemTemplate>
</asp:TemplateField>

Last thing to show off is aspx.cs method:

[WebMethod()]
    public static string DeleteComment(string c)
    {
        string response = "";

        if (DataRepository.GblContactProvider.Delete(int.Parse(c)))
        {
            response = "0";
        }
        return response;
    }

Now let's look on Firebug and see some magic. Here we got Request data:

And here we got answer from server:

Here is real performance shock. I don't want even count performance improvment!

Loading data with JSON

If we have need to load huge amout of data we should consider load pure JSON data and process this data inside JavaScript code. Before we perform this we need have class which has [Serializable()] attribute and then use any JSON serializer available in .NET world. Here I used build in System.Runtime.Serialization.Json.DataContractJsonSerializer class. Here is example:

[Serializable()]
class Contact
{
    public int GblContactId;
    public string Email;
    //Other properties

    public Contact(int gblcontactId, string email, string url, string desc, string phone, string address)
    {
        this.GblContactId = gblcontactId;
        this.Email = email;
        //Other stuff in constructor
    }
    //GetAll() for load data
    //....
    //....
}
// Inside aspx.cs
[WebMethod()]
    public static string LoadCommentsAjax()
    {
        List contacts = Contact.GetAll();
        return Serialize(contacts);
    }

    public static string Serialize<T>(T obj)
    {
        DataContractJsonSerializer serializer = new DataContractJsonSerializer(obj.GetType());
        using (MemoryStream ms = new MemoryStream())
        {
            serializer.WriteObject(ms, obj);
            return Encoding.Default.GetString(ms.ToArray());
        }
    }

For big JSON data we need to modify web.config:

<system.web.extensions>
<scripting>
  <scriptResourceHandler enableCaching="true" enableCompression="true"/>
  <webServices>
 <jsonSerialization maxJsonLength="2147483644" />
  </webServices>
</scripting>
</system.web.extensions>

Now let's test this with script:

$('.ajaxloadjQuery').click(function () {
    $.ajax({
        type: "POST",
        url: "jQuery.aspx/LoadCommentsAjax",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        beforeSend: function () {
            $('#Result').html(' Loading comments ...');
        },
        success: function (msg, textStatus, jqXHR) {
            var items = $.parseJSON(msg.d);

            $(items).each(function () {
                console.log('ID: ' + this.GblContactId + ' Address: ' + this.Address + ' Description ' + this.Description + ' Email: ' + this.Email + ' Phone: ' + this.Phone + ' URL: ' + this.Url);
            });
            var jq = jqXHR;
            return false;
        },
        error: function (jqXHR, textStatus, errorThrown) {}
    });
    return false;
});

When we click we will have ajax request with just 888.2 KB rather than about 2.8MB. It's more than 30% less request size.

One important notice is that in $(items).each(function(...)) I've used something this.GblContactId or this.Address. This is because DataContractJsonSerializer automatically maps serialized class into JSON object with the same property names. Okey we used Console.Log() to print output into FireBug but I will show you a complete script to create html table from client side based on JSON data:

$('.ajaxloadjQuery').click(function () {
    $.ajax({
        type: "POST",
        url: "jQuery.aspx/LoadCommentsAjax",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        beforeSend: function () {
            $('#Result').html(' ładuje komentarze ...');
        },
        success: function (msg, textStatus, jqXHR) {
            var ts = textStatus;
            var items = $.parseJSON(msg.d);
            var rows = '';
            //Adding header info:
            rows += '<tr>'
            rows += '<th>ID</th>';
            rows += '<th>Address</th>';
            rows += '<th>Description</th>';
            rows += '<th>Email</th>';
            rows += '<th>Phone</th>';
            rows += '<th>Url</th>';
            rows += '<th>Delete</th>';
            rows += '</tr>';
            var counter = 0;
            //('#myTable').show();
            $(items).each(function () {
                rows += '<tr>';
                rows += '<td>' + this.GblContactId + '</td>';
                rows += '<td>' + this.Address + '</td>';
                rows += '<td>' + this.Description + '</td>';
                rows += '<td>' + this.Email + '</td>';
                rows += '<td>' + this.Phone + '</td>';
                rows += '<td>' + this.Url + '</td>';
                rows += '<td> <input type="hidden" value="' + this.GblContactId + '" /> <a href="#" class="delete">Delete</a> </td';
                rows += '</tr>';
                counter++;
                //For showing JSON data in portion with 100 rows
                if (counter % 100 == 0) {
                    $('#myTable').append(rows);
                    rows = '';
                }
            });
            $('#myTable').append(rows);
            var jq = jqXHR;
            return false;
        },
        error: function (jqXHR, textStatus, errorThrown) {
            var ts = textStatus;
            var err = errorThrown;
            var jq = jqXHR;
            $('#Result').html('Pojawił się błąd !' + err);
            console.log(ts + ' ' + err + ' ' + jq);
        }
    });
    return false;
});

Conclusions

Here doing jQuery.ajax with big data set we saved approx 30% on our Request size passing just only JSON insted of rendered html table(GridView). Next very suprising thing that really matter was usage of Bound Fields in contradiction to using standard server controls. We saved again 30% of Request size. It's really good result.

Yes we could use pagination for making our Request much more smaller and use more sophisticated architecture but sometimes we are forced to send big data package.

Most useful features in Firebug 1.7.0

2011-05-23T09:52:00.000-07:00

Comming soon :-)

Saving scroll position beetween pages in ASP.NET after redirecting

2011-05-21T10:30:00.000-07:00

Comming soon.

jQuery find function $.find('selector') versus traditional selecting $('selector')

2011-05-21T10:28:00.000-07:00

Comming soon.

SelectedIndexChanged doesn't fire with autopostback true in ASP.NET in List Control

2011-04-09T11:01:00.000-07:00

Rarely when developing application in ASP.NET you stuck on any ListControl and AutoPostBack="true" and SelectedIndexChanged won't trigger. Even when server receive postback your control don't response at all.

Today I will show and explain the problem: duplicate values inside ListItem.

RatioButtonList example

Now let imagine we have that piece of code:

        protected void rblShippingMethods_IndexChanged(object sender, EventArgs e)
        {
            //This action is always performed when user change item in RadioButtonList Control
            do_rblShippingMethods_IndexChanged();
        }

Let imagine that our datasource produce something like that. In this scenario we have shipping method as text and shipping method price as value for RadioButtonList :

Nothing complicated and this will work almost everytime.

houston we have a problem!

But when we have ListControl with Binding from any datasource it may happen that one or more ListItem can have the same value.When that situation happen rblShippingMethods_IndexChanged won't trigger.

I'm really confused when I wrote a solution for this case because event is connected with Index not Value inside ListControl. But nothing is perfect.

Don't panic!

What to do when two or more ListItem have the same value? Maybe ask end user to put diffrent values in user form! Oh no really it's dummy thought! We make our users happy and everything will work as always.

First thing we need to observe is fact the PostBack is send to server. Breakpoint was hit. But not the SelectedIndexChanged.

Think, think, think... BINGO

So when we found that server receive request we have to find which control causes the postback to our server. We can do it with

//Return full ClientID of postback source. So we can find the name of control and index
//For example:
//control = ctl00$MainContent$wizSubmitOrder$rblShippingMethods$0
//control = ctl00$MainContent$wizSubmitOrder$rblShippingMethods$1
//control = ctl00$MainContent$wizSubmitOrder$rblShippingMethods$2
String control = Request["__EVENTTARGET"];

We can see that only last part after $ sign is changing. That is our SelectedIndex!
So we can put this piece of code inside Page_Load:

if (Page.IsPostBack)
{
    rblShippingMethods_CustomMethodIndexChanged();
}
protected void rblShippingMethods_CustomMethodIndexChanged()
{
    String control = Request["__EVENTTARGET"];
    String args = Request["__EVENTARGUMENT"];
    if (control != null)
    {
        if (control.Contains("rblShippingMethods"))
        {
            String selectedIndex = control.Substring(control.LastIndexOf("$") + 1);
            int si = 0;
            if (int.TryParse(selectedIndex, out si))
            {
                //We manually chage selectedIndex and then we call
                //the same method when normally rblShippingMethods_IndexChanged event
                //would occur
                rblShippingMethods.SelectedIndex = si;
                do_rblShippingMethods_IndexChanged();
            }
        }
    }
}

java insert and read image from mysql

2011-04-05T13:35:00.000-07:00

Sometimes it may happen that we need to store a picture in some database table (MYSQL). At the beginning you should to create a table that will store our image data. Pictures and other binary files is kept in a BLOB data type inside table column. For this purpose we need to crate table.

CREATE TABLE IF NOT EXISTS `Images` (
  `ImageId` int(11) NOT NULL AUTO_INCREMENT,
  `Description` varchar(150) COLLATE utf8_polish_ci NOT NULL DEFAULT '-',
  `ImageData` blob NOT NULL,
  PRIMARY KEY (`ImageId`),
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_polish_ci

And now to manipulate the database we use two methods:

    //Insert Image
    public void InsertImage(String description,FileInputStream fotos);
    //read image from table with specific id
    public  BufferedImage getMySqlPhoto(int ImageId);

public  BufferedImage getMySqlPhoto(int ImageId){
        BufferedImage BI = null;
        Statement S;
        ResultSet rs;
        String sqlStatement = "SELECT ImageData FROM Images WHERE ImageId = '"+ImageId+"'";
        try {
            S = con.createStatement();
            rs = S.executeQuery(sqlStatement);
            if (rs.next()){
                Blob image = rs.getBlob("ImageData");
                InputStream input = image.getBinaryStream();
                BI=ImageIO.read(input);
                // set read buffer size
                input.close();
            }
        }
        catch (SQLException ex)
        {
            ex.printStackTrace();
        }
        catch (IOException ex)
        {
            ex.printStackTrace();
        }
        return BI;
    }
    public void InsertIntoZdjecie(String Description,FileInputStream fotos)
    {
        String INSERT = "INSERT INTO Images(Description,ImageData) VALUES (?,?)";
        System.out.println(INSERT);
        PreparedStatement ps1;

        try {
            ps1 = con.prepareStatement(INSERT);
            ps1.setString(1, Description);
            ps1.setBinaryStream(2, fotos);
            ps1.executeUpdate();
        } catch (SQLException ex) {
            ex.printStackTrace();
            
        }
    }

Isn't it cute ? :-)

Android Candlestick Chart with Google Chart API

2011-03-23T14:31:00.000-07:00

Good morning. Today I would like to share with other how to create CandleStick Chart with little support of Google Chart API.

Browsing around the web I hadn't found any good open source library for charting in android which directly support Candlestick Chart so I decided to use online solution based on HTTP GET/POST.

So let's start our sourvey.

First we need to take a look closer to Google Chart API. For this tutorial I will use simple basic text format to put series data inside HTTP GET request to get image I want to.
There is one thing which sadden me.

Basic text-formatted data lets you specify floating point values from 0—100, inclusive, as numbers. Values below zero are marked as missing; values above 100 are truncated to 100.

Preparing Chart Data

In most cases our data is larger than 100 and it would be stupid to have truncated all data. For this reason we need to do some scaling. Scaling will make all data suitable for requirements.

/**
     * This method transform any Double[] series to suitable series accepted by
     * Google Chart API
     */
    public static ArrayList<integer[]> transformChartSeries(ArrayList<double[]> input) {
        ArrayList<integer[]> scaledInput = new ArrayList<integer[]>();
        //Getting scale between minimum and maximum value from input series
        double scaleRatio = getScaleRatio(Min(input), Max(input));
        for (int i = 0; i &lt; input.size(); i++) {
            scaledInput.add(scale(input.get(i), scaleRatio));
            displayArray(scaledInput.get(i));
        }
        return scaledInput;
    }

    private static double Max(ArrayList<double[]> arr) {
        ArrayList<double> tmp = new ArrayList<double>();
        for (int i = 0; i &lt; arr.size(); i++) {
            tmp.add(Max(arr.get(i)));
        }
        return Collections.max(tmp);
    }

    private static double Max(Double[] input) {
        return Collections.max(Arrays.asList(input));
    }

    private static double Min(ArrayList<double[]> arr) {
        ArrayList<double> tmp = new ArrayList<double>();
        for (int i = 0; i &lt; arr.size(); i++) {
            tmp.add(Min(arr.get(i)));
        }
        return Collections.min(tmp);
    }

    private static double Min(Double[] input) {
        return Collections.min(Arrays.asList(input));
    }

    private static double getScaleRatio(double min, double max) {
        double ratio = 0;
        //Dividing value. You can manipulate this parameter to get 
        //smaller or bigger chart.
        int div = 80;
        ratio = (max - min) / div;
        return ratio;
    }
    private static Integer[] scale(Double[] input, double ratio) {
        Integer[] scaledData = new Integer[input.length];
        for (int i = 0; i &lt; input.length; i++) {
            scaledData[i] = new Integer((int) Math.round(input[i] / ratio));
        }
        return scaledData;
    }

Preparing Chart

Now when we finished data transformation we can create CandleStick Chart with Google Chart API :-) We will use cht=lc (Line Chart) as scaffolding for CandleStick Chart. Whole trick with line chart is that we will hide series data with chd:t0 parameter and next we will display CandleSticks with chm=F (CandleStick Markers). In chm=F link you have full documentation of markers.

public Intent execute(Context context) {
        Double[] _1st = CandleStickChart.generateRandomArray(seriesCount);
        Double[] _2nd = CandleStickChart.incrementArray(_1st, 1000d);
        Double[] _3rd = CandleStickChart.incrementArray(_1st, 2000d);
        Double[] _4th = CandleStickChart.incrementArray(_1st, 3000d);
        ArrayList<double[]> series = new ArrayList<double[]>();
        series.add(_1st);
        series.add(_2nd);
        series.add(_3rd);
        series.add(_4th);

        String abc = createCandleStickChart(series);
        Uri uri = Uri.parse(abc);
        Intent intent = new Intent(Intent.ACTION_VIEW, uri);
        return intent;
        // TODO Auto-generated method stub
    }

private String createCandleStickChart(ArrayList<double[]> dataSeries) {
        ArrayList<integer[]> chd = transformChartSeries(dataSeries);
        StringBuilder sbChart = new StringBuilder();
        //Four series data
        StringBuilder sb1 = new StringBuilder("-1,");
        StringBuilder sb2 = new StringBuilder("-1,");
        StringBuilder sb3 = new StringBuilder("-1,");
        StringBuilder sb4 = new StringBuilder("-1,");
        //Axis Labels
        StringBuilder axis = new StringBuilder("&amp;chl=");
        for (int i = 0; i &lt; chd.get(0).length; i++) {
            sb1.append((chd.get(0)[i]) + ",");
            sb2.append((chd.get(1)[i]) + ",");
            sb3.append((chd.get(2)[i]) + ",");
            sb4.append((chd.get(3)[i]) + ",");
            axis.append(i + "|");
        }

        sb1.append("-1|");
        sb2.append("-1|");
        sb3.append("-1|");
        sb4.append("-1");
        sbChart.append("https://chart.googleapis.com/chart?");//API URL
        sbChart.append("chs=800x200&amp;");//Chart Size
        sbChart.append("cht=lc&amp;chm=F,0000FF,0,,10&amp;");//CandleStick marker
        sbChart.append("chxt=y&amp;");//Visible axis: Left y-axis
        sbChart.append("chd=t0:");//Chart Data t0 - all series are hidden
        String chdd = sbChart.toString() + sb1.toString() + sb2.toString() + sb3.toString() + sb4.toString() + axis.toString();
        System.out.println(chdd);
     
     return chdd;
 }

Final result

Code above use Intent.ACTION_VIEW to open WebActivity for display generated image from Google Chart API

Source Code

You can download Charting Demo application from
here

Check/uncheck checkbox in table (GridView) with jQuery. Modern way.

2011-03-16T14:52:00.000-07:00

Few moments ago I found a really preety and simple way to check/unckeck all input:checkbox inside GridView(table) column. I was really shocked!
And so you code:

.aspx

<asp:GridView ID="CmpJobOfferCandidatesGv" runat="server" AutoGenerateColumns="False"
 CssClass="EntityGridView">
 <Columns>
 <asp:TemplateField>
 <HeaderTemplate>
  <asp:CheckBox runat="server" ID="checkAllChb" />
 </HeaderTemplate>
  <ItemTemplate>
   <asp:CheckBox runat="server" ID="inviteToExamChb" style="width:20px;margin:0 auto;display:block;" />
  </ItemTemplate>
 </asp:TemplateField>
  <asp:BoundField DataField="ID" HeaderText="ID" ItemStyle-Width="25px" />
 </Columns>
</asp:GridView>

.js

var chbClickEvent = function () {
    $('table[id*="CmpJobOfferCandidatesGv"] tr > td input:checkbox').each(function (index, Element) {
        $(this).trigger("click");
    })
}
$(document).ready(function () {
    $('input:checkbox[id*="checkAllChb"]').click(chbClickEvent);
});

The magic above is caused because I trigger click event foreach checkbox in GridView Column instead of dealing with bunch of if statements to figure out state of checkbox.

$(document).ready(function () {
    $('input:checkbox[id*="checkAllChb"]').click(function () {
        $('table[id*="CmpJobOfferCandidatesGv"] tr > td input:checkbox').each(function (index, Element) {
            if ($(Element).attr('checked') == false) {
                $(Element).attr('checked', true);
            } else {
                $(Element).attr('checked', false);
            }
        });
    });
});

JavaServer Faces 2.0 ClientId with jQuery

2011-02-21T00:15:00.000-08:00

Introduction

In this article I will show how to work with clientId property of UIComponent, which has been improved in JavaServer Faces 2.0 about finding concrete id from client side and how use this knowledge with jQuery library. We will examine Composite Components, Facelets Composition , Facelets Templating and UIComponents with NamingContainer (for example UIData).

Pre-requirements

In this article I used NetBeans 6.9 IDE, Mojarra 2.0.2 as JSF 2.0 implementation and GlassFish 3.0.1.

Hello ClientId

In this step we will create first simple web application with only one page.
1.From NetBeans wizard choose Java Web -> Web application ->ClientIdExampleApp -> Select EE 6 Web and Glassfish 3 -> Select JavaServer Faces Framework (with Facelets View ) and click finish.

Receiving ClientId from new JSF 2.0 ${component} EL Expression

<h:form id="form1" prependId="true">
   ${component.clientId}
 <h:commandButton id="btn1" value="${component.clientId}" />
 ${component.clientId}
 <h:panelGroup id="panel1" layout="block">
  ${component.clientId}
 </h:panelGroup>
</h:form>

That code should produce something like that:

<form enctype="application/x-www-form-urlencoded" action="/WebApplication1/faces/index.xhtml" method="post" name="form1" id="form1">
(1)form1
<input type="submit" (2)value="form1:btn1" name="form1:btn1" id="form1:btn1">
 (3)form1
 <div id="form1:panel1">
  (4)form1:panel1
 </div>
</form>

Although this example is really easy to code we can see that:

${component.clientId} returns the "nearest" parent UIComponent. Points (2) and (4) resolved clientId properly while (1) and (3) resolved clientId of parent: UIForm . If we need to create javascript function this solution is really quick and good enought. On the other hand when we need to have cross page javascript id reference better aproach is to use binding attributes.

Receiving ClientId from binding attributes of UIComponents

The second way is more complicated but is more effective in very various cases. Two steps are needed to get clientId by binding. First we need to add binding attribute and connect this attribute with Managed Bean property corresponding to particular UIComponent subclasses.
Simple form:

<h:form id="form1" prependId="true" binding="(1)${index.form1}" style="background-color: red">
           ClientId: (2)${index.form1.clientId}<br />
           Simple attribute of form1: (3)${index.form1.attributes["style"]}<br />
           <h:commandButton id="btn1" value="(4)#{index.form1.findComponent('btn1').clientId} :-)" />
            
            <h:panelGroup id="panel1" layout="block">
                (5)${component.clientId} <br />
            </h:panelGroup><br />
          panel1 clientId: (6)#{index.form1.findComponent("panel1").clientId} <br />
          panel1 layout attribute (7)#{index.form1.findComponent("panel1").attributes["layout"]}
</h:form>

Java managed bean code:

@ManagedBean
@RequestScoped
public class index {

    private UIForm form1;

    public UIForm getForm1() {
        return form1;
    }

    public void setForm1(UIForm form1) {
        this.form1 = form1;
    }

    public index() {
    }
}

Rendered html:

<form style="background-color: red;" enctype="application/x-www-form-urlencoded" action="/WebApplication1/faces/index.xhtml;jsessionid=64e609789a8d90f6993151f964d4" method="post" name="form1" id="form1">
           ClientId: form1<br>
           Simple attribute of form1: background-color: red<br /><input type="submit" value="form1:btn1 :-)" name="form1:btn1" id="form1:btn1"><div id="form1:panel1">
                form1:panel1 <br /></div><br />
          panel1 clientId: form1: panel1 <br />
          panel1 layout attribute: block
</form>

Short clarification
In points: (1),(2),(3) and (5) we used dolar sign $ to access properties (form1 and component)of managed bean. In (4),(7),(6) we used hash sign # to refer UIComponent methods like findComponent to find child component and uses panel1 properties.

ClientId with NamingContainer

Now I will put some examples of my web application and explain how does it all work. Let start with h:dataTable with few rows and two columns. Second column will contain a h:commandButton and we want use this button to do some client javascript action.
Here is simple datatable:

<h:dataTable id="dt1" binding="${clientIdExample.dt1}" value="#{clientIdExample.localeList}" var="item"
    dir="LTR" frame="hsides" rules="all" summary="This is a JSF code to create dataTable." >

 <f:facet name="header">
  <h:outputText value="This is 'dataTable' demo" />
 </f:facet>
 <h:column id="col1">
  ${component.clientId}
  <f:facet name="header">
   <h:outputText value="name"/>
  </f:facet>
  <h:outputText value="#{item.displayName}" style="margin:5px; padding:5px"></h:outputText>
 </h:column>
 <h:column id="col2">
  <f:facet name="header">
   <h:outputText value="click"/>
  </f:facet>
  <h:commandButton id="editRow"  value="click" onclick="toggleRow('${component.clientId}');return false;"
       style="margin:5px; padding:5px"/>
 </h:column>
 <f:facet name="footer">
  <h:outputText value="The End" />
 </f:facet>
</h:dataTable>

And of course our ManagedBean:

@Named(value = "clientIdExample")
@RequestScoped
public class ClientIdExample {
    private Locale[] localeList;
    private HtmlDataTable dt1;

    public Locale[] getLocaleList() {
        Locale[] tmp = Locale.getAvailableLocales();
        localeList = new Locale[5];
        for (int i=0;i< localeList.length;i++){
            localeList[i] = tmp[i];
        }

        return localeList;
    }

    public void setLocaleList(Locale[] localeList) {
        this.localeList = localeList;
    }

    public HtmlDataTable getDt1() {
        return dt1;
    }

    public void setDt1(HtmlDataTable dt1) {
        this.dt1 = dt1;
    }

    public ClientIdExample() {
    }
}

And generated HTML should look like:

<table rules="all" frame="hsides" summary="This is a JSF code to create dataTable." dir="LTR" id="form1-dt1">
        <thead>
            <tr><th scope="colgroup" colspan="2">This is 'dataTable' demo</th></tr>
            <tr>
                <th scope="col">name</th>
                <th scope="col">click</th>
            </tr>
        </thead>
        <tfoot>
            <tr><td colspan="2">The End</td></tr>
        </tfoot>
        <tbody>
            <tr class="">
                <td>
                    form1-dt1-0
                    <span style="margin: 5px; padding: 5px;">japoński (Japonia)</span></td>
                <td><input type="submit" style="margin: 5px; padding: 5px;" value="click" name="form1-dt1-0-editRow" id="form1-dt1-0-editRow"></td>
            </tr>
            <tr class="">
                <td>
                    form1-dt1-1
                    <span style="margin: 5px; padding: 5px;">hiszpański (Peru)</span></td>
                <td><input type="submit" style="margin: 5px; padding: 5px;" value="click" name="form1-dt1-1-editRow" id="form1-dt1-1-editRow"></td>
            </tr>
            <tr class="">
                <td>
                    form1-dt1-2
                    <span style="margin: 5px; padding: 5px;">angielski</span></td>
                <td><input type="submit" style="margin: 5px; padding: 5px;" value="click" name="form1-dt1-2-editRow" id="form1-dt1-2-editRow"></td>
            </tr>
            <tr class="">
                <td>
                    form1-dt1-3
                    <span style="margin: 5px; padding: 5px;">japoński (Japonia,JP)</span></td>
                <td><input type="submit" style="margin: 5px; padding: 5px;" value="click" name="form1-dt1-3-editRow" id="form1-dt1-3-editRow"></td>
            </tr>
            <tr>
                <td>
                    form1-dt1-4
                    <span style="margin: 5px; padding: 5px;">hiszpański (Panama)</span></td>
                <td><input type="submit" style="margin: 5px; padding: 5px;" value="click" name="form1-dt1-4-editRow" id="form1-dt1-4-editRow"></td>
            </tr>
        </tbody>
    </table>

Now I will present 3
ways to highlight entire row with click event. Those functions are simple so I don't put explaination.

1)
            function toggleRow(clientId)
            {
                $('#'+clientId).parent().parent().toggleClass("selectedRow");
            }
2)
$(document).ready(function(){
                $('input[id$=editRow]').click(function(){
                    $(this).parent().parent().toggleClass("selectedRow");
                    return false;
                });
            });
3)
$(document).ready(function(){
                $('#${clientIdExample.dt1.clientId} tr td > input').click(function(){
                    $(this).parent().parent().toggleClass("selectedRow");
                    return false;
                });
            });

Working with jQuery and JSF 2.0(javax.faces.SEPARATOR_CHAR)

Generally when you use jsf framework and look inside html output you can find that clientId is separated by colon sign ":". Unfortunatelly this sign is not allowed when you use jQuery library because is reserved for jQuery selectors. JavaServer Faces 2.0 comes with parameter: javax.faces.SEPARATOR_CHAR. In this case you should change default separator to another one which is accepted by jQuery. For example (web.xml):

<context-param>
        <param-name>javax.faces.SEPARATOR_CHAR</param-name>
        <param-value>-</param-value>
    </context-param>

Call ajax across Facelets Template and Clients

In this example I will show how to call ajax to update UIComponent in Template.xhtml from AjaxEngine.xhtml(Facelets Client). We will use javascript
jsf.ajax.request function instead of f:ajax and we will use clientId property of UIControl.
If we want to use javascript jsf.ajax.request in pure form we need to load appropriate client script

<h:outputScript name="jsf.js" library="javax.faces" target="head" />

This will generate something like this:

<script src="/PrimeFacesLearning/javax.faces.resource/jsf.js.jsf?ln=javax.faces&amp;stage=Development" type="text/javascript"></script>

Template.xhtml:

<h:body>
        <f:view contentType="text/html"  locale="pl_PL">
            <h:form id="form1" prependId="true" binding="#{template.form1}">
                <ui:debug id="debug1" rendered="true" hotkey="l">
                </ui:debug>
                <div id="container">
                    <div id="header"></div>
                    <div id="center-column">
                        <div id="left-column">
                            <h:outputText id="ajaxText" binding="#{template.ajaxText}" value="${ajaxEngine.firstname}" />
                        </div>
                        <br />
                        <p:panel id="right-column" styleClass="right-column" toggleable="true" closable="true">
                                <ui:insert name="right-column" >
                                </ui:insert>
                        </p:panel>
                    </div>
                </div>
            </h:form>
        </f:view>
</h:body>

DummyAjax.xhtml

<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./resources/layout/Template.xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:sc="http://java.sun.com/jsf/composite/Controls">

    <ui:define name="right-column">
        <h1> f:ajax example using Facelets Templating</h1>
        <h:outputScript name="jsf.js" library="javax.faces" target="head" />
        <script src="/PrimeFacesLearning/javax.faces.resource/jsf.js.jsf?ln=javax.faces&amp;stage=Development" type="text/javascript"></script>
        <h:panelGrid id="panelGrid1">
            <h:inputText value="#{ajaxEngine.firstname}" onkeyup="jsf.ajax.request(this, event,{render:'form1-text ${template.ajaxText.clientId} form1-count'}); return false">
            </h:inputText>
            <h:outputText id="text" value="#{ajaxEngine.firstname}" escape="false"/>
            <br />
            Firstname char count: <h:outputText id="count" value="#{ajaxEngine.count}" />
        </h:panelGrid>
    </ui:define>
</ui:composition>

/**
     * This code will be automatically called when jsf.ajax.request will
     * be populated from client side. 
     * Here we also set another property of DummyAjax - Integer count
     * to manipulate other variables in managed bean.
     * @param firstname
     */
    public void setFirstname(String firstname) {
        this.firstname = firstname;
        setCount(getFirstname().length());
    }

In code above we have two pages. Template.xhml and DummyAjax.xhtml as facelets template client. In template we have <h:outputText id="ajaxText" binding="#{template.ajaxText}" value="${ajaxEngine.firstname}" /> and in DummyAjax.xhtml we have:
<h:inputText id="input1" value="#{ajaxEngine.firstname}" />

<h:outputText id="text" value="#{ajaxEngine.firstname}" escape="false"/>

All those three controls refers to one managed bean property: #{ajaxEngine.firstname}. Next interesting thing is calling ajax on each keyup.
onkeyup="jsf.ajax.request(this, event,{render:'form1-text ${template.ajaxText.clientId} form1-count'}); return false"

Method expression for getting clientId of each UIComponent:

form1-text	#{template.form1.findComponent("panelGrid1").findComponent("text").clientId}
form1-input1	#{template.form1.findComponent("panelGrid1").findComponent("input1").clientId}
form1-count	#{template.form1.findComponent("panelGrid1").findComponent("form1-count").clientId}

And in the end last thing is really usefull which is body of method setFirstName(String firstname) where we have a chance to update as many properties as we want.

JavaServer Faces 2.0 Control Composition

In the almost of the end of article I would'n dwell on ${cc.attr.id} just because this works just the same as all content in article.
Short example:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:cc="http://java.sun.com/jsf/composite">

    <!-- NO INTERFACE -->
    <cc:interface>
    </cc:interface>

    <!-- IMPLEMENTATION -->
    <cc:implementation>
        ${cc.attrs.id},${cc.clientId}        <br />
    </cc:implementation>
</html>

<h:form id="form1" prependId="true">
<sc:Dummy id="dummy1" /><br />
<sc:Dummy id="dummy2" />
</hform>

<!--browser output-->
dummy1, form1-dummy1 <br />
dummy2,form1-dummy2

Article Summary

This article should give you understanding of how to get clientId with diffrent scenarious. You should also know how to use jsf 2.0 with jQuery and you have learned how to call ajax without f:ajax tag. You can download source code from table below.
Useful links

Expression Language	Official reference to Java 6 EL.
Composite Components example.	Simple but usefull example of how to use CC.
jsf.ajax.* javadoc	Full referene to jsf.js library.
jsf ajax example	Example with f:actionListener and jsf.ajax.request(...)
FireBug	Oh God. This is one of the best tool for browse client html, debug javascript and watch real ajax requests.
PrimeFaces	My favourite jsf tag library. Uses jQuery as javascript engine. Many great controls and of course Open Source.
First, second gool article	Those article show details about jsf clientId properties.
jQuery	This library simplify developer life.
Subversion repository of code.	Simple NetBeans project where I learn JSF 2.0

# .netTiers. make data:repeater behave like asp:Repeater with OnCommand event

2010-08-23T11:10:00.000-07:00

Hello. Today I would like to share with you with my expirience around strongly typed controls in nettiers.

and

Normally if developer want put control causing PostBack in Repeater should give CommandName , CommandArgument in PostBack Control and provide Repeater_OnCommand (or OnClick,OnCommand in child control) method. Badly data:Repeaters doesn't have onCommand Event and even postback in child control OnClick and OnCommand is not firing. Code below is nice but doesn't work:

<data:GblLanguageRepeater ID="nTiersGblRepeater" runat="server" DataSourceID="GblLanguageDataSource1">
    <ItemTemplate>
        <asp:LinkButton runat="server" ID="LangFlagLb2" CommandName="GblLanguageId" CommandArgument='<%# Container.GblLanguageId %>'
            OnCommand="LangFlagLb_Command" OnClick="LangFlagLb_Click" >
            <asp:Image runat="server" ID="LangFlagImg2" ImageUrl='<%# Container.LanguageFlag %>'
                ToolTip='<%# Container.LanguageDescription %>' />
        </asp:LinkButton>
    </ItemTemplate>
</data:GblLanguageRepeater>
<data:GblLanguageDataSource ID="GblLanguageDataSource1" runat="server" SelectMethod="GetAll">
</data:GblLanguageDataSource>

Any method listed below won't fire.

//LinkButton OnCommand Event
    protected void LangFlagLb_Command(object sender, CommandEventArgs e)
    {
        if (e.CommandName.ToString() == "GblLanguageId")
        {
            int GblLanguageId = int.Parse(e.CommandArgument.ToString());
            this.Profile.GblGroup.GblLanguageId = GblLanguageId;
            CurrentLangLit.Text = mgr.Data.DataRepository.GblLanguageProvider.GetByGblLanguageId(this.Profile.GblGroup.GblLanguageId).LanguageDescription;
        }
    }
//Repeater OnCommand Event
    protected void GblLangRep_ItemCommand(object sender, RepeaterCommandEventArgs e)
    {
        if (e.CommandName.ToString() == "GblLanguageId")
        {
            int GblLanguageId = int.Parse(e.CommandArgument.ToString());
            this.Profile.GblGroup.GblLanguageId = GblLanguageId;
            CurrentLangLit.Text = mgr.Data.DataRepository.GblLanguageProvider.GetByGblLanguageId(this.Profile.GblGroup.GblLanguageId).LanguageDescription;
        }
    }
//LinkButton Click Event
    protected void LangGlagLb_Click(object sender, EventArgs e)
    {
        LinkButton r = sender as LinkButton;
        if (r.CommandName.ToString() == "GblLanguageId")
        {
            int GblLanguageId = int.Parse(r.CommandArgument.ToString());
            this.Profile.GblGroup.GblLanguageId = GblLanguageId;
            CurrentLangLit.Text = mgr.Data.DataRepository.GblLanguageProvider.GetByGblLanguageId(this.Profile.GblGroup.GblLanguageId).LanguageDescription;
        }
    }

Code that works.

First thing about is change data:GblRepeater into normal asp:Repeater control and secondly we will put at the top of control directive to import Container Item namespace.

<%@ Import Namespace="mgr.Entities" %>

And change CommandArgumend,CommandName,Tooltip:

<asp:Repeater ID="GblLangRep" runat="server" DataSourceID="GblLangDs" OnCommand="GblLangRep_ItemCommand">
    <ItemTemplate>
        <asp:LinkButton runat="server" ID="LangFlagLb" CommandName="GblLanguageId" CommandArgument='<%# (Container.DataItem as GblLanguage).GblLanguageId %>'
            OnCommand="LangFlagLb_Command">
            <asp:Image runat="server" ID="LangFlagImg" ImageUrl='<%# (Container.DataItem as GblLanguage).LanguageFlag %>'
                ToolTip='<%# (Container.DataItem as GblLanguage).LanguageDescription %>' />
        </asp:LinkButton>
    </ItemTemplate>
</asp:Repeater>
<data:GblLanguageDataSource runat="server" ID="GblLangDs" SelectMethod="GetAll" />

Now you can do whatever you want in OnCommand event in Repeater or OnClick(OnCommand) Event in LinkButton. After some reaserch in google I found that next version of nettiers should fix the problem with PostBack Events.

SELECT MAX String FROM TABLE

2010-07-12T09:07:00.000-07:00

Dzień dobry. Niedawno spotkałem się z potrzebą wyświetlenia najdłuższego napisu z tabeli bazy danych. Ku mojemu zdziwieniu zapytanie MAX(kolumna nvarchar) nie zwróciła najdłuższego napisu a jakiś bezsensowny. Podejrzewam, że silnik MSSQL zsumował wartość każdej litery w napisie zmieniając ją w wartość liczbową dlatego też była potrzeba utworzenia własnego sposobu na wykonanie czynności.

Funkcja jest bardzo prosta: obcina z obu stron: ltrim rtrim kolumnę z napisem, a następnie otrzymujemy długość napisu funkcją LEN. Gdy już posiadamy długość napisu to wykonujemy zapytanie WHERE LEN(Kolumna) = największa długość napisu.

Zatem to dzieła:

CREATE FUNCTION [dbo].[GetMaxLenghtString]()
RETURNS TABLE 
AS
RETURN 
(
SELECT LEN(Title) as Lenght,Title FROM Books WHERE LEN(Title) = (SELECT max(len(ltrim(rtrim(Title)))) from Books)
)
GO

Żeby zobaczyć wynik musimy wykonać odpowiednie zapytanie:

select * from GetMaxLenghtString()

Funkcja ta zwróci najdłuższy napis. Gdy będzie kilka takich napisów wynikowa tabela będzie zawierać kilka wierszy. Można doprawić do smaczku funkcję aby zwracała 1 wartość umieszczająć po SELECT klauzulę DISTINCT.

Dziękuję.

#MSSQL - SELECT BOTTOM FROM table

2010-07-05T11:01:00.000-07:00

Dzień dobry. Dzisiaj chciałbym przedstawić pewną procedurę, której głównym zadaniem będzie pobranie dowolnej ilości wierszy ostatnio dodanych do tabeli. Jak wiadomo do pobrania n-pierwszych rekordów służy polecenie:

SELECT TOP(@PARAM) FROM TABLE ORDER BY COLUMN

Wykorzystamy klauzylę TOP wraz z ORDER BY PRIMARY_KEY DESC(majejąco), aby wybrać N-wierszy spośród tabeli. Zatem utwórzmy przykładową tabelę:

CREATE TABLE [dbo].[Sonda](
 [SondaId] [int] IDENTITY(1,1) NOT NULL,
 [Typ] [bit] NOT NULL,
 [Tytul] [nvarchar](256) NOT NULL,
 [Widocznosc] [bit] NOT NULL,
 [Dodano] [datetime] NOT NULL,
 [KtoDodal] [nvarchar](256) NOT NULL,
 [MaxOdpowiedzi] [int] NOT NULL,
 CONSTRAINT [PK_Sonda] PRIMARY KEY CLUSTERED 
(
 [SondaId] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]

GO

Teraz wstawimy 10 rekordów

INSERT INTO Sonda(Typ,Tytul,Widocznosc,Dodano,KtoDodal,MaxOdpowiedzi)
     VALUES (0,'Testowa sonda 1',0,GETDATE(),'admin',25)
INSERT INTO Sonda(Typ,Tytul,Widocznosc,Dodano,KtoDodal,MaxOdpowiedzi)
     VALUES (0,'Testowa sonda 2',0,GETDATE(),'admin',25)
INSERT INTO Sonda(Typ,Tytul,Widocznosc,Dodano,KtoDodal,MaxOdpowiedzi)
     VALUES (0,'Testowa sonda 3',0,GETDATE(),'admin',25)
INSERT INTO Sonda(Typ,Tytul,Widocznosc,Dodano,KtoDodal,MaxOdpowiedzi)
     VALUES (0,'Testowa sonda 4',0,GETDATE(),'admin',25)
INSERT INTO Sonda(Typ,Tytul,Widocznosc,Dodano,KtoDodal,MaxOdpowiedzi)
     VALUES (0,'Testowa sonda 5',0,GETDATE(),'admin',25)
INSERT INTO Sonda(Typ,Tytul,Widocznosc,Dodano,KtoDodal,MaxOdpowiedzi)
     VALUES (0,'Testowa sonda 6',0,GETDATE(),'admin',25)
INSERT INTO Sonda(Typ,Tytul,Widocznosc,Dodano,KtoDodal,MaxOdpowiedzi)
     VALUES (0,'Testowa sonda 7',0,GETDATE(),'admin',25)
INSERT INTO Sonda(Typ,Tytul,Widocznosc,Dodano,KtoDodal,MaxOdpowiedzi)
     VALUES (0,'Testowa sonda 8',0,GETDATE(),'admin',25)
INSERT INTO Sonda(Typ,Tytul,Widocznosc,Dodano,KtoDodal,MaxOdpowiedzi)
     VALUES (0,'Testowa sonda 9',0,GETDATE(),'admin',25)
 INSERT INTO Sonda(Typ,Tytul,Widocznosc,Dodano,KtoDodal,MaxOdpowiedzi)
 VALUES (0,'Testowa sonda 10',0,GETDATE(),'admin',25)
GO

Skoro mamy już tabelę i rekordy to nadszedł czas na procedurę, która pobierze ostatnio dodane wiersze:

SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE PROCEDURE [dbo].[Sonda_GetSondaBottom]
 @Limit int
AS
BEGIN
 SET NOCOUNT ON;
 SELECT  top (@Limit) * FROM Sonda ORDER BY SondaId DESC
END

Na koniec przetestujemy naszą procedurę:

EXEC [dbo].[Sonda_GetSondaBottom]
  @Limit = 10

Post zainspirowany tekstem: http://particletree.com/notebook/select-last-100-records/

#ASM. Wyświetlanie danych z bufora klawiatury. Mój pierwszy sukces.

2010-07-04T09:19:00.000-07:00

Dzień dobry. Dzisiaj chciałbym zaprezentować przykład prostego programu w assemblerze. Program ten wyświetla napis proszący o podanie imienia, a następnie go wyświetla w nowej linii. Do poprawnego skompilowania i uruchomienia potrzeba tasm.exe, tlink.exe, oraz DPMIMEM.DLL

Kompilacja : tasm prog1.asm
Linkowanie: tlink prog1.obj
Wynik: prog1.exe

;Moj 1 program wczytuje dane z bufora i je wyswietla
MODEL TINY
STACK 24H
DATASEG
 napis db "Podaj swoje imie: $"
 imie db 20,0,10,13,20 dup("$")
 enters db 10,13,"$"
CODESEG
START:
 xor ax,ax ;zerowanie ax dla pewnosci
 mov ax,@DATA
 mov ds,ax
 ;wyswietlenie napis
 lea dx,napis;mov dx,offset napis
 mov ah,9
 int 21h
 ;wczytaj do imie
 mov ah,0ah
 mov dx, offset imie
 int 21h
 ;wyswietl znak powrotu karetki i nowej linii
 mov ah,9
 mov dx,offset enters
 int 21h
 ;wyswietl dane z imie
 mov ah,9
 mov dx, offset[imie+2]
 int 21h
 ;czekanie na znak
 mov ah,8
 int 21h
 mov ah,4ch;mov ax,4c00h
 int 21h
END START

Zacznijmy od początku, czyli deklaracji zmiennych:

napis db "Podaj swoje imie: $"
 imie db 20,0,20 dup("$")
 enters db 10,13,"$"

Pierwsza zmienna wyświetla się na początku programu i jest deklarowana jako declare byte.
Druga zmienna to ciąg bajtów w których: 20 oznacza maksymalną długość bufora, 0 będzie oznaczać realną wczytaną długość bufora z klawiatury.Z kolei 20 dup("$") dla TASM-a oznacza zadeklarowanie 20 bajtów o zawartości $. Dlaczego? Ponieważ każdy ciąg znaków w asm musi się kończyć znakiem dolara.

xor ax,ax ;zerowanie ax dla pewnosci
 mov ax,@DATA
 mov ds,ax

W tym miejscu przenosimy segment danych do rejestrów ds i ax.

;wyswietlenie napis
 lea dx,napis;mov dx,offset napis
 mov ah,9
 int 21h

Tutaj wrzucamy do dx offset(przesunięcie względem segmentu) zmiennej napis, następnie do ah wrzucamy wartość 9 i wywołujemy przerwanie dos-a 21H.

;wczytaj do imie
 mov ah,0ah
 mov dx, offset imie
 int 21h

Tak samo jak powyżej ale korzystamy z funkcji 0Ah przerwania 21H dos-u. W rejestrze DX będzie spoczywał wpisany ciąg do bufora.

;wyswietl znak powrotu karetki i nowej linii
 mov ah,9
 mov dx,offset enters
 int 21h
 ;wyswietl dane z imie
 mov ah,9
 mov dx, offset[imie+2]
 int 21h
 ;czekanie na znak
 mov ah,8
 int 21h
 mov ah,4ch;mov ax,4c00h
 int 21h

W powyższym fragmencie powtarzamy wyświetlenie danych(ah 9,int 21H) z tym, że w wyświetlaniu danych z imienia zaczynamy od 2 bajtu(0 bajt zarezerwowaliśmy na długość ciągu, 1 bajt dla faktycznej długości ciągu. Liczymy od zera of course.). Na koniec czekamy na dowolny klawisz klawiatury.

Na koniec podrzucam bardzo pomocną literaturę:
Polski kurs asm:http://rudy.mif.pg.gda.pl/~bogdro/
Zbiór wszystkich przerwań dosu:http://www.ctyme.com/intr/int.htm

Pozdrowienia!

#Java - Dodawanie i pobieranie zdjęcia z bazy mysql

2010-06-22T08:46:00.000-07:00

Czasami może się zdarzyć, że potrzebujemy przechować obrazek/zdjęcie w jakiejś tabeli bazy danych mysl. Najpierw wypadało by stworzyć tabelę, która będzie przechowywać nasze dane. Obrazki i inne pliki binarne przechowywujemy w typie danych BLOB. Tak wygląda przykładowa tabela:

CREATE TABLE IF NOT EXISTS `zdjecie` (
  `ID_Zdjecia` int(11) NOT NULL AUTO_INCREMENT,
  `Opis` varchar(150) COLLATE utf8_polish_ci NOT NULL DEFAULT '-',
  `Zdjecie` blob NOT NULL,
  PRIMARY KEY (`ID_Zdjecia`),
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_polish_ci

A teraz do operowania na bazie danych będziemy posługiwać się 2 metodami:

//Wstawienie zdjęcia
    public void InsertZdjecie(int ID_Osoba,String Opis,FileInputStream fotos);
    //pobranie z bazy zdjęcia
    public  BufferedImage getMySqlPhoto(int ID_Zdjecie);

I ich definicja:

public  BufferedImage getMySqlPhoto(int ID_Zdjecie){
        BufferedImage BI = null;
        Statement S;
        ResultSet rs;
        String sqlStatement = "SELECT zdjecie FROM zdjecie WHERE ID_Zdjecia = '"+ID_Zdjecie+"'";
        try {
            S = con.createStatement();
            rs = S.executeQuery(sqlStatement);
            if (rs.next()){
                Blob image = rs.getBlob("Zdjecie");
                InputStream input = image.getBinaryStream();
                BI=ImageIO.read(input);
                // set read buffer size
                input.close();
            }
        }
        catch (SQLException ex)
        {
            ex.printStackTrace();
        }
        catch (IOException ex)
        {
            ex.printStackTrace();
        }
        return BI;
    }
    public void InsertIntoZdjecie(String Opis,FileInputStream fotos)
    {
        String INSERT = "INSERT INTO ZDJECIE(Opis,Zdjecie) VALUES (?,?)";
        System.out.println(INSERT);
        PreparedStatement ps1;

        try {
            ps1 = con.prepareStatement(INSERT);
            ps1.setString(1, Opis);
            ps1.setBinaryStream(2, fotos);
            ps1.executeUpdate();
        } catch (SQLException ex) {
            ex.printStackTrace();
            
        }
    }

Prawda, że proste ? :-)

Icefaces 2.0 Alfa 2 NetBeans 6.8 modules.

2010-02-07T04:03:00.000-08:00

O właśnie na to czekałem od jakiś dwóch miesięcy !! Jako, że zauważyłem wiele ułatwień dla programisty w frameworku JavaServer Faces 2.0 i NB 6.8, a wcześniej korzystałem z biblioteki znaczników icefaces 1.8.2, która nie była wspierana w najnowszych JSF-ach to niestety odłożyłem na jakiś czas programowanie java EE. Teraz na pewno gdy znajdę chwilkę czasu (albowiem intensywnie przeportowywuję się z java na .NET) to zacznę coś projektować.

Link:

http://www.icefaces.org/main/downloads/os-downloads.iface?category=NetBeans

Application is already deployed on other targets.

2009-12-08T02:13:00.000-08:00

Application is already deployed on other targets.

Please use create-application-ref command to create reference to the specified target.

Czasami podczas uruchamiania aplikacji web tworzonej w środowisku NetBeans (a także innych, które automatyzują

proces wdrażania deployingu aplikacji) pojawia się naszym oczom błąd builda. Błąd jest powodowany tym, że serwer aplikacji(Glassfish 2.1) nie pozwala na zastąpienie aktualnej aplikacji, która jest

uruchomiona na serwerze przez nową, którą właśnie uruchomiliśmy(pod warunkiem poprawnej kompilacji).

Żeby pozbyć się błędu i mieć możliwość uruchomienia aplikacji musisz wejść zalogować się jako administrator serwera.

Wchodzimy w zakładkę Services klikamy PPM na Glassfish 2.1 i wybieramy View Admin Console. Gdy naszym oczom ujawi

się strona z konfiguracją serwera musimy przejść do zakładki Applications -> Web Application i wykonać undeploy na naszej

nieszczęśliwej aplikacji :-)

Szczegóły problemu:

http://www.techienuggets.com/Comments?tx=18197

http://www.netbeans.org/issues/show_bug.cgi?id=66983

Dzięki za uwagę.

Niestandardowa konwersja i weryfikacja JavaServer Faces

2009-11-07T09:57:00.000-08:00

Po poznaniu podstawowych konwerterów i weryfikatorów JSF-ów możemy przystąpić do trudniejszego zadania.
Jak wiadomo wszystko w Java jest obiektem. Właśnie w ten sposób wszystkie informacje są zapisywane na serwerze. Natomiast informacje, które są wyświetlane w oknie przeglądarki muszą być prezentowane jako napisy, listy i obrazy. Powoduje to potrzebę konwersji tych dwóch rodzajów informacji. Na początku zajmiemy się tworzeniem własnych klas implementujących interfejs javax.faces.convert.Converter, który posiada dwie metody:

public Object getAsObject(FacesContext context, UIComponent component, String value) {...}

public String getAsString(FacesContext context, UIComponent component, Object value) {...}

Pierwsza metoda naszej klasy konwertuje wpisaną wartość tekstową na obiekt dowolnej klasy gdy wysyłamy formularz na serwer, a druga metoda konwertuje wszystkie obiekty na postać łańcuchów i wysyła je do przeglądarki.

Utwórzmy następującą hierarchię klas:

public class ZipCode {
//Klasa reprezentuje kod pocztowy.
private String zip;
public ZipCode(String zip) {
this.zip = zip;
}

public String getZip() {
return zip;
}

public void setZip(String zip) {
this.zip = zip;
}

@Override
public String toString() {
return zip;
}
}
//Klasa imię użytkownika.
public class Name {
private String name;

Name(String value) {
this.name = value;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
@Override
public String toString() {
return name;
}
}
//Klasa reprezentuje obiektowe nazwisko.
public class Surname {
private String surname;
public Surname(String surname) {
this.surname = surname;
}
public String getSurname() {
return surname;
}
public void setSurname(String surname) {
this.surname = surname;
}
@Override
public String toString() {
return surname;
}
}
//Nasz Bean, który trzyma dane formularza:
public class RegistrationForm2 {
private Name name = new Name("");
private Surname surname = new Surname("");
private ZipCode zipCode = new ZipCode("");
public Name getName() {
return name;
}
public void setName(Name name) {
this.name = name;

}
public Surname getSurname() {
return surname;
}
public void setSurname(Surname surname) {
this.surname = surname;
}
public ZipCode getZipCode() {
return zipCode;
}
public void setZipCode(ZipCode zipCode) {
this.zipCode = zipCode;
}
}

Teraz aby implementacja JSF wiedziała co zrobić z naszymi obiektami ZipCode,Name,Surname musimy pomóc i stworzyć odpowiednie klasy konwerterów np: ZipCodeConverter, NameConverter i SurnameConverter. Gdy konwersja się nie powiedzie powinniśmy wystosować odpowiedni wyjątek ConverterException().

//---------------------------------
import java.util.Locale;
import java.util.ResourceBundle;
import javax.faces.application.FacesMessage;
import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.convert.Converter;
import javax.faces.convert.ConverterException;


/**
*
* @author riaa
*/
public class NameConverter implements Converter{

//Metoda konwertuje łańcuch z przeglądarki na obiekt typu Name.
public Object getAsObject(FacesContext context, UIComponent component, String value) {
//Jeżeli Name jest puste.
if (value.isEmpty())
{
//Pobieramy ustawienia lokalizacji użytkownika przeglądarki.
Locale L = context.getViewRoot().getLocale();
//Tworzymy obiekt, który ładuje klasy przy pomocy metod klasy Class
//a nie standardowo przez konstruktory.
ClassLoader loader = Thread.currentThread().getContextClassLoader();
//Pobieramy obiekt mymessages.properties przy pomocy
//statycznej metody: ResourceBundle.getBundle
ResourceBundle bundle = ResourceBundle.getBundle(context.getApplication().getMessageBundle(), L, loader);
//Wyszukujemy w pliku napisu o id = javax.faces.component.UIInput.REQUIRED.
String resource = bundle.getString("javax.faces.component.UIInput.REQUIRED");
//Tworzymy obiekt wyświetlany w ice:message zastępując znak {0}
// wartością id danej ice:inputText.
FacesMessage f = new FacesMessage(FacesMessage.SEVERITY_ERROR, resource.replace("{0}", component.getId()),
resource.replace("{0}", component.getId()));
throw new ConverterException(f);
}
//Jeżeli Name zawiera tylko litery.
if (value.matches("[A-Za-z]+"))
return new Name(value);
else
{
//Przypadek gdy ktoś w polu imię podał cyfrę.
//Ten sam sposób na na początku.
Locale L = context.getViewRoot().getLocale();
ClassLoader loader = Thread.currentThread().getContextClassLoader();
ResourceBundle bundle = ResourceBundle.getBundle(context.getApplication().getMessageBundle(), L, loader);
String resource = bundle.getString("robpie.Name");
FacesMessage f = new FacesMessage(FacesMessage.SEVERITY_ERROR, resource.replace("{0}", component.getId()),
resource.replace("{0}", component.getId()));
throw new ConverterException(f);
}
}

public String getAsString(FacesContext context, UIComponent component, Object value) {
return value.toString();
}

}
//-----------------------------------------
import java.util.Locale;
import java.util.ResourceBundle;
import javax.faces.application.FacesMessage;
import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.convert.Converter;
import javax.faces.convert.ConverterException;

/**
*
* @author riaa
*/
public class SurnameConverter implements Converter{

public Object getAsObject(FacesContext context, UIComponent component, String value) {
if (value.isEmpty())
{
Locale L = context.getViewRoot().getLocale();
ClassLoader loader = Thread.currentThread().getContextClassLoader();
ResourceBundle bundle = ResourceBundle.getBundle(context.getApplication().getMessageBundle(), L, loader);
String resource = bundle.getString("javax.faces.component.UIInput.REQUIRED");
FacesMessage f = new FacesMessage(FacesMessage.SEVERITY_ERROR, resource.replace("{0}", component.getId()),
resource.replace("{0}", component.getId()));
throw new ConverterException(f);
}
if (value.matches("[A-Za-z]"))
{
return new Surname(value);
}
else
{
//Przypadek gdy ktoś w polu imię podał cyfrę.
Locale L = context.getViewRoot().getLocale();
ClassLoader loader = Thread.currentThread().getContextClassLoader();
ResourceBundle bundle = ResourceBundle.getBundle(context.getApplication().getMessageBundle(), L, loader);
String resource = bundle.getString("robpie.Surname");
FacesMessage f = new FacesMessage(FacesMessage.SEVERITY_ERROR, resource.replace("{0}", component.getId()),
resource.replace("{0}", component.getId()));
throw new ConverterException(f);
}
}

public String getAsString(FacesContext context, UIComponent component, Object value) {
return value.toString();
}

}
//---------------------------------
import java.util.Locale;
import java.util.ResourceBundle;
import javax.faces.application.FacesMessage;
import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.convert.Converter;
import javax.faces.convert.ConverterException;

/**
*
* @author riaa
*/
public class ZipCodeConverter implements Converter{

public Object getAsObject(FacesContext context, UIComponent component, String value) {
if (value.matches("[0-9][0-9][-][0-9][0-9][0-9]"))
return  new ZipCode(value);
else
{
Locale L = context.getViewRoot().getLocale();
ClassLoader loader = Thread.currentThread().getContextClassLoader();
ResourceBundle bundle = ResourceBundle.getBundle(context.getApplication().getMessageBundle(), L, loader);
String resource = bundle.getString("robpie.ZipCode");
FacesMessage f = new FacesMessage(FacesMessage.SEVERITY_ERROR, resource, resource);
throw new ConverterException(f);
}
}

public String getAsString(FacesContext context, UIComponent component, Object value) {
return value.toString();
}
}

Teraz do każdej kontrolki dodajmy znacznik f:converter.:

<h:form prependId="false">
<table>
<tr>
<td>Imię:</td>
<td><ice:inputText id="name" value="#{registrationForm2.name}">
<f:converter converterId="NameConverter" />
<f:validateLength minimum="5" maximum="20" />
</ice:inputText></td>
<td><ice:message for="name" /></td>
</tr>
<tr>
<td>Nazwisko:</td>
<td><ice:inputText id="surname" value="#{registrationForm2.surname}" >
<f:validateLength minimum="5" maximum="20" />
</ice:inputText></td>
<td><ice:message for="surname" /></td>
</tr>
<tr>
<td>Kod pocztowy:</td>
<td><ice:inputText id="zipCode" value="#{registrationForm2.zipCode}" required="true">
<f:converter converterId="ZipConverter" />
</ice:inputText></td>
<td><ice:message for="zipCode" /></td>
</tr>
</table>
<ice:commandButton value="Dalej" action="registration2"/>
</h:form>

A na sam koniec musimy w pliku faces-config.xml dodać znacznik converter z odpowiednimi wpisami:

<converter>
<converter-id>ZipConverter</converter-id>
<converter-class>robpie.ZipCodeConverter</converter-class>
</converter>
<converter>
<converter-id>NameConverter</converter-id>
<converter-class>robpie.NameConverter</converter-class>
</converter>
<converter>
<converter-for-class>robpie.Surname</converter-for-class>
<converter-class>robpie.SurnameConverter</converter-class>
</converter>

Teraz spróbujmy przetestować formularz:

Konwersja < i > na encje htm'a lt i gt

2009-11-05T11:44:00.000-08:00

Dla osób, które często korzystają z SyntaxHightlightera na pewno się przyda prosty program, który zamieni wszystkie znaczniki < > na odpowiednie &lt i &gt.

Do ściągnięcia http://gold.uwb.edu.pl/~st_robpie/HtmlTagToEntity.jar

Pozdrawiam bloggerów.

Konwersja i weryfikacja przy pomocy standardowych kontrolek JSF

2009-11-05T10:17:00.000-08:00

Nadszedł czas omówić konwersję i weryfikację danych w aplikacji JavaServer Faces przy użyciu standardowych mechanizmów przygotowanych przez twórców JSF. Przykład ten będzie na tyle prosty aby każdy mógł zrozumieć naturę standardowych mechanizmów kontroli wpisywanych danych przez użytkownika, a następnie pozwoli nam utworzyć własne klasy implementujące odpowiednie interfejsy. No to zaczynamy:

1) Utwórzmy formularz, który będzie zawierać następujące pola tekstowe:

Za informację przechowywane w każdym polu będzie odpowiadać klasa RegistrationForm:


public class RegistrationForm {
private String name;
private String surname;
private Date dateOfBirth;
private int age;
private double doubleValue;

public String getName() {
return name;
}

public void setName(String name) {
this.name = name;
}

public String getSurname() {
return surname;
}

public void setSurname(String surname) {
this.surname = surname;
}


public Date getDateOfBirth() {
return dateOfBirth;
}

public void setDateOfBirth(Date dateOfBirth) {
this.dateOfBirth = dateOfBirth;
}

public int getAge() {
return age;
}

public void setAge(int age) {
this.age = age;
}

public double getDoubleValue() {
return doubleValue;
}

public void setDoubleValue(double doubleValue) {
this.doubleValue = doubleValue;
}

}

Natomiast nasz kod strony powinien na początku wyglądać następująco:


<h:form prependId="false">
    <table>
        <tr>
            <td>Imię:</td>
            <td><ice:inputText id="name" value="#{registrationForm.name}" >
            </ice:inputText></td>
            <td></td>
        </tr>
        <tr>
            <td>Nazwisko:</td>
            <td><ice:inputText id="surname" value="#{registrationForm.surname}" >
            </ice:inputText></td>
            <td></td>
        </tr>
        <tr>
            <td>Data urodzenia:</td>
            <td>
                <ice:selectInputDate id="dateOfBirth"
                                     value="#{registrationForm.dateOfBirth}">
                </ice:selectInputDate> </td>
            <td></td>
        </tr>
        <tr>
            <td>Wiek:</td>
            <td><ice:inputText id="age" value="#{registrationForm.age}" >
            </ice:inputText></td>
            <td></td>
        </tr>
        <tr>
            <td>Wartość double:</td>
            <td><ice:inputText id="doubleValue" value="#{registrationForm.doubleValue}">
            </ice:inputText></td>
            <td></td>
        </tr>
    </table>
</h:form>

<ice:commandButton value="Dalej" action="registration"/>

Teraz utwórzmy drugą stronę RegistrationComplete.jspx i utwórzmy w pliku faces-config.xml regułę nawigacji pomiędzy obiema stronami.

Strona RegistrationComplete.jspx:


<jsp:root version="2.1"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:jsp="http://java.sun.com/JSP/Page"
xmlns:ice="http://www.icesoft.com/icefaces/component">
<jsp:directive.page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"/>
<f:view>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <title>RegistrationComplete.jspx</title>
</head>
<body>
  <h1>Dziękujemy za rejestrację!</h1>
  <ice:form>

  </ice:form>
</body>
</html>
</f:view>
</jsp:root>

Reguła nawigacji:


<navigation-rule>
<from-view-id>/robpie/RegistrationFormIFaces.jspx</from-view-id>
<navigation-case>
<from-outcome>registration</from-outcome>
<to-view-id>/robpie/RegistrationComplete.jspx</to-view-id>
</navigation-case>
</navigation-rule>

Czas na przetestowanie czy reguła nawigacji działa. Uruchamiamy projekt i przechodzimy na stronę: RegistrationFormIFaces.jspx i klikamy przycisk "Dalej". Powinniśmy ujrzeć drugą stronę.

Weryfikacja i konwersja.

Każda kontrolka posiada atrybut required, który oznacza czy pole jest wymagane. np:


<ice:inputText id="name" value="#{registrationForm.name}" required="true">
</ice:inputText>
<ice:inputText id="age" value="#{registrationForm.age}" > </ice:inputText>

Oznacza to, że jeśli nie uzupełnimy danego pola to nie będziemy mogli przejść na drugą stronę. Teraz dodajmy jeszcze jeden znacznik, który poinformuje nas o napotkanych błędach ponieważ standardowo błędy tego typu nie są wyświetlane na stronie (Wyświetlają się w logach serwera Glassfish). W każdy wolny znacznik wstawmy następujący kod:


<ice:message for="name" />
<ice:message for="surname" />
<ice:message for="dateOfBirth" />
<ice:message for="age" />
<ice:message for="doubleValue" />

Atrybut for lokalizuje nam dla jakiego identyfikatora id kontrolki wejściowej ma wyświetlać błędy.

Teraz nasza strona powinna wyglądać następująco:


<h:form prependId="false">
         <table>
             <tr>
                 <td>Imię:</td>
                 <td><ice:inputText id="name" value="#{registrationForm.name}" required="true">
                 </ice:inputText></td>
                 <td><ice:message for="name" /></td>
             </tr>
             <tr>
                 <td>Nazwisko:</td>
                 <td><ice:inputText id="surname" value="#{registrationForm.surname}" required="true">
                 </ice:inputText></td>
                 <td><ice:message for="surname" /></td>
             </tr>
             <tr>
                 <td>Data urodzenia:</td>
                 <td>
                     <ice:selectInputDate id="dateOfBirth"
                                          value="#{registrationForm.dateOfBirth}"
                                          required="true">
                     </ice:selectInputDate> </td>
                 <td><ice:message for="dateOfBirth" /></td>
             </tr>
             <tr>
                 <td>Wiek:</td>
                 <td><ice:inputText id="age" value="#{registrationForm.age}" >
                 </ice:inputText></td>
                 <td><ice:message for="age" /></td>
             </tr>
             <tr>
                 <td>Wartość double:</td>
                 <td><ice:inputText id="doubleValue" value="#{registrationForm.doubleValue}">
                 </ice:inputText></td>
                 <td><ice:message for="doubleValue" /></td>
             </tr>
         </table>
                 <ice:commandButton value="Dalej" action="registration"/>
     </h:form>

W tym momencie czas przetestować naszą aplikację. Uruchamiamy ją i przechodzimy na stronę z rejestracją. Klikamy "Dalej". Widać, że w tym momencie wyświetlają się pewne komunikaty, które informują, że pole jest wymagane.

Validation Error: Value is required.

Teraz dodamy kolejne validatory, a na końcu pokażę jak zmienić standardowe komunikaty frameworku JavaServer Faces.

Dodamy:


<f:validateLength minimum="5" maximum="20" />
<f:convertDateTime pattern="dd/MM/yyyy" />
<f:validateLongRange minimum="18" maximum="98" />
<f:validateDoubleRange minimum="3.14" maximum="18.5" />

1)Weryfikacja długości łańcucha znakowego.

2)Konwersja łańcucha znakowego na typ Date po stronie serwera.

3)Weryfikacja przedziału liczb całkowitoliczbowych.

4)Weryfikacja przedziałów liczb zmiennoprzecinkowych.

Odpowiednie kontrolki dodajmy między znaczniki inputText i selectInputDate:


<ice:inputText id="name" value="#{registrationForm.name}" required="true">
<f:validateLength minimum="5" maximum="20" />
</ice:inputText>
<ice:inputText id="surname" value="#{registrationForm.surname}" required="true">
 <f:validateLength minimum="5" maximum="20" />
</ice:inputText>
<ice:selectInputDate id="dateOfBirth"
value="#{registrationForm.dateOfBirth}"
renderAsPopup="true"
required="true">
<f:convertDateTime pattern="dd/MM/yyyy" />
</ice:selectInputDate>
<ice:inputText id="age" value="#{registrationForm.age}" >
<f:validateLongRange minimum="18" maximum="98" />
</ice:inputText>
<ice:inputText id="doubleValue" value="#{registrationForm.doubleValue}">
<f:validateDoubleRange minimum="3.14" maximum="18.5" />
</ice:inputText>

Zwiększyliśmy restrykcje weryfikacji i nieporawne dane zostają wykryte a odpowiednie błędy są wyświetlane.

Powinniśmy teraz zmienić treść każdego z błędów na taki, który nam odpowiada.

Zaletą JSF jest to, że wszystkie komunikaty przechowywujemy w jednym miejscu. Każdy komunikat jest zmienną odpowiedniej klasy. Raz zdefiniowane błędy będą dostępne w każdym formularzu i na każdej stronie. W przeciwieństwie do ASP.NET nie musimy klepać wszędzie errorMessage w każdym miejscu.

Musimy utworzyć odpowiedni plik np:

myMessage.properties i tam umieścić nasze komunikaty:

Klikamy na swoją paczkę PPM wybieramy New -> Other -> Other -> Properties File.

Klikamy PPM na plik myMessages.properties i klikamy Edit.

Wklejamy następujący kod:


javax.faces.component.UIInput.REQUIRED=<b><span >*Pole {0} obowiązkowe.</span></b>
javax.faces.validator.LongRangeValidator.NOT_IN_RANGE=<b><span style="color:red">*Wartość {2} musi być w przedziale od {0} do {1}.</span></b>
javax.faces.validator.DoubleRangeValidator.NOT_IN_RANGE=<b><span >*Wartość {2} musi być w przedziale od {0} do {1}.</span></b>
javax.faces.converter.DateTimeConverter.CONVERTER=Please enter a valid date.
javax.faces.converter.DateTimeConverter.DATE=<b><span >Podaj poprawny format daty: {1}</span></b>
javax.faces.component.UIInput.CONVERSION=<b><span style="color:red">*Błąd konwersji.</span></b>
javax.faces.validator.LengthValidator.MINIMUM=<b><span >*Pole {1} musi być większe od {0}</span></b>
javax.faces.validator.LengthValidator.MAXIMUM=<b><span style="color:red">*Pole {1} musi być mniejsze od {0}</span></b>

Ostatnim krokiem będzie dodanie odpowiedniego wpisu do pliku faces-config.xml informującego gdzie framework ma szukać pliku z komunikatami.

Uruchamiamy aplikację i testujemy działanie.


  <application>
      <message-bundle>robpie.myproperties</message-bundle>
  </application>

Utworzenie pustej strony frameworku ICEFaces.

2009-11-05T04:49:00.000-08:00

Zaczynając pracę w frameworku JavaServer Faces szybko dostrzegamy jak ubogi jest zestaw kontrolek, którymi możemy się posłużyć. Niemniej jednak świat aplikacji web w Java wygląda zachęcająco. Istnieje mnóstwo szkieletów aplikacji ulepszających JSF np ciekawy projekt http://www.icefaces.org/main/home/ . Tak naprawdę ICEFaces jest zestawem ciekawych kontrolek i rozszerza FacesServlet przez co jest łatwy do implementacji i do zrozumienia. Tyle słowem wstępu. Zacznijmy pracę.

Tworzenie strony ICEFaces:

W tym miejscu zakładam, że poprawnie zainstalowałeś moduły NB dające mozliwość współpracy z tym ciekawym projektem.

Pierwszym krokiem jest wybranie PPM new -> JSF JSP Page.

Naszym oczom pojawi się następujące okno:

Musimy wybrać opcję JSP Document(XML Syntax) i kliknąć finish. Naszym oczom pojawi sie nowa strona o rozszerzeniu *.jspx. Strony o tym rozszerzeniu są de facto plikami xml-owymi co pozwala nam na łatwiejsze diagnozowanie błędów jak w przypadku Facelets. Teraz abyśmy mogli używać w NB komponentów przekazać informację o xml namespace odnośnie biblioteki ICEFaces. Wygląda to następująco:


<jsp:root version="2.1"
f="http://java.sun.com/jsf/core"
h="http://java.sun.com/jsf/html"
jsp="http://java.sun.com/JSP/Page"
ice="http://www.icesoft.com/icefaces/component">
</jsp:root>
<jsp:directive.page contentType="text/html;
charset=UTF-8" pageEncoding="UTF-8"/>
<f:view>
<ice:form>

<ice:form>
</f:view>

Teraz pomiędzy znacznikami wrzucamy co nam tylko przyjdzie do głowy.

Pozdrawiam.

Uruchamianie php.exe z dowolnego miejsca w cmd.exe

2009-09-06T09:32:00.001-07:00

Dziś trochę zboczę z publikacji nt. java i szybko opiszę jak uzyskać możliwość uruchomienia parsera PHP z dowolnej lokalizacji w Wierszu Poleceń naszego Okna na świat. Sprawa jest banalnie prosta(co prawda nie była banalna gdy nie wpadłem na olśnienie...). Otóż musimy pokusić się o poznanie tak zwanych zmiennych środowiskowych systemu Windows (List of Windows environment variables) i przyjrzeć się zmiennej o nazwie PATH. Zmienna ta przechowuje listę ścieżek z plikami wykonywalnymi *.exe,*.bat,*.com np. C:\Windows\[notepad.exe], które następnie są przeszukiwane podczas pracy z wierszem poleceń i uruchamiają program wykonywalny. Zatem aby móc korzystać z php w dowolnym miejscu należy uzupełnić zmienna PATH dodając miejsce gdzie znajdują się pliki *.exe katalogu php. W moim przypadku wygląda to następująco:

D:\wamp\bin\php\php5.2.9-2\.

Dodanie ścieżki z php do zmiennej środowiskowej:

Otwórz Panel Sterowania, następnie System, kliknij zakładkę Zaawansowane, na dole powinien być przycisk Zmienne środowiskowe, po kliknięciu go wyszukaj zmienną PATH i edytuj , następnie w oknie dialogowym poprzedzając średnikiem dodaj swoją ścieżkę php

;D:\wamp\bin\php\php5.2.9-2\. Zapisz wszystkie zmiany i uruchom ponownie wiersz poleceń. Przetestuj wiersz poleceń wpisując:


php -r phpinfo();

Voilla!

Rysowanie wykresów w html.

2009-08-26T08:01:00.000-07:00

Niezależnie od technologii, w której będziemy programować zdarza się czasem potrzeba wyświetlenia informacji w postaci wykresów. Czy to pChart dla php, a może ICEFaces i odpowiednie znaczniki. Programista ma duży dostęp do gotowych bibliotek w każdym języku programowania. Wyobraźmy sobie, że nauczyłem się specyfikacji pChartu czy JFreeChart i moje aplikacje tworzą piękne wykresy. Jednak co się zdarzy gdy jestem zmuszony skorzystać z technologii, w której nie znam podstaw, a pracodawca każe utworzyć strony z wykresami? Czas goni, nerwy się wdzierają w każdy fragment kodu, a my niechlujnie zapisujemy różne metody i klasy. Nie testujemy bo nie ma czasu... Dodatkowo generowanie danych binarnych obciąża nasze serwery i zapycha ruch.

No i co począć?

Znalazłem ciekawe rozwiązanie, a dokładniej Google Chart API. Dzięki temu narzędziu nie musimy martwić się o znajomość danego czy innego języka. Idea tworzenia wykresów polega na wysłaniu porcji danych(które chcemy wizualizować) za pomocą metody GET . Adres, który utworzyliśmy i podpinamy pod odpowiedni znacznik img , h:graphicImage lub dowolnie innego.

Przykłady:

Nawet mapy można łatwo tworzyć:

servlet-name,servlet-mapping, url-pattern i /faces

2009-08-26T05:18:00.000-07:00

Kilka dni temu gdy kolejny raz przeglądałem książkę o JavaServer Faces przed snem doznałem olśnienia dlaczego trzeba wpisywać http:// localhost:8080/mojaAplikacja/faces/strona.jsp aby strona strona.jsp wyświetliła prawidłowo. Chciałbym zaprezentować przykład krok po kroku, a w trakcie będę tłumaczył uzyskane wyniki. Przykład zrealizuję w środowisku Netbeans 6.7.1

Zatem zaczynamy:

*Dodaj framework JavaServer Faces i kliknij finish.

Po stworzeniu przykładowej aplikacji ServletFaces otrzymujemy następującą strukurę katalogów:

Gdy uruchomimy aplikację wyświetli się nam w oknie przeglądarki adres:

http://localhost:8080/ServletFaces/

Teraz spróbujemy dodać stronę jsp np. page2.jsp. Struktura katalogów powinna wyglądać tak:

Uzupełnij stronę tak abyś miał pewność, że znajdujesz się na stronie page2.jsp. Ja uzupełniłem ją w następujący sposób:

Teraz będziemy starali się poprzez adres w przeglądarce wyświetlić treść nowo utworzonej strony. Pierwszym pomysłem byłoby wpisanie następującego adresu:

http://localhost:8080/ServletFaces/page2.jsp

Jeżeli odwiedzasz ten artykuł to z pewnością wiesz jaki będzie rezultat. Pytanie tylko dlaczego?

org.apache.jasper.JasperException: java.lang.RuntimeException: Cannot find FacesContext

W skrócie:

Powodem tego jest sposób wdrażania aplikacji internetowych, które są tak naprawdę procesem żmudnym. Trzeba utworzyć odpowiednią strukturę katalogów (patrz powyżej) oraz odpowiednio skonfigurować pliki (*.xml) aplikacji. Za dynamiczną treść prezentowaną na stronach jsp są odpowiedzialne Servlety. Servlety to klasy java, które przetwarzają zlecenia klientów.

Servlety konfiguruje się w plikach xml podając dane potrzebne do uruchomienia. Zajrzyj do pliku web.xml. W tym pliku znajduje się odpowiedź dlaczego wcześniejsze http://localhost:8080/ServletFaces/page2.jsp wywołało wyjątek.

Oto odpowiedź:

Widzimy jak się prezentuje nazwa servletu: Faces Servlet oraz, która klasa implementuje metody inicjalizujące, wykonujące żądania oraz "niszczące" dany servlet:

javax.faces.webapp.FacesServlet.

Podświetlony na żółto znacznik <servlet-mapping/> odpowiada za "uruchamianie" i wykonywanie kodu FacesServlet.

<servlet-mapping>

<servlet-name>Faces Servlet</servlet-name>

<url-pattern>/faces/*</url-pattern>

</servlet-mapping>

Powyższy kod mówi nam: że Faces Servlet będzie uruchamiany w przeglądarce jeśli wpiszemy adres zawierający url-pattern. Na przykład aby wyświetlić wcześniejszą stronę page2.jsp musimy wpisać następujący adres:

http://localhost:8080/ServletFaces/faces/page2.jsp

Teraz skoro rozwiązaliśmy początkowy problem dodamy nową regułę url-pattern, która nieco zmieni sposób w jaki będziemy mogli uruchomić serwlet. Do pliku web.xml w miejscu zakończenia poprzedniego tagu servlet-mapping dodaj następujący kod:

Teraz zamiast pisać:

http://localhost:8080/ServletFaces/faces/page2.jsp

Możemy alternatywnie wywołać stronę jsp w poniższy sposób:

http://localhost:8080/ServletFaces/page2.faces

Dziękuję za uwagę :-)

Benone!

Poziomy izolacji tranzakcji i Hibernate.

2009-08-12T06:13:00.000-07:00

Próbując sił z Hibernate musiałem natknąć się na problem zwany Tranzakcje i Sesje. Ku mojemu zdziwieniu znalazłem na polskich stronach ciekawe omówienie tematyki tranzakcji SQL, które są "kręgosłupem" podczas programowania w Java i Hibernate. Podsyłam link:

Warto go otworzyć :)

ASP.NET , C#, LINQ to SQL i unikalne rekordy z tabeli.

2009-08-09T08:46:00.001-07:00

Istnieje wiele różnych sposobów, które są lepsze lub gorsze aczkolwiek ja przedstawię taki, który jest bardzo szybki w implementacji(w działaniu pewnie odwrotnie proporcjonalny). Pierwszą rzeczą, którą należy wykonać to pobrać wszystkie rekordy z bazy danych np przy pomocy LINQ to SQL Classes.

Przykładowo jeśli mamy tabelę w MSSQL o nazwie np. Odleglosci, która posiada primary key ID, oraz kolumnę miastoA, miastoB oraz odleglosci.
Pobieram wszystkie (powtarząjące się) rekordy miastoA:

var miasta = (from ex in mojDataContext.Odlegloscis select ex.miastoA);

Następnie skorzystamy z klasy HashSet, która jest kontenerem reprezentującym zbiór elementów w naszym przypadku obiektów String.
HashSet<String> uniqeMiasta = new HashSet();
Następnie przejdziemy po każdym "rekordzie" wynikowym z zmiennej miasta:


foreach (String o in Miasta)
           {
               uniqeMiasta.Add(o);
           }

Następnym krokiem(ostatnim) będzie utworzenie tablicy oraz posortowanie jej alfabetycznie.

String[] miasta = uniqeMiasta.ToArray();
           Array.Sort(miasta);

Wyjaśnię teraz na czym polega fenomen obiektów HashSet. Po prostu implementacja tej klasy uniemożliwia wstawienie dwóch identycznych wartości poprzez metodę .Add(Object o).

Dziękuję za uwagę.

Hibernate, pobranie kilku kolumn z tabeli

2009-08-09T08:43:00.000-07:00

Dziś opiszę trochę technologię Hibernate czyli frameworka, który zajmuje się mapowaniem obiektów Java na tabele z bazy danych. O ile pobranie zawartości całej tabeli nie jest trudnym zadaniem to wyświetlenie kilku kolumn może przysporzyć programiście trochę pracy. Najpierw szybko przypomnę jak pobrać i wyświetlić całą tabelę, a następnie pokażę jak pobrać poszczególne kolumny.

Zakładam, że klasa HibernateUtil, klasy odwzorowywujące tabele, pliki hbm.xml, są już utworzone w Twoim projekcie.
Dla naszego przykładu zdefiniujmy klasy java np.: Osoba

public class Osoba implements Serializable
{
  private int ID_Osoby;
  private String imie;
  private String nazwisko;
  public Osoba(){}//Domyślny konstruktor JavaBeans.
  // settery i gettery dla każdego 
  pola.:getImie,setImie,getID_Osoba,set_ID_Osoba,setNazwisko,getNazwisko;
}

Zatem po pierwsze tworzymy obiekt sesji i tranzakcji Hibernate:

  Session session = HibernateUtil.getSessionFactory().getCurrentSession();
  Transaction tx = session.beginTransaction();
  tx.begin();

Czas teraz przygotować odpowiednie zapytanie hsql, które pobierze całą tabelę: from Osoba.

  Query Q = session.createQuery("from Osoba");
  ArrayList<Osoba> list= new ArrayList<Osoba>();
  list = (ArrayList<Osoba>) Q.list();
  tx.commit();

Widać, że utworzyłem zmienną list, która jest typu ArrayList z parametrem Osoba. Parametrem jest typ Osoba , ponieważ pobrałem wszystkie kolumny tabeli. Możemy teraz pobrać list.get(int i) poszczególną Osobę i wyświetlić jej informacje na konsoli:

for (int i=0;i<list.size();i++)
{
  Osoba tempOsoba = list.get(i);
  System.out.println(tempOsoba.getID() + " " + tempOsoba.getImie() + " " +   
  tempOsoba.getNazwisko());
}

To był tylko wstęp. Teraz przejdziemy do prawdziwego zadania czyli wyświetlenie 2 kolumn imie oraz nazwisko z tabeli Osoba.

  Session session = HibernateUtil.getSessionFactory().getCurrentSession();
  Transaction tx = session.beginTransaction();
  tx.begin();
  Query Q = session.createQuery("select imie,nazwisko from Osoba");
  //Można zapisać "select osoba.imie,osoba.nazwisko from Osoba as osoba" - bardziej obiektowo :-)
  ArrayList<Object[]>list = new ArrayList<Object[]>;
  for (int i=0;i<list.size();i++)
  {
    Object temp[] = list.get(i);
    System.out.println(temp[0] + " " + temp[1]);
  }

Przydało by się wyjaśnić powyższy fragment kodu. Chodzi o to, że jeśli wybieramy kilka kolumn to implementacja Hibernate najprościej ujmując każdą kolumnę(każdy rekord kolumny jest typu Object) pakuje w obiekt Object. Jeżeli po klauzuli select wystąpią dwie[lub więcej] kolumny np : imie, nazwisko to automatycznie te dwie wartości są udostępniane jako tablica Object[] a dostęp do pól mamy za pomocą indeksów. Dlatego musimy utworzyć odpowiednią listę ArrayList<Object[]> do odebrania danych z rekordów z tabeli.

Można też użyć iteratora dla listy:

for (Iterator i = list.iterator();i.hasNext();){
  Object[] result = (Object[]) i.next();
  System.out.println(result[0] + " " + result[1] );
}

Dziękuję za uwagę - Robert.

Zapisanie, serializacja obiektów Java

2009-08-05T05:11:00.000-07:00

Środowisko programistyczne java pozwala na kilka sposobów zapisania obiektu do "źródła", które po zamknięciu programu będzie przechowywać wartości obiektów. Do głowy przychodzą mi dwa pomysły

łatwy - zapisać stan obiektu w pliku tekstowym zapisując każde pole

łatwiejszy - wykorzystać mechanizm serializacji obiektu.

łatwiejszy

Serializacja obiektów w java

ObjectOutputStream, ObjectInputStream

void writeObject(Object o)

Object readObject()

ważne: implementują intefrejs Serializable

writeUTF(String s) / readUTF()

writeFloat(float f) / readFloat()
writeDobule(double d) / read Double()

Zatem jak zapisać/odczytać ?

SerializationExample

// Metoda do zapisu danych w pliku test.temp try { ObjectOutputStream MyObjectOutputStream = new ObjectOutputStream(new FileOutputStream("test.temp")); MyObjectOutputStream.writeUTF(serializujTextField.getText()); MyObjectOutputStream.close(); } catch (IOException ex) { ex.printStackTrace(); }

odczytaj

try { ObjectInputStream OIS = new ObjectInputStream(new FileInputStream("test.temp")); serializujLabel.setText(OIS.readUTF()); OIS.close(); } catch (IOException ex) { }

Jednak dla bardziej złożonych problemów nie wystarczy zapisać samego pola obiektu (String)

Osoba

mię, nazwisko

public class Osoba{ private String imie; private String nazwisko; public String getImie() { return imie; } public void setImie(String imie) { this.imie = imie; } public String getNazwisko() { return nazwisko; } public void setNazwisko(String nazwisko) { this.nazwisko = nazwisko; } public Osoba(String imie, String nazwisko) { this.imie = imie; this.nazwisko = nazwisko; } }

serializuj

Serializacja obiektu Osoba

odczytaj

Serializable

java.io.InvalidClassException: serializationexample.Osoba; serializationexample.Osoba; class invalid for deserialization

public class Osoba implements Serializable

odczytaj

o = (Osoba) MyObjectInputStreamOsoba.readObject(); MyObjectInputStreamOsoba.close(); imieLabel.setText(o.getImie()); nazwiskoLabel.setText(o.getNazwisko());

znacznikowym intefrejsem

if (O instance of Serializable)

transient

private transient String maloWaznaZmienna;

Orginalny post z mojej domeny rpiesnikowski.pl

Adres postu: http://gold.uwb.edu.pl/~st_robpie/WP/?p=25

Hibernate, i usuwanie rekordów

2009-08-05T00:29:00.000-07:00

Po tylu godzinach spędzonych przy debugowaniu i szukaniu rozwiązania na mój problem dotyczący połączenia frameworka Hibernate oraz JSF dataTable pomyślałem sobie, że napiszę quick how-to odnośnie tego problemu.

Problem podzielę na kilka części:

Pierwszą częścią będzie utworzenie relacji w bazie mysql-owej i utworzenie odpowiednich tabel do dalszej pracy.
Utworzenie aplikacji w NetBeans oraz konfiguracja Hibernate.
Ostatnia część będzie odpowiedzialna za właściwy problem. Tutaj udostępnię kod i go wytłumaczę.

*Jeżeli umiesz wykonać daną część to spokojnie możesz ją pominąć.

Część 1.

Szukając odpowiedzi na tworzenie relacji w mysql napotkałem się na bardzo treściwą stronę,

na której jest wszystko naprawdę ładnie wytłumaczone. Zapraszam do kliknięcia poniżej.

http://www.netcoffee.pl/pogodzinach/2006/04/17/zarzadzanie-relacjami-w-phpmyadmin/

No dobra to napewno już masz utworzony widok relacyjny w phpmyadmin. Teraz trzeba utworzyć bazę danych (nazwałem ją hibernate) oraz tabele (person, orders).

CREATE TABLE IF NOT EXISTS `person` (
`ID_PERSON` int(11) NOT NULL AUTO_INCREMENT,
`NAME` varchar(100) COLLATE utf8_polish_ci NOT NULL,
`SURNAME` varchar(100) COLLATE utf8_polish_ci NOT NULL,
PRIMARY KEY (`ID_PERSON`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_polish_ci AUTO_INCREMENT=32 ;

Tabela orders:

CREATE TABLE IF NOT EXISTS `orders` (
`ID_ORDER` int(11) NOT NULL AUTO_INCREMENT,
`ID_PERSON` int(11) NOT NULL,
`TITLE` text COLLATE utf8_polish_ci NOT NULL,
`COST` float NOT NULL,
PRIMARY KEY (`ID_ORDER`),
KEY `ID_PERSON` (`ID_PERSON`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_polish_ci AUTO_INCREMENT=1 ;

// utworzenie odpowiedniej relacji między person.ID_Person (a kluczem obcym)<->
orders.ID_Person

ALTER TABLE `orders`
ADD CONSTRAINT `orders_ibfk_1` FOREIGN KEY (`ID_PERSON`) REFERENCES `person` (`ID_PERSON`) ON DELETE CASCADE ON UPDATE CASCADE;

Teraz gdy masz puste tabele to przejdź w phpmyadmin do tabeli orders i spróbuj dodać nowy rekord. Jeżeli w tabeli person nie ma rekordu to wystąpi błąd sql ponieważ relacja między tabelami nie pozwala na dodawanie do orders rekordów gdy person nie ma danych.

Lekko zboczyliśmy z kursu, pardon.

Mała rada:

Dodaj do tabeli person jak najwięcej osób, a następnie kliknij zakładkę eksport i wyeksportuj dodane rekordy do pliku person.sql. Przyda Ci się to przy testowaniu gdy zabraknie rekordów w tabeli nie będziesz musiał ręcznie ich wprowadzać tylko uruchomisz plik person.sql, a tabela automatycznie będzie znów pełna.

Część 2.

Zatem czas przystąpić do uruchomienia NB (ja aktualnie pracuje w wersji 6.7).

Kliknij: New Project -> Java Web -> Web Application -> nazwa projektu: hibernateOnMysql -> Server and Settings : Server Glassfish 2.1, EE Version: Java EE 5 -> Frameworks : JavaServer Faces i Hibernate 3.2.5, ustaw Database Connection na : jdbc:mysql://localhost:3306/hibernate -> Finish.

Gdy kliknąłeś finish powinien pojawić Ci się plik hibernate.cfg.xml : kliknij zakładkę: Miscellaneous Properties, add -> Property name : hibernate.current_session_context_class, property value : Thread.

Teraz przejdź do zakładki : Configuration Properties -> add : Property Name: hibernate.show_sql, property value : true .

Pierwszy krok mamy za sobą teraz trzeba utworzyć kolejne pliki konfiguracyjne:

Wybierz zakładkę hibernate:

Dalej add all table:

Naszym oczom pokazał się plik: hibernate.revenge.xml ,z którego widać, które tabele będą następnie poddane mapowaniu.

Teraz netbeans automatycznie utworzy klasy Java oraz pliki hbm.xml dla każdej tabeli z bazy danych. W tym celu ponownie kliknij new -> other -> hibernate i wybierz New Hibernate Mapping Files and POJOs from Database.

W package wpisz hibernate . Kliknij finish.

Otwórz zakładkę Source Packages i hibernate i otwórz klasy Person.java i Orders.java i odpowiadające im pliki hbm.xml :

Możesz zauważyć jak wygląda mapowanie klas Java z tabelami z bazy hibernate.

Konfigurację aplikacji zakończymy dodając do faces-config.xml odpowiednie klasy:

Część 3.

W tym miejscu będziemy musieli na stronie JSP dodać znacznik a w nim zagnieździć odpowiednio oraz zaimplementujemy klasę MyDataModel, która będzie dziedziczyć ListDataModel i zaimplementujemy metodę interfejsu javax.faces.event.ActionListener o nazwie processAction().

Zatem tak powinien wyglądać komponent :

Musimy zdefiniować atrybut value i związać go z własnością tableValues klasy MyDataModel. W naszej klasie będzie to obiekt ArrayList<Person>, który będzie przechowywał wszystkie osoby pobrane z tabeli Person. Oznaczamy tableValues zmienną osoba. W każdej kolumnie tworzymy znacznik <f:outputText/> i ustawiamy jego atrybut value na odpowiednie pole zmiennej osoba. <f:facet> tworzymy w celu dodania nagłówków dla tabeli.

W ostatniej kolumnie natomiast dodajemy przyciski commandButton i do komponentu dodajemy atrybut idPerson o wartości osoba.idPerson i tworzymy słuchacza akcji

<f:actionListener type="classes.MyDataModel" /> informując, że klasa MyDataModel implementuję odpowiednią metodę processAction() . Atrybut action wskazuje

na metodę MyDataModel.delete(), które de facto nic nie będzie robić tylko zwraca null :-).

Teraz po wytłumaczeniu komponentu h:dataTable trzeba zaimplementować odpowiednie metody aby wszystko działało poprawnie. Obie własności tableValues i idPerson powinny być private zamiast public ...

Widzimy metodę getTableValues, która wykonuje proste zapytanie hsql pobierające wszystkie osoby.

Teraz kod obsługujący zdarzenie kliknięcia:

57. Pobieram komponent, który wywołał akcję klikniecia.

58. Pobieram wartość atrybutu z znaczika commandButton o nazwie idPerson.

59-64. Kod odpowiada za usunięcie danej osoby.

65-69. Najważniejsze fragmenty kodu.

Teraz wytłumaczę dlaczego metoda redirect() jest tak ważna. Otóż gdy klikniemy przycisk usuń to formularz jest wysyłany na serwer, który nastepnie usuwa dany rekrod. Taka funkcjonalność nam odpowiada w 100%. Niestety odświeżenie strony (F5) powoduje ponowne wysłanie formularza na serwer. Formularz ten również niestety przez implementację JavaServer Faces zapisuje wszystkie dane żądania na serwerze i w fazie przywrócenia widoku przesyła je "spowrotem do przeglądarki". Gdy odświeżymy stronę atrybut idPerson zwiększa wartość o 1. Osobiście nie mam pojęcia dlaczego, ale podczas działania i debugowania zauważyłem tą własność.

Po każdej akcji kliknięcia wykonanie przekierowania na tę samą stronę skutkuje tym, że bieżące żądanie zostaje wstrzymane, a kontener JSP odsyła przekierowanie HTTP. Zatrzymanie bieżącego żądania skutkuje tym, że wszystkie dane formularza są po prostu tracone. Następnie gdy użytkownik ponownie odświeży stronę to formularz nie będzie zawierał parametru idPerson. Przy tej implementacji nie musimy martwić się o zdublowaną akcje usuwania rekordów. Druga zaleta takiego rozwiązania to, że po akcji redirect strona jest ponownie konstruowana i wywołana metoda getTableValues(). Dzięki temu nie musimy sami dbać o zmianę zawartości modelu ListDataModel i metod get/setWrappedData().