Total Pageviews

2017/10/11

[CSS] Font Size Problem in iOS

Problem
I am testing my web page in every browser (ex. Chrome, Firefox, IE, Safari, etc.), iOS and Android. Each platform is working fine except iOS. 

The problem is the font size of the text in specific table cell is larger than other.


How-To
Add the following code in my CSS file is working:
body {
    -webkit-text-size-adjust: 100%;
}


Reference
[1] https://stackoverflow.com/questions/2545542/font-size-rendering-inconsistencies-on-an-iphone

2017/10/10

How do I Keep Leading Zeros in CSV Files?

Problem
I am using Java to write data into CSV file. 
One of the column in the CSV file is cell phone number.
If I open this CSV file by Microsoft Excel, the first digit will disappear.

Take the first record for example. The correct value is 0912123456, but it show 912123456 in Microsoft Excel.

How-To
When you write cell number into CSV file, you should write ="0912123456" instead of 0912123456.



2017/10/09

[AngularJS] How to resize text width on demand ?

Problem
I am using AngularJS to implement web application. 

You can find an URL text filed in the web page. 

The requirement is the width of the URL text field will resize based on the text length which key in by end user. 

How to do it?


How-To
You can make good use of ng-keyup and ng-style to fulfill this requirement.
Using ng-keyup to calculate the length of text and using ng-style to set width at the same time.

The HTML code snippet looks like:
1
2
3
4
5
6
7
8
    <div class="row">
      <div class="form-group col-sm-3">
       <!- ignore -->        
        <label for="url" class="control-label label-width-5">URL</label> 
        <input type="text" id="url" name="url" class="form-control" data-ng-model="model.url" 
               data-ng-keyup="keyInUrl()" data-ng-style="{'width':urlWidth}">
      </div>
    </div>


The JavaScript code snippet are the following:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
  // set the initial value for url width
  $scope.urlWidth = 200;    

  // calculate width at runtime
  $scope.keyInUrl = function() {
   var url = $scope.model.url;
   if (!isEmptyOrUndefined($scope.model.url)){
    var width = ((url.length + 1) * 9);
       console.log('width = ' + width);
       if(width > 200) {
        $scope.urlWidth = width;
       } else  {
        $scope.urlWidth = 200;
       }
   }
  }


Demo:


2017/10/08

[Oracle to SQL Server Migration] NVL

Problem
In Oracle, NVL function lets you replace null (returned as a blank) with a string in the results of a query. 




If expr1 is null, then NVL returns expr2. If expr1 is not null, then NVL returns expr1.

The SQL statement is as follows:
SELECT DRAWING_ID,
       NVL(TARGET_INSFEE, 0)
FROM CAM_DRAWING

Owing to NVL is only for Oracle, but it cannot be executed in Microsoft SQL Server.


How-To
You can use ISNULL instead of NVL in Microsoft SQL Server.
The SQL statement is as bellows:
SELECT DRAWING_ID,
       ISNULL(TARGET_INSFEE, 0)
FROM CAM_DRAWING



2017/10/07

Using JPA to Insert and Retrieve BLOBs

Problem
I am using JPA to do CRUD in persistence tier. If I would like to insert an image file into Microsoft SQL Server, how to do it?

The table schema is the following:
CREATE TABLE "CAM_CAMPAIGN_IMGS"
(
   CAMPAIGN_ID nvarchar(10) NOT NULL,
   CID nvarchar(100) NOT NULL,
   IMAGE varbinary(MAX) NOT NULL,
   CONTENT_TYPE nvarchar(100) NOT NULL,
   CONSTRAINT PK_CAM_CAMPAIGN_IMGS PRIMARY KEY (CAMPAIGN_ID, CID)
)
GO


How-To
You can see image column add @Lob annotation in entity class:
package com.xxx.ecp.commons.entity;

import java.io.Serializable;

import javax.persistence.Column;
import javax.persistence.EmbeddedId;
import javax.persistence.Entity;
import javax.persistence.Lob;
import javax.persistence.Table;


@Entity
@Table(name="CAM_CAMPAIGN_IMGS")
public class CamCampaignImg implements Serializable {
    private static final long serialVersionUID = 1L;

    @EmbeddedId
    private CamCampaignImgPK id;

    @Column(name="CONTENT_TYPE")
    private String contentType;

    @Lob
    @Column(name="IMAGE")
    private byte[] image;

    public CamCampaignImg() {
    }

    public CamCampaignImgPK getId() {
        return this.id;
    }

    public void setId(CamCampaignImgPK id) {
        this.id = id;
    }

    public String getContentType() {
        return this.contentType;
    }

    public void setContentType(String contentType) {
        this.contentType = contentType;
    }

    public byte[] getImage() {
        return this.image;
    }

    public void setImage(byte[] image) {
        this.image = image;
    }

}


Code snippet regarding insert image file looks like:
     CamCampaignImgPK imgPK = new CamCampaignImgPK();
     imgPK.setCampaignId(camCampaign.getCampaignId());
     imgPK.setCid(form.getImgFileName());
     
     CamCampaignImg camCampaignImg = new CamCampaignImg();
     camCampaignImg.setId(imgPK);
     camCampaignImg.setContentType(form.getContentType());
     
     // convert to bytes from input stream
     camCampaignImg.setImage(form.getImgFile().getBytes());
     
     camCampaiganImgRep.create(camCampaignImg);


Code snippet about retrieve image file looks like:
     List<CamCampaignImg> imgs = camCampaignImgRepCust.findByCampaignId(campaign.getCampaignId());
     for(CamCampaignImg img : imgs) {
        // get image's content type
        String contentType = img.getContentType();
        // get image file's input stream
        InputStream imgInputStream = new ByteArrayInputStream(img.getImage());
     }