Category Archives: Computer

เครื่องมือ ทำ Ipad-Application โดย html / css / javascript

รวบรวมเครื่องมือที่ผมใช้ พัฒนา

  • Phone gap   framework cross platform mobile App ช่วยให้ผมสามารถสร้าง application โดยไม่ต้องกังวลเรื่อง platform ตัว phone-gap เองเหมาะสำหรับงานที่ไม่ต้องการ response ที่รวดเร็วเหมือน native แต่ตอบโจทย์เรื่องการทำงานทั่วๆไปและที่สำคัญประหยัดต้นทุน
  • Jquery mobile UI framework for mobile App

หลังจากที่เริ่มต้นงาน Project นี้มาผมได้ทดลองใช้ framework javascript มาหลายตัวเช่น  kendo UI,  Sencha touch 2 (ext.js)

พบว่าปัญหาเรื่องการ custom UI เองนั้นทำได้ยากสำหรับทั้งสองตัวแต่ใน layer ของ data model นั้นทั้งสองตัวทำได้ดีมากแต่ต้องตัดใจเพราะว่าไม่ตอบโจทย์การแก้ UI ของผม

  • iScroll ช่วยให้ตัว scroll bar มีน้ำหนักและสมจิงเนื่องจากการแสดงผลของ phone-gap ใช้ความสามารถของ webview component ของ platform นั้นๆ ทำให้ การ scrolling ของ element นั้นไม่ให้ความรู้สึกแบบ native ตัว javascript ตัวนี้ข่วยได้
  • CHRISTOPHE COENRAETS blog ที่มีประโยชน์กับผมมาตลอดตั้งแต่ทำ Flex จนมาถึง phone-gap

ในส่วนต่อที่จะทำเป็นเรื่อง Off-line storage และ synchronize กับ server

 

Sencha Touch 2: fireEvent from view to component (custom event)

อ้างอิงตัวอย่างจาก http://miamicoder.com/2012/how-to-create-a-sencha-touch-2-app-part-4/

จาก framework ที่ Sencha Touch 2 จัดเตรียมไว้ให้แบบ MVC ทำให้ผมเลือกใช้การ pass custom event ไปยัง controller ที่จัดเตรียมเอาไว้

ส่วนสำคัญของตัวอย่างนี้คือการ initialize  view ใน method “initialize ”  เนื่องจากครั้งแรกได้ทำนอก method เป็นแบบ config object ผลคือไม่สามารถ dispatch ไปถึงตัว listener ที่ controller ได้

View

Ext.define("NotesApp.view.NotesListContainer", {
	extend: "Ext.Container",
	alias: "widget.noteslistcontainer",

	 initialize: function () {
	  this.callParent(arguments);
	  var notesList = {
	  xtype: "noteslist",
	  store: Ext.getStore("Notes"),
	  listeners: {
	    disclose: { fn: this.onNotesListDisclose, scope: this }
	  }
         };
         this.add([notesList]);
        },
	onNotesListDisclose: function (list, record, target, index, evt, options) {
	  console.log("editNoteCommand");
          this.fireEvent('editNoteCommand', this, record);
	}
});

ในส่วนของตัวรับ สามารถกำหนด event เป็น ‘editNoteCommand’ ได้เลย

Controller

Ext.define("NotesApp.controller.Notes", {

    extend: "Ext.app.Controller",
    config: {
        refs: {
         notesListContainer: "noteslistcontainer",
	},
        control: {
            notesListContainer: {
                editNoteCommand: "onEditNoteCommand"
            },
	},
	// Commands.
    onNewNoteCommand: function () {
	console.log("onNewNoteCommand");
    }
});

Sencha Touch2 – create app problem

เริ่มต้นก็จะ create app ตาม tutorial  (Window OS)
http://www.sencha.com/learn/getting-started-with-sencha-touch-2/

สุดท้ายนั่งงมอยู่นานติดตรง พอเรา “sencha app create ” มันก็เงียบไปไม่มี INFO การสร้างออกมาปรากฏว่ามีปัญหาเรื่องการอ้าง ตัว sencha ที่ใช้ในการ run

เพราะว่าขั้นตอนบอกให้ลง Tool Kit และ SDK แต่สุดท้าย sencha ที่จะใช้สร้างจริงๆ ต้องตัวที่อยู่ SDK แต่พอเราติดตั้ง Toolkit มันจะสร้าง Path Environment ให้เรียกที่ Toolkit

Solution  ให้เรียก Sencha ด้วย Full Path

Example.   D:\web\medico-mobile\lib\sencha-touch-2-sdk\command\sencha app create  [App Name]  [Destination APP]

 

Flash Builder 4

ห่างหายไปนาน แต่ก็ มาจนได้ กับ Builder ตัวล่าสุดของ Flex  “Flash Builder 4”  หลังจากใช้ beta 2 มาหลายเดือน ผมคิดว่าตัว Builder ล่าสุดนี้ แก้ไขจุดบกพร่องจาก 3 มาพอสมควร  เรื่อง Flex Unit test ก็เป็นอีกเรื่องนึงที่ตัว 4 ให้มาด้วย ตอนนี้ก็ พยายามศึกษาอยู่

Flex Report

kemelyon  FlexReport 0_2rc1 (LGPL)
flexreport

  1. Layout  A4,A3,A4R (landscape)
  2. Print Preview
  3. Multipage Print

Demo ,  Source Here.

3 Issue Fixed

–  A4R print in source PaperFormat.as line 54

new PaperFormat([842, 595],“A4.Rotated”,[8.27,11.9],[210,297]);

–  Error: Error #2030: End of file was encountered  at flash.display::BitmapData/setPixels()

example code   refer to FlexReportDemo.mxml

  private function generateDocument():void
  {
   var source:ReportDP = new ReportDP();
   var report:PortfolioReport = new PortfolioReport();
<span style="background-color: #ffff00;">   report.width = PaperFormat.A4R.width; // add this
   report.height = PaperFormat.A4R.height;// add this</span>
   doc = new Document(report, source, PaperFormat.A4R);
   doc.pdfEnabled = false;
   printPreview.doc = doc;
  }
  private function initApplication():void
  {
  printPreview.pdfExportEnabled = false;
<span style="background-color: #ffff00;">  printPreview.page.width = PaperFormat.A4.width; // add this
  printPreview.page.height = PaperFormat.A4.height; //add this</span>
  generateDocument();
  }

– print blank page or grey rectangle in the upper right corner Issue.

if (printJob.start()) {
   setUpTemplate();
   Application.application.addChild(template);
   <span style="background-color: #ffff00;">_template.height = printJob.pageHeight; // add this</span>
  <span style="background-color: #ffff00;"> _template.width = printJob.pageWidth;   // add this</span>
   _template.validateNow();
   _template.reset();
<a href="http://code.google.com/p/flexreport/source/browse/trunk/flexreport/org/doc/Document.as" target="_blank">ORIGINAL CODE HERE</a>

Flex AutoComplete Input Enter key Problem

From Adobe Flex Component  “AutoComplete Input” ,It doesnt work when use in FlashPlayer 10. Cannot use Enter Key to close drop down.

<strong>line 158:</strong>
/**
*  @private
*
*/
private var enterKeyDown:Boolean = false;
<strong>
</strong>
<strong>line 490:</strong>
else if(event.keyCode == Keyboard.ENTER)
{
     if(keepLocalHistory && dataProvider.length==0)
	addToLocalHistory();

     enterKeyDown = true; /** modified */
}
<strong>
</strong>
<strong>line 568:</strong>
if(showDropdown && !dropdown.visible && !enterKeyDown)  /** modified */
{
     //This is needed to control the open duration of the dropdown
    super.open();
    showDropdown = false;
    showingDropdown = true;

    if(dropdownClosed)
      dropdownClosed=false;
 }
 enterKeyDown = false;  /** modified */

Download here  AutoComplete.as

Advanced Spark Visual Component in ActionScript

เมื่อถึงเวลาที่เราจะใช้มันจริงๆ เลยต้องมาเจาะลึกกัน ก่อนอื่นคงต้องออกตัวว่าอยู่ระหว่างศึกษา Gumbo (Flex4)  ก่อนหน้านี้ทำ Flex3 (Halo) ก็ไม่เคยเข้าไปดูมันเลยพวก class UIComponent แต่เมื่อเราต้องการ component ที่เร็วและเบาได้ดั่งใจเลยต้องมาทำเอง ปกติแล้วการสร้าง Spark Components เองปกติเราจะต้องสร้างสองอย่างคือ

  • Component Class จะเป็นตัวอธิบายคุณสมบัติ ของ component นั้นรวมถึงกำหนด Event ที่จะส่งออก
  • Skin Class ใน component ของ spark จะต่างกับ halo ที่จะมีการ manage เรื่องหน้าตาแยกออกมา รวมถึง view state ,ขนาด ที่แสดง

ใน Component ต่างๆมักจะขยายมาจาก Class UIComponent ทั้งสิ้นโดยการสร้าง Component เองจะต้องรู้จักกับ Method 4 Method นี้เพื่อที่จะ Override และใช้ประโยชน์จากมัน

  • commitProperties ()
  • createChildren ()
  • measure ()
  • updateDisplayList ()

ติดตามตอนต่อไป (เมื่ออ่านเข้าใจกว่านี้ 55) แต่ถ้าสนใจเพิ่มเติมใน link ข้างมีตัวอย่างให้ดูครับ

อ้างอิงจาก

VerifyError: Error #1014: Class IVisualElement could not be found.

และแล้วก็มีอีก เมื่อเราใช้ Flex SDK ตัวที่ Nightly Build ที่ผมใช้ตอนนี้เป็น flex_sdk_4.0.0.10802 พอสั่ง run ก็จะมีข้อความ Error แบบนั้น

VerifyError: Error #1014: Class IVisualElement could not be found.

วิธีในการแก้ ได้มาจาก http://forums.adobe.com/thread/487444

ให้ click ขวาที่ properties ของ project -> Flex Build Path -> Library Path

ให้เลื่อน framework.swc ขึ้นมาบนสุดเหนือตัวอื่นๆก็จะทำงานได้ตามปกติเหมือนเดิม

Flex: Channel.Connect.Failed error NetConnection.Call.Failed: HTTP: Status 200

อยา่กจะ post ไว้เผื่อมีใครเจอปัญหาแบบผม มีระบบที่ผมทำใช้ตัวนึงใช้ Flex แล้วก็ติดต่อกับ server ผ่าน remote object  format ข้อมูลเป็น  AMF (Action message format) โดยใช้ library SabreAMF (php) ใช้งานได้ดีมาตลอดในทุก browser แต่มาวันนึง IE8 ออกมาผมก็พบว่าโปรแกรมผมใช้ไม่ได้ (โอ้วพระเจ้า) ผมเลยพยายามหาสาเหตุผมว่าทำไม IE8 กับ Remote Object Channel ทีฺ่ีใช้จึงมีปัญหาทั้งใน Vista หรือ XP ก็เป็น ทำให้ผมพบเพื่อน ที่เป็นเหมือนกันหลายคนใน bugs.adobe.com, forum flex จนในที่สุดเมื่อ สามวันก่อนก็มีคนของ adobe มาไขข้อข้องใจ aglosban ผมจะยกมาเลยนะครับ ที่เค้า อธิบาย

Hi. Adobe is currently investigating this problem and we have reported the issue to Microsoft to get help from them to resolve it. I will tell you what we know about the problem so far and give you some potential workarounds.

We haven’t been able to determine at this point what OS and software configuration causes the problem. Users have reported having this problem with IE 8 on Vista and XP machines. We have done testing internally on Vista and XP machines with IE 8 that did not have this problem. We have an XP machine with IE 8 that does have the problem, but the problem only reproduces when running under one user account which makes us think that the problem is related to some software installed under that user account or settings (possibly browser or caching related but maybe not) applied to that user account.

It looks like the problem is related to how IE does Mime type resolution and how it manages its cache. IE is saving responses to HTTP Post requests to disk when the HTTP request URL does not have a file extension. For example when using a polling channel in BlazeDS, the URL to the endpoint on the server might look like this.

http://localhost:8400/lcds-samples/messagebroker/amfpolling

IE stores the responses from HTTP Post requests to the endpoint URL to disk in numbered files based on the last part of the URL. So, based on the above URL, you could see a number of files on disk like the following that contain the responses sent back for the HTTP Post requests.

amfpolling[1]
amfpolling[2]

To see these files you’ll need to look at what IE is saving to its temporary internet files using a disk utility or browsing the temporary internet files from a command prompt as the files are hidden by the OS.

On machines that have the problem, it appears that IE at some point is unable to write the response to disk and this results in the NetConnection.Call.Failed error. It looks like IE numbers these files 1 – 11 and on machines that have the problem, the problem only seems to occur after IE has written the 11th file and goes to write the next file to disk. Clearing the temporary internet files in IE does not appear to remove these files. Removing the files by manually deleting them or using a cleanup utility such as CCleaner will temporarily resolve the problem until after the 11th file has been written to disk at which point the problem will start occurring again.

Here are some potential workarounds for this problem. We are still hoping to get a resolution from Microsoft. We have not done thorough testing to certify that any of these workarounds entirely resolve the problem and don’t introduce any new issues, which is to say that before you use any of these workarounds in a production environment you should do testing to make sure that the workaround resolves the issue for you and doesn’t cause any problems for your application. Most of these workarounds involve preventing IE from writing the HTTP Post responses to disk. We tried setting additional no cache and no store headers on the HTTP response but this did not prevent IE from writing the responses to disk. This likely has to do with how IE does Mime type resolution but it’s unfortunate that IE doesn’t seem to respect the no cache and no store headers in this case.

1) Using HTTPS instead of HTTP seemed to resolve the problem during our testing. It’s likely that the caching behavior in IE is different when HTTPS is being used which is why the problem would occur over HTTP and not over HTTPS.

2) Adding a file extension to the end of the endpoint URL in the services-config.xml file seemed to resolve the problem during our testing. Also, looking at what IE was writing to disk we did not see the HTTP Post responses written to disk when the endpoint URL had a file extension. Here is an example of an endpoint URL modified to have a file extension.

http://localhost:8400/lcds-samples/messagebroker/amfpolling.amf

It’s likely that files with an extension are treated differently by IE when it does its Mime type resolution and makes a determination on whether to cache the file which would account for the difference in behavior when the URL didn’t have a file extension and when it did have a file extension.

3) Using an HTTPEndpoint (AMFX) instead of an AMFEndpoint (AMF) seems to resolve the problem. The content type for AMFX messages is text based while AMF messages are binary which would explain why IE treats the two message types differently.

4) When you compile your application, set the target version to Flash Player 10. SWFs compiled for FP9 and FP10 execute differently even if both are run in Flash Player 10. Setting the target version when compiling the application to FP10 seemed to work around the problem.

5) Modifying the BlazeDS source to set the content type for AMF messages to something text based such as text/xml instead of application/x-amf seemed to resolve the problem. Based on my reading about IE mime type resolution this probably does not fool IE into thinking the content is text based but does seem to change the caching behavior in such a way that it avoids the problem.

Update: One thing I forgot to mention for workaround number 5 is that there is at least one problem this workaround introduces that makes it not a very good solution. Third party programs that work with AMF such as some HTTP sniffers and test automation tools will likely not be able to work with the AMF messages if you change the content type. It’s also not clear how changing the content type would would affect how applications run in other browsers.

จากที่ผมทดสอบมาวิธีที่ใช้งานได้คือการเปลี่ยน target version เป็น 10 จากเดิมที่เป็น 9 ตา่มข้อที่ 4