Custome ItemRenderer - Vertical Center for label

Similar Questions

• Center (bb10) vertically on the label text

  Hi guys!

  Is there a way to vertically Center the text on the label?

  Suppose you have a label with heithg = 200 and I want to Center vertically.

  Is this possible?

  I think that there is no such thing as a valign, or almost, but if you set the height of the label on the actual height of the text you can then focus on it vertically by applying equal and the margin down (if you use layoutData) or something like

  myLabel.y = (availableHeight - myLabel.height) / 2...

  Note that you can not get the height of the text until the label is rendered or less placed in the display list (otherwise, it returns 0)

  myLabel.validateNow();
  myLabel.height = myLabel.textHeight;
  

  My app: Get set - get up!   Get ready for the revolution snooze.

• Cannot focus on the custom itemRenderer?

  I made a custom itemRenderer double as an itemEditor following the instructions in the documentation.
  However, even if I put the rendererIsEditor = "true", when tabbing between other editable fields, controls within the itemRenderer do not receive focus. I can't help thinking it of a control/bug, but is it possible to submeter the itemRenderer to focus properly? At the moment my component is simply a box inside an HBox.
  
  Anyway, here is my code so that you can see for yourself (I have included a checkbox as itemRenderer so that you can see the * desired * effect.)
  
  <? XML version = "1.0" encoding = "utf-8"? >
  < mx:Application
  ' xmlns:MX =' http://www.adobe.com/2006/mxml ' layout = "vertical" >
  < mx:Script >
  <! [CDATA]
  Import mx.controls.dataGridClasses.DataGridListData;
  Import mx.controls.Alert;
  [Bindable]
  public var dp:Array = [{num:2, bool:true}, {num:3, bool:false}];
  []] >
  < / mx:Script >
  < mx:DataGrid id = "test" editable = "true" dataProvider = "{dp}" >
  < mx:columns >
  
  < mx:DataGridColumn dataField = "num" headerText = "num" / >
  < mx:DataGridColumn dataField = "bool".
  headerText = "sent".
  itemRenderer = "mx.controls.CheckBox"
  rendererIsEditor = "true" editorDataField = "selected" / >
  
  < mx:DataGridColumn dataField = "num" headerText = "num" editable = "true" / >
  < mx:DataGridColumn dataField = "bool" headerText = "Sent" rendererIsEditor = "true" editorDataField = "blorch" >
  < mx:itemRenderer >
  < mx:Component >
  < mx:HBox horizontalAlign = "center" >
  < mx:Boolean id = "blorch" / >
  "< mx:CheckBox id = 'check' selected =" {data.bool} "change =" blorch = check.selected "/ >
  < / mx:HBox >
  < / mx:Component >
  < / mx:itemRenderer >
  < / mx:DataGridColumn >
  < mx:DataGridColumn dataField = "num" headerText = "num" editable = "true" / >
  < / mx:columns >
  < / mx:DataGrid >
  < / mx:Application >
  

  Too bad... I found the answer to a few pages later in the docs...
  You must implement the IFocusManagerComponent interface and then substitute drawFocus as below to set the focus to the checkbox... hope it works for multiple controls.

  
  
  override public function drawFocus(focused:Boolean):void {}
  check.setFocus ();
  }
  ]]>
  
  
  
  

• Flex datagrid custom itemRenderer - column manufacturing is NOT MODIFIABLE

  Hi all

  I'm new to flex and trying to create custom editors and converters for datagrid. I came across this problem trying to fix another (http://forums.adobe.com/post! reply.jspa? message = 3569216)

  The problem is:

  I have a custom editor and a renderer for a column of text. The entire grid is editable (i.e., editable = true). But by clicking the cell does not show me the editor. However, if I change the rendering to mx.controls.label engine, clicking on it takes me to my custom editor.

  Can someone please tell what I am doing wrong? I paste the corresponding code for more details.

  DATAGRID: Replacement itemRenderer = "converters. TextRenderer' with itemRenderer = "mx.controls.Label" makes the editable column

  < mx:DataGrid id = "dg" editable = "true" rowHeight = "100" width = "861" x = "10" y = "10" height = "498" dataProvider = "{this.slideArray}" >

  < mx:columns >

  < mx:DataGridColumn headerText = "Text" width = "100".

  Resizable = "true" sortable = "false".

  itemRenderer = "converters. TextRenderer.

  itemEditor = "publishers. TextEditor.

  dataField = "text" editorDataField = "myData" / >

  < / mx:columns >

  < / mx:DataGrid >

  TEXT EDITOR

  <? XML version = "1.0" encoding = "utf-8"? >

  " < = xmlns:fx s:MXDataGridItemRenderer ' http://ns.Adobe.com/MXML/2009 "

  xmlns:s = "library://ns.adobe.com/flex/spark".

  xmlns:MX = "library://ns.adobe.com/flex/mx".

  focusEnabled = 'true '.

  Initialize = "initEditor ()" >

  < mx:TextInput id = "├editer" width = "{this.width}" height = "{this.height}" / > "

  < fx:Script >

  <! [CDATA]

  field of import. Slide;  contains a property: public var text: String

  override public function set data(value:Object):void {}

  Super.Data = value;

  This.Edit.Text = (value as Slide) .text;

  }

  public var myData: String; data field of the editor

  Import mx.binding.utils.BindingUtils;

  private function initEditor (): void {}

  BindingUtils.bindProperty (Thi, "myData", this.edit, "text");

  }

  []] >

  < / fx:Script >

  < / s:MXDataGridItemRenderer >

  TEXT RENDERING ENGINE

  <? XML version = "1.0" encoding = "utf-8"? >

  " < = xmlns:fx s:MXDataGridItemRenderer ' http://ns.Adobe.com/MXML/2009 "

  xmlns:s = "library://ns.adobe.com/flex/spark".

  xmlns:MX = "library://ns.adobe.com/flex/mx".

  focusEnabled = "true" >

  < s:Label id = "txt" horizontalCenter = red '0' = '0' / >

  < fx:Script >

            <! [CDATA]

  field of import. Slide;

  override public function set data(value:Object):void {}

                      Super.data = text;

  this.txt.text = (value as Slide) .text;

                 }

                              

            ]] >

  < / fx:Script >

  < / s:MXDataGridItemRenderer >

  Tips, I've tried and failed:

  1 added the following converter code

  public override function get data (): Object {}

  return super.data;

                 }

  2 remove/change focusEnabled

  3 wrote the same rendering in Actionscript engine - which in fact extend MXDataGridItemRenderer. I had to add the label txt component that helps addElement. By clicking on this shows th Editor, but it does not show the label txt at all... that is to say; I don't get all displayed text.

  I use Flex 4.0 sdk.

  I also noticed that Poser data of the rendering engine not pass data

  object through the base class.  I doubt that it is the cause, but it is

  worth fixing.

  Then after your last code, reduced as much as possible.

• ComboBox with customized ItemRenderer

  It's my combobox when trying to get a custom converter:

  <?xml version="1.0" encoding="utf-8"?>
  <mx:ComboBox xmlns:fx="http://ns.adobe.com/mxml/2009" 
                  xmlns:s="library://ns.adobe.com/flex/spark" 
                  xmlns:mx="library://ns.adobe.com/flex/halo">
       <fx:Script>
            <![CDATA[
            import mx.events.FlexEvent;
            import mx.collections.ArrayCollection;
            import mx.controls.CheckBox;
            public var datas:XML;
            [Bindable]
            var ItemRenderer:ClassFactory;     
            override public function set data(value:Object):void
            {
                 dataProvider = datas["sku" + value.sku];
                 ItemRenderer = new ClassFactory(comboBoxCheckBoxItemRenderer);     
                 itemRenderer = ItemRenderer;
            }               
            public function saveCheckState(evt:Event):void
            {
                 var dataProviderItem:Object = dataProvider.getItemAt(dataProvider.getItemIndex(selectedItem));
                 dataProviderItem.selected = CheckBox(evt.currentTarget).selected;
                 dataProvider.setItemAt(dataProviderItem, dataProvider.getItemIndex(selectedItem));     
            }
            ]]>
       </fx:Script>     
  </mx:ComboBox>
  
   
   
  This combobox is used as a custom itemrenderer in datagrid.
  Here is code for comboBoxCheckBoxItemRenderer:
  package modulecode
  {
       import mx.containers.HBox;
       import mx.controls.CheckBox;
       import mx.controls.Label;
       import mx.controls.Spacer;
   
       public class comboBoxCheckBoxItemRenderer extends HBox
       {
            private var action:Label;
            private var spacer:Spacer;
            private var checkBox:CheckBox;
            public function comboBoxCheckBoxItemRenderer()
            {
                 super();
            }
            override protected function createChildren():void {
                 
                 // Call the createChildren() method of the superclass.
                 super.createChildren();
                 action = new Label();
                 // Add the child component to the custom component.
                 addChild(action);
                 spacer = new Spacer();
                 spacer.percentWidth = 100;
                 // Add the child component to the custom component.
                 addChild(spacer);
                 checkBox = new CheckBox();
                 // Add the child component to the custom component.
                 addChild(checkBox);
            }     
            override public function set data(value:Object):void
            {
                 action.text = value.action;
                 checkBox.selected = value.selected;
            }     
       }
  }
  
  What's happening is that nothing is happening untill I drop combobox down in the grids. As the result checkboxes are not selected properly.
  Any help?
  
  
   
  

  I would try

  selected = "{XML (data) .selected == 'true'} '"

• Ability to vertically Center the slide show?

  Hi people!

  I'll build a static website header and footer for the homepage. I only put a slide show as a homepage. I would like to make it between the footer and header no matter what the user's screen size/resolution.

  Now, what I can achieve is to keep the same distance between the top of the slide show and the lower part of the header, but it is not possible to make it move as the screen resolution or browser window size changes.

  Is there a way to do this in Muse?

  Please do not hesitate to ask me to re explain because I do not know if I'm quite clear on this one...

  Thank you very much!

  There is no way to do it at all. Browsers have a bottom edge to calculate the vertical center.

• How can I text perfectly vertical center with different font sizes

  Hello

  I have a frame:

  http://www.Flickr.com/photos/82397830@n03/7960870684/
  

  I tried a vertical centering by defining block of text Options > vertical Justification > Align: Center, but my text is not always get centered vertically. When I put in English words instead of Hebrew ones Gets the text vertical centered.

  There is a sort of invisible box around characters in a font. The measures of the frame of the lower part of the characters below the baseline (such as p or j) to as high as high as the tops of the Capitol letters for diacritical marks such as umlauts and accents. Given that most of the characters are not completely going toward the highest handle or down to the lowest decender, it may seem that the text is not centered between the two vertical points.

  If you need the text to be centered exactly, you can cheat it by applying the vertical offset, but keep in mind that if you change the text, you may need to adjust the amount of vertical offset again. You can use the vertical offset for the text itself, or change text frame options and change the Baseline Options. Also, in your screenshot, I see you have rounded edges on your block of text. The vertical justification works on rectangular text blocks, it's why that doesn't work.

• Flex 4: activate the scrolling on a list with a custom itemRenderer

  I extend the component Spark list to make it look like a Halo TileList component with a counter on top. The spark list default will add a horizontal scroll bar when the list content is wider than its width. This does not happen when I use a custom itemRenderer. I don't want the always visible horizontal scroll bar. It should be automatic. I tried all day to work around the problem and I have read the documentation and tried to change most of the component properties, but I cannot yet achieve what I wanted. Here is the source code:

  Main application

  <?xml version="1.0" encoding="utf-8"?>
  <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
                    xmlns:s="library://ns.adobe.com/flex/spark" 
                    xmlns:mx="library://ns.adobe.com/flex/mx"
                    minWidth="955" minHeight="600" 
                    backgroundColor="#777777">
       
       <fx:Declarations>
            <fx:XML id="libraryXML" source="/assets/xml/library.xml"/>
       </fx:Declarations>
                 
       <s:List id="library" itemRenderer="CustomItemRenderer" dragEnabled="true" contentBackgroundColor="#777777" selectionColor="0x555555"
                 alternatingItemColors="[0x777777, 0x707070]">
            
            <s:dataProvider>
                 <s:XMLListCollection source="{libraryXML.children()}"/>
            </s:dataProvider>
            
            <s:layout>
                 <s:HorizontalLayout paddingLeft="0" paddingRight="0" clipAndEnableScrolling="true"/>
            </s:layout>
            
       </s:List>
  </s:Application>
  

  Custom ItemRenderer

  <?xml version="1.0" encoding="utf-8"?>
  <s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                      xmlns:mx="library://ns.adobe.com/flex/mx" 
                      xmlns:s="library://ns.adobe.com/flex/spark" >
       
       <s:states> 
            <s:State name="normal"/> 
            <s:State name="hovered"/>
       </s:states>
       
       <s:Group id="itemsRemaining" x="90" y="5" width="20" height="20">
            <s:Ellipse  height="20" width="20">
                 <s:fill>
                      <s:SolidColor color="0x333333"/>
                 </s:fill>
            </s:Ellipse>
            
            <s:Label text="{data.length}" color="0xFFFFFF" verticalCenter="0" horizontalCenter="0" fontSize="11" fontWeight="bold"/>
       </s:Group>
       
       <mx:Image id="image" source="{data.image}" width="116" height="116" horizontalCenter="0" verticalCenter="0"/>
       <s:Label id="itemName" fontSize="14" text="{data.label}" y="95" horizontalCenter="0" color="white"/>
  
  </s:ItemRenderer>
  

  DataProvider XML

  <?xml version="1.0"?>
  <items>
       <item>
            <label>stuff 1</label>
            <image>assets/images/img1.png</image>
            <length>4</length>
       </item>
       <item>
            <label>stuff 2</label>
            <image>assets/images/img2.png</image>
            <length>9</length>
       </item>
       <item>
            <label>stuff 4</label>
            <image>assets/images/img3.png</image>
            <length>7</length>
       </item>
       <item>
            <label>stuff 5</label>
            <image>assets/images/img4.png</image>
            <length>2</length>
       </item>
       <item>
            <label>stuff 3</label>
            <image>assets/images/img5.png</image>
            <length>5</length>
       </item>
       <item>
            <label>stuff 7</label>
            <image>assets/images/img6.png</image>
            <length>8</length>
       </item>
       <item>
            <label>stuff 8</label>
            <image>assets/images/img7.png</image>
            <length>11</length>
       </item>
       <item>
            <label>stuff 9</label>
            <image>assets/images/img8.png</image>
            <length>23</length>
       </item>
       <item>
            <label>stuff 10</label>
            <image>assets/images/img9.png</image>
            <length>4</length>
       </item>
       <item>
            <label>stuff 12</label>
            <image>assets/images/img10.png</image>
            <length>2</length>
       </item>
       <item>
            <label>stuff 11</label>
            <image>assets/images/img11.png</image>
            <length>8</length>
       </item>
  </items>
  

  Here is a screenshot:

  

  Download (84 KB) Project:

  http://www.2shared.com/file/2EpFB3K2/Flex4ListIssue.html

  I think you could fix it in 2 ways

  (1) call "invalidateDisplayList()" on the list to "updateComplete" event.

  (2) which provide the dataProvider by using binding, preInitialize event to provide the dataProvider.

  I think that data comes after the initial layout. While it will create this problem. If this is the reason why this should correct the problem.

• Vertically Center an image in a div

  I tried centering a selection of images in a "main content" div, their formats vary, some will be portraits and of other landscapes so margins and filling do not work.  I have a table of inches who do this using text alignment center and auto margins in my css, and it works very well.  I have centered the photo in a table cell unique to help align Center and vertical align middle in the 'main content' div but when I try this without the table using css (text align auto center and margins or text centering and vertical align middle) it is well centered horizontally, but vertically aligned to the top. Can you tell me why this is and how without table?  If you go to http://tinyurl.com/4g6vnkg you will find a page to view the source, if you then replace the file test.html by css/commercial3.css you also have the style sheet.     Thanks Chris

  Hello Chris,

  Here is a link I have, I have downloaded the page on my server. http://www.patrickjudson.com/example/example.html

  I also reworked the code, there are a few mistakes that I made. The removal of text must have a negative value.

  This method works for IE 6 upwards. Personally I do not make or support IE 5 and below.

  Example: text-indent:-10000px;

  This simple post the text out of sight, the text is there but just out of sight. Now, is there a way to display the text if images are disable or not available on a device, but is a little advanced.

  To answer your question: when you use links, you add a title, a tab index and access key for accessibility, if you wish. The user using assistive devices will get the title of the link. You can add a descriptive title for each link. The same applies if you add images to the div.

  I'm a little confused by your post?

  But whatever rocks your boat is cool also.

  Thereafter.

  mal25 wrote:

  Thank you Patrick who responded to the questionnaire,

  I've been playing with it all day, I was initially interested in the 'main content' div on the right, but I would like to come back later for inches.  If I understand correctly, you are unable to center an image in a div just like this but you can center in the cell of a table as I did in the table of an inch on the left and the big table single-celled simple on the right.  However, you can vertically Center an image only as an IMAGE of background directly in a div, correct?  Is this image & alt text visible to a search engine that the address field is in the brain?  ('visible' in contrast to spry where images stay in the folder)  You can see the change @ http://tinyurl.com/4elwfjb css has not changed, the single cell table has been removed and a style has been added to the head.

  This page has been generated from a model and there will be a lot, the only difference between them is this large image in the div on the right, I don't want to focus each image on each page, so the style would be written in the model but must remain editable. Each image would be responsible for the css palette in the head rather than in the div. of main content as I understand the law of that party, I have a few questions about the stacking of thumb.

  Chris

• Custom ItemRenderer and event Bubbling

  I'm targeting Flex 4 on Air 2, but I don't think it changes the answer to this question.

  I have a spark DropDownList I wrote a custom itemRenderer. In my item renderer, I have a spark.button. I have links to events in the mxml and target functions in the respective classes, and I'm listening for the dropdownlist change event and my itemrenderer.spark.button click event.

  My problem is that I can't get any event in my fire element converter. It of like when I'm clicking the button, it triggers the dropdownlist.change event and destroyed the itemrenderer until it can handle the click event. So I thought that maybe I could solve this problem by adding listeners have rather than use mxml binding but same problem. Finally, I just put a trace in the click event of mxml and nothing. It does not with the item in the list before get rid you of the list.

  So, simply, how to capture events itemRenderer before allowing the DropDownList change event? Or why the click through button and cause control dropdownlist to destroy?

  It looks like uses DropDownList MOUSE_DOWN and no CLICK, which is why he

  close the drop-down list before you get your click.

  I saw a property hitAreaAdditions, you might be able to access the areas of block

  close the drop-down list, but you might want to just meet MOUSE_DOWN

  and stopPropagation on the event.

• Windows Media Center - I'd do lilke SciFi tv shows (programming) downloaded in the "Internet TV & guide" area of Windows Media Center for Windows 7

  How a person is new issues added to the Media Center for Windows 7. I wish that programs of Science Fiction (Scifi) added to the section 'Internet Tv and English' Media Center. Thank you.

  Unfortunately, this is between the owners of content/broadcasters and
  Microsoft. There are changes from time to time about what is available, but we
  as end users, have no say in what is available at any time. You may want to
  at the start of Netflix (there is a free trial version). While doing not part of Media Center.
  You can use a web browser to http://www.syfy.com/rewind/ where some shows are
  available (according to).
   
   
  Barb
   
  MVP - Windows/entertainment and connected home
   
  http://digitalmediaphile.com/
   
  Please mark as answer if that answers your question
   
   
   
   

• you make windows media center for windows Vista Home Basic?

  you make windows media center for windows Vista Home Basic?

  you make windows media center for windows Vista Home Basic?

  isn't fear. Ron

• We have a requirement of click to call in installing 10.5 UCCX with customer website (user input) for our customer

  Hello

  We have a requirement of click to call in installing 10.5 UCCX with customer website (user input) for our client, anyone who tested it in the laboratory/prod settings?

  Thank you!!
  Magali

  Hello magali.

  It is possible to deploy with UCCX HTTP trigger type. To get the number of customer via the HTTP trigger to the script. Then we can place the outgoing number of customer to campaign or appeal directly to the customer and place this call to the QSC.

  There are two scripts for web reminder in Cisco repository of scripts, see this http://www.cisco.com/c/dam/en/us/td/docs/voice_ip_comm/cust_contact/cont...

• How to Center a label in a dockLayout located in a stackLayout?

  Container { layout: DockLayout { } Container { id: cAnzeige Label { id: lblHeader textStyle.fontSize: FontSize.XLarge text: "header" } verticalAlignment: VerticalAlignment.Top layout: StackLayout { } } }
  

  How can I Center a label inside two containers? the first is a dockLayout and the second is a stackLayout?

  horizontalAlignment: P does not work?

  In my case it and check the width of the second container to fill one.

  Container {
                  layout: StackLayout {  }
                  Label {
                      text: "label"
                      horizontalAlignment: HorizontalAlignment.Center
                  }
  
  }
  

• Cannot re - install the multimedia center for think offerings

  Hello! I have Lenovo ThinkPad R61. A few days ago I removed the multimedia center for think offerings. Then, I tried to reinstall multimedia center for think and offers to download the installer of Lenovo site. After installation, I started the program, but the system gave me the following error message: "the certificate file is missing or damaged. How to solve this problem? I can not find the decision...

  Henry85, welcome to the forum,

  If you have a factory installation, you can reload from c:\swtools\apps\MMCfto.

  It should be a setup.cmd file and / or setup.brt, try running those, (one at a time of course). It may seem that nothing is happening for 3-4 minutes, but should work. A member has renamed the .brt .exe file and it worked for them.

  Hope this helps