実装側( Main.mxml )inputType というプロパティの記述で動作を定義しています 1) num 0123456789 のみキー入力可能 2) pass パスワードフィールド 3) none 編集不可 4) NumberValidator Validator フィールド 01. <?xml version= "1.0" encoding= "utf-8" ?> 02. <mx:Application 03. xmlns:mx= "http://www.adobe.com/2006/mxml" 04. initialize= "initData();" 05. xmlns= "control.*" 06. > 07. 08. <!-- *************************************************** --> 09. <!-- 外部ソース --> 10. <!-- *************************************************** --> 11. <mx:Style source= "extern/Style.css" /> 12. <mx:Script source= "extern/Script.as" /> 13. 14. <!-- *************************************************** --> 15. <!-- 入力フォーム --> 16. <!-- *************************************************** --> 17. <mx:Form width= "90%" height= "90%" > 18. 19. <mx:FormItem 20. label= "restrict : 0123456789" 21. labelStyleName= "labelAlign" 22. paddingBottom= "30" 23. > 24. <LboxText 25. id= "fld1" 26. inputType= "num" 27. keyDown= "userKeyDown(event)" 28. /> 29. 30. </mx:FormItem> 31. <mx:FormItem 32. label= "displayAsPassword : true" 33. labelStyleName= "labelAlign" 34. paddingBottom= "30" 35. > 36. <LboxText 37. id= "fld2" 38. inputType= "pass" 39. /> 40. 41. </mx:FormItem> 42. <mx:FormItem 43. label= "editable : false" 44. labelStyleName= "labelAlign" 45. paddingBottom= "30" 46. > 47. <LboxText 48. id= "fld3" 49. inputType= "none" 50. /> 51. 52. </mx:FormItem> 53. <mx:FormItem 54. label= "NumberValidator" 55. labelStyleName= "labelAlign" 56. paddingBottom= "30" 57. > 58. <LboxText 59. id= "fld4" 60. inputType= "NumberValidator" 61. cError= "入力値が不正です" 62. /> 63. 64. </mx:FormItem> 65. <mx:FormItem 66. label= "NumberValidator(必須入力)" 67. labelStyleName= "labelAlign" 68. paddingBottom= "30" 69. > 70. <LboxText 71. id= "fld5" 72. inputType= "NumberValidator" 73. iError= "?" 74. noEmpty= "true" 75. /> 76. 77. </mx:FormItem> 78. 79. 80. </mx:Form> 81. 82. </mx:Application> 定義側( LboxText.mxml )public な [Bindable] の利用は、getter setter のメソッド定義とほぼ同義です。 [Bindable] では、視覚的に実装を行い、getter setter は、従来からのコード 的な実装です。 但し、複雑な処理を行うプロパティ処理は、getter setter を利用します。 ここでは、[Bindable] な変数は、内部クラス(のような)として定義された NumberValidator への値の橋渡しを行っています。 サンプルとしての構築なので、NumberValidator のプロパティ実装が不完全ですが、 外部からのプロパティによって NumberValidator コントロールのプロパティ制御 が可能となっています。 errorTip クラスは、Validator のエラーメッセージのふきだしのスタイルを決定 します。ここでの値は、サイズ以外はデフォルトの設定です 001. <?xml version= "1.0" encoding= "utf-8" ?> 002. <mx:TextInput 003. xmlns:mx= "http://www.adobe.com/2006/mxml" 004. creationComplete= "initControl(event)" 005. keyDown= "keyDownEvent(event)" 006. keyUp= "keyUpEvent(event)" 007. > 008. 009. <mx:Style> 010. .errorTip { 011. color: #FFFFFF; 012. fontSize: 16 ; 013. fontWeight: "bold" ; 014. shadowColor: # 000000 ; 015. borderColor: #CE2929; 016. borderStyle: "errorTipRight" ; 017. paddingBottom: 4 ; 018. paddingLeft: 4 ; 019. paddingRight: 4 ; 020. paddingTop: 4 ; 021. } 022. </mx:Style> 023. 024. <mx:Script> 025. <![CDATA[ 026. 027. import mx.managers.*; 028. import mx.events.*; 029. 030. private var _inputType:String; 031. [Bindable] public var iError:String = "整数値を入力して下さい" ; 032. [Bindable] public var cError:String = "整数値を入力して下さい" ; 033. [Bindable] public var noEmpty:Boolean = false ; 034. [Bindable] public var EmptyError:String = "必須入力です" ; 035. 036. // ***************************************************** 037. // 新しいプロパティ 038. // ***************************************************** 039. public function get inputType():String { 040. return _inputType; 041. } 042. public function set inputType(str:String): void { 043. _inputType = str; 044. 045. if ( _inputType == "num" ) { 046. this .restrict = "0123456789" ; 047. } 048. 049. if ( _inputType == "pass" ) { 050. this .displayAsPassword = true ; 051. } 052. else { 053. this .displayAsPassword = false ; 054. } 055. 056. if ( _inputType == "none" ) { 057. this .editable = false ; 058. } 059. 060. if ( _inputType == "NumberValidator" ) { 061. option.source = this ; 062. } 063. 064. 065. // ルートアプリケーションの参照 066. mx.core.Application.application.firebug( _inputType ); 067. } 068. 069. // ***************************************************** 070. // 071. // ***************************************************** 072. private function keyDownEvent(e:KeyboardEvent): void { 073. 074. mx.core.Application.application.firebug( "innerKeyDown" ); 075. 076. } 077. // ***************************************************** 078. // 079. // ***************************************************** 080. private function keyUpEvent(e:KeyboardEvent): void { 081. 082. mx.core.Application.application.firebug( "innerKeyUp" ); 083. 084. } 085. 086. // ***************************************************** 087. // 初期処理 088. // ***************************************************** 089. private function initControl(e:FlexEvent): void { 090. 091. // イベント追加 092. this .addEventListener(FlexEvent.ENTER, focusControl); 093. 094. } 095. 096. // ************************************************* 097. // ENTER to TAB 098. // ************************************************* 099. private function focusControl(event:FlexEvent): void { 100. 101. var fm:FocusManager = FocusManager( this .focusManager); 102. var target:Object = fm.getNextFocusManagerComponent(); 103. target.setFocus(); 104. 105. } 106. 107. ]]> 108. </mx:Script> 109. 110. <mx:NumberValidator 111. id= "option" 112. property= "text" 113. domain= "int" 114. integerError= "{iError}" 115. required= "{noEmpty}" 116. requiredFieldError= "{EmptyError}" 117. invalidCharError= "{cError}" 118. triggerEvent= "enter" 119. /> 120. 121. </mx:TextInput> |