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. //
   
4. FeedListAssistant.prototype.addNewFeed = function() {
   , ^# O6 {# W- z6 L8 x
5.   this.controller.showDialog({
   7 j1 R" u" c% k- d( {
6.     template: 'feedList/addFeed-dialog',
   
7.     assistant: new AddDialogAssistant(this)
   
8.   });
   
9. };

复制代码

" a9 A4 b( e& c3 [
0 }) A+ J* ^5 T- i3 |A 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.

) x! ^) R" h; Y5 aTemplate file:

1. <div>
   : h4 n9 d3 T' k  E3 Q; H* \$ `' v
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'>
   1 _' B' N0 U# i* p6 Y
6.         <div class="palm-row-wrapper textfield-group" x-mojo-focus-highlight="true">
   
7.           <div class="title">
   ( N: V! g* T+ b6 v
8.             <div class="label">URL</div>
   2 y; p( v& k$ B/ M( r  u. p+ J9 F- s
9.             <div id="newFeedURL" x-mojo-element="TextField" align="left"></div>
   # `" Y) Z1 o; s# O: P7 D: _* C
10.           </div>
    & O2 e2 ?7 V" ]7 T! o
11.         </div>
    4 T7 D) ~/ d9 c$ O! G) a+ P( F
12.       </div>
    
13.       <div class='palm-row last'>
    - Q. y  y. z7 |% D; _; g" z
14.         <div class="palm-row-wrapper textfield-group" x-mojo-focus-highlight="true">
    
15.           <div class="title">
    ( t( p& [% `" J; ?! e" }
16.             <div class="label">Title</div>
    
17.             <div id="newFeedName" x-mojo-element="TextField" align="left"></div>
    
18.           </div>
    
19.         </div>
    
20.       </div>
    ( X4 c  Q: ^6 s9 r" _7 Z1 f3 {  W0 G
21.     </div>
    
22.   </div>
    
23.   <div x-mojo-element="Button" id="okButton"></div>
    
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.

% {. ~! p) ?; e% {3 O$ |# @Assistant file:

1. // AddDialogAssistant - simple controller for adding new feeds to the list.
   1 O+ @/ M9 Q+ Q& f9 K9 E5 b1 v
2. // Invoked by the FeedListAssistant when the "Add..." list item is selected
   
3. // on the feed list.
   
4. //
   
5. // The dialog displays two text fields (URL and Name) and an OK button.
   . l, c0 e4 c% r& c7 C. o& D) ~
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
   : R; O6 r6 n, r2 L1 b
8. // request and if valid, the feed updated and dialog closed. If an error,
   " c" Q! ~: }% G4 q) C
9. // the posted in place of title and dialog remains open.
   2 i; w) |! }. E% M7 _1 b4 ?
10. // Swipe back cancels and returns back to the FeedListAssistant.
    9 e) a$ [) P" v) t* X# Z3 z0 G
11. //
    1 U1 R6 |# S! G8 s- d8 B7 o
12. function AddDialogAssistant(sceneAssistant) {
    
13.   this.sceneAssistant = sceneAssistant;
    
14. }
    + _" [+ n7 c- ?
15. AddDialogAssistant.prototype.setup = function(widget) {
    2 s: D# m# ]% D, i* N
16.   this.widget = widget;
    
17.   // Setup text field for the new feed's URL
    
18.   //
    
19.   this.sceneAssistant.controller.setupWidget("newFeedURL",
    / R0 q  n& E  Z2 U4 @) H, d
20.     this.urlAttributes = {
    
21.       property: "value",
    
22.       hintText: "RSS or ATOM feed",
    8 e7 x. z9 n+ A/ Y
23.       focus: true,
    
24.       limitResize: true,
    
25.       textReplacement: false,
    
26.       enterSubmits: false
    
27.     },
    
28.     this.urlModel = {value : ""}
    ( M3 G; o! F# x% l/ j
29.   );
    
30.   // Setup text field for the new feed's name
    ' J; j, r3 V6 b8 I4 j: h2 P$ H) Z
31.   //
    
32.   this.sceneAssistant.controller.setupWidget("newFeedName",
    ; V/ g: k1 o" h0 C1 H" W
33.     this.nameAttributes = {
    
34.       property: "value",
    
35.       hintText: "Optional",
    
36.       limitResize: true,
    
37.       textReplacement: false,
    ! J% T1 |* o/ a( ]0 c) C. }$ ]
38.       enterSubmits: false
    8 U& T" C6 k0 H) I
39.     },
    
40.     this.nameModel = {value : ""
    3 |+ e( r9 j( n9 L$ O9 S
41.   });
    
42.   // Setup button and event handler
    " t7 J7 x' t/ h# u$ P, v
43.   //
    : s) x* Q/ B) s- [
44.   this.sceneAssistant.controller.setupWidget("okButton",
    
45.     this.attributes = {},
    3 U. b6 [, S! I  Z3 ~
46.     this.model = {
    
47.       buttonLabel: "Add Feed",
    * Y+ d. I7 j$ u; H4 w/ }
48.       buttonClass: "addFeedButton",
    
49.       disabled: false
    9 U$ e' _. E4 u
50.     }
    
51.   );
      Y' U- G* |+ B: y$ H9 a5 _8 E
52.   Mojo.Event.listen($('okButton'), Mojo.Event.tap, this.checkIt.bindAsEventListener(this));
    
53. };
    
54. // ------------------------------------------------------------------------
    6 l" `8 X: V" X* W& O6 ?
55. // Add Feed Functions
    
56. //
    
57. // checkIt - called when Add feed OK button is clicked
    
58. //
    9 Q, e: v: H6 t1 q$ |
59. AddDialogAssistant.prototype.checkIt = function() {
    + @; U3 Z% I3 r& k
60.   // Check for 'http://' on front or other legal prefix
    
61.   // assume any string of 1 to 5 alpha characters followed
    ; I( y: x. {( C% P6 H% Q
62.   // by ':' is legal, otherwise prepend "http://"
    
63.   //
    7 d( p8 _: G5 \8 H" p0 J
64.   var url = this.urlModel.value;
    6 P5 X/ X' ?- ?
65.   if (/^[a-z]{1,5}:/.test(url) === false) {
    
66.     url = url.replace(/^\/{1,2}/,"");
    
67.     url = "http://"+url;
    ! A. H$ R5 I, u
68.   }
    ; \/ U2 S) Z+ Z+ J" P0 k, ?9 D
69.   // Update the submitted URL text model
    ' k) _, p6 Z- N* j( Q. e
70.   this.urlModel.value = url;
    
71.   this.sceneAssistant.controller.modelChanged(this.urlModel);
    & E; x  o! B: m2 L* \* W2 {( ?" j
72.   var request = new Ajax.Request(url, {
    
73.     method: 'get',
    . `- y/ W, q& \! S% ?
74.     evalJSON: 'false',
    0 j1 q9 D7 _3 j% @) M3 G) k' ]
75.     onSuccess: this.checkOK.bind(this),
    
76.     onFailure: this.checkFailure.bind(this)
    0 ~) Q4 `$ L9 ^- I5 E* V- }4 P
77.   });
    5 W2 Q) P: T; o8 k" X* H
78. };
    
79. //
    
80. // checkOK - called when the Ajax request is successful.
    
81. //
    & ^( ]3 f1 }/ P* K6 S" o! Y2 k+ x
82. AddDialogAssistant.prototype.checkOK = function(transport) {
    / Y; w5 Z- x# y
83.   // DEBUG - log the result
    4 z8 s  U% s& G( A* M
84.   //
    
85.   var t = new Template("Status #{status} returned from newsfeed request.");
    
86.   var success = "Feed Request Success: "+t.evaluate(transport);
    1 B  @4 p6 X; l: b$ O5 C# z
87.   Mojo.Log.info(success);
    
88.   // Work around when XML comes back in text response
    % ]0 c, ^- E, @& e1 O% G
89.   if (transport.responseXML === null && transport.responseText !== null) {
    
90.     Mojo.Log.info("&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;","Request not in XML format - manually converting");
    
91.     transport.responseXML = new DOMParser().parseFromString (transport.responseText, 'text/xml');
    . Y- F. X& E+ |- K* i* ?: w6 g
92.   }
    
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
    8 V* B  v, R2 t+ J
96.   //
    
97.   feedList.push({title:this.nameModel.value, url:this.urlModel.value, type:"", acFreq:0, numUnRead:0, stories:[]});
    7 n+ S; _! j5 {1 i0 {* I
98.   feedError = ProcessFeed(transport);
    $ L/ {, }3 I! R3 h: J# l. E
99.   // If successful processFeed returns errorNone
    ( l" [2 a8 }  x  h6 ~- D/ j0 g" H
100.   //
     " a/ {8 F) l9 ^/ L+ u
101.   if (feedError === errorNone) {
     
102.     this.sceneAssistant.feedWgtModel.items = feedList;
     
103.     this.sceneAssistant.controller.modelChanged(this.sceneAssistant.feedWgtModel);
     
104.     this.widget.mojo.close();
     
105.   }
     
106.   else {
     3 `6 w% K$ l! X6 ^
107.     feedList.pop();
     
108.     if (feedError == errorUnsupportedFeedType) {
     " g2 K7 s! {; t) E) K$ t( v( ?5 P
109.       Mojo.Log.info("Feed ", this.urlModel.value," isn't a recognized feed type (#", errorUnsupportedFeedType, ")");
     " P- ^8 U# D1 Z$ C5 @, I
110.       $("add-feed-title").innerHTML ="Invalid Feed - not a supported feed type";
     ) i/ _9 a5 Z1 C6 s
111.     }
     1 M$ Z# a# B2 m) n& M3 F) q; ]
112.   }
     
113. };
     
114. AddDialogAssistant.prototype.checkFailure = function(transport) {
     $ w1 Z. ]9 {' G) l/ a) P4 z0 c
115.   // Use the Prototype template object to generate a string from the return
     6 M7 `  [4 g7 v  L1 a) @
116.   //
     
117.   var t = new Template($L("#{status}"));
     
118.   var m = t.evaluate(transport);
     
119.   // Log error and put message in status
     
120.   //
     0 \4 @( }5 |* O+ @& ?
121.   Mojo.Log.info("Invalid feed (Status ", m, " returned).");
     , w# u3 l9 N; O( L  X$ P4 R. N
122.   $("add-feed-title").innerHTML = "Invalid feed - http failure ("+m+")";
     
123. };

复制代码

0 q& L9 k3 Q2 L5 @9 P
2 j/ G! |7 b; H1 V6 o1 `( Y" F" pThis example is from the book  Palm webOS by Mitch Allen.

寂夜清风

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

horran3

非常感谢。

horran3

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