Component with Live Preview

There seems to be very little information on developing a
custom component with live preview.
So far i've created a swf whose application class extends
UIComponent.
I've also created a custom component.
Then I've added the Live Preview field in the custom
component's Component Definition.
What I would like to do now is reposition elements within the
preview swf when the user resizes the component.
To do this i need to know two things - 1 what event to listen
for when the user resizes the component, and 2 the current
dimensions of the resized component.
1. My only success was that ComponentEvent.SHOW seems to
dispatch when the user resizes the component. (i had no luck with
any of the RESIZE events - Event.RESIZE etc)
2. However the width/height properties don't seem to change
on resize, they stay at the original dimensions of the component.
Any ideas?

Hey Craig :)
now I'm not certain about this under 3, but when developing
with under 2 with a live preview one needs to include a 'magical'
MC named 'xch' (instance name as well) that basically contains
'nothing' - it's a empty mc on the preview files timeline. there
are 'other' things as well however, in the live preview file one
must create a method named 'onUpdate' and assign a property of the
xch named 'instance' to 'this' (ref the timeline of the preview
file... previous to the method declaration) then within the
onUpdate method 'all' properties of the component and statements
within the method refer to xch.prop = blah blah, xch.otherprop =
blah blah
it's quite complicated and doesn't really make a lot of
sense, but that seems to be the way in which the working file
relates to the live preview file - ie. 'through' the xch clip which
triggers the onUpdate method
from what i remember, it's this mc that 'helps' the resize
event 'make' the connection between the event and the preview file,
seems to me that there was something else involved as well but i
cant seem to remember atm - I found this information in an article
on building components, however the page is no longer valid and i
couldn't track it down for you (it was a good tut too) sorry wish i
had more info for you.

Similar Messages

Basic PHP Support with Live Preview

I use PHP includes when coding so I only have to code my navigation once, and then I can include it on other pages. Is their anyway to get this to work with Adobe Edge Code so I don't have to switch back to using .html files?
If not, I guess I could transition back, although, I really would rather not.
Thanks,
David Faircloth

The website root in this case is http://localhost:8888/ajax_login/ I even cut and pasted the value from my Dreamweaver Site Setup for this project (which works fine):
Also I tried it your way and it still didn't work.

Component Live Preview problem

Hi every one,
I have a problem with my component live preview. When i drag
and drop a component in the stage the first time and resize it by
the component panel inspector, the live preview is not updated in
the IDE. But soon as i put an another instance of the same
component in to the IDE, the other one get updated. I dont know if
somebody have ever had the same problem?
thx for your response

Yes, here is documentation for LivePreviewParent:
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/fl/livepreview/LivePrev iewParent.html?filter_flash=cs5&filter_flashplayer=10.1&filter_air=2

I keep getting an internal server error when I try to load pages in live preview in edge code...

I keep getting this message every time I try to laod a page using live preview in Edge Code with Google chrome...
"The server encountered an internal error or misconfiguration and was unable to complete your request. Please contact the server administrator, [email protected] and inform them of the time the error occurred, and anything you might have done that may have caused the error. More information about this error may be available in the server error log."
I'm using google chrome Version 33.0.1750.152. I'm running mac osx 10.9.2. I've installed Apache.
in the project settings I have this url... http://127.0.0.1/~spencer/butterville_website/
I had this working flawlessly with an earlier version of a website I was working on. I haven't changed any settings, the only thing that has changed is that I'm working with a new sub folder in the root directory. Every time I try to load the page, I get that error message. I can't figure out what I'm doing wrong. Please help! Thanks.

This query seems to be related to Edge Code. you can get help from this forum.
Also EdgeCode doesn't have troubleshooting page but you can get help from Brackets trouble shooting page.

How do I properly set up Live Previewing (Brackets)

I just recently came across Bracket and I am super excited about it and can't wait to dive in. My problem right out the gate is I can't for the life me configure the Live Previewing to work properly. That is why I am here. I have read
Here is what I have done with my limited knowledge concerning setting up local hosting. ( I have always used Dreamweaver and never had to do this before)
I downloaded MAMP to create a localhost, I moved my website folder and files into the MAMP htdocs folder and labeled it AWD. If I type in local host in my browser it pulls up INDEX of/ AWD/ (folder), if I click on the folder it downloads a blank file, and that is it.
I have tried:
file:///C:/MAMP/htdocs/AWD/ - File not supported needs to be http:// (if I type this into my browser the site shows)
http://C:/MAMP/htdocs/AWD/ - This website is not available
http://localhost/MAMP/htdocs/AWD/ - Not Found
I found this on this Forum but can't make sense of the information.
I look forward to any and all help! Thank you for your time!

Hey Ryan,
First off, thank you for your help, I appreciate it. To answer your question no both http://localhost:8080/AWD/ and http://localhost:8888/AWD/ do not work. If I type just localhost in my Chrome Browser it takes me to an INDEX of / page and has one directory listed AWD. When I click on the AWD it proceeds to download a blank file.
One of the only things that has worked was typing file:///C:/MAMP/htdocs/AWD/ in my browser, which isn't supported in Brackets. I can type that in and it takes me to the overall AWD Directory and I can see all of my files. If I click on one of my PHP files it will show the page.

How do I live preview a Ruby on Rails/Ember application?

I have a Ruby on Rails application and I am under the impression that Edge Code will work with locally hosted web servers to use live preview. I have set up the project settings to use the locally hosted address: http://localhost:3000/ ... However when I use Live Preview I receive the following error.
"Open an HTML file or make sure there is an index.html file in your project in order to launch live preview."
I have done so and I meet the criteria but it doesn't seem to work. Does Adobe Edge Code support this feature?

What's the file extension of the page you want to view in Live Preview? You may need to add it to the internal (not yet easily configurable) list of file extensions.
Randy

Live Preview Highlight is not working.

I recently downloaded Edge Code to a new work computer and the Live Preview Highlight is not working.
I have Edge Code installed on a personal computer, and it works great. The version I am using was downloaded about 6 months ago so I am not sure if they changed something with the most recent version. When I highlight a section within the html i.e. a table or row, it would highlight those same sections in the preview. However, this is not the case on my new computer.
Anybody know whats up? Is it setting on Chrome that I need to change or is there some update that I am not aware of.

I guess I assumed that you had Chrome setup to auto-update (like I have it). The only way Live Preview will work in a previous version of Edge Code is with an older version of Chrome.
But there are other reason why Live Preview may not work in latest version of Edge Code. Take a look at Live Preview section of Troubleshooting Guide.
Randy

Live Preview - failed to load resource error

Peter-
I was having problems with the Live preview and tried your debugging method.
I received the following in Chrome:
Failed to load resource: http://127.0.0.1:9222/json
Is there a security setting I need to change?
Thanks!
Josh

Josh -- What OS are you on?
Thanks!
- Peter

PHP Live Preview

I have my project folder set up correctly with the link to my localhost and everyting. When I click the live preview link, it does bring up the correct page.
However, it does not stay linked. I then have to either click the preview button again and open the page in another tab, or refresh the currently open one.
Is that as far as the php support goes, or will it support a constant preview link in the future, as well as the css highlighting in the browser window?
I really like being able to see where all my changes are gonna happen when I edit a css rule, but would not want convert all my php files (I am only using include tags) to html while I am doing this site overhaul.
*side note* I am taking an existing site and adding in responsive capability, which is why the live preview and css rule highlighting is so useful, if I was just making minor changes, it would not be such a big deal, but with a project like this it is really adding extra time in the long run.

It is not colored in at all.
I will click the lightningbolt and it will open the page, but the bolt goes back to being completly gray.
On HTML pages it will stay colored in fully, but not for my php files.
Also, quite frequently, if I leave the php file and switch over to say a css file, when I return (even tho it is not connected via live preview) it will close the browser tab completly. and I will have to reopen it.

Typekit embedded fonts not showing in Live Preview?

Not Edge Web fonts, but is Typekit supported yet?

Thanks for your reply.
I have this in the header:
<script src="http://use.typekit.net/xxxxxxx.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
The site loads locally and remotely with fonts showing correctly from Typekit...just not in Edge Code live preview. (xxxxxxx is for placement)

How can I get typekit fonts to display in edge code live preview?

I'm wondering how I can get typekit fonts to display when using adobe code cc live preview? I'm aware that it's an issue with my local base url, but I'm confused as to how to fix the issue.
Right now my site is stored locally in a folder on my desktop. I'm not sure what to put in the typekit settings under "domain" and what URL to put in the project settings in edge code.
A little help please?

Hello,
I'm sorry that you ran into trouble with this. In order for the Typekit fonts to load, you need to add the IP address that you are using for Live Preview to the domain listing on the kit.
By default, Edge Code uses the IP address "http://127.0.0.1/"; you should see that listed in the web browser when previewing your site. If you've changed the preview URL in Edge Code, it might be something like butterville.local instead.
In either case, copy the URL where you are previewing the site, and add it to your domains: go to http://typekit.com and launch your Kit Editor. Click Kit Settings in the upper right corner and add your domain to the domains field, then save your settings.
Make sure you republish your kit after saving the changes.
I hope that this helps! If you still have trouble with the font loading, please send me the preview URL you are using along with your Typekit kit ID. You may post those here or email us at [email protected]
Best,
-- liz

Problem with Live Trace?

Hi,
I'm having some trouble with Live Trace which I've never encountered before. It could just be my inexperience with Ilustrator, but every time I click Live Trace, the image turns all black. I've tried different presets, and this doesn't change anything. The image I've imported is a Photoshop file so it should work, and has worked before.
Anybody had this before? Any suggestions?
Kind Regards,
Jack

I'm working through a Classroom in a book in CS4 Illustrator, so the image shouldn't be a problem as its specific for that exercise. The image is a PSD of a snowboarder so unable to upload to the thread.
Tracing Options: Preset: Default, Mode: Black & White, Threshold: 128, Trace Settings: Fills (though Strokes and Fills or just stokes on preview mode still keep the image black). View: Raster: No Image, Vector: Tracing Result, Path Fitting: 2px, Blur: 0px, Resample: 200px, Corner Angle 20, Minimum Area: 10px.
Jack

{text-rendering : optimizeLegibility} turns off google webfont in DW CS6 live preview (suddenly)

I'm currently working on two websites for the UN, based on Wordpress, child themes based on twentytwelve and twentythirteen.
I started to work a certain time ago on the child theme for 2012 which uses "Open Sans" fonts.
I don't remember having any problem with this site: everything was working ok, I made a few changes but nothing important.
I turned to the nd website based on 2013-theme, it works perfectly and DW CS6 is a real time saver for creating a child-theme, nonetheless...
This morning I turned back to the 2012-based wordpress site: every text was simply not displayed anymore... only in live preview in DW...
Even with the parent theme, the text was siply not displayed (so don't suggest my css code is bugged or what...)
After a while, I figured out it was not really a problem regarding the font itself, but with the CSS property "text-rendering" with value set "optimizeLegibility".
Commenting out this declaration solved the problem. Nonetheless...
1 month ago there was no problem. Then suddenly...
Is there a problem with the live preview mode and this CSS property? (indeed there is a problem)
Can we have a fix for this? I mean, an update for DW CS6 (not for DW CC) ?
TIA

Hello Nancy!
Normally, according to https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering Gecko could take it in charge too, but seems to override this setting (a thing I can understand, Gecko is using a fast rendering engine). So you're right: at this time, it can impact only webkit/chromium engines. Which, as far as I know is the underlying engine(s) behind "Live Preview". And it does impact readibility in DW CC (it improves it).
Personnally I'ls better stick to the real CSS properties for kerning, alternative uppercases and ligatures, BUT the wordpress team seemed to think it was a good idea to use it (along with many other strange ideas such as using rem unit for the layout).
The real thing here is: some weeks ago, when I started to tune the 2012-based theme I use for this site, I'm pretty sure I was able to read the text in Live Preview in DW CS6. I wouldn't have chosen to use this theme with such an annoyance, else. So basically, it's really strange that suddenly this property has such an impact on the "live preview" mode of DW CS6. What I would really appreciate here is a small update/bugfix to DW CS6: I don't need this property to be taken in charge in DW CS6 as it is done in DW CC, I'ld just want this property not to impact the live preview.
Last : I mentionned an update of DWCC being possibly a culprit for this. How relevant could be this statement ? Are "live preview" modes shared by DW CC and DW CS6 ? (Even if, of course, this "bug" is not happening with DWCC).
PS: Thanks a lot Nancy to pay attention to my posts as I often yell a lot here.

Live preview is not launching the browser as set userAgent

I have set my chrome userAgent as ipad and if I close my chrome and re-opens it keep it as ipad but when I hit the live preview it is not setting as ipad because of that I am not able to see the page for ipad/mobile format. Since tools are hidden I can't switch the userAgent on chrome Live preview launch.

I'm not sure if Live Preview will work with a userAgent of iPad, but Edge Code CC uses a custom profile, so you'll need to also change any setting there. Try starting Live Preview, changing the settings, closing that instance of Chrome, and restarting Live Preview.
Also, you can get to Chrome Developer Tools using localhost:9235.
HTH,
Randy

Is it possible to change live previews for video in Finder?

I've just recently finished converting all my backed up movies to .m4v so that they would all show live previews in Finder (.avi's weren't working with that feature), however many of them are just black screens taken before the opening credits rather than anything from the movie itself. Is there any way to change what frame the live preview shows?

Not sure what you mean by "live previews." The icon preview that the Finder displays instead of the generic filetype icon?
In that case, you didn't need to convert your .avi movies to .m4v. Just install Perian (http://perian.org) and you'll be fine.
Finder will only display one of the first frames of the movie as its file preview picture. No way of changing it per se.
<Edited by Moderator>

Component with Live Preview

Similar Messages

Maybe you are looking for