Work with Application Resources

You can import and export the resource files that are used in pages in your application.

About Application Resources

By default, each web and mobile application contains a resources folder for the components, images, translation files and other resources that can be used in the application. A flow artifact can also contain a resources folder for images and translation bundles used by pages in the flow. A page artifact can contain a resources folder for translation bundles.

To add resources, you can use the import tool in the Navigator and Source View to add folders and files to your application, for example, to add files and resources from other applications. Resources are typically files that you import to support or add functionality to pages in your application. For example, if you want to use an image in a page, you can import the image as a resource into an images folder and then use an image component in a page that references the image location.

Each of your web and mobile applications has one or more resources folder containing the application’s resources. By default, the application artifact contains a resources folder containing folders for the following types of resources.

Folder Description
components

This folder contains your application’s Composite Components. Composite Components that you import in the Page Designer are saved to this folder. You can also click Create Composite Component in the Navigator to create a custom Composite Component.

css

This folder contains the app.css stylesheet that is linked from pages in your application. The stylesheet is empty by default. You can edit the stylesheet to add custom styling to page elements. app.css is not used to control the styling of Oracle JET components.

images

This folder is the default location for any custom images that you might want to add to your application. This folder is empty by default. Images in the application’s resources directory can be used in any page in the application. See Work with the Image Gallery.

Flow artifacts can also contain an images folder that stores images that can be used in pages in the flow. When you add an image to a page, it is stored in the images folder in the resources folder of the flow that contains the page.

strings

This folder is the default location for your translation bundles. See About Translation Resources.

Flow and page artifacts can also contain a strings folder that stores translation bundles.

Import Resources

By default your application contains folders for components, stylesheets, images and translation files. To add resources, you use the Import command to add files to your application, for example, to add files and resources from other applications.

You can import resources by uploading individual files and ZIP archives using the Import command available when you right-click an artifact or a resources folder in the Navigator, or by dragging the files directly from your local file system onto a folder in the Navigator. You can create new sub-folders by modifying the path in the Import Resources dialog box.

You can import resources into the application’s resources folder and sub-folders, or any other artifact in the Navigator. The location you select will determine the scope of the resources you import. When you import the resource, you should confirm the Import location . For example, you can import an image into the flows folder, but the expected location for an image is in an images folder in one of your application’s resources folders. Images that are not in an images folder will not appear in the Image Gallery.

To import resources into a new application:

  1. Open your web or mobile application in the Navigator and locate the folder or artifact where you want to import the resource.
  2. Right-click the folder or artifact and choose Import in the popup menu.

    Description of artifact-browser-import-resource.png follows
    Description of the illustration artifact-browser-import-resource.png

    Alternatively, drag a file from your local file system onto the folder or artifact in the Navigator to open the Import Resources dialog box.

  3. In the Import Resources dialog box, choose the file or archive with the resources you want to import. You can drag the resource into the drop target area or click the drop target area to navigate to the resource on your local system.

    Optionally, you can edit the path in the Import location field to create new folders.


    Description of artifact-browser-import-resource-dialog.png follows
    Description of the illustration artifact-browser-import-resource-dialog.png
  4. Click Import.

Export Resources

You might want to export an application’s resources when you want to import them into another application or share them with a team member.

You can download an application’s resources by exporting the application as an archive.

To export an application’s resources:

  1. Open your web or mobile application and choose Export in the application’s Options menu in the toolbar.

    Description of toolbar-settings-menu.png follows
    Description of the illustration toolbar-settings-menu.png

    Alternatively, on the Oracle Visual Builder home page, locate the application and choose Export in the application’s Options menu.

  2. Click one of the export options to download the archive.

    You can choose if you want the application archive to include the data stored in the application’s custom business objects.


    Description of export-application-dialog1.png follows
    Description of the illustration export-application-dialog1.png
The application archive includes the application’s resources.

Work with the Image Gallery

You use the Image Gallery to import image resources into your application and when selecting the image resource referenced by an image component. You open the Image Gallery from the Data tab in the Property Inspector when an image component is selected on the canvas.

Images in your application are stored in an images folder located in one of the resources folders in your application. A folder for resources in your application is created by default when the application is created. Images in the application’s resources folder can be used in any page of your application. In addition to the application’s default resources folder, each flow in the application might have a resources folder for resources used in pages in the flow.

You can use the Image Gallery to view and manage the images in your application. The Image Gallery only displays the images that are stored in the images folders of the application and the current flow. Images stored in other locations are not visible in the Image Gallery.

You can use the Image Gallery to perform the following tasks:

  • Import images. You can choose to add images as resources of the current flow or the application.

  • Select an image displayed by an image component. You can select images stored in the application’s or the current flow’s images folder. When you select the image, the path to the image (for example, {{ $flow.path + 'resources/images/myimage.png' }}) is entered in the component’s Source URL field in the Property Inspector.

To import images into the Image Gallery:

  1. Open a page in the Page Designer and select an image component on the canvas.

    You can select any image component on the canvas. Alternatively, you can temporarily drag an image component onto the canvas.

  2. Open the Data tab in the Property Inspector and click the Image Gallery icon ( Image Gallery icon ).

    When an Image component is selected on the canvas, the Data tab in the Property Inspector displays a Source URL field for the path to the stored image. The field is empty when no image has been defined.


    Description of page-designer-inspector-newimage.png follows
    Description of the illustration page-designer-inspector-newimage.png

    You need to open the Image Gallery to add images to the application’s images folder. If you drag an image into the drop target area in the Data tab, the image is added to the flow in the Image Gallery and the path to the image is automatically entered in the Source URL field, but the Image Gallery dialog box does not open.

  3. Select Application in the Images panel of the Image Gallery.

    Alternatively, you can select Flow in the Image Gallery to import images into the flow’s images folder. The folder will be created automatically if it does not exist.


    Description of page-designer-imagegallery.png follows
    Description of the illustration page-designer-imagegallery.png

    The Images panel of the Image Gallery displays a list of the images that can be used in pages in the application and in the current flow. You can select an image in the Images panel to preview the image. If you select an image in the Images panel and click Select, the path to the image will be entered in the Source URL for the image component in the Data tab.

  4. Drag your image into the drop target area in the Image Gallery.

    Alternatively, you can click the drop target area to select an image using your local system’s file browser. You can import as many images as you want, but you need to add them individually. You can choose if you want to import an image into the Application or Flow resource folders by selecting the folder in the Images panel.

  5. Click Close to close the Image Gallery without selecting an image for the image component.