UI Widget List: ShowDialog() (Custom Dialog)

寂夜清风

ShowDialog() (Custom Dialog)
Example usage:

1. // addNewFeed - triggered by "Add..." item in feed list and invokes the AddDialog
   
2. // Assistant defined above.
   
3. //
   ! }0 B: Q* ^2 b* m5 Y5 m+ t
4. FeedListAssistant.prototype.addNewFeed = function() {
   
5.   this.controller.showDialog({
   
6.     template: 'feedList/addFeed-dialog',
   
7.     assistant: new AddDialogAssistant(this)
   6 Q0 q% G5 i6 b
8.   });
   
9. };

复制代码

9 _( D6 N# h9 ]+ m( _" T- _* b/ ?
4 w  s! E% y$ n; l8 }- PA custom dialog uses a template (HTML file) and an assistant (JavaScript file), similar to a scene.  The HTML file defines what will be displayed in the custom dialog and the JavaScript file defines how the elements will behave.

) D3 ~2 C4 G4 Y; c! f4 d8 MTemplate file:

1. <div>
     O1 R8 D& o4 K  u
2.   <span id="add-feed-title" class="palm-dialog-title">Add News Feed Source</span>
   
3.   <div class="palm-group unlabeled">
   
4.     <div class="palm-list">
   
5.       <div class='palm-row first'>
   
6.         <div class="palm-row-wrapper textfield-group" x-mojo-focus-highlight="true">
   6 n0 b; |) F0 e4 L" d+ r9 W1 O2 |
7.           <div class="title">
   
8.             <div class="label">URL</div>
   
9.             <div id="newFeedURL" x-mojo-element="TextField" align="left"></div>
   
10.           </div>
    
11.         </div>
    8 o& s& A6 E- e6 A- S1 g, S# ]4 n0 T
12.       </div>
    
13.       <div class='palm-row last'>
    6 A. U, C7 k/ `2 L& b% @
14.         <div class="palm-row-wrapper textfield-group" x-mojo-focus-highlight="true">
    4 `5 p2 Q( p) h( d# a9 p
15.           <div class="title">
    
16.             <div class="label">Title</div>
    0 {) n4 c  v" T6 a$ ?
17.             <div id="newFeedName" x-mojo-element="TextField" align="left"></div>
    0 n5 ~. a: Z& L$ T
18.           </div>
    
19.         </div>
    # p7 V+ N3 v6 b5 n6 R3 L7 }! e+ h
20.       </div>
    
21.     </div>
    
22.   </div>
    . A: h3 O# |( }3 r
23.   <div x-mojo-element="Button" id="okButton"></div>
    4 e- }4 |. l+ }7 j
24. </div>

复制代码

Here is the assistant for the dialog, which sets up the various widgets as well as the event handlers that will respond to user interaction with the widgets.
9 }; H# V1 l  w7 h
" C2 B7 D1 v. ]Assistant file:

1. // AddDialogAssistant - simple controller for adding new feeds to the list.
   * v. Z6 E9 ?6 e) @* H
2. // Invoked by the FeedListAssistant when the "Add..." list item is selected
   
3. // on the feed list.
   . A4 f  s& p1 _* \7 G
4. //
   4 u8 @6 N! x7 G4 g) [, `
5. // The dialog displays two text fields (URL and Name) and an OK button.
   
6. // Either the user enters a feed URL and a name, followed by OK or a
   
7. // back swipe to close. If OK, the feed header is checked through an Ajax
   ( N) r" C2 b& Y/ n) U
8. // request and if valid, the feed updated and dialog closed. If an error,
   ! S9 ]9 f" N" S! i7 k7 r( U
9. // the posted in place of title and dialog remains open.
   ) D' k& |( w& g- y. ]
10. // Swipe back cancels and returns back to the FeedListAssistant.
    
11. //
    
12. function AddDialogAssistant(sceneAssistant) {
    
13.   this.sceneAssistant = sceneAssistant;
    
14. }
    9 t# M/ i0 d' l' x
15. AddDialogAssistant.prototype.setup = function(widget) {
    8 ~3 H- ?: w5 z
16.   this.widget = widget;
    3 y! t# \0 o$ m( f' y7 v
17.   // Setup text field for the new feed's URL
    
18.   //
    
19.   this.sceneAssistant.controller.setupWidget("newFeedURL",
    
20.     this.urlAttributes = {
      J5 J- x$ Q3 @
21.       property: "value",
    " G. d5 G8 y) Q2 X0 W- \! J  z
22.       hintText: "RSS or ATOM feed",
    
23.       focus: true,
    & ]1 p, ?6 Q* _% [; e& D
24.       limitResize: true,
    
25.       textReplacement: false,
    
26.       enterSubmits: false
    
27.     },
    
28.     this.urlModel = {value : ""}
    2 |" D" E2 w7 B, j
29.   );
    
30.   // Setup text field for the new feed's name
    
31.   //
    
32.   this.sceneAssistant.controller.setupWidget("newFeedName",
    + r( l, N0 z1 H' K0 j
33.     this.nameAttributes = {
    
34.       property: "value",
    2 [1 c: r% v4 `  T" G  R$ l
35.       hintText: "Optional",
    + C( M* q4 H4 f! [2 o8 H
36.       limitResize: true,
    : N4 d* l# @4 f( r) p& }
37.       textReplacement: false,
    $ K# K  [$ ~( Y, _
38.       enterSubmits: false
    7 Y0 X6 {( n! |2 J9 z
39.     },
    
40.     this.nameModel = {value : ""
    7 L( e; Z* I, l( n7 A7 l
41.   });
    
42.   // Setup button and event handler
    
43.   //
    
44.   this.sceneAssistant.controller.setupWidget("okButton",
    
45.     this.attributes = {},
    
46.     this.model = {
    1 N. z* m  m" F# j% _. K
47.       buttonLabel: "Add Feed",
    
48.       buttonClass: "addFeedButton",
    
49.       disabled: false
    ; Y! [, O! `0 J9 }4 D1 P
50.     }
    # w+ \  r0 g- P/ X
51.   );
    
52.   Mojo.Event.listen($('okButton'), Mojo.Event.tap, this.checkIt.bindAsEventListener(this));
    3 \* K! X5 k* d- b6 x  x
53. };
    ' l6 |- @  M2 x- S8 s/ H- o
54. // ------------------------------------------------------------------------
    4 \" c  F' _8 A4 v. T+ `
55. // Add Feed Functions
    
56. //
    
57. // checkIt - called when Add feed OK button is clicked
    . X) K9 T3 P; ^4 k' I, h0 T" `
58. //
    
59. AddDialogAssistant.prototype.checkIt = function() {
    
60.   // Check for 'http://' on front or other legal prefix
    
61.   // assume any string of 1 to 5 alpha characters followed
    
62.   // by ':' is legal, otherwise prepend "http://"
    
63.   //
    
64.   var url = this.urlModel.value;
    & o  P1 e$ K5 L  U* h* R. Q
65.   if (/^[a-z]{1,5}:/.test(url) === false) {
    . i. Q) Y1 w* [; l: y+ k9 {& H) f
66.     url = url.replace(/^\/{1,2}/,"");
    2 a& w- r& J7 h( Q; O( D  X
67.     url = "http://"+url;
    
68.   }
    
69.   // Update the submitted URL text model
    
70.   this.urlModel.value = url;
    6 t: G* I1 j0 v2 x( k9 L1 Q/ o
71.   this.sceneAssistant.controller.modelChanged(this.urlModel);
    
72.   var request = new Ajax.Request(url, {
    . g$ Y( k( m+ M& f, X2 |- f
73.     method: 'get',
    
74.     evalJSON: 'false',
    / |. f; w6 X/ W, @' W6 x
75.     onSuccess: this.checkOK.bind(this),
    
76.     onFailure: this.checkFailure.bind(this)
    
77.   });
    : B' ~1 ^+ ]5 q  }5 B* b$ P0 w+ ]
78. };
    " _+ B/ |( o( g! D+ D% o# V/ K9 x* d
79. //
    
80. // checkOK - called when the Ajax request is successful.
      Y# Z3 J2 r) K: d% t
81. //
    
82. AddDialogAssistant.prototype.checkOK = function(transport) {
    
83.   // DEBUG - log the result
    
84.   //
    4 \5 S) v- {- Q  t! W
85.   var t = new Template("Status #{status} returned from newsfeed request.");
    " ^( v. x! o+ F: d! z! i
86.   var success = "Feed Request Success: "+t.evaluate(transport);
    
87.   Mojo.Log.info(success);
    8 J9 l- l( G' q9 [; {3 \5 \- V
88.   // Work around when XML comes back in text response
    
89.   if (transport.responseXML === null && transport.responseText !== null) {
    0 g! |! J0 J3 m3 X1 T+ q# _
90.     Mojo.Log.info("&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;","Request not in XML format - manually converting");
    ; |% }1 N) a* J+ F8 H" h/ R( T: N
91.     transport.responseXML = new DOMParser().parseFromString (transport.responseText, 'text/xml');
    : X1 O2 ]* l; x
92.   }
    , r- b" G& R/ ]# c, Q& e3 c
93.   var feedError = errorNone;
    
94.   // Push the entered feed onto feedlist and call processFeed to evaluate it.
    
95.   // This is mainly to record the user's TITLE entry before processing
    : a0 \3 t7 {6 k3 `4 f$ o4 u
96.   //
    
97.   feedList.push({title:this.nameModel.value, url:this.urlModel.value, type:"", acFreq:0, numUnRead:0, stories:[]});
    $ D  f0 i  E/ u: N) b
98.   feedError = ProcessFeed(transport);
    
99.   // If successful processFeed returns errorNone
    7 N% I; r" e' L; O; k# P0 ^5 A; \  c
100.   //
     $ W/ d2 H8 g, \, c
101.   if (feedError === errorNone) {
     7 J$ x& n. o2 Y' v5 [2 @5 ?
102.     this.sceneAssistant.feedWgtModel.items = feedList;
     , b$ p5 k8 O  F1 }/ K' w9 m
103.     this.sceneAssistant.controller.modelChanged(this.sceneAssistant.feedWgtModel);
     
104.     this.widget.mojo.close();
     % D  S- }- N* p- W) }+ n! ^/ X
105.   }
     . J$ Y( b) ?( b# f
106.   else {
     2 _1 _* q0 G4 P: O  A$ P
107.     feedList.pop();
     
108.     if (feedError == errorUnsupportedFeedType) {
     ' ]: }* h8 e" D! v3 H
109.       Mojo.Log.info("Feed ", this.urlModel.value," isn't a recognized feed type (#", errorUnsupportedFeedType, ")");
     3 o) o4 R& b# }6 v3 y
110.       $("add-feed-title").innerHTML ="Invalid Feed - not a supported feed type";
     
111.     }
     
112.   }
     % v$ q# v4 H6 ^" q
113. };
     % l; K0 Z: v1 [7 z4 W5 q  N( w
114. AddDialogAssistant.prototype.checkFailure = function(transport) {
     ! p, n2 Q& x8 f( E
115.   // Use the Prototype template object to generate a string from the return
     + q6 M: S+ U" ^* l% d+ S
116.   //
     / v) E+ P3 E  k9 g& @, Q
117.   var t = new Template($L("#{status}"));
     ) S0 z6 [) U+ O& l* X2 g6 O
118.   var m = t.evaluate(transport);
     + N( F3 J* o' P( H4 a
119.   // Log error and put message in status
     
120.   //
     
121.   Mojo.Log.info("Invalid feed (Status ", m, " returned).");
     
122.   $("add-feed-title").innerHTML = "Invalid feed - http failure ("+m+")";
     , Y; ?& Z' g9 C+ K5 _! f2 W8 ?" P
123. };

复制代码

: B) K/ V/ E% f/ V" x7 _$ P
9 z( N5 u- x+ GThis example is from the book  Palm webOS by Mitch Allen.

寂夜清风

http://www.weboshelp.net/webos-m ... list/308-showdialog

horran3

非常感谢。

horran3

弄了好久终于找到showDialog显示不出的问题所在了。
1 V' U7 {  a5 M3 \0 G0 Z7 q& i- p关键在于source.js的配置，用eclips自动生成了scene和js两个文件，但是assistant只是在scene生效后才起作用，而
showDialog只是一个dialog，并不是scene，所以虽然source.js自动帮我们生成了配置，但是还是要把scene去掉，这样就可以正常显示了。