1 Reply Latest reply on Jun 24, 2007 5:42 PM by savyasachi

    Customizing FlexStore - Ran into an issue

    savyasachi Level 1
      Trying to add a login page to the flexstore sample. Deleted flexstore.mxml and created a new main.mxml (see the code below) as the default app.
      Moved the viewstack in the flexstore.mxml to an 'Explore' state in main.mxml and added a link button to change the state to 'Explore'.
      All is working good except, not seeing the thumbnails in the productview. I know that thumbnails are there, as I see them when blindly selecting and dragging
      an item or blindly clicking a thumbnail even though I don't see them. I see the thumbnail contents when I drag and in the details view. Appreciate any help with this issue.
      ----------------------
      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml"
      layout="absolute"
      backgroundGradientColors="[#c9c994, #616130]"
      creationComplete="initApp()"
      xmlns="*">
      <mx:Script>
      <![CDATA[
      import mx.controls.Alert;
      import flash.events.MouseEvent;
      import mx.collections.IViewCursor;
      import mx.collections.ArrayCollection;
      import samples.flexstore.Product;
      import mx.rpc.events.ResultEvent;

      [Bindable]
      private var catalog:ArrayCollection;

      private function initApp():void
      {
      productService.send();
      }

      private function productServiceResultHandler(event:ResultEvent):void
      {
      //HTTPService returns an ArrayCollection for nested arrays
      var products:ArrayCollection = event.result.catalog.product;
      var temp:ArrayCollection = new ArrayCollection();
      var cursor:IViewCursor = products.createCursor();
      while (!cursor.afterLast)
      {
      var product:Product = new Product();
      product.fill(cursor.current);
      temp.addItem(product);
      cursor.moveNext();
      }
      catalog = temp;
      }

      public function processUserLogin():void {
      Alert.show("Userid = " + username_field.text + " Password = " + password_field.text);
      //showAlert(event);
      }

      public function clearLoginFields():void {
      username_field.text = "";
      password_field.text = "";
      }

      public function switchToRegister():void {
      currentState='Registration State';
      }

      public function switchToHome():void {
      currentState='';
      }

      ]]></mx:Script>

      <mx:Style source="main.css"/>
      <mx:Style source="beige.css"/>

      <mx:HTTPService id="productService" url="../data/catalog.xml"
      result="productServiceResultHandler(event)"/>

      <mx:states>
      <mx:State name="Registration">
      <mx:SetProperty target="{loginPanel}" name="visible" value="false"/>
      <mx:SetProperty target="{canvas1}" name="height" value="1000"/>
      <mx:SetProperty target="{bannerPanel}" name="x" value="10"/>
      <mx:SetProperty target="{bannerPanel}" name="width" value="800"/>
      <mx:SetProperty target="{image2}" name="width" value="780"/>
      <mx:SetProperty target="{promotionPanel}" name="visible" value="false"/>
      <mx:SetProperty target="{referMemberPanel}" name="visible" value="false"/>
      <mx:AddChild relativeTo="{canvas1}" position="lastChild">
      <mx:Panel x="10" y="167" width="800" height="800" layout="absolute">
      <mx:Button x="707" y="128" label="Cancel" click="switchToHome()"/>
      </mx:Panel>
      </mx:AddChild>
      </mx:State>
      <mx:State name="Loggedin State"/>
      <mx:State name="Explore">
      <mx:RemoveChild target="{loginPanel}"/>
      <mx:RemoveChild target="{referMemberPanel}"/>
      <mx:RemoveChild target="{bannerPanel}"/>
      <mx:RemoveChild target="{promotionPanel}"/>
      <mx:AddChild relativeTo="{canvas1}" position="lastChild">
      <mx:Canvas x="10" y="10" width="100%" height="60">
      <mx:ApplicationControlBar x="0" y="0" height="50" width="100%" styleName="storeControlBar">
      <mx:Image x="0" y="0">
      <mx:source>@Embed('/assets/Logo.png')</mx:source>
      </mx:Image>
      <mx:ToggleButtonBar height="32" dataProvider="{storeVws}" styleName="storeButtonBar"/>
      </mx:ApplicationControlBar>
      </mx:Canvas>
      </mx:AddChild>
      <mx:AddChild relativeTo="{canvas1}" position="lastChild">
      <mx:ViewStack id="storeVws" y="70" width="990" height="661" creationPolicy="all" x="10">
      <HomeView id="homeView" label="Home" showEffect="WipeDown" hideEffect="WipeUp"/>
      <ProductsView id="productView" label="Products" catalog="{catalog}" showEffect="WipeDown" hideEffect="WipeUp" height="800"/>
      <SupportView id="supportView" label="Support" showEffect="WipeDown" hideEffect="WipeUp" height="351"/>
      </mx:ViewStack>
      </mx:AddChild>
      <mx:SetProperty target="{canvas1}" name="width" value="1000"/>
      </mx:State>
      </mx:states>

      <mx:Canvas x="0" y="0" id="canvas1">
      <mx:Panel width="212" height="242" horizontalAlign="center" verticalAlign="middle" x="11" y="10" title="Existing User Login" cornerRadius="0" horizontalScrollPolicy="off" verticalScrollPolicy="off" layout="absolute" id="loginPanel">
      <mx:Image x="0" y="0" width="192" height="126" visible="true"/>
      <mx:Button x="53" y="66" label="Submit" click="processUserLogin()"/>
      <mx:Button x="127" y="66" label="Clear" enabled="true" click="clearLoginFields()"/>
      <mx:Label x="11" y="11" text="User Name" width="66"/>
      <mx:Label x="11" y="37" text="Password" width="66"/>
      <mx:TextInput x="85" y="9" width="98" id="username_field"/>
      <mx:TextInput x="85" y="35" width="98" displayAsPassword="true" id="password_field"/>
      <mx:ControlBar height="100%" y="126" width="212">
      <mx:VBox height="90">
      <mx:LinkButton label="Forgot your userid/password?" height="27" width="100%" textAlign="left"/>
      <mx:LinkButton label="New user Register here" height="25" width="100%" textAlign="left" click="currentState='Registration'"/>
      <mx:LinkButton label="Explore our Products &amp; Services" height="25" width="191" textAlign="left" click="currentState='Explore'"/>
      </mx:VBox>
      </mx:ControlBar>
      </mx:Panel>
      <mx:Panel x="231" y="10" width="614" height="149" layout="absolute" cornerRadius="0" id="bannerPanel">
      <mx:title>Welcome to .... One stop shopping for your ... needs</mx:title>
      <mx:Image x="0" y="0" height="109" width="594" id="image2">
      <mx:source>@Embed('/assets/Banner.png')</mx:source>
      </mx:Image>
      </mx:Panel>
      <mx:Panel x="231" y="167" width="614" height="325" layout="absolute" cornerRadius="0" id="promotionPanel">
      <mx:Image x="0" y="0" width="594" height="285">
      <mx:source>@Embed('/assets/Mainpage-Ad.png')</mx:source>
      </mx:Image>
      </mx:Panel>
      <mx:Panel x="10" y="260" width="212" height="232" layout="absolute" cornerRadius="0" id="referMemberPanel">
      <mx:TextArea x="0" y="0" width="192" height="53" borderThickness="0">
      <mx:text>Refer a friend and receive 10% discount when your friend makes a purchase $100</mx:text>
      </mx:TextArea>
      <mx:Image x="0" y="52" width="192" height="140" scaleContent="true">
      </mx:Image>
      </mx:Panel>
      </mx:Canvas>

      </mx:Application>
      ----------------------